:root {
	--bg: #101010;
	--panel: rgba(20, 20, 20, 0.78);
	--panel-strong: rgba(28, 28, 28, 0.88);
	--text: #f5ecd6;
	--muted: #b9ac90;
	--line: rgba(255, 212, 120, 0.11);
	--line-strong: rgba(255, 212, 120, 0.18);
	--gold: #e5b85c;
	--gold-soft: #f0d187;
	--danger: #ea726d;
	--ok: #8bcf88;
	--info: #8fb8ff;
	--shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
	--shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.18);
	--radius-lg: 24px;
	--radius-md: 18px;
	--radius-sm: 14px;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	min-height: 100vh;
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--text);
	background:
		radial-gradient(circle at top, rgba(237, 184, 87, 0.14), transparent 35%),
		linear-gradient(180deg, #0f0f0f 0%, #14120f 45%, #0c0c0c 100%);
}

a {
	color: var(--gold-soft);
	text-decoration: none;
}

a:hover {
	opacity: .95;
}

.container {
	width: min(1120px, calc(100% - 32px));
	margin: 0 auto;
}

.mt-16 {
  margin-top: 16px;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	backdrop-filter: blur(14px);
	background: rgba(10, 10, 10, 0.7);
	border-bottom: 1px solid var(--line);
}

.featured-card {
	background:
		radial-gradient(circle at top right, rgba(229, 184, 92, 0.08), transparent 34%),
		var(--panel);
	border-color: rgba(255, 212, 120, 0.16);
}

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
}

#skin_container {
    background: linear-gradient(
        180deg,
        #f2f2f2 0%,
        #ffe27a 40%,
        #ff8a00 75%,
        #ffffff 100%
    );
}

.actions-end {
  align-items: flex-end;
}

.pagination-row {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.pagination-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.info-card {
	padding: 28px;
}

.hero-side {
	padding: 28px;
}

.hero-side-top {
	margin-bottom: 20px;
}

.hero-points {
	display: grid;
	gap: 14px;
	margin-top: 20px;
}

.hero-point {
	padding: 16px 18px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.section-soft {
	padding-top: 0;
}

.footer-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.brand-mark {
	width: 42px;
	height: 42px;
	display: inline-grid;
	place-items: center;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(229, 184, 92, .28), rgba(229, 184, 92, .08));
	border: 1px solid rgba(229, 184, 92, .22);
	box-shadow: 0 0 30px rgba(229, 184, 92, 0.08);
}

.nav-links {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.hero {
	padding: 72px 0 36px;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: 24px;
}

.card {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.card:hover {
	transform: translateY(-2px);
	border-color: var(--line-strong);
	box-shadow: var(--shadow-soft);
}

.hero-main {
	padding: 36px;
}

.kicker {
	display: inline-flex;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(229, 184, 92, 0.10);
	border: 1px solid rgba(229, 184, 92, 0.20);
	color: var(--gold-soft);
	margin-bottom: 18px;
	font-size: 14px;
}

h1,
h2,
h3 {
	margin: 0 0 14px;
}

h1 {
	font-family: Georgia, serif;
	font-size: clamp(34px, 5vw, 62px);
	line-height: 1.02;
}

h2,
h3,
.page-title {
	font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: -0.02em;
}

h2 {
	font-size: 28px;
}

p {
	color: var(--muted);
	line-height: 1.65;
}

.actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 24px;
}

.btn,
button {
	appearance: none;
	border: 0;
	border-radius: 16px;
	padding: 14px 20px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.btn:hover,
button:hover {
	transform: translateY(-1px);
}

.chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	border: 1px solid transparent;
}

.chip-success {
	color: #d9f7d8;
	background: rgba(139, 207, 136, 0.12);
	border-color: rgba(139, 207, 136, 0.22);
}

.chip-warning {
	color: #ffe3a8;
	background: rgba(229, 184, 92, 0.12);
	border-color: rgba(229, 184, 92, 0.22);
}

.chip-danger {
	color: #ffd0ce;
	background: rgba(234, 114, 109, 0.12);
	border-color: rgba(234, 114, 109, 0.22);
}

.chip-neutral {
	color: var(--text);
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.stat-card {
	padding: 18px;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--line);
}

.stat-label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	color: var(--muted);
}

.upload-zone {
	position: relative;
	padding: 22px;
	border-radius: var(--radius-md);
	border: 1px dashed rgba(255, 212, 120, 0.24);
	background: rgba(255, 255, 255, 0.02);
	transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.upload-zone:hover {
	border-color: rgba(255, 212, 120, 0.38);
	background: rgba(255, 255, 255, 0.03);
}

.upload-zone.dragover {
	border-color: var(--gold);
	background: rgba(229, 184, 92, 0.08);
	transform: translateY(-1px);
}

.upload-zone input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.upload-zone-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--text);
	margin-bottom: 6px;
}

.upload-zone-text {
	color: var(--muted);
	line-height: 1.55;
	font-size: 14px;
}

.upload-meta {
	margin-top: 12px;
	font-size: 14px;
	color: var(--muted);
}

.empty-state {
	padding: 18px;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.025);
	border: 1px dashed rgba(255, 255, 255, 0.08);
}

.empty-state-title {
	display: block;
	margin-bottom: 6px;
	color: var(--text);
	font-weight: 700;
}

.empty-state-text {
	color: var(--muted);
	line-height: 1.55;
}

.upload-meta.is-error {
	color: #ffb5b1;
}

.upload-meta.is-success {
	color: #c6ebc5;
}

.stat-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--text);
}

.page-shell {
	padding: 40px 0 56px;
}

.stack-12>*+* {
	margin-top: 12px;
}

.stack-16>*+* {
	margin-top: 16px;
}

.stack-24>*+* {
	margin-top: 24px;
}

.mt-24 {
	margin-top: 24px;
}

.mt-32 {
	margin-top: 32px;
}

.hidden {
	display: none;
}

.page-title-xl {
	font-size: clamp(34px, 4vw, 48px);
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.btn-primary,
button {
	color: #1d170d;
	background: linear-gradient(180deg, #f7d991, #d8a54a);
	box-shadow: 0 10px 28px rgba(216, 165, 74, .22);
}

.btn-secondary {
	color: var(--text);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--line);
}

.btn-danger {
	color: #fff;
	background: linear-gradient(180deg, #d96a63, #af3c36);
}

.stat-list,
.feature-list {
	display: grid;
	gap: 12px;
}

.stat-item,
.feature-item {
	padding: 16px 18px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.section {
	padding: 10px 0 56px;
}

.grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.form-card,
.profile-card {
	padding: 28px;
}

form {
	display: grid;
	gap: 14px;
}

label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 8px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"] {
	width: 100%;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(12, 12, 12, 0.75);
	color: var(--text);
	padding: 14px 16px;
	font-size: 15px;
}

.notice {
	padding: 14px 16px;
	border-radius: 14px;
	margin-bottom: 16px;
	border: 1px solid transparent;
}

.notice-error {
	background: rgba(234, 114, 109, .10);
	border-color: rgba(234, 114, 109, .28);
	color: #ffd3d1;
}

.notice-success {
	background: rgba(139, 207, 136, .10);
	border-color: rgba(139, 207, 136, .28);
	color: #daf6d9;
}

.notice-info {
	background: rgba(229, 184, 92, .10);
	border-color: rgba(229, 184, 92, .20);
	color: #f5dfad;
}

.profile-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.03);
	color: var(--gold-soft);
	font-size: 14px;
}

.meta {
	display: grid;
	gap: 10px;
	margin: 18px 0 22px;
}

.meta-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.meta-row span {
  color: var(--muted);
}

.meta-row strong {
  color: var(--text);
}

.footer {
	padding: 26px 0 44px;
	color: #a89876;
}

@media (max-width: 900px) {

	.hero-grid,
	.grid-2,
	.profile-grid {
		grid-template-columns: 1fr;
	}

	.hero {
		padding-top: 40px;
	}

	.hero-main,
	.form-card,
	.profile-card {
		padding: 22px;
	}
}

.alert-success {
	background: linear-gradient(180deg, rgba(38, 84, 47, 0.72), rgba(20, 44, 27, 0.82));
	border-color: rgba(109, 201, 124, 0.35);
	color: #dcffe3;
}

.alert-info {
	background: linear-gradient(180deg, rgba(70, 60, 26, 0.72), rgba(40, 34, 16, 0.82));
	border-color: rgba(255, 208, 107, 0.35);
	color: #fff2cf;
}

.alert {
	margin: 0 0 24px;
	padding: 16px 18px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, .12);
	backdrop-filter: blur(8px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
	font-size: 15px;
	line-height: 1.45;
}

.alert-error {
	background: linear-gradient(180deg, rgba(99, 36, 36, 0.72), rgba(56, 18, 18, 0.82));
	border-color: rgba(255, 112, 112, 0.35);
	color: #ffe0e0;
}

.preview-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 14px;
}

.preview-card {
	padding: 16px;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.preview-label {
	margin-bottom: 12px;
	color: var(--gold-soft);
	font-size: 14px;
	font-weight: 700;
}

.preview-link {
	display: block;
}

.preview-image {
	display: block;
	width: 100%;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	background:
		linear-gradient(45deg, rgba(255, 255, 255, .04) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .04) 75%),
		linear-gradient(45deg, rgba(255, 255, 255, .04) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, .04) 75%);
	background-size: 24px 24px;
	background-position: 0 0, 12px 12px;
}

.preview-skin {
	image-rendering: pixelated;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.preview-cloak {
	image-rendering: pixelated;
	aspect-ratio: 2 / 1;
	object-fit: contain;
}

.preview-empty {
	min-height: 180px;
	display: grid;
	place-items: center;
	text-align: center;
	border-radius: 14px;
	border: 1px dashed rgba(255, 255, 255, 0.10);
	color: var(--muted);
	background: rgba(255, 255, 255, 0.02);
}

@media (max-width: 900px) {
	.preview-grid {
		grid-template-columns: 1fr;
	}
}

.notice-card {
	text-align: center;
}

.mail-highlight {
	margin: 20px auto;
	display: inline-flex;
	padding: 12px 18px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .08);
	background: rgba(255, 255, 255, .04);
	color: var(--gold-soft);
	font-weight: 700;
}

.checklist {
	display: grid;
	gap: 10px;
	margin: 22px 0 6px;
	text-align: left;
}

.check-item {
	padding: 14px 16px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .05);
}

.error-shell {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 60px 0;
}

.error-card {
	padding: 42px;
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.error-code {
	font-size: clamp(72px, 15vw, 140px);
	line-height: 1;
	font-weight: 800;
	margin-bottom: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold-soft);
}

.viewer-stage {
    min-height: 470px;
    border-radius: 26px;
    border: 1px solid rgba(255, 220, 120, 0.35);

    background:
        radial-gradient(circle at 50% 18%, rgba(255, 230, 150, 0.9), rgba(255,255,255,0.95) 40%),
        linear-gradient(
            180deg,
            #fffdf4 0%,
            #fff3c4 40%,
            #ffe89a 70%,
            #ffffff 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 12px 30px rgba(255, 200, 80, 0.25);

    display: grid;
    place-items: center;
    overflow: hidden;
}

#skin-3d-viewer {
	width: 100%;
	max-width: 360px;
	height: 420px;
	display: block;
}

.preview-3d-top {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: flex-start;
	margin-bottom: 18px;
}

.viewer-controls {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.compact-meta {
	margin: 16px 0 8px;
}

.audit-list {
	display: grid;
	gap: 14px;
}

.audit-item {
	position: relative;
	padding: 18px 18px 18px 22px;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.audit-item::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 22px;
	bottom: 22px;
	width: 1px;
	background: rgba(255, 255, 255, 0.08);
}

.mt-12 { margin-top: 12px; }

.audit-item::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 20px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 0 4px rgba(229, 184, 92, 0.10);
}

.audit-head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: flex-start;
}

.audit-head span {
	color: var(--muted);
	font-size: 13px;
}

.audit-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin-top: 8px;
	color: var(--muted);
	font-size: 14px;
}

.audit-details-wrap {
	margin-top: 12px;
}

.audit-details-toggle {
	cursor: pointer;
	color: var(--gold-soft);
	font-weight: 700;
}

.audit-details {
	margin-top: 12px;
	padding: 14px;
	border-radius: 14px;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.06);
	overflow: auto;
	font-size: 13px;
}

@media (max-width: 900px) {

	.grid-3 {
		grid-template-columns: 1fr;
	}
	
	.preview-3d-top,
	.audit-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.stats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hero-grid,
	.profile-grid {
		grid-template-columns: 1fr;
	}

	.audit-head {
		flex-direction: column;
	}

	.meta-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.preview-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.stats-grid {
		grid-template-columns: 1fr;
	}

	.actions {
		flex-direction: column;
	}

	.btn,
	button {
		width: 100%;
	}
}

.page-shell-tight {
	padding-top: 40px;
	padding-bottom: 56px;
}

.map-hero-card,
.map-card {
	padding: 28px;
}

.map-card-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.map-frame-wrap {
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: rgba(0, 0, 0, 0.2);
	min-height: 720px;
}

.map-frame-wrap iframe {
	display: block;
	width: 100%;
	height: 720px;
	border: 0;
	background: #0b0b0b;
}

.map-note {
	margin-top: 16px;
	padding: 16px 18px;
	border-radius: 16px;
	border: 1px solid rgba(255, 212, 120, 0.12);
	background: rgba(255, 255, 255, 0.02);
	color: var(--muted);
	line-height: 1.65;
}

@media (max-width: 768px) {
	.map-hero-card,
	.map-card {
		padding: 22px;
	}

	.map-frame-wrap,
	.map-frame-wrap iframe {
		min-height: 70vh;
		height: 70vh;
	}
}


/* Auth UX improvements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible {
	outline: 3px solid rgba(240, 209, 135, 0.9);
	outline-offset: 2px;
}

.auth-shell {
	padding: 44px 0 72px;
}

.auth-card {
	padding: 30px;
	background:
		radial-gradient(circle at top right, rgba(229, 184, 92, 0.12), transparent 34%),
		linear-gradient(180deg, rgba(23, 20, 16, 0.96), rgba(14, 13, 11, 0.96));
}

.auth-card-wide {
	max-width: 1120px;
	margin: 0 auto;
}

.auth-card-narrow {
	max-width: 760px;
	margin: 0 auto;
}

.auth-intro {
	max-width: 720px;
	margin-bottom: 28px;
}

.auth-lead {
	max-width: 62ch;
	font-size: 16px;
}

.auth-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
	gap: 22px;
	align-items: start;
}

.auth-panel {
	border-radius: 22px;
	border: 1px solid rgba(255,255,255,0.07);
	padding: 24px;
}

.auth-panel-form {
	background: rgba(255,255,255,0.025);
}

.auth-panel-accent {
	background:
		radial-gradient(circle at top, rgba(229, 184, 92, 0.14), transparent 42%),
		linear-gradient(180deg, rgba(31, 27, 20, 0.88), rgba(18, 16, 13, 0.92));
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.auth-panel-head {
	margin-bottom: 18px;
}

.auth-panel-eyebrow {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-soft);
}

.auth-note {
	margin-top: 18px;
	padding: 14px 16px;
	border-radius: 16px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.06);
	color: var(--text);
	line-height: 1.55;
}

.helper-text {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
}

.helper-text[data-state="ok"] {
	color: #cceec9;
}

.helper-text[data-state="error"] {
	color: #ffb9b3;
}

.password-input {
	position: relative;
}

.password-input input {
	padding-right: 110px;
}

.password-toggle {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	padding: 9px 12px;
	font-size: 13px;
	border-radius: 12px;
	box-shadow: none;
}

.password-strength {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	align-items: center;
	margin-top: 12px;
}

.password-strength-bar {
	position: relative;
	height: 8px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(255,255,255,0.08);
}

.password-strength-bar span {
	display: block;
	height: 100%;
	width: 25%;
	border-radius: inherit;
	background: linear-gradient(90deg, #d96a63, #f0d187);
	transition: width .18s ease;
}

.password-strength-text {
	font-size: 13px;
	color: var(--muted);
}

input::placeholder {
	color: #8f846e;
}

@media (max-width: 900px) {
	.auth-layout {
		grid-template-columns: 1fr;
	}

	.auth-card {
		padding: 22px;
	}

	.auth-panel {
		padding: 20px;
	}
}


:root {
	--surface-1: rgba(255, 255, 255, 0.028);
	--surface-2: rgba(255, 255, 255, 0.045);
	--accent-1: rgba(229, 184, 92, 0.16);
	--accent-2: rgba(132, 103, 46, 0.24);
	--radius-xl: 28px;
	--radius-lg: 22px;
	--radius-md: 16px;
	--radius-sm: 12px;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
		radial-gradient(circle at 20% 0%, rgba(229,184,92,0.10), transparent 32%),
		radial-gradient(circle at 100% 20%, rgba(229,184,92,0.06), transparent 28%);
	background-size: 34px 34px, 34px 34px, auto, auto;
	opacity: .28;
	mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.45) 48%, transparent 90%);
}

.site-header {
	background: rgba(9, 9, 9, 0.76);
	border-bottom-color: rgba(255, 212, 120, 0.08);
}

.nav {
	padding: 14px 0;
}

.brand-link {
	color: var(--text);
}

.brand-mark {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: 14px;
	background: radial-gradient(circle at center, rgba(255, 213, 94, 0.18), rgba(255, 213, 94, 0.04) 68%, transparent 100%);
	overflow: visible;
}

.brand-mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 12px 20px rgba(216,165,74,.18));
}

.brand-title {
	display: grid;
	gap: 2px;
	line-height: 1;
}

.brand-title small {
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--muted);
}

.nav-links {
	align-items: center;
	gap: 18px;
}

.nav-link {
	padding: 8px 0;
	color: var(--muted);
	font-size: 14px;
	font-weight: 600;
	border-bottom: 1px solid transparent;
	transition: color .18s ease, border-color .18s ease, opacity .18s ease;
}

.nav-link:hover,
.nav-link.is-active {
	color: var(--text);
	border-color: rgba(255, 212, 120, 0.36);
	opacity: 1;
}

.nav-cta {
	margin-left: 8px;
}

.hero {
	padding: 88px 0 24px;
}

.hero-grid-enhanced {
	grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
	gap: 18px;
	align-items: stretch;
}

.hero-main-enhanced {
	position: relative;
	padding: 52px;
	border-radius: var(--radius-xl);
	background:
		linear-gradient(135deg, rgba(255,255,255,0.02), transparent 48%),
		radial-gradient(circle at top left, rgba(229,184,92,0.14), transparent 38%),
		linear-gradient(180deg, rgba(25, 22, 18, 0.96), rgba(13, 12, 11, 0.96));
	overflow: hidden;
}

.hero-main-enhanced::after {
	content: "";
	position: absolute;
	right: -120px;
	top: -90px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(229,184,92,0.18), transparent 62%);
	pointer-events: none;
}

.hero-lead {
	max-width: 54ch;
	font-size: 17px;
}

.hero-point {
	background: rgba(255, 255, 255, 0.025);
	border-color: rgba(255, 255, 255, 0.04);
}

.hero-point strong,
.feature-callout-title,
.auth-step strong,
.empty-state-title,
.section-label {
	display: block;
	margin-bottom: 4px;
}

.hero-side {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 18px;
	padding: 24px;
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

.side-cluster {
	display: grid;
	gap: 12px;
}

.side-cluster .stat-card,
.summary-strip .stat-card {
	padding: 16px;
	background: rgba(255,255,255,0.025);
	border-color: rgba(255,255,255,0.05);
}

.side-note {
	padding: 16px 18px;
	border-radius: 18px;
	background: rgba(255,255,255,0.025);
	border: 1px solid rgba(255,255,255,0.05);
}

.summary-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 4px;
}

.section-compact {
	padding-top: 0;
	padding-bottom: 28px;
}

.section-frame {
	padding: 34px;
	border-radius: var(--radius-xl);
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border: 1px solid rgba(255,255,255,0.05);
	box-shadow: var(--shadow);
}

.section-header {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	align-items: end;
	margin-bottom: 24px;
}

.section-label {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold-soft);
}

.flow-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
	gap: 24px;
}

.flow-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.flow-step {
	position: relative;
	padding: 22px;
	border-radius: 20px;
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.05);
}

.flow-step-number {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-bottom: 16px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 800;
	color: #1d170d;
	background: linear-gradient(180deg, #f7d991, #d8a54a);
}

.flow-aside {
	padding: 24px;
	border-radius: 22px;
	background:
		radial-gradient(circle at top, rgba(229,184,92,0.12), transparent 42%),
		rgba(255,255,255,0.025);
	border: 1px solid rgba(255,255,255,0.05);
}

.feature-callout-list,
.auth-step-list {
	display: grid;
	gap: 14px;
}

.feature-callout,
.auth-step {
	padding: 16px 18px;
	border-radius: 18px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.05);
}

.tilt-free.card,
.flat-card.card,
.card.tilt-free:hover,
.card.flat-card:hover {
	transform: none;
	box-shadow: var(--shadow);
}

.feature-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
	gap: 24px;
	align-items: start;
}

.feature-list-clean {
	display: grid;
	gap: 12px;
}

.feature-line {
	padding: 0 0 14px;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}

.feature-line:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.feature-line strong {
	display: block;
	margin-bottom: 4px;
}

.editorial-note {
	padding: 26px;
	border-left: 1px solid rgba(255,212,120,0.26);
	background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
	border-radius: 0 22px 22px 0;
}

.kicker,
.badge {
	background: rgba(229, 184, 92, 0.08);
	border-color: rgba(229, 184, 92, 0.15);
}

.btn-secondary {
	background: rgba(255, 255, 255, 0.02);
}

.profile-grid-profile {
	grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
	align-items: start;
}

.profile-primary {
	padding: 34px;
	background:
		radial-gradient(circle at top left, rgba(229,184,92,0.14), transparent 34%),
		linear-gradient(180deg, rgba(22,20,17,0.97), rgba(13,12,11,0.97));
}

.profile-primary h1 {
	margin-bottom: 12px;
}

.profile-actions-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.profile-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 20px;
}

.profile-section-sub {
	max-width: 58ch;
}

.profile-upload-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.profile-panel-soft {
	background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.012));
}

.upload-zone {
	padding: 26px;
	border-radius: 20px;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.03));
}

.upload-zone::after {
	content: "PNG";
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 6px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	color: var(--gold-soft);
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.05);
}

.empty-state {
	padding: 20px;
	background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
}

.empty-state-hint {
	margin-top: 12px;
	display: inline-flex;
	padding: 8px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: var(--gold-soft);
	background: rgba(229,184,92,0.08);
	border: 1px solid rgba(229,184,92,0.14);
}

.audit-item {
	padding: 18px 18px 18px 18px;
	background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.015));
}

.audit-item::before {
	left: 18px;
	top: 18px;
	bottom: auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(229,184,92,.16);
}

.audit-item::after {
	display: none;
}

.audit-head {
	padding-left: 24px;
}

.audit-meta,
.audit-details-wrap {
	padding-left: 24px;
}

.auth-layout {
	grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
}

.auth-panel-accent {
	background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.015));
}

.auth-steps-note {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(255,255,255,0.06);
}

.footer {
	padding-top: 38px;
	padding-bottom: 46px;
}

.footer-block {
	display: grid;
	gap: 6px;
}

.footer-meta {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	color: var(--muted);
	font-size: 14px;
}

.footer-link {
	color: var(--text);
}

.map-hero-card {
	padding: 34px;
	background:
		radial-gradient(circle at top left, rgba(229,184,92,0.13), transparent 38%),
		linear-gradient(180deg, rgba(24,22,19,.96), rgba(13,12,11,.96));
}

.map-hero-actions {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 22px;
}

@media (max-width: 900px) {
	.hero-grid-enhanced,
	.flow-grid,
	.feature-split,
	.profile-grid-profile,
	.profile-upload-grid,
	.summary-strip,
	.flow-steps,
	.profile-actions-grid {
		grid-template-columns: 1fr;
	}

	.hero-main-enhanced,
	.section-frame,
	.profile-primary,
	.map-hero-card {
		padding: 24px;
	}

	.section-header,
	.profile-section-head,
	.map-hero-actions {
		flex-direction: column;
		align-items: flex-start;
	}

	.nav-links {
		gap: 12px;
	}
}

@media (max-width: 640px) {
	.nav {
		align-items: flex-start;
	}

	.nav-links {
		width: 100%;
		justify-content: flex-start;
	}

	.nav-cta {
		margin-left: 0;
	}

	.hero-main-enhanced {
		padding: 22px;
	}
}


/* === refined design system pass === */
:root {
	--bg-deep: #0a0a09;
	--surface-0: rgba(255,255,255,0.018);
	--surface-1: rgba(255,255,255,0.032);
	--surface-2: rgba(255,255,255,0.05);
	--surface-3: rgba(255,255,255,0.075);
	--panel-border-soft: rgba(255,255,255,0.05);
	--panel-border-strong: rgba(255,212,120,0.16);
	--text-soft: #d6c8aa;
	--muted-2: #90836a;
	--shadow-deep: 0 26px 80px rgba(0,0,0,0.34);
	--glow-gold: 0 0 0 1px rgba(255,212,120,0.08), 0 18px 50px rgba(171,122,36,0.12);
	--radius-xl: 30px;
	--radius-lg: 22px;
	--radius-md: 16px;
	--radius-sm: 11px;
}

html {
	scroll-behavior: smooth;
}

body {
	background:
		radial-gradient(circle at 18% 0%, rgba(229, 184, 92, 0.14), transparent 24%),
		radial-gradient(circle at 88% 12%, rgba(229, 184, 92, 0.07), transparent 26%),
		linear-gradient(180deg, #0b0b0a 0%, #12100d 45%, #090909 100%);
}

a,
.btn,
button,
.card,
.upload-zone,
.nav-link,

input,
textarea {
	transition:
		transform .18s ease,
		box-shadow .18s ease,
		border-color .18s ease,
		background .18s ease,
		color .18s ease,
		opacity .18s ease;
}

p {
	color: var(--text-soft);
	font-size: 15.5px;
}

.card {
	background:
		linear-gradient(180deg, rgba(255,255,255,0.024), rgba(255,255,255,0.012));
	border: 1px solid var(--panel-border-soft);
	box-shadow: var(--shadow-deep);
}

.card:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 212, 120, 0.14);
	box-shadow: 0 20px 70px rgba(0,0,0,0.28);
}

.kicker,
.badge,
.section-label,
.auth-panel-eyebrow {
	letter-spacing: .18em;
}

h1 {
	letter-spacing: -0.04em;
}

h2 {
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.04;
	letter-spacing: -0.03em;
}

h3,
.page-title {
	font-size: clamp(24px, 2.5vw, 34px);
	line-height: 1.08;
}

label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	color: #f3e8cf;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"] {
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.07);
	background: linear-gradient(180deg, rgba(16,16,16,0.88), rgba(10,10,10,0.9));
	padding: 13px 15px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover {
	border-color: rgba(255,212,120,0.12);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
	border-color: rgba(255,212,120,0.32);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 0 0 4px rgba(229,184,92,0.08);
}

.btn,
button {
	border-radius: 14px;
	min-height: 48px;
}

.btn-primary,
button {
	background: linear-gradient(180deg, #f5dc9f, #d39e42);
	box-shadow: 0 14px 34px rgba(216, 165, 74, .18), inset 0 1px 0 rgba(255,255,255,0.22);
}

.btn-primary:hover,
button:hover {
	box-shadow: 0 18px 36px rgba(216,165,74,.22), inset 0 1px 0 rgba(255,255,255,0.22);
}

.btn-secondary {
	background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.018));
	border: 1px solid rgba(255,255,255,0.06);
	color: #f4ead4;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

.btn-secondary:hover {
	border-color: rgba(255,212,120,0.16);
	background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.026));
}

.site-header {
	background: rgba(8, 8, 8, 0.82);
	border-bottom: 1px solid rgba(255,212,120,0.07);
	box-shadow: 0 10px 30px rgba(0,0,0,0.14);
}

.nav {
	padding: 12px 0;
}

.brand {
	gap: 14px;
}

.brand-mark {
	box-shadow: 0 0 0 1px rgba(255,212,120,0.06);
}

.brand-title span {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .14em;
}

.brand-title small {
	font-size: 10px;
	letter-spacing: .18em;
}

.nav-links {
	padding: 8px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,0.024);
	border: 1px solid rgba(255,255,255,0.045);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.nav-link {
	padding: 10px 12px;
	border-radius: 999px;
	border-bottom: 0;
}

.nav-link:hover,
.nav-link.is-active {
	background: rgba(255,255,255,0.04);
	color: var(--text);
}

.nav-cta {
	margin-left: 2px;
}

.hero {
	padding-top: 92px;
}

.hero-grid-enhanced {
	grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.55fr);
	gap: 20px;
}

.hero-main-enhanced {
	padding: 58px 56px;
	border-radius: var(--radius-xl);
	background:
		linear-gradient(135deg, rgba(255,255,255,0.05), transparent 42%),
		radial-gradient(circle at left top, rgba(229,184,92,0.18), transparent 40%),
		radial-gradient(circle at 85% 20%, rgba(229,184,92,0.08), transparent 22%),
		linear-gradient(180deg, rgba(26,23,19,0.98), rgba(11,11,10,0.98));
	border-color: rgba(255,212,120,0.09);
	box-shadow: var(--shadow-deep), var(--glow-gold);
}

.hero-main-enhanced::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
		linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
	background-size: 46px 46px;
	opacity: .08;
	mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 88%);
	pointer-events: none;
}

.hero-side {
	position: relative;
	padding: 24px;
	border-radius: 26px;
	background:
		radial-gradient(circle at top, rgba(229,184,92,0.12), transparent 34%),
		linear-gradient(180deg, rgba(20,18,16,0.96), rgba(11,11,11,0.96));
	border: 1px solid rgba(255,212,120,0.08);
	overflow: hidden;
}

.hero-side::after,
.profile-primary::after,
.map-hero-card::after,
.auth-panel-accent::after,
.footer::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(130deg, transparent 0%, rgba(255,255,255,0.03) 16%, transparent 28%),
		radial-gradient(circle at 90% 8%, rgba(255,212,120,0.12), transparent 26%);
	opacity: .65;
}

.hero-side-top {
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255,255,255,0.05);
}

.side-cluster {
	gap: 14px;
	align-content: start;
}

.side-cluster .stat-card,
.summary-strip .stat-card {
	background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
	border: 1px solid rgba(255,255,255,0.05);
}

.summary-strip {
	position: relative;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding: 10px;
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
	border: 1px solid rgba(255,255,255,0.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

.summary-strip .stat-card {
	border-radius: 16px;
	padding: 18px;
}

.summary-strip .stat-value {
	font-size: 20px;
	line-height: 1.1;
}

.section-frame {
	padding: 38px;
	border-radius: 30px;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.016));
	box-shadow: var(--shadow-deep);
}

.flow-step,
.feature-callout,
.auth-step,
.preview-card,
.empty-state,
.upload-zone,

.auth-note,
.side-note {
	border-color: rgba(255,255,255,0.06);
	background: linear-gradient(180deg, rgba(255,255,255,0.032), rgba(255,255,255,0.016));
}

.flow-step {
	padding: 24px;
}

.flow-step:hover,
.feature-callout:hover,
.auth-step:hover,
.audit-item:hover,
.preview-card:hover,
.upload-zone:hover {
	transform: translateY(-2px);
	border-color: rgba(255,212,120,0.16);
	box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}

.flow-aside {
	background:
		radial-gradient(circle at top, rgba(229,184,92,0.14), transparent 42%),
		linear-gradient(180deg, rgba(255,255,255,0.038), rgba(255,255,255,0.018));
	border: 1px solid rgba(255,212,120,0.1);
}

.feature-split {
	grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
}

.feature-line {
	padding-bottom: 18px;
}

.editorial-note {
	position: relative;
	padding: 28px;
	border-left: 1px solid rgba(255,212,120,0.18);
	border-radius: 24px;
	background:
		radial-gradient(circle at top left, rgba(229,184,92,0.10), transparent 34%),
		linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.014));
	border: 1px solid rgba(255,255,255,0.05);
}

.profile-primary {
	position: relative;
	padding: 38px;
	border-color: rgba(255,212,120,0.09);
	box-shadow: var(--shadow-deep), var(--glow-gold);
}

.meta {
	gap: 4px;
}

.meta-row {
	grid-template-columns: 144px 1fr;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255,255,255,0.05);
}

.meta-row span {
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted-2);
}

.meta-row strong {
	font-size: 15px;
	font-weight: 700;
}

.profile-panel-soft {
	background:
		linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
}

.viewer-stage {
	min-height: 470px;
	border-radius: 26px;
	background:
		radial-gradient(circle at 50% 14%, rgba(229,184,92,.28), transparent 36%),
		linear-gradient(180deg, rgba(20,20,20,.98), rgba(8,8,8,1));
	border: 1px solid rgba(255,212,120,0.09);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 18px 46px rgba(0,0,0,0.22);
}

#skin-3d-viewer {
	max-width: 400px;
	height: 450px;
}

.preview-3d-top {
	margin-bottom: 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255,255,255,0.05);
}

.viewer-controls .btn {
	min-height: 42px;
	padding-inline: 16px;
}

.profile-upload-grid {
	gap: 20px;
}

.upload-zone {
	padding: 28px 24px 24px;
	border-radius: 22px;
	border-style: solid;
	border-color: rgba(255,212,120,0.11);
	background:
		radial-gradient(circle at top right, rgba(229,184,92,0.09), transparent 30%),
		linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

.upload-zone::after {
	content: "";
	display: none;
}

.upload-zone-title {
	font-size: 18px;
	margin-bottom: 8px;
}

.upload-zone-text {
	font-size: 14px;
	color: var(--text-soft);
}

.upload-meta {
	margin-top: 14px;
	min-height: 22px;
	padding-left: 2px;
}

.upload-meta.is-success::before,
.upload-meta.is-error::before {
	content: "•";
	margin-right: 8px;
}

.audit-list {
	gap: 16px;
}

.audit-item {
	padding: 18px 20px;
	border-radius: 20px;
}

.audit-item::before {
	left: 20px;
	top: 20px;
	width: 10px;
	height: 10px;
	background: rgba(229,184,92,.18);
	border-radius: 50%;
}

.audit-head {
	padding-left: 24px;
	gap: 18px;
}

.audit-head strong {
	font-size: 16px;
}

.audit-head span {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted-2);
}

.audit-meta,
.audit-details-wrap {
	padding-left: 24px;
}

.audit-meta {
	font-size: 13px;
	color: var(--text-soft);
}

.audit-details {
	border-radius: 16px;
	background: rgba(0,0,0,0.24);
	border-color: rgba(255,255,255,0.05);
}

.auth-shell {
	padding-top: 52px;
}

.auth-card {
	border-radius: 30px;
	background:
		radial-gradient(circle at top right, rgba(229, 184, 92, 0.10), transparent 34%),
		linear-gradient(180deg, rgba(18,17,15,0.98), rgba(11,11,10,0.98));
}

.auth-layout {
	align-items: stretch;
}

.auth-panel {
	border-radius: 24px;
	padding: 26px;
}

.auth-panel-form {
	background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.014));
}

.auth-panel-accent {
	position: relative;
	overflow: hidden;
	border-color: rgba(255,212,120,0.08);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.auth-panel-login {
	background:
		radial-gradient(circle at 78% 14%, rgba(229,184,92,0.14), transparent 28%),
		linear-gradient(180deg, rgba(27,23,18,0.96), rgba(14,13,11,0.96));
}

.auth-panel-register {
	background:
		radial-gradient(circle at 18% 0%, rgba(229,184,92,0.14), transparent 30%),
		linear-gradient(180deg, rgba(25,22,18,0.96), rgba(14,13,11,0.96));
}

.password-toggle {
	min-height: 38px;
	padding: 8px 12px;
	border: 1px solid rgba(255,255,255,0.06);
	background: rgba(255,255,255,0.03);
	color: var(--text);
}

.helper-text {
	color: var(--muted-2);
}

.password-strength-bar {
	background: rgba(255,255,255,0.06);
}

.password-strength-bar span {
	background: linear-gradient(90deg, #d96a63, #e5b85c, #f2d79b);
}

.map-hero-card {
	position: relative;
	padding: 36px;
	border-color: rgba(255,212,120,0.09);
	box-shadow: var(--shadow-deep), var(--glow-gold);
}

.map-card {
	padding: 22px;
	background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.012));
}

.map-frame-wrap {
	border-radius: 28px;
	border-color: rgba(255,212,120,0.1);
	min-height: 78vh;
	background:
		radial-gradient(circle at 50% 0%, rgba(229,184,92,0.10), transparent 30%),
		rgba(0,0,0,0.3);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.map-frame-wrap iframe {
	height: 78vh;
}

.map-note {
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(255,255,255,0.026), rgba(255,255,255,0.016));
	border-color: rgba(255,255,255,0.06);
}

.footer {
	position: relative;
	padding-top: 44px;
	padding-bottom: 52px;
	border-top: 1px solid rgba(255,255,255,0.04);
	background:
		radial-gradient(circle at 50% 0%, rgba(229,184,92,0.08), transparent 32%);
	overflow: hidden;
}

.footer-row {
	align-items: flex-start;
	padding-top: 6px;
}

.footer-block strong {
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.footer-block span {
	max-width: 42ch;
	color: var(--text-soft);
	line-height: 1.7;
}

.footer-meta {
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(255,255,255,0.028);
	border: 1px solid rgba(255,255,255,0.05);
}

.footer-link {
	text-decoration: underline;
	text-decoration-color: rgba(255,212,120,0.24);
	text-underline-offset: 3px;
}

.hero-point span,
.feature-callout p,
.auth-step p,
.side-note p,
.feature-line p {
	color: var(--text-soft);
}

@media (max-width: 900px) {
	.nav {
		gap: 12px;
	}

	.nav-links {
		width: 100%;
		justify-content: flex-start;
		padding: 6px;
		border-radius: 18px;
	}

	.hero-main-enhanced,
	.profile-primary,
	.map-hero-card {
		padding: 26px;
	}

	.hero-side,
	.auth-panel,
	.section-frame {
		padding: 22px;
	}

	.viewer-stage {
		min-height: 380px;
	}

	#skin-3d-viewer {
		height: 360px;
	}

	.footer-meta {
		border-radius: 18px;
	}
}

@media (max-width: 640px) {
	.container {
		width: min(1120px, calc(100% - 24px));
	}

	.site-header {
		backdrop-filter: blur(10px);
	}

	.nav {
		align-items: stretch;
	}

	.brand {
		align-self: center;
	}

	.nav-links {
		flex-wrap: wrap;
		gap: 8px;
	}

	.nav-link,
	.nav-cta {
		width: auto;
	}

	.summary-strip {
		padding: 8px;
	}

	.summary-strip .stat-card {
		padding: 16px;
	}

	.profile-actions-grid {
		grid-template-columns: 1fr;
	}

	.actions {
		gap: 10px;
	}

	.btn,
	button {
		width: 100%;
	}

	.meta-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}


/* === final usability pass === */
:root {
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.16);
  --shadow-deep: 0 18px 42px rgba(0,0,0,0.24);
  --glow-gold: none;
}

body {
  background:
    radial-gradient(circle at 18% 0%, rgba(229, 184, 92, 0.08), transparent 22%),
    linear-gradient(180deg, #0b0b0a 0%, #11100d 42%, #090909 100%);
}

.card,
.section-frame,
.auth-card,
.profile-primary,
.map-hero-card,
.hero-main-enhanced,
.hero-side,
.footer-meta,
.flow-aside,
.editorial-note,
.profile-panel-soft,
.auth-panel,
.summary-strip {
  box-shadow: var(--shadow) !important;
}

.card:hover,
.flow-step:hover,
.feature-callout:hover,
.auth-step:hover,
.audit-item:hover,
.preview-card:hover,
.upload-zone:hover {
  transform: none;
  box-shadow: var(--shadow-soft);
}

.hero-main-enhanced::before,
.hero-side::after,
.profile-primary::after,
.map-hero-card::after,
.auth-panel-accent::after,
.footer::before {
  opacity: .26;
}

.site-header {
  background: rgba(10,10,10,0.82);
}

.nav {
  gap: 18px;
}

.nav-cluster {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.nav-links {
  padding: 0;
  border: 0;
  background: transparent;
  gap: 16px;
}

.nav-link {
  padding: 10px 0;
  color: #c9bea3;
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--text);
  border-color: rgba(255, 212, 120, 0.5);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-user {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.hero {
  padding: 72px 0 20px;
}

.hero-grid-enhanced,
.feature-split,
.flow-grid,
.profile-grid-profile {
  gap: 16px;
}

.hero-main-enhanced,
.section-frame,
.profile-primary,
.map-hero-card,
.auth-card {
  border-radius: 24px;
}

.hero-main-enhanced {
  padding: 40px;
  background:
    radial-gradient(circle at left top, rgba(229,184,92,0.10), transparent 34%),
    linear-gradient(180deg, rgba(24,22,19,0.97), rgba(12,12,11,0.97));
}

.hero-side,
.section-frame,
.profile-panel-soft,
.auth-panel,
.map-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.012));
}

.summary-strip {
  padding: 6px;
  gap: 10px;
  background: rgba(255,255,255,0.02);
}

.summary-strip .stat-card,
.side-cluster .stat-card {
  padding: 14px;
}

.auth-shell {
  padding-top: 40px;
}

.auth-card {
  background: linear-gradient(180deg, rgba(18,17,15,0.98), rgba(11,11,10,0.98));
}

.auth-intro {
  max-width: 60ch;
  margin-bottom: 22px;
}

.auth-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 16px;
}

.auth-panel {
  padding: 22px;
  border-radius: 20px;
}

.auth-panel-support {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.012));
  border-color: rgba(255,255,255,0.05);
}

.auth-panel-support .auth-step,
.auth-panel-support .auth-note {
  background: rgba(255,255,255,0.02);
}

.profile-status-bar {
  gap: 10px;
}

.profile-primary {
  padding: 32px;
}

.profile-preview-panel {
  align-self: start;
}

.preview-3d-top h2 {
  margin-bottom: 8px;
}

.viewer-stage {
  min-height: 380px;
}

#skin-3d-viewer {
  height: 360px;
  max-width: 320px;
}

.profile-upload-panel {
  padding: 24px;
}

.profile-inline-note {
  display: inline-flex;
  align-self: flex-start;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}

.profile-upload-grid-unified {
  gap: 18px;
}

.profile-upload-item {
  padding: 0;
}

.profile-upload-item h3 {
  margin-bottom: 6px;
}

.upload-zone {
  padding: 22px 20px;
  border-radius: 18px;
}

.activity-panel .section-label {
  color: #cdbb93;
}

.security-panel {
  border-color: rgba(255, 212, 120, 0.14);
  background:
    radial-gradient(circle at top right, rgba(229,184,92,0.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.014));
}

.security-panel .audit-item {
  border-color: rgba(255, 212, 120, 0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.018));
}

.security-panel .audit-item::before {
  background: rgba(229,184,92,.28);
}

.activity-panel .audit-item {
  background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.012));
}

.map-hero-card-compact {
  padding: 24px 28px;
  background: linear-gradient(180deg, rgba(24,22,19,.96), rgba(12,12,11,.96));
}

.map-hero-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.map-card-focused {
  padding: 18px;
}

.map-card-head-compact {
  margin-bottom: 14px;
}

.map-frame-wrap {
  border-radius: 20px;
  min-height: 82vh;
  background: rgba(0,0,0,0.22);
}

.map-frame-wrap iframe {
  height: 82vh;
}

.map-note {
  margin-top: 14px;
  background: rgba(255,255,255,0.022);
}

.footer {
  padding-top: 30px;
  padding-bottom: 36px;
  background: none;
  border-top: 1px solid rgba(255,255,255,0.03);
}

.footer-row-quiet {
  align-items: center;
}

.footer-meta-quiet {
  padding: 0;
  border: 0;
  background: transparent;
  gap: 14px;
}

.footer-block span {
  color: var(--muted);
}

.error-card {
  max-width: 620px;
  padding: 34px;
  text-align: left;
}

.error-tone-lost {
  border-color: rgba(255,255,255,0.07);
}

.error-tone-restrict {
  border-color: rgba(255, 212, 120, 0.12);
}

.error-tone-rate {
  border-color: rgba(143,184,255,0.18);
}

.error-tone-fail {
  border-color: rgba(234,114,109,0.18);
}

@media (max-width: 900px) {
  .nav {
    align-items: flex-start;
  }

  .nav-cluster {
    width: 100%;
    justify-content: space-between;
  }

  .auth-layout,
  .hero-grid-enhanced,
  .feature-split,
  .flow-grid,
  .profile-grid-profile,
  .profile-upload-grid-unified,
  .summary-strip,
  .flow-steps,
  .profile-actions-grid {
    grid-template-columns: 1fr;
  }

  .map-hero-topline,
  .profile-section-head,
  .map-hero-actions,
  .section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .map-frame-wrap,
  .map-frame-wrap iframe {
    min-height: 70vh;
    height: 70vh;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(1120px, calc(100% - 20px));
  }

  .hero {
    padding-top: 48px;
  }

  .hero-main-enhanced,
  .section-frame,
  .profile-primary,
  .map-hero-card,
  .auth-card,
  .profile-upload-panel {
    padding: 20px;
  }

  .hero-side,
  .auth-panel,
  .map-card {
    padding: 18px;
  }

  .nav-cluster {
    gap: 10px;
  }

  .nav-links {
    gap: 12px;
    width: 100%;
  }

  .nav-actions {
    width: 100%;
    justify-content: space-between;
  }

  .summary-strip {
    padding: 4px;
  }

  .summary-strip .stat-card,
  .side-cluster .stat-card {
    padding: 12px;
  }

  .btn,
  button {
    width: 100%;
  }

  .viewer-stage {
    min-height: 320px;
  }

  #skin-3d-viewer {
    height: 300px;
    max-width: 260px;
  }

  .map-frame-wrap,
  .map-frame-wrap iframe {
    min-height: 64vh;
    height: 64vh;
  }

  .footer-row-quiet {
    align-items: flex-start;
  }
}

.logout-form {
    display: inline;
    margin: 0;
}

.home-page {
  position: relative;
  overflow: clip;
}

.home-sun-scene {
  position: fixed;
  top: 96px;
  right: max(24px, calc((100vw - 1120px) / 2));
  width: min(34vw, 360px);
  height: min(34vw, 360px);
  pointer-events: none;
  z-index: 0;
}

.home-sun-glow,
.home-sun {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.home-sun-glow {
  inset: 10%;
  background: radial-gradient(circle, rgba(255, 205, 104, 0.34) 0%, rgba(255, 171, 61, 0.18) 42%, rgba(255, 142, 27, 0.08) 62%, transparent 76%);
  filter: blur(22px);
  opacity: 0.95;
}

.home-sun {
  --sun-rotate: 0deg;
  --sun-shift: 0px;
  width: clamp(170px, 22vw, 280px);
  height: clamp(170px, 22vw, 280px);
  margin: 0 auto;
  transform: translateY(var(--sun-shift)) rotate(var(--sun-rotate));
  transform-origin: 50% 50%;
  border: 1px solid rgba(255, 230, 168, 0.24);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 247, 201, 0.98) 0%, rgba(255, 213, 111, 0.96) 26%, rgba(255, 173, 62, 0.94) 52%, rgba(217, 97, 24, 0.86) 73%, rgba(136, 49, 8, 0.72) 100%);
  box-shadow: 0 0 48px rgba(255, 173, 62, 0.24), 0 0 120px rgba(255, 173, 62, 0.12);
}

.home-sun::before,
.home-sun::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
}

.home-sun::before {
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 228, 150, 0.32) 0deg 10deg, rgba(255, 181, 59, 0.08) 10deg 22deg);
  mask: radial-gradient(circle, transparent 0 58%, #000 64% 100%);
  opacity: 0.95;
}

.home-sun::after {
  inset: 12%;
  border: 1px solid rgba(255, 241, 198, 0.22);
  background: radial-gradient(circle at 38% 34%, rgba(255,255,255,0.32), transparent 34%);
}

.hero-home,
.section-soft {
  position: relative;
  z-index: 1;
}

.profile-upload-item {
  display: flex;
  flex-direction: column;
}

.profile-upload-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.profile-upload-form button {
  margin-top: auto;
}

.footer-row-minimal {
  gap: 12px 24px;
}

.footer-block-minimal {
  display: grid;
  gap: 4px;
}

.footer-meta-minimal {
  gap: 12px;
}

@media (max-width: 980px) {
  .home-sun-scene {
    right: 16px;
    width: 220px;
    height: 220px;
    opacity: 0.82;
  }
}

@media (max-width: 720px) {
  .site-body {
    --sun-parallax-x: 0px;
    --sun-parallax-y: 0px;
    --sun-parallax-tilt: 0deg;
  }

  .home-sun-scene {
    top: 118px;
    right: -18px;
    width: 180px;
    height: 180px;
    opacity: 0.68;
  }

  .home-sun {
    width: 140px;
    height: 140px;
  }
}


.site-body {
  position: relative;
  overflow-x: hidden;
}

.site-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(56% 34% at 50% 9%, rgba(255, 224, 146, 0.12) 0%, rgba(255, 208, 116, 0.08) 24%, rgba(255, 180, 91, 0.04) 42%, transparent 72%),
    linear-gradient(180deg, rgba(255, 208, 120, 0.05) 0%, rgba(255, 181, 92, 0.028) 20%, rgba(255, 160, 78, 0.012) 34%, transparent 56%);
  mix-blend-mode: screen;
  opacity: 0.42;
  animation: page-radiance 22s ease-in-out infinite;
}

.site-sun-scene {
  position: fixed;
  inset: 84px 0 auto;
  height: min(42vw, 380px);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.96), rgba(0,0,0,0.92) 68%, transparent 100%);
}

.site-sun-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 88% at 50% 100%, rgba(255, 161, 77, 0.18) 0%, rgba(255, 135, 60, 0.08) 28%, transparent 58%),
    radial-gradient(48% 34% at 18% 84%, rgba(255, 143, 84, 0.12) 0%, transparent 72%),
    radial-gradient(44% 32% at 82% 84%, rgba(255, 116, 62, 0.10) 0%, transparent 74%),
    linear-gradient(180deg, rgba(23, 36, 62, 0.10) 0%, rgba(255, 196, 115, 0.12) 34%, rgba(255, 132, 58, 0.10) 52%, rgba(18, 14, 11, 0) 88%);
  opacity: 0.96;
  animation: sky-cycle 22s ease-in-out infinite;
}

.site-sun-scene::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 0;
  height: 28%;
  background:
    radial-gradient(70% 120% at 50% 100%, rgba(255, 182, 100, 0.24) 0%, rgba(255, 136, 59, 0.12) 28%, transparent 70%),
    linear-gradient(180deg, rgba(255, 194, 120, 0.10), rgba(255, 117, 43, 0.02) 52%, transparent 100%);
  opacity: 0.74;
  filter: blur(10px);
  animation: horizon-glow 22s ease-in-out infinite;
}

.site-sun-colorwash,
.site-sun-aura,
.site-sun-haze,
.site-sun-wash,
.site-sun-dust,
.site-sun-bloom {
  position: absolute;
  inset: 0;
}

.site-sun-dust,
.site-sun-bloom {
  pointer-events: none;
}

.site-sun-colorwash {
  background:
    radial-gradient(54% 34% at 12% 78%, rgba(255, 112, 70, 0.18) 0%, transparent 72%),
    radial-gradient(54% 34% at 88% 78%, rgba(255, 120, 92, 0.18) 0%, transparent 72%),
    radial-gradient(60% 38% at 50% 14%, rgba(255, 226, 154, 0.16) 0%, rgba(255, 205, 104, 0.08) 38%, transparent 74%),
    linear-gradient(180deg, rgba(120, 86, 186, 0.12) 0%, rgba(255, 166, 92, 0.14) 34%, rgba(255, 124, 66, 0.18) 58%, rgba(17, 11, 10, 0) 88%);
  mix-blend-mode: screen;
  filter: blur(26px);
  opacity: 0.62;
  animation: dawn-dusk-palette 22s ease-in-out infinite;
}

.site-sun-aura {
  background:
    radial-gradient(circle at 16% 74%, rgba(255, 194, 110, 0.18), transparent 16%),
    radial-gradient(circle at 50% 52%, rgba(255, 188, 86, 0.10), transparent 22%),
    radial-gradient(circle at 84% 76%, rgba(255, 136, 72, 0.16), transparent 16%);
  filter: blur(34px);
  mix-blend-mode: screen;
  opacity: 0.92;
  animation: sky-cycle 22s ease-in-out infinite reverse;
}

.site-sun-haze {
  background:
    linear-gradient(180deg, rgba(255, 221, 153, 0.08), rgba(255, 166, 83, 0.04) 40%, transparent 78%),
    radial-gradient(34% 18% at 50% 76%, rgba(255, 212, 149, 0.12), transparent 72%);
  filter: blur(18px);
  animation: haze-drift 22s linear infinite;
}

.site-sun-wash {
  background:
    radial-gradient(42% 22% at 50% 18%, rgba(255, 224, 137, 0.34), rgba(255, 198, 94, 0.16) 34%, rgba(255, 165, 77, 0.04) 52%, transparent 72%),
    radial-gradient(96% 60% at 50% 0%, rgba(255, 211, 126, 0.20), transparent 62%);
  filter: blur(38px);
  mix-blend-mode: screen;
  opacity: 0.28;
  animation: sun-wash 22s ease-in-out infinite;
}

.site-sun-dust {
  left: -8%;
  right: -8%;
  top: -4%;
  bottom: -10%;
  background:
    radial-gradient(circle at 12% 26%, rgba(255, 245, 218, 0.22) 0 1.1px, transparent 2.8px),
    radial-gradient(circle at 24% 18%, rgba(255, 230, 177, 0.18) 0 1.3px, transparent 3px),
    radial-gradient(circle at 37% 30%, rgba(255, 240, 198, 0.16) 0 1px, transparent 2.8px),
    radial-gradient(circle at 49% 22%, rgba(255, 238, 194, 0.20) 0 1.4px, transparent 3.2px),
    radial-gradient(circle at 64% 16%, rgba(255, 229, 168, 0.16) 0 1.1px, transparent 3px),
    radial-gradient(circle at 78% 28%, rgba(255, 243, 210, 0.18) 0 1.2px, transparent 3.1px),
    radial-gradient(circle at 88% 18%, rgba(255, 227, 170, 0.16) 0 1px, transparent 2.7px),
    radial-gradient(circle at 18% 42%, rgba(255, 240, 204, 0.14) 0 1.2px, transparent 3.1px),
    radial-gradient(circle at 32% 52%, rgba(255, 232, 184, 0.14) 0 1.1px, transparent 2.8px),
    radial-gradient(circle at 55% 46%, rgba(255, 245, 214, 0.14) 0 1px, transparent 3px),
    radial-gradient(circle at 72% 50%, rgba(255, 231, 176, 0.12) 0 1.2px, transparent 3px);
  background-size: 100% 100%;
  mix-blend-mode: screen;
  opacity: 0.12;
  filter: blur(0.4px);
  animation: dust-drift 26s linear infinite;
}

.site-sun-bloom {
  left: -12%;
  right: -12%;
  top: -28%;
  height: 56%;
  background:
    radial-gradient(52% 120% at 50% 100%, rgba(255, 245, 220, 0.16) 0%, rgba(255, 224, 162, 0.10) 28%, rgba(255, 196, 114, 0.04) 42%, transparent 70%),
    linear-gradient(180deg, rgba(255, 243, 211, 0.08) 0%, rgba(255, 225, 176, 0.03) 36%, transparent 100%);
  mix-blend-mode: screen;
  filter: blur(18px);
  opacity: 0.14;
  transform-origin: center top;
  animation: lens-bloom 22s ease-in-out infinite;
}

.site-sun-orbit {
  position: absolute;
  left: -18%;
  top: 8%;
  width: 136%;
  height: 92%;
  animation: sun-journey 22s cubic-bezier(.42, 0, .22, 1) infinite;
  will-change: transform, opacity, filter;
}

.site-sun {
  position: absolute;
  left: 0;
  top: 58%;
  width: clamp(136px, 16vw, 228px);
  height: clamp(136px, 16vw, 228px);
  border-radius: 50%;
  border: 1px solid rgba(255, 241, 203, 0.18);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.94) 0%, rgba(255, 247, 215, 0.74) 13%, transparent 30%),
    radial-gradient(circle at 58% 68%, rgba(177, 61, 18, 0.26) 0%, transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(255, 245, 209, 0.98) 0%, rgba(255, 216, 124, 0.96) 26%, rgba(255, 169, 63, 0.94) 54%, rgba(221, 96, 26, 0.90) 76%, rgba(118, 40, 9, 0.80) 100%);
  box-shadow:
    0 0 36px rgba(255, 187, 91, 0.32),
    0 0 96px rgba(255, 151, 61, 0.18),
    0 0 180px rgba(255, 118, 41, 0.12);
  filter: saturate(1.04);
  animation: sun-surface 22s ease-in-out infinite;
}

.site-sun::before,
.site-sun::after,
.site-sun-beams,
.site-sun-flare {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.site-sun::before {
  inset: -18%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 235, 164, 0.28) 0deg 7deg,
    rgba(255, 179, 61, 0.06) 7deg 19deg,
    transparent 19deg 30deg
  );
  mask: radial-gradient(circle, transparent 0 60%, #000 66% 100%);
  opacity: 0.42;
  filter: blur(1.5px);
  animation: sun-rays 22s linear infinite;
}

.site-sun::after {
  inset: -10%;
  border: 1px solid rgba(255, 243, 214, 0.12);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.30), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(255, 204, 120, 0.14), transparent 68%);
  box-shadow: inset 0 0 34px rgba(255, 248, 218, 0.08);
}

.site-sun-beams {
  inset: -54%;
  border-radius: 50%;
  transform-origin: center;
  will-change: transform, opacity, filter;
}

.site-sun-beams-back {
  background:
    repeating-conic-gradient(
      from -10deg,
      rgba(255, 228, 149, 0.00) 0deg 6deg,
      rgba(255, 228, 149, 0.34) 6deg 9deg,
      rgba(255, 188, 76, 0.12) 9deg 14deg,
      rgba(255, 171, 70, 0.00) 14deg 24deg
    );
  mask: radial-gradient(circle, transparent 0 23%, rgba(0,0,0,0.96) 40%, transparent 78%);
  filter: blur(7px);
  opacity: 0.34;
  animation: sunbeam-pulse-back 22s linear infinite;
}

.site-sun-beams-front {
  inset: -68%;
  background:
    repeating-conic-gradient(
      from 4deg,
      rgba(255, 245, 194, 0.00) 0deg 8deg,
      rgba(255, 245, 194, 0.55) 8deg 10deg,
      rgba(255, 207, 109, 0.18) 10deg 14deg,
      rgba(255, 180, 77, 0.00) 14deg 28deg
    );
  mask: radial-gradient(circle, transparent 0 17%, rgba(0,0,0,0.96) 34%, transparent 76%);
  filter: blur(10px);
  opacity: 0.20;
  animation: sunbeam-pulse-front 22s linear infinite;
}

.site-sun-flare {
  inset: -92%;
  background:
    radial-gradient(circle, rgba(255, 239, 191, 0.22) 0%, rgba(255, 217, 124, 0.14) 22%, rgba(255, 181, 82, 0.06) 40%, transparent 66%),
    conic-gradient(from 0deg, transparent 0deg 44deg, rgba(255, 231, 175, 0.22) 44deg 46deg, transparent 46deg 134deg, rgba(255, 231, 175, 0.18) 134deg 136deg, transparent 136deg 224deg, rgba(255, 231, 175, 0.22) 224deg 226deg, transparent 226deg 314deg, rgba(255, 231, 175, 0.16) 314deg 316deg, transparent 316deg 360deg);
  mask: radial-gradient(circle, transparent 0 26%, rgba(0,0,0,0.96) 44%, transparent 86%);
  filter: blur(14px);
  opacity: 0.14;
  mix-blend-mode: screen;
  animation: sun-flare 22s ease-in-out infinite;
}

.site-sun-rays-god,
.site-sun-rays-lance,
.site-sun-prism {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.site-sun-rays-god {
  inset: -132%;
  background:
    repeating-conic-gradient(
      from -16deg,
      rgba(255, 244, 205, 0) 0deg 4deg,
      rgba(255, 244, 205, 0.78) 4deg 5.6deg,
      rgba(255, 215, 111, 0.24) 5.6deg 8deg,
      rgba(255, 185, 78, 0) 8deg 18deg
    );
  mask: radial-gradient(circle, transparent 0 10%, rgba(0,0,0,0.98) 18%, rgba(0,0,0,0.94) 34%, transparent 78%);
  filter: blur(11px);
  opacity: 0.12;
  mix-blend-mode: screen;
  animation: god-rays 22s cubic-bezier(.42,0,.22,1) infinite;
}

.site-sun-rays-lance {
  inset: -164%;
  background:
    repeating-conic-gradient(
      from 8deg,
      rgba(255, 247, 211, 0) 0deg 7deg,
      rgba(255, 247, 211, 0.92) 7deg 7.8deg,
      rgba(255, 229, 155, 0.56) 7.8deg 8.6deg,
      rgba(255, 176, 66, 0.16) 8.6deg 10deg,
      rgba(255, 176, 66, 0) 10deg 28deg
    );
  mask: radial-gradient(circle, transparent 0 8%, rgba(0,0,0,0.98) 15%, rgba(0,0,0,0.96) 29%, transparent 76%);
  filter: blur(8px);
  opacity: 0.06;
  mix-blend-mode: screen;
  animation: lance-rays 22s cubic-bezier(.42,0,.22,1) infinite;
}

.site-sun-prism {
  inset: -108%;
  background:
    radial-gradient(circle, rgba(255, 243, 206, 0.22) 0%, rgba(255, 216, 118, 0.14) 24%, rgba(255, 157, 88, 0.08) 42%, transparent 64%),
    conic-gradient(from 0deg, transparent 0deg 58deg, rgba(255, 236, 190, 0.22) 58deg 60deg, transparent 60deg 148deg, rgba(255, 182, 115, 0.18) 148deg 150deg, transparent 150deg 238deg, rgba(255, 231, 184, 0.22) 238deg 240deg, transparent 240deg 328deg, rgba(255, 185, 120, 0.16) 328deg 330deg, transparent 330deg 360deg);
  mask: radial-gradient(circle, transparent 0 26%, rgba(0,0,0,0.98) 42%, transparent 82%);
  filter: blur(18px);
  opacity: 0.08;
  mix-blend-mode: screen;
  animation: prism-bloom 22s ease-in-out infinite;
}

.card,
.featured-card,
.hero-point,
.stat-card,
.preview-card,

.upload-zone,
.empty-state,
.viewer-stage,
.hero-side,
.hero-main,
.info-card {
  position: relative;
  overflow: hidden;
}

.card::after,
.featured-card::after,
.hero-point::after,
.stat-card::after,
.preview-card::after,
.upload-zone::after,
.empty-state::after,
.viewer-stage::after,
.hero-side::after,
.hero-main::after,
.info-card::after {
  content: "";
  position: absolute;
  inset: -22%;
  pointer-events: none;
  background:
    linear-gradient(112deg,
      transparent 0%,
      transparent 36%,
      rgba(255, 247, 214, 0.00) 42%,
      rgba(255, 247, 214, 0.08) 47%,
      rgba(255, 228, 156, 0.30) 50%,
      rgba(255, 246, 217, 0.10) 53%,
      rgba(255, 247, 214, 0.00) 58%,
      transparent 64%,
      transparent 100%);
  transform: translate3d(-46%, 18%, 0) rotate(8deg);
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(8px);
  animation: card-shimmer-peak 22s ease-in-out infinite;
}

.home-page-body .site-sun-scene {
  height: min(46vw, 430px);
}

.home-page-body .site-sun-orbit {
  animation-duration: 20s;
}

.home-page-body .site-sun {
  width: clamp(168px, 20vw, 280px);
  height: clamp(168px, 20vw, 280px);
}

.site-header,
.hero-home,
.section-soft,
.page-shell,
.auth-shell,
.footer {
  position: relative;
  z-index: 1;
}



/* cinematic upgrade */
.site-body {
  --sun-parallax-x: 0px;
  --sun-parallax-y: 0px;
  --sun-parallax-tilt: 0deg;
  --sun-peak-glow: 0;
}

.site-sun-scene,
.site-body::before {
  transform: translate3d(calc(var(--sun-parallax-x) * 0.10), calc(var(--sun-parallax-y) * 0.10), 0);
  transition: transform 260ms ease-out;
}

.site-sun-colorwash {
  transform: translate3d(calc(var(--sun-parallax-x) * -0.16), calc(var(--sun-parallax-y) * -0.08), 0) scale(1.04);
}

.site-sun-aura {
  transform: translate3d(calc(var(--sun-parallax-x) * -0.12), calc(var(--sun-parallax-y) * -0.06), 0) scale(1.02);
}

.site-sun-haze {
  transform: translate3d(calc(var(--sun-parallax-x) * 0.08), calc(var(--sun-parallax-y) * 0.12), 0);
}

.site-sun-wash {
  transform: translate3d(calc(var(--sun-parallax-x) * -0.24), calc(var(--sun-parallax-y) * -0.18), 0) scale(calc(1 + (var(--sun-peak-glow) * 0.08)));
}

.site-sun-dust {
  transform: translate3d(calc(var(--sun-parallax-x) * 0.18), calc(var(--sun-parallax-y) * 0.26), 0) scale(calc(1 + (var(--sun-peak-glow) * 0.02)));
}

.site-sun-bloom {
  transform: translate3d(calc(var(--sun-parallax-x) * -0.3), calc(var(--sun-parallax-y) * -0.22), 0) scale(calc(1 + (var(--sun-peak-glow) * 0.06)));
}

.site-sun-orbit {
  transform-origin: center;
}

.site-sun {
  transform: translate3d(calc(var(--sun-parallax-x) * -0.22), calc(var(--sun-parallax-y) * -0.18), 0) rotate(var(--sun-parallax-tilt));
  transition: transform 320ms cubic-bezier(.22,.61,.36,1), filter 220ms ease, box-shadow 220ms ease;
}

.site-sun-rays-god {
  inset: -192%;
  filter: blur(14px);
}

.site-sun-rays-lance {
  inset: -242%;
  filter: blur(10px);
}

.site-sun-flare {
  inset: -126%;
}

.site-sun-prism {
  inset: -128%;
}

.btn,
button,
.btn-primary,
.nav-cta {
  position: relative;
  overflow: hidden;
}

.btn-primary::before,
.nav-cta::before,
button::before {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 240, 194, calc(0.08 + var(--sun-peak-glow) * 0.26)) 0%, rgba(255, 208, 112, calc(0.04 + var(--sun-peak-glow) * 0.18)) 36%, transparent 70%);
  opacity: calc(0.16 + var(--sun-peak-glow) * 0.82);
  filter: blur(calc(10px + var(--sun-peak-glow) * 12px));
  mix-blend-mode: screen;
  transform: scale(calc(0.96 + var(--sun-peak-glow) * 0.1));
  transition: opacity .25s ease, filter .25s ease, transform .25s ease;
}

.btn-primary::after,
.nav-cta::after,
button::after {
  content: "";
  position: absolute;
  inset: -120% 18%;
  pointer-events: none;
  background: linear-gradient(110deg,
    transparent 0%,
    transparent 42%,
    rgba(255,255,255,0.00) 46%,
    rgba(255,250,232,calc(var(--sun-peak-glow) * 0.18)) 50%,
    rgba(255,255,255,0.00) 54%,
    transparent 100%);
  transform: translate3d(-120%, 0, 0) rotate(12deg);
  opacity: calc(var(--sun-peak-glow) * 0.9);
  animation: button-peak-shimmer 22s ease-in-out infinite;
}

@keyframes sun-journey {
  0% {
    transform: translate3d(-8%, 66%, 0) scale(0.76);
    opacity: 0.05;
    filter: blur(4px) saturate(0.88) brightness(0.92);
  }
  8% {
    transform: translate3d(4%, 52%, 0) scale(0.82);
    opacity: 0.48;
    filter: blur(2.6px) saturate(1);
  }
  18% {
    transform: translate3d(18%, 26%, 0) scale(0.9);
    opacity: 0.92;
    filter: blur(1.2px) saturate(1.08);
  }
  32% {
    transform: translate3d(34%, 2%, 0) scale(0.97);
    opacity: 1;
    filter: blur(0.45px) saturate(1.12) brightness(1.02);
  }
  50% {
    transform: translate3d(50%, -46%, 0) scale(1.12);
    opacity: 1;
    filter: blur(0) saturate(1.18) brightness(1.08);
  }
  68% {
    transform: translate3d(66%, 0%, 0) scale(0.98);
    opacity: 0.98;
    filter: blur(0.5px) saturate(1.08) brightness(1.01);
  }
  82% {
    transform: translate3d(82%, 28%, 0) scale(0.9);
    opacity: 0.9;
    filter: blur(1.4px) saturate(1.02);
  }
  92% {
    transform: translate3d(96%, 52%, 0) scale(0.82);
    opacity: 0.46;
    filter: blur(2.6px) saturate(0.96);
  }
  100% {
    transform: translate3d(108%, 66%, 0) scale(0.76);
    opacity: 0.05;
    filter: blur(4px) saturate(0.88) brightness(0.92);
  }
}

@keyframes page-radiance {
  0%,
  100% {
    opacity: 0.18;
    filter: saturate(0.92) brightness(0.88);
  }
  14%,
  86% {
    opacity: 0.38;
    filter: saturate(1.06) brightness(0.98);
  }
  50% {
    opacity: 0.88;
    filter: saturate(1.18) brightness(1.08);
  }
}

@keyframes sun-wash {
  0%,
  100% {
    opacity: 0.16;
    transform: scale(0.88) translateY(20px);
  }
  15%,
  85% {
    opacity: 0.34;
    transform: scale(1.02) translateY(6px);
  }
  50% {
    opacity: 1;
    transform: scale(1.26) translateY(-16px);
  }
}

@keyframes sunbeam-pulse-back {
  0%,
  100% {
    transform: rotate(0deg) scale(0.86);
    opacity: 0.08;
  }
  12%,
  88% {
    transform: rotate(120deg) scale(0.96);
    opacity: 0.34;
  }
  50% {
    transform: rotate(180deg) scale(1.46);
    opacity: 0.92;
  }
}

@keyframes sunbeam-pulse-front {
  0%,
  100% {
    transform: rotate(360deg) scale(0.82);
    opacity: 0.06;
  }
  16%,
  84% {
    transform: rotate(220deg) scale(1);
    opacity: 0.26;
  }
  50% {
    transform: rotate(180deg) scale(1.58);
    opacity: 0.86;
  }
}

@keyframes sun-flare {
  0%,
  100% {
    transform: scale(0.82);
    opacity: 0.02;
  }
  20%,
  80% {
    transform: scale(0.98);
    opacity: 0.14;
  }
  50% {
    transform: scale(1.34);
    opacity: 0.62;
  }
}

@keyframes sun-rays {
  from {
    transform: rotate(0deg) scale(1);
    opacity: 0.34;
  }
  50% {
    transform: rotate(180deg) scale(1.05);
    opacity: 0.52;
  }
  to {
    transform: rotate(360deg) scale(1);
    opacity: 0.34;
  }
}

@keyframes sky-cycle {
  0%,
  100% {
    opacity: 0.68;
    filter: saturate(0.92) hue-rotate(-8deg) brightness(0.84);
  }
  18%,
  82% {
    opacity: 1;
    filter: saturate(1.1) hue-rotate(0deg) brightness(1.02);
  }
  50% {
    opacity: 0.88;
    filter: saturate(0.94) hue-rotate(8deg) brightness(1.08);
  }
}

@keyframes haze-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.62;
  }
  50% {
    transform: translate3d(0, -8px, 0) scale(1.04);
    opacity: 0.96;
  }
}

@keyframes horizon-glow {
  0%,
  100% {
    opacity: 0.18;
    transform: scaleX(0.94);
  }
  14%,
  86% {
    opacity: 0.82;
    transform: scaleX(1.02);
  }
  50% {
    opacity: 0.30;
    transform: scaleX(1);
  }
}

@keyframes sun-surface {
  0%,
  100% {
    box-shadow:
      0 0 28px rgba(255, 176, 83, 0.18),
      0 0 72px rgba(255, 143, 54, 0.10),
      0 0 128px rgba(255, 114, 39, 0.06);
  }
  16%,
  84% {
    box-shadow:
      0 0 42px rgba(255, 188, 88, 0.34),
      0 0 112px rgba(255, 151, 61, 0.18),
      0 0 196px rgba(255, 118, 41, 0.12);
  }
  50% {
    box-shadow:
      0 0 56px rgba(255, 222, 145, 0.54),
      0 0 168px rgba(255, 201, 112, 0.38),
      0 0 320px rgba(255, 166, 64, 0.24),
      0 0 520px rgba(255, 214, 122, 0.16);
  }
}

@keyframes dawn-dusk-palette {
  0%,
  100% {
    opacity: 0.88;
    filter: blur(28px) saturate(1.22) hue-rotate(-16deg);
  }
  12%,
  88% {
    opacity: 0.72;
    filter: blur(26px) saturate(1.1) hue-rotate(-8deg);
  }
  50% {
    opacity: 0.24;
    filter: blur(24px) saturate(0.9) hue-rotate(12deg);
  }
}

@keyframes god-rays {
  0%,
  100% {
    transform: rotate(-14deg) scale(0.82);
    opacity: 0.03;
    filter: blur(16px);
  }
  12%,
  88% {
    transform: rotate(52deg) scale(1.08);
    opacity: 0.2;
    filter: blur(14px);
  }
  50% {
    transform: rotate(118deg) scale(2.42);
    opacity: 1;
    filter: blur(9px);
  }
}

@keyframes lance-rays {
  0%,
  100% {
    transform: rotate(18deg) scale(0.68);
    opacity: 0.02;
  }
  15%,
  85% {
    transform: rotate(162deg) scale(0.98);
    opacity: 0.16;
  }
  50% {
    transform: rotate(194deg) scale(2.62);
    opacity: 0.84;
  }
}

@keyframes prism-bloom {
  0%,
  100% {
    transform: scale(0.84);
    opacity: 0.04;
  }
  16%,
  84% {
    transform: scale(1);
    opacity: 0.12;
  }
  50% {
    transform: scale(1.48);
    opacity: 0.42;
  }
}

@keyframes card-shimmer-peak {
  0%,
  100% {
    transform: translate3d(-52%, 22%, 0) rotate(8deg);
    opacity: 0;
  }
  17%,
  38%,
  62%,
  83% {
    opacity: 0;
  }
  44% {
    transform: translate3d(-18%, 10%, 0) rotate(8deg);
    opacity: 0.12;
  }
  50% {
    transform: translate3d(8%, 0%, 0) rotate(8deg);
    opacity: 0.5;
  }
  56% {
    transform: translate3d(34%, -12%, 0) rotate(8deg);
    opacity: 0.14;
  }
}



@keyframes button-peak-shimmer {
  0%,
  100% {
    transform: translate3d(-120%, 0, 0) rotate(12deg);
    opacity: 0;
  }
  41%,
  46%,
  54%,
  59% {
    opacity: 0;
  }
  50% {
    transform: translate3d(118%, 0, 0) rotate(12deg);
    opacity: calc(var(--sun-peak-glow) * 0.95);
  }
}


@keyframes dust-drift {
  0%,
  100% {
    transform: translate3d(-1%, 2%, 0) scale(1);
    opacity: 0.08;
    filter: blur(0.4px);
  }
  18% {
    opacity: 0.16;
  }
  50% {
    transform: translate3d(1.8%, -2.4%, 0) scale(1.04);
    opacity: 0.26;
    filter: blur(0.2px);
  }
  82% {
    opacity: 0.15;
  }
}

@keyframes lens-bloom {
  0%,
  100% {
    opacity: 0.08;
    filter: blur(16px) brightness(0.96);
  }
  15%,
  85% {
    opacity: 0.16;
    filter: blur(18px) brightness(1);
  }
  50% {
    opacity: 0.34;
    filter: blur(24px) brightness(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-body::before,
  .site-sun-scene,
  .site-sun-orbit,
  .site-sun::before,
  .site-sun-wash,
  .site-sun-beams,
  .site-sun-flare,
  .site-sun-colorwash,
  .site-sun-rays-god,
  .site-sun-rays-lance,
  .site-sun-prism,
  .site-sun-dust,
  .site-sun-bloom,
  .card::after,
  .featured-card::after,
  .hero-point::after,
  .stat-card::after,
  .preview-card::after,
  .audit-item::after,
  .upload-zone::after,
  .empty-state::after,
  .viewer-stage::after,
  .hero-side::after,
  .hero-main::after,
  .info-card::after,
  .btn-primary::after,
  .nav-cta::after,
  button::after {
    animation: none;
  }

  .site-body::before {
    opacity: 0.28;
  }

  .site-sun-orbit {
    transform: translate3d(50%, -18%, 0);
    opacity: 0.92;
  }

  .site-sun-wash,
  .site-sun-beams-back,
  .site-sun-colorwash,
  .site-sun-rays-god {
    opacity: 0.28;
  }

  .site-sun-beams-front,
  .site-sun-flare,
  .site-sun-rays-lance,
  .site-sun-prism,
  .site-sun-dust,
  .site-sun-bloom,
  .card::after,
  .featured-card::after,
  .hero-point::after,
  .stat-card::after,
  .preview-card::after,
  .audit-item::after,
  .upload-zone::after,
  .empty-state::after,
  .viewer-stage::after,
  .hero-side::after,
  .hero-main::after,
  .info-card::after {
    opacity: 0.1;
  }
}

@media (max-width: 980px) {
  .site-sun-scene {
    inset: 92px 0 auto;
    height: 280px;
  }

  .site-sun-orbit {
    left: -26%;
    width: 152%;
  }
}

@media (max-width: 720px) {
  .site-sun-scene {
    inset: 108px 0 auto;
    height: 210px;
    opacity: 0.74;
  }

  .site-sun-orbit {
    left: -34%;
    top: 14%;
    width: 172%;
    height: 88%;
    animation-duration: 18s;
  }

  .site-sun {
    width: 124px;
    height: 124px;
  }
}