:root {
	--bg: #000000;
	--bg-elev: #0a0a0a;
	--panel: rgba(255, 255, 255, 0.04);
	--panel-2: rgba(255, 255, 255, 0.06);
	--ink: #ffffff;
	--mute: rgba(255, 255, 255, 0.55);
	--faint: rgba(255, 255, 255, 0.28);
	--line: rgba(255, 255, 255, 0.1);
	--accent: #ffffff;
	--accent-ink: #0a0a0a;
	--accent-soft: rgba(255, 255, 255, 0.12);
	--accent-glow: rgba(255, 255, 255, 0.28);
	--radius: 16px;
	--radius-sm: 12px;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--safe-b: env(safe-area-inset-bottom, 0px);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--t-fast: 160ms;
	--t: 240ms;
	--t-slow: 420ms;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-height: 100%;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

body {
	min-height: 100dvh;
}

a {
	color: inherit;
}

button,
input,
textarea {
	font: inherit;
	color: inherit;
}

.app {
	min-height: 100dvh;
}

/* ── landing (guns.lol-ish) ── */
.land {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background:
		radial-gradient(ellipse 80% 50% at 50% -5%, rgba(255, 255, 255, 0.22), transparent 55%),
		radial-gradient(ellipse 50% 40% at 15% 90%, rgba(255, 255, 255, 0.06), transparent 50%),
		#000;
}

.land-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
}

.mark {
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: -0.03em;
	text-decoration: none;
	transition: color var(--t-fast) var(--ease), transform var(--t) var(--ease);
}

.mark:hover {
	transform: translateY(-1px);
}

.mark span,
.land-brand span {
	color: var(--accent);
}

.land-nav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 18px;
	border-radius: 12px;
	border: 1px solid transparent;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	cursor: pointer;
	transition:
		opacity var(--t-fast) var(--ease),
		background var(--t) var(--ease),
		border-color var(--t) var(--ease),
		transform var(--t) var(--ease),
		box-shadow var(--t) var(--ease),
		filter var(--t) var(--ease);
}

.btn:hover {
	box-shadow: 0 8px 22px rgba(255, 255, 255, 0.22);
	filter: brightness(1.05);
}

.btn:active {
	transform: translateY(0) scale(0.97);
	box-shadow: 0 4px 12px rgba(255, 255, 255, 0.18);
}

.btn-ghost {
	background: transparent;
	border-color: var(--line);
	color: var(--ink);
	box-shadow: none;
	filter: none;
}

.btn-ghost:hover {
	background: var(--panel);
	border-color: rgba(255, 255, 255, 0.45);
	opacity: 1;
	box-shadow: 0 8px 24px rgba(255, 255, 255, 0.1);
	filter: none;
}

.land-hero {
	flex: 1;
	display: grid;
	place-content: center;
	justify-items: center;
	text-align: center;
	gap: 16px;
	padding: 48px 24px 40px;
	max-width: 760px;
	margin: 0 auto;
	animation: fade-up 0.5s ease both;
}

.land-brand {
	margin: 0;
	font-weight: 700;
	font-size: clamp(3.2rem, 12vw, 5.6rem);
	line-height: 1;
	letter-spacing: -0.05em;
}

.land-lead {
	margin: 0;
	max-width: 28rem;
	color: var(--mute);
	font-size: 1.05rem;
}

.land-cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}

.land-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px 24px;
	width: min(640px, calc(100% - 48px));
	margin: 0 auto 64px;
}

.stat {
	padding: 8px 4px;
	text-align: center;
	border-radius: 14px;
	transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}

.stat:hover {
	transform: translateY(-3px);
	background: rgba(255, 255, 255, 0.06);
}

.stat strong {
	display: block;
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	color: var(--accent);
}

.stat span {
	display: block;
	margin-top: 2px;
	font-size: 0.8rem;
	color: var(--mute);
}

.land-plans {
	width: min(860px, calc(100% - 48px));
	margin: 0 auto 72px;
	padding: 8px 0 0;
}

.land-plans-head {
	text-align: center;
	margin-bottom: 28px;
}

.land-plans-kicker {
	margin: 0 0 8px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mute);
}

.land-plans-head h2 {
	margin: 0;
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	font-weight: 600;
	letter-spacing: -0.03em;
}

.land-plans-lead {
	margin: 10px auto 0;
	max-width: 28rem;
	color: var(--mute);
	font-size: 0.98rem;
}

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

.land-plan {
	display: grid;
	gap: 14px;
	padding: 24px 22px 22px;
	border-radius: 20px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.03);
	align-content: start;
	transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.land-plan:hover {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.05);
}

.land-plan-pro {
	border-color: rgba(255, 255, 255, 0.35);
	background:
		radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255, 255, 255, 0.1), transparent 55%),
		rgba(255, 255, 255, 0.05);
}

.land-plan-badge {
	margin: 0;
	width: fit-content;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
}

.land-plan-name {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.land-plan-price {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.land-plan-price strong {
	font-size: clamp(2rem, 5vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
}

.land-plan-price span {
	color: var(--mute);
	font-size: 0.92rem;
	font-weight: 500;
}

.land-plan-local {
	margin: -6px 0 0;
	color: var(--mute);
	font-size: 0.95rem;
	font-weight: 500;
}

.land-plan-feats {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.land-plan-feats li {
	position: relative;
	padding-left: 18px;
	color: var(--mute);
	font-size: 0.92rem;
	line-height: 1.4;
}

.land-plan-feats li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	opacity: 0.85;
}

.land-plan-cta {
	margin-top: 8px;
	width: 100%;
}

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

.land-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	justify-content: space-between;
	padding: 16px 24px calc(16px + var(--safe-b));
	color: var(--faint);
	font-size: 0.8rem;
}

.land-foot a {
	color: var(--mute);
	text-decoration: none;
}

.land-foot a:hover {
	color: var(--accent);
}

/* ── dashboard (guns.lol-like) ── */
.ico {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
}

.dash {
	min-height: 100dvh;
	display: grid;
	grid-template-columns: 268px 1fr;
	background:
		radial-gradient(ellipse 50% 40% at 80% 0%, rgba(255, 255, 255, 0.08), transparent 50%),
		#000;
	font-size: 15px;
}

.dash-backdrop {
	display: none;
}

.dash-side {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 14px calc(14px + var(--safe-b));
	border-right: 1px solid var(--line);
	background: #070707;
	position: sticky;
	top: 0;
	height: 100dvh;
	overflow: auto;
}

.dash-side-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 8px;
}

.dash-mark {
	font-size: 1.2rem;
	font-weight: 600;
}

.dash-close {
	display: none;
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--mute);
	padding: 8px;
	cursor: pointer;
}

.dash-close .ico {
	width: 22px;
	height: 22px;
}

.dash-search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 12px;
	min-height: 42px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.03);
	color: var(--faint);
	transition:
		border-color var(--t) var(--ease),
		background var(--t) var(--ease),
		box-shadow var(--t) var(--ease);
}

.dash-search:hover {
	border-color: rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.04);
}

.dash-search .ico {
	width: 18px;
	height: 18px;
}

.dash-search input {
	flex: 1;
	border: 0;
	background: transparent;
	min-height: 40px;
	outline: none;
	font-size: 0.92rem;
	color: var(--mute);
}

.dash-kbd {
	font-size: 0.78rem;
	font-weight: 500;
	padding: 4px 8px;
	border-radius: 8px;
	border: 1px solid var(--line);
	color: var(--faint);
}

.dash-nav {
	display: grid;
	gap: 6px;
}

.dash-nav-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 12px;
	border-radius: 12px;
	color: var(--mute);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.95rem;
	letter-spacing: -0.01em;
	transition:
		background var(--t) var(--ease),
		color var(--t) var(--ease),
		box-shadow var(--t) var(--ease);
}

.dash-nav-item .ico {
	width: 20px;
	height: 20px;
}

.dash-nav-item:hover {
	background: rgba(255, 255, 255, 0.04);
	color: var(--ink);
}

.dash-nav-item.is-active {
	background: var(--accent-soft);
	color: var(--accent);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.dash-side-actions {
	display: grid;
	gap: 10px;
	margin-top: auto;
	padding-top: 16px;
}

.dash-side-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 12px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.02);
	color: var(--ink);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.92rem;
	transition:
		border-color var(--t) var(--ease),
		background var(--t) var(--ease),
		box-shadow var(--t) var(--ease);
}

.dash-side-btn .ico {
	width: 18px;
	height: 18px;
}

.dash-side-btn:hover {
	border-color: rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.06);
}

.dash-share {
	width: 100%;
	border-radius: 12px;
	min-height: 44px;
	font-size: 0.95rem;
	font-weight: 600;
	gap: 8px;
}

.dash-share .ico {
	width: 18px;
	height: 18px;
}

.dash-user {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 10px;
	border-radius: 14px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.03);
	transition:
		border-color var(--t) var(--ease),
		background var(--t) var(--ease);
}

.dash-user:hover {
	border-color: rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.05);
}

.dash-avatar,
.dash-avatar.avatar-fallback {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, 0.5);
	font-size: 1rem;
	font-weight: 600;
}

.dash-user-meta {
	display: grid;
	min-width: 0;
}

.dash-user-meta strong {
	font-size: 0.95rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dash-user-meta span {
	font-size: 0.8rem;
	color: var(--mute);
	font-weight: 500;
}

.dash-user-more {
	color: var(--mute);
	text-decoration: none;
	padding: 4px 8px;
	font-size: 1.15rem;
	font-weight: 600;
}

.dash-main {
	min-width: 0;
	padding: 28px 28px calc(36px + var(--safe-b));
}

.dash-mobile-bar {
	display: none;
}

.dash-page {
	display: grid;
	gap: 22px;
	max-width: 1100px;
	animation: dash-in var(--t-slow) var(--ease-out) both;
}

@keyframes dash-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.dash-page-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 18px;
}

.dash-page-head h1 {
	margin: 0;
	font-size: clamp(1.7rem, 3.2vw, 2.1rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.dash-page-head .btn {
	min-height: 42px;
	padding: 0 16px;
	font-size: 0.92rem;
	font-weight: 600;
	border-radius: 12px;
}

.dash-kicker {
	margin: 0 0 6px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
}

.dash-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.dash-section-head h2,
.dash-card > h2 {
	margin: 0 0 12px;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

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

.ov-card {
	padding: 16px;
	border-radius: 16px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.03);
	animation: dash-in var(--t-slow) var(--ease-out) both;
	transition:
		border-color var(--t) var(--ease),
		background var(--t) var(--ease),
		box-shadow var(--t) var(--ease);
}

.ov-card:nth-child(1) {
	animation-delay: 40ms;
}
.ov-card:nth-child(2) {
	animation-delay: 90ms;
}
.ov-card:nth-child(3) {
	animation-delay: 140ms;
}
.ov-card:nth-child(4) {
	animation-delay: 190ms;
}

.ov-card:hover {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.06);
}

.ov-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--mute);
	font-size: 0.85rem;
	font-weight: 500;
	margin-bottom: 10px;
}

.ov-top .ico {
	width: 18px;
	height: 18px;
	transition: color var(--t) var(--ease);
}

.ov-card:hover .ov-top .ico {
	color: var(--accent);
}

.ov-card strong {
	display: block;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	word-break: break-word;
	line-height: 1.2;
}

.ov-sub {
	font-size: 0.9rem;
	color: var(--mute);
	font-weight: 500;
}

.ov-card p {
	margin: 8px 0 0;
	font-size: 0.85rem;
	color: var(--mute);
	font-weight: 500;
}

.ov-card a {
	color: var(--accent);
	text-decoration: none;
	font-weight: 500;
}

.dash-split {
	display: grid;
	grid-template-columns: 1.4fr 0.9fr;
	gap: 18px;
	align-items: start;
}

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

.dash-card {
	padding: 18px;
	border-radius: 18px;
	border: 1px solid var(--line);
	background: rgba(12, 12, 12, 0.75);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	transition:
		border-color var(--t) var(--ease),
		box-shadow var(--t) var(--ease),
		background var(--t) var(--ease);
}

.dash-card:hover {
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(14, 14, 14, 0.85);
}

.completion-top {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.95rem;
	font-weight: 500;
	margin-bottom: 12px;
}

.completion-top strong {
	color: var(--accent);
	font-size: 1.05rem;
	font-weight: 600;
}

.completion-bar {
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	overflow: hidden;
}

.completion-bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #ffffff, #d0d0d0);
	box-shadow: 0 0 16px var(--accent-glow);
	transform-origin: left center;
	animation: bar-fill 0.7s var(--ease-out) both;
}

@keyframes bar-fill {
	from {
		transform: scaleX(0.15);
		opacity: 0.5;
	}
	to {
		transform: scaleX(1);
		opacity: 1;
	}
}

.completion-warn,
.completion-ok {
	margin: 12px 0;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: 0.9rem;
	font-weight: 500;
}

.completion-warn {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: var(--accent);
}

.completion-ok {
	background: rgba(120, 220, 160, 0.08);
	border: 1px solid rgba(120, 220, 160, 0.25);
	color: #9be7b8;
}

.completion-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.completion-item {
	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(--mute);
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 500;
	transition:
		border-color var(--t) var(--ease),
		background var(--t) var(--ease),
		color var(--t) var(--ease);
}

.completion-item:hover {
	border-color: rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.08);
	color: var(--ink);
}

.completion-item.is-done {
	border-color: rgba(120, 220, 160, 0.35);
	color: #9be7b8;
}

.completion-item.is-done:hover {
	border-color: rgba(120, 220, 160, 0.55);
	background: rgba(120, 220, 160, 0.1);
	color: #b6f0cb;
}

.completion-ico {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
}

.completion-item .ico {
	width: 18px;
	height: 18px;
}

.manage-list {
	display: grid;
	gap: 10px;
}

.manage-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 11px 14px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.03);
	color: var(--ink);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.95rem;
	letter-spacing: -0.01em;
	transition:
		border-color var(--t) var(--ease),
		background var(--t) var(--ease);
}

.manage-btn .ico {
	width: 20px;
	height: 20px;
}

.manage-btn:hover {
	border-color: rgba(255, 255, 255, 0.5);
	background: var(--accent-soft);
}

.manage-btn:active {
	background: rgba(255, 255, 255, 0.12);
}

.manage-btn.is-connected em {
	margin-left: auto;
	font-style: normal;
	font-size: 0.88rem;
	color: #9be7b8;
	font-weight: 600;
}

.dash-form {
	display: grid;
	gap: 20px;
}

.panel-lead {
	margin: 0;
	color: var(--mute);
	font-size: 0.9rem;
	font-weight: 500;
}

.field {
	display: grid;
	gap: 8px;
}

.field label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--faint);
}

.field input,
.field textarea,
.link-row input {
	width: 100%;
	min-height: 42px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(0, 0, 0, 0.45);
	outline: none;
	font-size: 15px;
	font-weight: 500;
}

.field textarea {
	min-height: 110px;
	resize: vertical;
}

.field input,
.field textarea,
.link-row input,
.handle-row {
	transition:
		border-color var(--t) var(--ease),
		box-shadow var(--t) var(--ease),
		transform var(--t) var(--ease),
		background var(--t) var(--ease);
}

.field input:hover,
.field textarea:hover,
.link-row input:hover,
.handle-row:hover {
	border-color: rgba(255, 255, 255, 0.22);
}

.field input:focus,
.field textarea:focus,
.link-row input:focus,
.handle-row:focus-within {
	border-color: rgba(255, 255, 255, 0.55);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.avatar-row {
	display: flex;
	gap: 14px;
	align-items: center;
}

.handle-row {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	min-height: 42px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(0, 0, 0, 0.45);
}

.handle-row span {
	color: var(--mute);
	font-weight: 500;
	font-size: 0.95rem;
}

.handle-row input {
	border: 0;
	background: transparent;
	min-height: 40px;
	padding: 0;
	box-shadow: none;
}

.links-editor {
	display: grid;
	gap: 12px;
}

.link-row {
	display: grid;
	grid-template-columns: 1fr 1.35fr auto;
	gap: 10px;
}

.link-row .icon-btn {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: transparent;
	cursor: pointer;
	color: var(--mute);
	font-size: 1.15rem;
	font-weight: 600;
	transition:
		color var(--t) var(--ease),
		border-color var(--t) var(--ease),
		background var(--t) var(--ease);
}

.link-row .icon-btn:hover {
	color: #ff8aa8;
	border-color: rgba(255, 138, 168, 0.4);
	background: rgba(255, 138, 168, 0.08);
}

.panel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.panel-actions .btn {
	min-height: 42px;
	padding: 0 16px;
	font-size: 0.92rem;
	font-weight: 600;
	border-radius: 12px;
}

.toast {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--accent);
}

.err {
	font-size: 0.9rem;
	font-weight: 500;
	color: #ff8aa8;
}

.avatar-preview {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	background: #111;
	border: 2px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 14px var(--accent-soft);
	flex: 0 0 auto;
}

.avatar-fallback {
	display: grid;
	place-items: center;
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--accent);
	background: #111;
}

.btn-sm {
	min-height: 36px;
	padding: 0 14px;
	font-size: 0.95rem;
	font-weight: 500;
}

.dash #add-link {
	min-height: 52px;
	font-size: 1.05rem;
	font-weight: 600;
	border-radius: 14px;
}

/* ── public profile (guns.lol card) ── */
.profile {
	min-height: 100dvh;
	display: grid;
	place-items: center;
	align-content: center;
	justify-items: center;
	gap: 18px;
	padding: 40px 16px calc(36px + var(--safe-b));
	background:
		radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255, 255, 255, 0.2), transparent 55%),
		radial-gradient(ellipse 40% 30% at 80% 100%, rgba(255, 255, 255, 0.08), transparent 50%),
		#000;
}

.profile-card {
	width: min(380px, 100%);
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 32px 20px 24px;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(8, 8, 8, 0.55);
	-webkit-backdrop-filter: blur(28px) saturate(160%);
	backdrop-filter: blur(28px) saturate(160%);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.05) inset,
		0 30px 80px rgba(0, 0, 0, 0.65),
		0 0 60px rgba(255, 255, 255, 0.1);
	text-align: center;
	animation: fade-up 0.45s var(--ease-out) both;
	transition:
		transform var(--t) var(--ease),
		box-shadow var(--t) var(--ease),
		border-color var(--t) var(--ease);
}

.profile-card:hover {
	transform: translateY(-6px);
	border-color: rgba(255, 255, 255, 0.35);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.08) inset,
		0 36px 90px rgba(0, 0, 0, 0.7),
		0 0 70px rgba(255, 255, 255, 0.16);
}

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.profile-avatar,
.profile-avatar-fallback {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	border: 2px solid var(--accent);
	box-shadow:
		0 0 0 4px rgba(255, 255, 255, 0.12),
		0 0 32px var(--accent-glow);
}

.profile-avatar {
	object-fit: cover;
	background: #111;
}

.profile-avatar-fallback {
	display: grid;
	place-items: center;
	background: #111;
	font-weight: 500;
	font-size: 2rem;
	color: var(--accent);
}

.profile-name {
	margin: 8px 0 0;
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.03em;
}

.profile-handle {
	margin: 0;
	color: var(--mute);
	font-size: 0.9rem;
}

.profile-bio {
	margin: 4px 0 0;
	max-width: 28em;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9rem;
	white-space: pre-wrap;
}

.link-tree {
	width: 100%;
	display: grid;
	gap: 10px;
	margin-top: 16px;
}

.link-item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	text-align: center;
	transition:
		transform var(--t) var(--ease),
		background var(--t) var(--ease),
		border-color var(--t) var(--ease),
		box-shadow var(--t) var(--ease),
		color var(--t) var(--ease);
}

.link-item:hover {
	transform: translateY(-4px) scale(1.01);
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.7);
	box-shadow: 0 16px 36px rgba(255, 255, 255, 0.16);
	color: #fff;
}

.link-item:active {
	transform: translateY(-1px) scale(0.99);
}

.profile-empty {
	margin: 8px 0 0;
	color: var(--mute);
	font-size: 0.9rem;
}

.profile-foot {
	margin-top: 18px;
	font-size: 0.75rem;
	color: var(--faint);
}

.profile-foot a {
	color: var(--accent);
	text-decoration: none;
	font-weight: 600;
}

.missing {
	min-height: 100dvh;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 12px;
	padding: 24px;
	text-align: center;
	background: #000;
}

.missing h1 {
	margin: 0;
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: -0.03em;
}

.missing p {
	margin: 0;
	color: var(--mute);
}

@media (max-width: 1100px) {
	.ov-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dash-split {
		grid-template-columns: 1fr;
	}
}

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

	.dash-side {
		position: fixed;
		inset: 0 auto 0 0;
		width: min(340px, 90vw);
		z-index: 40;
		transform: translateX(-105%);
		transition: transform 0.2s ease;
		box-shadow: 24px 0 60px rgba(0, 0, 0, 0.55);
	}

	.dash-side.is-open {
		transform: none;
	}

	.dash-close {
		display: grid;
	}

	.dash-backdrop:not([hidden]) {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 30;
		background: rgba(0, 0, 0, 0.55);
	}

	.dash-main {
		padding: 0 18px calc(32px + var(--safe-b));
	}

	.dash-mobile-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: sticky;
		top: 0;
		z-index: 20;
		padding: 14px 0;
		margin-bottom: 10px;
		background: rgba(0, 0, 0, 0.9);
		backdrop-filter: blur(10px);
	}

	.dash-mobile-bar .mark {
		font-size: 1.2rem;
		font-weight: 600;
	}

	.dash-menu-btn {
		appearance: none;
		border: 1px solid var(--line);
		background: transparent;
		color: var(--ink);
		border-radius: 14px;
		width: 48px;
		height: 48px;
		display: grid;
		place-items: center;
		cursor: pointer;
	}

	.dash-menu-btn .ico {
		width: 26px;
		height: 26px;
	}

	.dash-page-head {
		align-items: start;
		flex-direction: column;
	}
}

@media (max-width: 640px) {
	.land-stats {
		grid-template-columns: 1fr;
		width: min(400px, calc(100% - 32px));
	}

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

	.link-row {
		grid-template-columns: 1fr;
	}

	.link-row .icon-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── appearance editor ── */
.dash-nav-group {
	margin: 14px 8px 6px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--faint);
}

.dash-has-preview .dash-main {
	max-width: none;
}

.dash-page-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 22px;
	align-items: start;
	max-width: none;
}

.dash-editor-col {
	display: grid;
	gap: 18px;
	min-width: 0;
}

.dash-preview-col {
	position: sticky;
	top: 24px;
	padding: 16px;
	border-radius: 22px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.03);
}

.dash-preview-head {
	display: grid;
	gap: 2px;
	margin-bottom: 16px;
}

.dash-preview-head strong {
	font-size: 1.05rem;
	font-weight: 600;
}

.dash-preview-head span {
	color: var(--mute);
	font-size: 0.88rem;
}

.ap-preview-stage {
	min-height: 360px;
	display: grid;
	place-items: center;
	padding: 20px 8px;
	border-radius: 18px;
	background: var(--ap-theme, #000);
	overflow: hidden;
}

.ap-preview-stage .profile-card {
	width: min(300px, 100%);
	pointer-events: auto;
}

.ap-preview-stage .link-item {
	pointer-events: none;
}

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

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

.ap-pick {
	appearance: none;
	display: grid;
	gap: 6px;
	justify-items: start;
	text-align: left;
	padding: 12px;
	border-radius: 14px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.03);
	color: var(--ink);
	cursor: pointer;
	transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.ap-pick:hover {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.05);
}

.ap-pick.is-on {
	border-color: rgba(255, 255, 255, 0.7);
	background: var(--accent-soft);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.ap-pick strong {
	font-size: 0.98rem;
	font-weight: 600;
}

.ap-pick em {
	font-style: normal;
	color: var(--mute);
	font-size: 0.82rem;
}

.ap-pick-visual {
	width: 100%;
	height: 72px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: #0a0a0a;
	position: relative;
	overflow: hidden;
}

.ap-layout-floating::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 10px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--accent);
	transform: translateX(-50%);
}
.ap-layout-floating::after {
	content: "";
	position: absolute;
	left: 16%;
	right: 16%;
	bottom: 12px;
	height: 34px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
}

.ap-layout-stacked::before {
	content: "";
	position: absolute;
	inset: 12px 18px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
}
.ap-layout-stacked::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 22px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--accent);
	transform: translateX(-50%);
}

.ap-layout-compact::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 50%;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--accent);
	transform: translateY(-50%);
}
.ap-layout-compact::after {
	content: "";
	position: absolute;
	left: 40px;
	right: 14px;
	top: 50%;
	height: 28px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
	transform: translateY(-50%);
}

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

.ap-preset {
	appearance: none;
	display: grid;
	gap: 8px;
	justify-items: center;
	padding: 12px;
	border-radius: 16px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--mute);
	cursor: pointer;
	font-size: 0.82rem;
	font-weight: 500;
	transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease);
}

.ap-preset:hover {
	color: var(--ink);
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.05);
}

.ap-preset.is-on {
	border-color: rgba(255, 255, 255, 0.75);
	color: var(--accent);
	background: var(--accent-soft);
}

.ap-preset-swatch {
	width: 100%;
	height: 64px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.ap-card-classic { background: rgba(12, 12, 12, 0.9); }
.ap-card-frosted-square { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); border-radius: 8px; }
.ap-card-frosted-soft { background: rgba(255, 255, 255, 0.1); border-radius: 20px; }
.ap-card-outlined { background: transparent; border: 2px solid rgba(255, 255, 255, 0.55); }
.ap-card-aurora {
	background:
		radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35), transparent 45%),
		radial-gradient(circle at 80% 80%, rgba(160, 180, 255, 0.25), transparent 40%),
		rgba(10, 10, 16, 0.85);
}
.ap-card-transparent { background: rgba(255, 255, 255, 0.03); border-style: dashed; }

.ap-radius-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ap-radius {
	appearance: none;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.03);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.ap-radius:hover {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.05);
}

.ap-radius.is-on {
	border-color: rgba(255, 255, 255, 0.7);
	background: var(--accent-soft);
}

.ap-radius-box {
	width: 22px;
	height: 22px;
	border: 2px solid var(--accent);
	background: rgba(255, 255, 255, 0.15);
}
.ap-r-none { border-radius: 0; }
.ap-r-sm { border-radius: 4px; }
.ap-r-md { border-radius: 8px; }
.ap-r-lg { border-radius: 12px; }
.ap-r-xl { border-radius: 16px; }
.ap-r-full { border-radius: 999px; }

.ap-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.ap-color-list {
	display: grid;
	gap: 10px;
}

.ap-color-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.03);
	font-weight: 500;
	transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.ap-color-row:hover {
	border-color: rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.04);
}

.ap-color-row input[type="color"] {
	width: 42px;
	height: 32px;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

.ap-card .field select,
.dash-form select {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(0, 0, 0, 0.45);
	color: var(--ink);
	font-size: 16px;
}

.ap-fx-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 14px;
}

.ap-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

.ap-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.03);
	cursor: pointer;
	font-weight: 500;
	transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.ap-toggle:hover {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.05);
}

.ap-toggle input {
	width: 18px;
	height: 18px;
	accent-color: var(--accent);
}

.field-label {
	margin: 14px 0 8px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--faint);
}

/* public / preview appearance tokens */
.profile,
.ap-preview-stage {
	background: var(--ap-theme, #000);
	color: var(--ap-text, rgba(255, 255, 255, 0.72));
}

.profile .profile-name,
.ap-preview-stage .profile-name {
	color: var(--ap-name, #fff);
	font-family: var(--ap-font-name, var(--font));
}

.profile .profile-bio,
.profile .profile-handle,
.profile .link-item,
.ap-preview-stage .profile-bio,
.ap-preview-stage .profile-handle,
.ap-preview-stage .link-item {
	font-family: var(--ap-font-text, var(--font));
}

.profile[data-overlay="glow"] {
	background:
		radial-gradient(ellipse 70% 45% at 50% 0%, color-mix(in srgb, var(--ap-accent, #ffffff) 28%, transparent), transparent 55%),
		var(--ap-theme, #000);
}
.profile[data-overlay="vignette"] {
	background:
		radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.55) 100%),
		var(--ap-theme, #000);
}
.profile[data-overlay="grain"] {
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 3px),
		var(--ap-theme, #000);
}

.profile[data-radius="none"] .profile-card,
.ap-preview-stage[data-radius="none"] .profile-card { border-radius: 0; }
.profile[data-radius="sm"] .profile-card,
.ap-preview-stage[data-radius="sm"] .profile-card { border-radius: 10px; }
.profile[data-radius="md"] .profile-card,
.ap-preview-stage[data-radius="md"] .profile-card { border-radius: 16px; }
.profile[data-radius="lg"] .profile-card,
.ap-preview-stage[data-radius="lg"] .profile-card { border-radius: 22px; }
.profile[data-radius="xl"] .profile-card,
.ap-preview-stage[data-radius="xl"] .profile-card { border-radius: 30px; }
.profile[data-radius="full"] .profile-card,
.ap-preview-stage[data-radius="full"] .profile-card { border-radius: 40px; }

.profile[data-card="classic"] .profile-card,
.ap-preview-stage[data-card="classic"] .profile-card {
	background: rgba(8, 8, 8, 0.72);
	border-color: rgba(255, 255, 255, 0.12);
}
.profile[data-card="frosted-square"] .profile-card,
.ap-preview-stage[data-card="frosted-square"] .profile-card {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	backdrop-filter: blur(24px);
}
.profile[data-card="frosted-soft"] .profile-card,
.ap-preview-stage[data-card="frosted-soft"] .profile-card {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(28px) saturate(160%);
}
.profile[data-card="outlined"] .profile-card,
.ap-preview-stage[data-card="outlined"] .profile-card {
	background: transparent;
	border: 2px solid color-mix(in srgb, var(--ap-accent, #ffffff) 65%, white);
}
.profile[data-card="aurora"] .profile-card,
.ap-preview-stage[data-card="aurora"] .profile-card {
	background:
		radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--ap-accent, #ffffff) 35%, transparent), transparent 40%),
		radial-gradient(circle at 85% 90%, rgba(140, 170, 255, 0.25), transparent 42%),
		rgba(10, 10, 16, 0.7);
}
.profile[data-card="transparent"] .profile-card,
.ap-preview-stage[data-card="transparent"] .profile-card {
	background: rgba(255, 255, 255, 0.03);
	border-style: dashed;
}

.profile[data-layout="floating"] .profile-card,
.ap-preview-stage[data-layout="floating"] .profile-card {
	padding-top: 48px;
}
.profile[data-layout="floating"] .profile-avatar,
.profile[data-layout="floating"] .profile-avatar-fallback,
.ap-preview-stage[data-layout="floating"] .profile-avatar,
.ap-preview-stage[data-layout="floating"] .profile-avatar-fallback {
	margin-top: -70px;
}
.profile[data-layout="compact"] .profile-card,
.ap-preview-stage[data-layout="compact"] .profile-card {
	grid-template-columns: auto 1fr;
	justify-items: start;
	text-align: left;
	align-items: center;
	column-gap: 14px;
}
.profile[data-layout="compact"] .profile-avatar,
.profile[data-layout="compact"] .profile-avatar-fallback,
.ap-preview-stage[data-layout="compact"] .profile-avatar,
.ap-preview-stage[data-layout="compact"] .profile-avatar-fallback {
	width: 64px;
	height: 64px;
	grid-row: span 3;
}
.profile[data-layout="compact"] .link-tree,
.profile[data-layout="compact"] .profile-empty,
.ap-preview-stage[data-layout="compact"] .link-tree,
.ap-preview-stage[data-layout="compact"] .profile-empty {
	grid-column: 1 / -1;
	width: 100%;
}

.profile[data-name-fx="glow"] .profile-name,
.ap-preview-stage[data-name-fx="glow"] .profile-name {
	text-shadow: 0 0 22px color-mix(in srgb, var(--ap-accent, #ffffff) 70%, transparent);
}
.profile[data-name-fx="gradient"] .profile-name,
.ap-preview-stage[data-name-fx="gradient"] .profile-name {
	background: linear-gradient(90deg, var(--ap-name, #fff), var(--ap-accent, #ffffff));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.profile[data-bio-fx="soft"] .profile-bio,
.ap-preview-stage[data-bio-fx="soft"] .profile-bio {
	opacity: 0.78;
	letter-spacing: 0.01em;
}

.profile[data-glow-icons="1"] .profile-avatar,
.profile[data-glow-icons="1"] .profile-avatar-fallback,
.ap-preview-stage[data-glow-icons="1"] .profile-avatar,
.ap-preview-stage[data-glow-icons="1"] .profile-avatar-fallback {
	border-color: var(--ap-accent, #ffffff);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--ap-accent, #ffffff) 18%, transparent), 0 0 36px color-mix(in srgb, var(--ap-accent, #ffffff) 45%, transparent);
}

.profile[data-animate="1"] .profile-card {
	animation: fade-up 0.5s var(--ease-out) both;
}

.profile .link-item:hover,
.ap-preview-stage .link-item {
	border-color: color-mix(in srgb, var(--ap-accent, #ffffff) 45%, transparent);
}

.profile-card {
	transition: transform 180ms var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
	will-change: transform;
}

.trail-dot {
	position: fixed;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 80;
	opacity: 0;
	transform: scale(0.4);
}
.trail-dot.is-on {
	animation: trail-pop 480ms var(--ease-out) forwards;
}
@keyframes trail-pop {
	0% { opacity: 0.8; transform: scale(0.5); }
	100% { opacity: 0; transform: scale(1.6); }
}

@media (max-width: 1100px) {
	.dash-page-split {
		grid-template-columns: 1fr;
	}
	.dash-preview-col {
		position: relative;
		top: 0;
		order: -1;
	}
	.ap-layout-grid,
	.ap-preset-grid,
	.ap-two,
	.ap-fx-row {
		grid-template-columns: 1fr;
	}
}

/* ── custom color / select / toggle ── */
.ap-color-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.03);
	transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.ap-color-row:hover {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.05);
}

.ap-color-label {
	font-size: 0.92rem;
	font-weight: 500;
}

.ap-color-swatch {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px 6px 6px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: rgba(0, 0, 0, 0.35);
	color: var(--ink);
	cursor: pointer;
	transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}

.ap-color-swatch:hover {
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.ap-color-chip {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--swatch, #fff);
	border: 2px solid rgba(255, 255, 255, 0.28);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.ap-color-hex {
	font-size: 0.85rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mute);
}

.ap-picker {
	position: fixed;
	z-index: 80;
	width: 260px;
	padding: 12px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(10, 10, 12, 0.97);
	backdrop-filter: blur(18px);
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px) scale(0.98);
	pointer-events: none;
	transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t) var(--ease);
}

.ap-picker.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

.ap-picker-sv {
	position: relative;
	height: 140px;
	border-radius: 12px;
	overflow: hidden;
	cursor: crosshair;
	border: 1px solid var(--line);
	touch-action: none;
}

.ap-picker-knob,
.ap-picker-hue-knob {
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.35);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.ap-picker-row {
	display: grid;
	grid-template-columns: 36px 36px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	margin-top: 12px;
}

.ap-picker-row:has(.ap-picker-eye[hidden]) {
	grid-template-columns: 36px minmax(0, 1fr);
}

.ap-picker-eye {
	appearance: none;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.04);
	color: var(--ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}

.ap-picker-eye svg {
	width: 18px;
	height: 18px;
}

.ap-picker-eye:hover {
	border-color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.1);
	color: var(--accent);
}

.ap-picker-preview {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.28);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.ap-picker-hue {
	position: relative;
	height: 14px;
	border-radius: 999px;
	background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
	border: 1px solid var(--line);
	cursor: pointer;
	touch-action: none;
}

.ap-picker-hue-knob {
	top: 50%;
	background: #fff;
}

.ap-picker-hex-row,
.ap-picker-rgb {
	display: grid;
	gap: 8px;
	margin-top: 10px;
}

.ap-picker-rgb {
	grid-template-columns: repeat(3, 1fr);
}

.ap-picker label {
	display: grid;
	gap: 6px;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--faint);
}

.ap-picker label span {
	padding-left: 2px;
}

.ap-picker input {
	width: 100%;
	min-height: 38px;
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: rgba(0, 0, 0, 0.45);
	color: var(--ink);
	font-size: 0.92rem;
	font-weight: 500;
	outline: none;
	transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}

.ap-picker input:hover {
	border-color: rgba(255, 255, 255, 0.22);
}

.ap-picker input:focus {
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.ap-select-field {
	position: relative;
	display: grid;
	gap: 6px;
}

.ap-select-label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--faint);
}

.ap-select {
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 42px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(0, 0, 0, 0.45);
	color: var(--ink);
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	text-align: left;
	transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.ap-select:hover,
.ap-select-field.is-open .ap-select {
	border-color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.ap-select-caret {
	width: 10px;
	height: 10px;
	border-right: 2.5px solid var(--mute);
	border-bottom: 2.5px solid var(--mute);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
	flex: 0 0 auto;
}

.ap-select-field.is-open .ap-select-caret {
	transform: rotate(225deg) translate(-1px, -1px);
	border-color: var(--accent);
}

.ap-select-menu {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	z-index: 30;
	display: grid;
	gap: 2px;
	padding: 6px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(12, 12, 14, 0.98);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
	animation: dash-in 160ms var(--ease-out) both;
}

.ap-select-menu[hidden] {
	display: none !important;
}

.ap-select-option {
	appearance: none;
	display: block;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--ink);
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.ap-select-option:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--accent);
}

.ap-select-option.is-on {
	background: var(--accent-soft);
	color: var(--accent);
}

.ap-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px 8px 8px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.03);
	cursor: pointer;
	font-weight: 500;
	font-size: 0.92rem;
	user-select: none;
	transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}

.ap-toggle input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.ap-toggle:hover {
	border-color: rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.06);
}

.ap-toggle.is-on {
	border-color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.1);
}

.ap-check {
	width: 22px;
	height: 22px;
	border-radius: 7px;
	border: 2px solid rgba(255, 255, 255, 0.22);
	background: rgba(0, 0, 0, 0.35);
	display: grid;
	place-items: center;
	color: transparent;
	flex: 0 0 auto;
	transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.ap-check svg {
	width: 13px;
	height: 13px;
	opacity: 0;
	transform: scale(0.55);
	transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}

.ap-toggle.is-on .ap-check {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
	box-shadow: 0 0 12px var(--accent-glow);
}

.ap-toggle.is-on .ap-check svg {
	opacity: 1;
	transform: scale(1);
}

.ap-toggle-text {
	color: var(--ink);
}

/* ── profile editor ── */
.pf-page {
	padding-bottom: 88px;
	max-width: 720px;
}

.pf-form {
	display: grid;
	gap: 0;
	padding: 8px 20px 20px;
}

.pf-section {
	display: grid;
	gap: 10px;
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
}

.pf-section:last-of-type {
	border-bottom: 0;
}

.pf-label {
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--ink);
}

.pf-sublabel {
	margin: 4px 0 0;
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--mute);
}

.pf-hint {
	margin: 0;
	font-size: 0.8rem;
	color: var(--faint);
}

.pf-text-btn {
	appearance: none;
	border: 0;
	background: none;
	color: var(--accent);
	font: inherit;
	font-size: inherit;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
}

.pf-avatar-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.pf-avatar-wrap {
	flex: 0 0 auto;
}

.pf-avatar-preview,
.pf-avatar-preview.avatar-fallback {
	width: 72px;
	height: 72px;
	object-fit: cover;
	background: #1a1a1a;
	border: 1px solid var(--line);
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--mute);
	display: grid;
	place-items: center;
}

.av-shape-square { border-radius: 6px; }
.av-shape-soft { border-radius: 12px; }
.av-shape-rounded { border-radius: 18px; }
.av-shape-circle { border-radius: 50%; }

.pf-avatar-actions {
	display: grid;
	gap: 6px;
	justify-items: start;
}

.pf-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pf-pill {
	appearance: none;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--mute);
	font-size: 0.88rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color var(--t) var(--ease), color var(--t) var(--ease), background var(--t) var(--ease);
}

.pf-pill:hover {
	border-color: rgba(255, 255, 255, 0.35);
	color: var(--ink);
}

.pf-pill.is-on {
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--accent);
	background: var(--accent-soft);
}

.pf-seg {
	display: inline-flex;
	padding: 3px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--line);
	gap: 2px;
	width: fit-content;
}

.pf-seg-btn {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--mute);
	padding: 8px 16px;
	border-radius: 10px;
	font-size: 0.88rem;
	font-weight: 500;
	cursor: pointer;
	transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.pf-seg-btn.is-on {
	background: rgba(255, 255, 255, 0.1);
	color: var(--ink);
}

.pf-swatch-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(0, 0, 0, 0.35);
	cursor: pointer;
	overflow: hidden;
	color: var(--ink);
}

.pf-swatch-btn input[type="color"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	border: 0;
	padding: 0;
}

.pf-swatch {
	position: absolute;
	inset: 0;
	opacity: 0.35;
}

.pf-swatch-btn .ico {
	position: relative;
	z-index: 1;
	width: 18px;
	height: 18px;
}

.pf-bg-color.is-hidden,
.pf-bg-media.is-hidden {
	display: none;
}

.pf-banner-preview {
	width: 100%;
	height: 96px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background-size: cover;
	background-position: center;
	background-color: rgba(255, 255, 255, 0.04);
}

.pf-input {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(0, 0, 0, 0.45);
	transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.pf-input:focus-within {
	border-color: rgba(255, 255, 255, 0.4);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.pf-input .ico,
.pf-prefix {
	flex: 0 0 auto;
	color: var(--mute);
	width: 18px;
	height: 18px;
}

.pf-prefix {
	width: auto;
	font-weight: 500;
}

.pf-input input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-size: 0.95rem;
	font-weight: 500;
	outline: none;
	min-height: 42px;
	padding: 0;
}

.pf-bio {
	border-radius: 12px;
	border: 1px solid var(--line);
	background: rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

.pf-bio-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 8px 10px;
	border-bottom: 1px solid var(--line);
	color: var(--faint);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	user-select: none;
}

.pf-bio-toolbar span {
	padding: 4px 6px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.03);
}

.pf-bio textarea {
	width: 100%;
	min-height: 120px;
	border: 0;
	background: transparent;
	color: var(--ink);
	padding: 12px;
	font-size: 0.95rem;
	font-weight: 500;
	resize: vertical;
	outline: none;
}

.pf-two {
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	display: grid;
}

.pf-two > div {
	display: grid;
	gap: 8px;
}

.pf-tags-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.pf-tags-head .pf-label {
	margin: 0;
}

.pf-tags-head .btn {
	gap: 6px;
}

.pf-tags-head .ico {
	width: 14px;
	height: 14px;
}

.pf-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	min-height: 36px;
}

.pf-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.04);
	font-size: 0.88rem;
	font-weight: 500;
}

.pf-tag button {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--mute);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	padding: 0 4px;
}

.pf-dirty-bar {
	position: fixed;
	left: 50%;
	bottom: calc(18px + var(--safe-b));
	transform: translateX(-50%);
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	width: min(640px, calc(100% - 32px));
	padding: 12px 14px 12px 18px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(12, 12, 14, 0.92);
	backdrop-filter: blur(16px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--mute);
}

.pf-dirty-bar .btn {
	min-height: 40px;
	padding: 0 16px;
	font-size: 0.9rem;
}

.profile-banner {
	width: min(420px, 100%);
	height: 110px;
	border-radius: 16px 16px 0 0;
	background-size: cover;
	background-position: center;
	margin: 0 auto -8px;
}

.profile-avatar-stack {
	position: relative;
	display: grid;
	place-items: center;
}

.profile-deco {
	position: absolute;
	width: 118%;
	height: 118%;
	object-fit: contain;
	pointer-events: none;
}

.profile-meta-line {
	margin: 0;
	font-size: 0.85rem;
	color: var(--mute);
}

.profile-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 4px;
}

.profile-tags span {
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--line);
	font-size: 0.75rem;
	color: var(--mute);
}

.profile-avatar.av-shape-square,
.profile-avatar-fallback.av-shape-square { border-radius: 8px; }
.profile-avatar.av-shape-soft,
.profile-avatar-fallback.av-shape-soft { border-radius: 14px; }
.profile-avatar.av-shape-rounded,
.profile-avatar-fallback.av-shape-rounded { border-radius: 22px; }
.profile-avatar.av-shape-circle,
.profile-avatar-fallback.av-shape-circle { border-radius: 50%; }

.dash-avatar.av-shape-square { border-radius: 8px; }
.dash-avatar.av-shape-soft { border-radius: 10px; }
.dash-avatar.av-shape-rounded { border-radius: 14px; }
.dash-avatar.av-shape-circle { border-radius: 50%; }

@media (max-width: 720px) {
	.pf-two {
		grid-template-columns: 1fr;
	}
	.pf-dirty-bar {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
}