* {
	box-sizing: border-box;
}

:root {
	color-scheme: dark;
	--app-bg: #090b0f;
	--panel: #0f131a;
	--panel-2: #141a22;
	--border: #252d38;
	--text: #f1f5f9;
	--muted: #8b98a9;
	--accent: #58a6ff;
}

html,
body {
	margin: 0;
	height: 100%;
	overflow: hidden;
}

body {
	background: var(--app-bg);
	color: var(--text);
	font-family:
		Inter,
		ui-sans-serif,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

button,
input,
textarea,
select {
	font: inherit;
}
button {
	cursor: pointer;
}

.app-header {
	height: 72px;
	flex-shrink: 0;
	padding: 14px 22px;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: rgba(9, 11, 15, 0.92);
	backdrop-filter: blur(14px);
}

.brand {
	color: var(--text);
	text-decoration: none;
	font-weight: 800;
	letter-spacing: -0.03em;
	font-size: 20px;
}

.tagline {
	margin-left: 12px;
	color: var(--muted);
	font-size: 13px;
}

.header-actions {
	display: flex;
	gap: 8px;
	margin-right: 50px;
}

.workspace {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(330px, 420px) 1fr;
	overflow: hidden;
}

.panel {
	border-right: 1px solid var(--border);
	background: var(--panel);
}

.editor-panel {
	height: 100%;
	padding: 26px 22px 48px;
	overflow-y: auto;
}

.editor-panel section {
	padding-bottom: 28px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--border);
}

.section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.section-heading h2 {
	margin: 0;
	font-size: 17px;
	letter-spacing: -0.02em;
}

.eyebrow {
	color: var(--accent);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	margin: 0 0 4px;
}

.field {
	display: block;
	margin-bottom: 14px;
}

.field > span {
	display: block;
	font-size: 12px;
	color: #b8c3d1;
	margin-bottom: 7px;
}

.field small {
	color: var(--muted);
}

/* Avatar Upload UI */
.avatar-input-group {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.avatar-preview-box {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--border);
	background: var(--panel-2);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.avatar-preview-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.avatar-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.avatar-upload-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	padding: 8px 12px;
	font-size: 12px;
	margin: 0;
}

.avatar-url-details {
	font-size: 12px;
	color: var(--muted);
	margin-top: 6px;
}

.avatar-url-details summary {
	cursor: pointer;
	user-select: none;
}

.avatar-url-details summary:hover {
	color: var(--text);
}

.avatar-url-details input {
	margin-top: 8px;
}

input,
textarea,
select {
	width: 100%;
	color: var(--text);
	background: #0b0e13;
	border: 1px solid var(--border);
	border-radius: 8px;
	outline: none;
	padding: 10px 11px;
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}

textarea {
	resize: vertical;
	min-height: 74px;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

input[type="color"] {
	height: 42px;
	padding: 0px;
}

.color-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

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

.link-editor {
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--panel-2);
}

.link-editor-row {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 8px;
	align-items: end;
}

.remove-link {
	border: 1px solid var(--border);
	background: transparent;
	color: var(--muted);
	border-radius: 8px;
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
}

.remove-link:hover {
	color: #ff7b72;
	border-color: #ff7b72;
}

.button {
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 9px 13px;
	color: var(--text);
	background: var(--panel-2);
	font-weight: 700;
	font-size: 13px;
}

.button:hover {
	border-color: #465365;
}
.button-primary {
	background: var(--accent);
	color: #06111e;
	border-color: var(--accent);
}
.button-secondary {
	background: #18202a;
}
.button-ghost {
	background: transparent;
}
.text-button {
	border: 0;
	background: transparent;
	color: var(--accent);
	padding: 0;
	font-size: 12px;
	font-weight: 700;
}

.full {
	width: 100%;
	margin-top: 8px;
}

.config-card {
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: linear-gradient(145deg, #131a23, #0e1319);
}

.config-card p {
	color: var(--muted);
	font-size: 12px;
	line-height: 1.6;
}

code {
	color: #c9d1d9;
}

.preview-area {
	height: 100%;
	min-width: 0;
	min-height: 0;
	background: #07090c;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.preview-toolbar {
	height: 60px;
	flex-shrink: 0;
	border-bottom: 1px solid var(--border);
	padding: 10px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.preview-title {
	font-size: 13px;
	font-weight: 800;
}
.preview-note {
	color: var(--muted);
	font-size: 11px;
	margin-left: 8px;
}

.preview-frame {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

.profile-preview {
	min-height: 100%;
	display: grid;
	place-items: center;
}

.toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 15px);
	opacity: 0;
	pointer-events: none;
	background: #f1f5f9;
	color: #0b0e13;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 700;
	transition:
		opacity 0.2s,
		transform 0.2s;
	z-index: 50;
}
.toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Link Editor Icon Picker Button */
.icon-picker-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 10px;
	background: #0b0e13;
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text);
	cursor: pointer;
	transition:
		border-color 0.15s,
		background 0.15s;
	text-align: left;
	height: 42px;
}

.icon-picker-btn:hover {
	border-color: var(--accent);
	background: #11161f;
}

.icon-picker-preview {
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.icon-picker-preview svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.icon-picker-preview svg[stroke]:not([stroke="none"]) {
	fill: none;
	stroke: currentColor;
}

.icon-picker-name {
	flex: 1;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.icon-picker-arrow {
	font-size: 10px;
	color: var(--muted);
}

/* Popover Modal Styles */
.modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(4, 6, 9, 0.78);
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.modal-overlay.show {
	opacity: 1;
	pointer-events: auto;
}

.modal-card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 16px;
	width: min(100%, 620px);
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
	transform: translateY(12px) scale(0.98);
	transition: transform 0.2s ease;
	overflow: hidden;
}

.modal-overlay.show .modal-card {
	transform: translateY(0) scale(1);
}

.modal-header {
	padding: 18px 22px;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	background: #0c0f15;
}

.modal-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.modal-subtitle {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--muted);
}

.modal-close {
	background: transparent;
	border: 0;
	color: var(--muted);
	font-size: 24px;
	line-height: 1;
	padding: 2px 8px;
	border-radius: 6px;
	cursor: pointer;
}

.modal-close:hover {
	color: var(--text);
	background: rgba(255, 255, 255, 0.06);
}

.modal-search-wrapper {
	padding: 14px 22px 10px;
	background: var(--panel);
}

.search-input-container {
	position: relative;
	display: flex;
	align-items: center;
}

.search-icon {
	position: absolute;
	left: 12px;
	color: var(--muted);
	pointer-events: none;
}

.search-input-container input {
	padding-left: 38px;
	padding-right: 34px;
	height: 42px;
	font-size: 14px;
	border-radius: 10px;
	background: #080b0f;
}

.search-clear-btn {
	position: absolute;
	right: 10px;
	background: transparent;
	border: 0;
	color: var(--muted);
	font-size: 18px;
	cursor: pointer;
	padding: 2px 6px;
}

.search-clear-btn:hover {
	color: var(--text);
}

.modal-categories {
	display: flex;
	gap: 6px;
	padding: 4px 22px 12px;
	border-bottom: 1px solid var(--border);
	background: var(--panel);
}

.category-tab {
	background: transparent;
	border: 1px solid transparent;
	color: var(--muted);
	padding: 5px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	transition: all 0.15s ease;
}

.category-tab:hover {
	color: var(--text);
	background: rgba(255, 255, 255, 0.04);
}

.category-tab.active {
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 22px;
	min-height: 300px;
	max-height: 420px;
	background: #0a0d12;
}

.icon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 10px;
}

.icon-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 6px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--panel-2);
	cursor: pointer;
	transition: all 0.15s ease;
	position: relative;
	text-align: center;
	user-select: none;
}

.icon-card:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
	background: #182230;
}

.icon-card.selected {
	border-color: var(--accent);
	background: color-mix(in srgb, var(--accent) 18%, #141a22);
	box-shadow: 0 0 0 1px var(--accent);
}

.icon-card-svg {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
}

.icon-card-svg svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.icon-card-svg svg[stroke]:not([stroke="none"]) {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.icon-card-name {
	font-size: 11px;
	font-weight: 600;
	color: var(--text);
	line-height: 1.2;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.icon-card-dot {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 10px;
	height: 10px;
	border-radius: 25%;
	opacity: 0.6;
}

.icon-grid-empty {
	text-align: center;
	padding: 50px 20px;
	color: var(--muted);
	font-size: 14px;
}

.modal-footer {
	padding: 14px 22px;
	border-top: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #080b0f;
}

.icon-count-badge {
	font-size: 12px;
	color: var(--muted);
}

.custom-color-picker {
	position: fixed;
	z-index: 999999;

	width: 230px;
	padding: 10px;

	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;

	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);

	opacity: 0;
	visibility: hidden;
	transform: scale(0.96);
	transform-origin: top left;

	transition:
		opacity 0.12s ease,
		transform 0.12s ease,
		visibility 0.12s;
}

.custom-color-picker.open {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

.cp-sv {
	position: relative;

	width: 100%;
	height: 160px;

	border-radius: 7px;
	overflow: hidden;

	cursor: crosshair;

	background: hsl(0 100% 50%);
}

.cp-white,
.cp-black {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.cp-white {
	background: linear-gradient(to right, #fff, transparent);
}

.cp-black {
	background: linear-gradient(to top, #000, transparent);
}

.cp-cursor {
	position: absolute;

	width: 14px;
	height: 14px;

	border: 2px solid white;
	border-radius: 50%;

	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);

	transform: translate(-50%, -50%);

	pointer-events: none;
}

.cp-hue {
	position: relative;

	height: 12px;
	margin: 10px 0;

	border-radius: 10px;

	cursor: pointer;

	background: linear-gradient(
		to right,
		#f00,
		#ff0,
		#0f0,
		#0ff,
		#00f,
		#f0f,
		#f00
	);
}

.cp-hue-cursor {
	position: absolute;

	top: 50%;
	left: 0;

	width: 16px;
	height: 16px;

	border: 2px solid white;
	border-radius: 50%;

	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);

	transform: translate(-50%, -50%);

	pointer-events: none;
}

.cp-bottom {
	display: flex;
	align-items: center;
	gap: 7px;
}

.cp-preview {
	width: 34px;
	height: 34px;

	flex: 0 0 34px;

	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.cp-hex {
	width: 100%;
	height: 34px;

	padding: 0 8px;

	border: 1px solid #ddd;
	border-radius: 6px;

	font:
		13px ui-monospace,
		SFMono-Regular,
		Menlo,
		monospace;

	text-transform: uppercase;
	outline: none;
}

.cp-hex:focus {
	border-color: #888;
}

.restore-background, .restore-accent {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
}

span.field-note {
	display: block;
	color: var(--muted);
	padding: 0;
	padding-top: 2px;
	font-size: 12px;
}

.hide {
  display: none !important;
}

.checkbox-field input {
	width: unset;
	margin-right: 6px;
}

.checkbox-field {
  font-size: 13px;
}

.profile-footer {
	margin-top: 60px;
	font-size: 15px;
	color: var(--muted);
}

.profile-footer a {
	color: var(--accent);
	text-decoration: none;
}

@media (max-width: 850px) {
	html,
	body {
		height: auto;
		overflow: auto;
	}
	body {
		height: auto;
		overflow: visible;
	}
	.app-header {
		position: static;
		align-items: flex-start;
	}
	.tagline {
		display: none;
	}
	.workspace {
		grid-template-columns: 1fr;
		height: auto;
		overflow: visible;
	}
	.editor-panel {
		height: auto;
		max-height: none;
		border-right: 0;
		border-bottom: 1px solid var(--border);
		overflow: visible;
	}
	.preview-area {
		height: auto;
		overflow: visible;
	}
	.preview-frame {
		min-height: 700px;
		overflow: visible;
	}
	.profile-preview {
		min-height: 650px;
	}
}

@media (max-width: 560px) {
	.app-header {
		flex-wrap: wrap;
		height: 115px;
	}
	.header-actions {
		width: 100%;
		margin-right: 0;
	}
	.header-actions .button {
		flex: 1;
	}
	.link-editor-row {
		grid-template-columns: 1fr;
	}
	.remove-link {
		width: 100%;
	}
	.icon-grid {
		grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
	}
}