/* ==========================================================================
   uiux.pics — Global image viewer modal
   ========================================================================== */

.uiux-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	font-family: var(--wp--preset--font-family--onest, inherit);
}

.uiux-modal[hidden] {
	display: none !important;
}

/* Fade in when opened */
.uiux-modal:not([hidden]) .uiux-modal__overlay {
	animation: uiux-modal-fade 0.22s ease forwards;
}

.uiux-modal:not([hidden]) .uiux-modal__frame {
	animation: uiux-modal-scale-in 0.82s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
	transform-origin: center center;
	/* Disable iOS Safari double-tap page zoom; our image uses double-tap to favorite */
	touch-action: manipulation;
}

@keyframes uiux-modal-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes uiux-modal-scale-in {
	from { transform: scale(0.92); }
	to   { transform: scale(1); }
}

@keyframes uiux-modal-scale-in-mobile {
	from {
		transform: scale(0.92);
		border-radius: 20px;
	}
	to {
		transform: scale(1);
		border-radius: 0;
	}
}

/* ── Overlay ─────────────────────────────────────────────────────────────── */

.uiux-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	cursor: pointer;
}

/* ── Frame — relative container for all absolutely placed children ───────── */

.uiux-modal__frame {
	position: absolute;
	inset: 1.2rem;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 32px 96px rgba(0, 0, 0, 0.45);
	background: #f2f2f2;
}

/* ── Image — fills the entire frame, centered with vertical padding ──────── */

.uiux-modal__image-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.2rem;
	box-sizing: border-box;
}

/* Flex row — now a simple centering wrapper; arrows live inside .slides */
.uiux-modal__img-row {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch; /* fill image-wrap so max-height: 100% resolves correctly */
	width: 100%;
}

/* ── Slides container — fills the space between the two arrows ───────────── */

.uiux-modal__slides {
	flex: 1;
	min-width: 0;
	align-self: stretch;
	position: relative;
}

/* ── Individual slide — absolutely fills the slides container ────────────── */

/*
 * The slide is a flex container so the full-res img sizes exactly like the
 * original .uiux-modal__img (flex: 0 1 auto, natural dimensions capped by
 * max-width/max-height). The blurred thumb is absolutely positioned behind it.
 */
.uiux-modal__slide {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
}

.uiux-modal__slide.is-active {
	display: flex;
}

/* Slide-in animations applied to the whole slide so thumb + img move together */
.uiux-modal__slide.is-entering-left {
	animation: uiux-modal-slide-left 0.22s ease forwards;
}

.uiux-modal__slide.is-entering-right {
	animation: uiux-modal-slide-right 0.22s ease forwards;
}

@keyframes uiux-modal-slide-left {
	from { opacity: 0; transform: translateX(-25px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes uiux-modal-slide-right {
	from { opacity: 0; transform: translateX(25px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* ── Blurred thumbnail placeholder — always loaded for all slides ────────── */

/*
 * Wrapper div — size + position are set by JS to exactly match the rendered
 * full-res image bounds. overflow:hidden clips the blur so it never bleeds
 * outside the image area. The <img> inside carries the actual blur filter.
 */
.uiux-modal__slide-thumb {
	position: absolute;
	overflow: hidden;
	border-radius: 1.2rem;
	/* Safari doesn't honour overflow:hidden on filter children without this */
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	mask-image: radial-gradient(white, black);
}

.uiux-modal__slide-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(20px);
	border-radius: 1.2rem;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

/* ── Full-resolution image — loaded on demand when slide is activated ─────── */

/*
 * Identical sizing rules to the old .uiux-modal__img: a flex child that sizes
 * to its natural dimensions, capped by the available space. position:relative
 * + z-index:1 lifts it above the absolutely-positioned thumb behind it.
 */
.uiux-modal__slide-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	flex: 0 1 auto;
	min-width: 0;
	object-fit: contain;
	border-radius: 1.2rem;
	box-shadow: 0 6px 32px rgba(0, 0, 0, 0.14);
	display: block;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	position: relative;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.uiux-modal__slide-img.is-loaded {
	opacity: 1;
	cursor: zoom-in;
}

/* ── Loading spinner — centered over the full slide, hidden once img loads ── */

/* Size + position set by JS to match the rendered image. */
.uiux-modal__slide-loader {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 2;
}

.uiux-modal__slide-loader::after {
	content: '';
	width: 2.25rem;
	height: 2.25rem;
	border: 3px solid rgba(255, 255, 255, 0.35);
	border-top-color: rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	animation: uiux-spin 0.75s linear infinite;
}

/* Hide the spinner once the full-res img has loaded */
.uiux-modal__slide-img.is-loaded ~ .uiux-modal__slide-loader {
	display: none;
}

@keyframes uiux-spin {
	to { transform: rotate(360deg); }
}

/* ── Modal navigation arrows ─────────────────────────────────────────────── */

/* Arrows live inside .uiux-modal__slides; position + top are set by JS. */
.uiux-modal__arrow {
	position: absolute;
	z-index: 10;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #333;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	transition: background 0.15s ease, opacity 0.15s ease, visibility 0s;
}

.uiux-modal__arrow:hover {
	background: #fff;
}

.uiux-modal__arrow.is-hidden {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

/* ── App icon + title — absolute, top-left pill ──────────────────────────── */

.uiux-modal__header {
	position: absolute;
	top: 1.2rem;
	left: 1.2rem;
	z-index: 10;
	/* frosted-glass pill */
	/* background: rgba(255, 255, 255, 0.88); */
	/* backdrop-filter: blur(12px); */
	/* -webkit-backdrop-filter: blur(12px); */
	/* border-radius: 14px; */
	/* padding: 0.5rem 0.875rem 0.5rem 0.5rem; */
	/* box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1); */
	/* don't bleed over the meta panel */
	max-width: calc(100% - 2.4rem - 300px - 1.5rem);
	pointer-events: none;
}

.uiux-modal__post-info {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
}

.uiux-modal__post-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	object-fit: cover;
	flex-shrink: 0;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.uiux-modal__post-title {
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Close button — absolute, top-right corner ───────────────────────────── */

.uiux-modal__close {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	z-index: 11;
	width: 44px;
	height: 44px;
	border: none;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #555;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	transition: background 0.15s ease, color 0.15s ease;
	padding: 0;
}

.uiux-modal__close:hover {
	background: #fff;
	color: #111;
}

.uiux-modal__close svg {
	display: block;
}

/* ── Action buttons — stacked under close, top-right ─────────────────────── */

.uiux-modal__actions {
	position: absolute;
	top: calc(1.2rem + 44px + 0.5rem);
	right: 1.2rem;
	z-index: 11;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	transition: opacity 0.2s ease;
}

/* ── Meta sidebar — absolute, right edge, full height ───────────────────── */

.uiux-modal__meta {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 300px;
	z-index: 5;
	/* background: #ffffff; */
	/* border-left: 1px solid rgba(0, 0, 0, 0.07); */
	padding: 1.2rem;
	overflow-y: auto;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	gap: 0.5rem;
	box-sizing: border-box;
}

/* Wrapper that pushes caption/description to the bottom */
.uiux-modal__meta-sections {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	margin-top: auto;
}

.uiux-modal__meta-section {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.uiux-modal__meta-label {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #aaa;
	margin: 0;
}

.uiux-modal__meta-value {
	font-size: 0.875rem;
	color: #333;
	margin: 0;
	line-height: 1.65;
}

.uiux-modal__meta-value.is-empty {
	color: #bbb;
	font-style: italic;
}

.uiux-modal__meta-value.is-loading {
	color: #ccc;
}

/* ── Description element tags ────────────────────────────────────────────── */

.uiux-modal__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0;
}

.uiux-modal__tags.is-empty,
.uiux-modal__tags.is-loading {
	color: #bbb;
	font-size: 0.875rem;
	font-style: italic;
}

.uiux-modal__tags.is-loading {
	color: #ccc;
	font-style: normal;
}

.uiux-modal__tag {
	display: inline-flex;
	align-items: center;
	padding: 0.28rem 0.65rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.3;
	color: #333;
	background: rgba(0, 0, 0, 0.06);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.uiux-modal__tag:hover,
.uiux-modal__tag:focus-visible {
	background: rgba(0, 0, 0, 0.12);
	color: #111;
	outline: none;
}

/* ── Zoom mode ───────────────────────────────────────────────────────────── */

/* Smooth fade for elements that hide/show on zoom */
.uiux-modal__header,
.uiux-modal__meta,
.uiux-modal__actions {
	transition: opacity 0.2s ease;
}

/* Hide header, sidebar, actions, and arrows in zoom mode */
.uiux-modal.is-zoom .uiux-modal__header,
.uiux-modal.is-zoom .uiux-modal__meta,
.uiux-modal.is-zoom .uiux-modal__actions {
	opacity: 0;
	pointer-events: none;
}

.uiux-modal.is-zoom .uiux-modal__arrow {
	opacity: 0 !important;
	pointer-events: none;
	visibility: hidden !important;
}

/* Hide active full-res img in-place while the zoom clone is active */
.uiux-modal.is-zoom .uiux-modal__slide-img {
	opacity: 0 !important;
}

/* Keep the close button above the zoom clone (z-index 20) */
.uiux-modal.is-zoom .uiux-modal__close {
	z-index: 25;
}

/* ── Save button ─────────────────────────────────────────────────────────── */

.uiux-modal__save-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 99px;
	background: rgba(242, 242, 242, 0.88); /*#f2f2f2 */
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #444;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.uiux-modal__save-label {display: none;}

.uiux-modal__save-btn:hover {
	border-color: rgba(0, 0, 0, 0.3);
	color: #111;
	background: #fff;
}

.uiux-modal__save-btn.is-saved {
	background: #111;
	border-color: #111;
	color: #fff;
}

.uiux-modal__save-btn.is-saved .uiux-modal__save-icon {
	fill: currentColor;
}

.uiux-modal__save-btn[hidden] {
	display: none !important;
}

/* ── Copy link button ────────────────────────────────────────────────────── */

.uiux-modal__copy-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 99px;
	background: rgba(242, 242, 242, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #444;
	font-size: 1rem;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.uiux-modal__copy-btn:hover {
	background: #fff;
	color: #111;
}

.uiux-modal__copy-btn.is-copied {
	background: #111;
	color: #fff;
}

.uiux-modal__copy-check {
	display: none;
}

.uiux-modal__copy-btn.is-copied .uiux-modal__copy-icon {
	display: none;
}

.uiux-modal__copy-btn.is-copied .uiux-modal__copy-check {
	display: block;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media ( max-width: 958px ) {
	.uiux-modal:not([hidden]) .uiux-modal__frame {
		animation-name: uiux-modal-scale-in-mobile;
	}

	.uiux-modal__frame {
		inset: 0;
		border-radius: 0;
	}

	/* Keep the image below the app icon/title with a 10px gap */
	.uiux-modal__image-wrap {
		--uiux-modal-mobile-meta-reserve: calc(
			2rem + 1rem +
			(0.68rem * 1.2 + 0.35rem + 0.875rem * 1.65) +
			1rem +
			(0.68rem * 1.2 + 0.35rem + 0.28rem * 2 + 0.78rem * 1.3)
		);
		padding-top: calc(1.2rem + 40px + 10px);
		padding-bottom: calc(
			var(--uiux-modal-mobile-meta-reserve) + 10px + env(safe-area-inset-bottom, 0px)
		);
	}

	.uiux-modal__meta {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: auto;
		max-height: 50%;
		border-left: none;
		border-top: none;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-end;
		align-content: stretch;
		gap: 1rem;
		padding: 2rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
		background: linear-gradient(
			to top,
			#f2f2f2 0%,
			#f2f2f2 72%,
			rgba(242, 242, 242, 0) 100%
		);
		overflow-y: auto;
	}

	.uiux-modal__meta-sections {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		margin-top: 0;
		width: 100%;
	}

	.uiux-modal__meta-section {
		flex: none;
		min-width: 0;
		width: 100%;
	}

	.uiux-modal__close,
	.uiux-modal__actions {
		right: 1rem;
	}

	.uiux-modal__actions {
		top: calc(1.2rem + 44px + 0.5rem);
	}

	.uiux-modal__header {
		max-width: calc(100% - 2.4rem - 3rem);
	}
}

/* ==========================================================================
   Auth modal — Sign In / Sign Up
   ========================================================================== */

.uiux-auth-modal {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--onest, inherit);
}

.uiux-auth-modal[hidden] {
	display: none !important;
}

.uiux-auth-modal:not([hidden]) {
	animation: uiux-modal-fade 0.2s ease forwards;
}

/* ── Overlay ─────────────────────────────────────────────────────────────── */

.uiux-auth-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	cursor: pointer;
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.uiux-auth-modal__card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 380px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
	padding: 1.75rem 1.75rem 1.5rem;
	box-sizing: border-box;
}

/* ── Close ───────────────────────────────────────────────────────────────── */

.uiux-auth-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 1.9rem;
	height: 1.9rem;
	border: none;
	background: rgba(0, 0, 0, 0.06);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	padding: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.uiux-auth-modal__close:hover {
	background: rgba(0, 0, 0, 0.12);
	color: #111;
}

/* ── Prompt ──────────────────────────────────────────────────────────────── */

.uiux-auth-modal__prompt {
	font-size: 0.875rem;
	color: #888;
	margin: 0 0 1.25rem;
	padding-right: 2.25rem;
	line-height: 1.5;
}

/* ── Tabs ────────────────────────────────────────────────────────────────── */

.uiux-auth-modal__tabs {
	display: flex;
	background: #f2f2f2;
	border-radius: 10px;
	padding: 3px;
	margin-bottom: 1.4rem;
	gap: 3px;
}

.uiux-auth-modal__tab {
	flex: 1;
	padding: 0.45rem 0;
	border: none;
	background: transparent;
	border-radius: 8px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #999;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	font-family: inherit;
	letter-spacing: 0.01em;
}

.uiux-auth-modal__tab.is-active {
	background: #fff;
	color: #111;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

/* ── Panels ──────────────────────────────────────────────────────────────── */

.uiux-auth-modal__panel {
	display: none;
}

.uiux-auth-modal__panel.is-active {
	display: block;
}

/* ── Form ────────────────────────────────────────────────────────────────── */

.uiux-auth-modal__form {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.uiux-auth-modal__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.uiux-auth-modal__field label {
	font-size: 0.75rem;
	font-weight: 700;
	color: #666;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.uiux-auth-modal__field input {
	border: 1.5px solid #e4e4e4;
	border-radius: 10px;
	padding: 0.6rem 0.85rem;
	font-size: 16px; /* iOS Safari zooms focused inputs below 16px */
	color: #111;
	background: #fafafa;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	font-family: inherit;
	box-sizing: border-box;
	width: 100%;
}

.uiux-auth-modal__field input:focus {
	border-color: #111;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.07);
}

/* ── Status message ──────────────────────────────────────────────────────── */

.uiux-auth-modal__status {
	font-size: 0.82rem;
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
	line-height: 1.5;
}

.uiux-auth-modal__status[hidden] {
	display: none;
}

.uiux-auth-modal__status.is-error {
	background: #fff2f2;
	color: #c0392b;
	border: 1px solid #f5c6c6;
}

.uiux-auth-modal__status.is-success {
	background: #f0fdf4;
	color: #16a34a;
	border: 1px solid #bbf7d0;
}

/* ── Submit button ───────────────────────────────────────────────────────── */

.uiux-auth-modal__submit {
	width: 100%;
	padding: 0.7rem 1rem;
	border: none;
	border-radius: 10px;
	background: #111;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	letter-spacing: 0.01em;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.uiux-auth-modal__submit:hover {
	background: #333;
}

.uiux-auth-modal__submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ── Google button ───────────────────────────────────────────────────────── */

.uiux-auth-modal__google-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	padding: 0.65rem 1rem;
	border: 1.5px solid #dadce0;
	border-radius: 10px;
	background: #fff;
	color: #3c4043;
	font-size: 0.875rem;
	font-weight: 600;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
	letter-spacing: 0.01em;
}

.uiux-auth-modal__google-btn:hover {
	background: #f8f9fa;
	border-color: #c6c9cc;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
	color: #3c4043;
}

/* ── Divider ─────────────────────────────────────────────────────────────── */

.uiux-auth-modal__divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: #ccc;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0.5rem 0;
}

.uiux-auth-modal__divider::before,
.uiux-auth-modal__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #e8e8e8;
}

/* ── Forgot password link ────────────────────────────────────────────────── */

.uiux-auth-modal__forgot {
	font-size: 0.8rem;
	color: #aaa;
	text-decoration: none;
	text-align: center;
	display: block;
}

.uiux-auth-modal__forgot:hover {
	color: #555;
	text-decoration: underline;
}

/* ── Dark mode ───────────────────────────────────────────────────────────── */

/* Image viewer modal */
[data-theme="dark"] .uiux-modal__frame {
	background: #1c1c1e;
	box-shadow: 0 32px 96px rgba(0, 0, 0, 0.72);
}

[data-theme="dark"] .uiux-modal__overlay {
	background: rgba(0, 0, 0, 0.82);
}

[data-theme="dark"] .uiux-modal__post-title {
	color: rgba(255, 255, 255, 0.92);
}

[data-theme="dark"] .uiux-modal__post-icon {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .uiux-modal__close {
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.85);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .uiux-modal__close:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

[data-theme="dark"] .uiux-modal__arrow {
	background: rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .uiux-modal__arrow:hover {
	background: rgba(255, 255, 255, 0.24);
}

[data-theme="dark"] .uiux-modal__meta-label {
	color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .uiux-modal__meta-value {
	color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .uiux-modal__meta-value.is-empty,
[data-theme="dark"] .uiux-modal__tags.is-empty {
	color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .uiux-modal__meta-value.is-loading,
[data-theme="dark"] .uiux-modal__tags.is-loading {
	color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .uiux-modal__tag {
	color: rgba(255, 255, 255, 0.88);
	background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .uiux-modal__tag:hover,
[data-theme="dark"] .uiux-modal__tag:focus-visible {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

[data-theme="dark"] .uiux-modal__slide-img {
	box-shadow: 0 6px 32px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .uiux-modal__save-btn {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.15);
	color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .uiux-modal__save-btn:hover {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}

[data-theme="dark"] .uiux-modal__save-btn.is-saved {
	background: #f0f0f0;
	border-color: #f0f0f0;
	color: #111;
}

[data-theme="dark"] .uiux-modal__copy-btn {
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .uiux-modal__copy-btn:hover {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

[data-theme="dark"] .uiux-modal__copy-btn.is-copied {
	background: #f0f0f0;
	color: #111;
}

@media ( max-width: 958px ) {
	[data-theme="dark"] .uiux-modal__meta {
		background: linear-gradient(
			to top,
			#1c1c1e 0%,
			#1c1c1e 72%,
			rgba(28, 28, 30, 0) 100%
		);
	}
}

/* Auth modal */
[data-theme="dark"] .uiux-auth-modal__card {
	background: #1c1c1e;
	color: #f0f0f0;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .uiux-auth-modal__prompt {
	color: #888;
}

[data-theme="dark"] .uiux-auth-modal__close {
	background: rgba(255, 255, 255, 0.1);
	color: #ccc;
}

[data-theme="dark"] .uiux-auth-modal__close:hover {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

[data-theme="dark"] .uiux-auth-modal__tabs {
	background: #2c2c2e;
}

[data-theme="dark"] .uiux-auth-modal__tab {
	color: #888;
}

[data-theme="dark"] .uiux-auth-modal__tab.is-active {
	background: #3a3a3c;
	color: #f0f0f0;
}

[data-theme="dark"] .uiux-auth-modal__field label {
	color: #aaa;
}

[data-theme="dark"] .uiux-auth-modal__field input {
	background: #2c2c2e;
	border-color: #3a3a3c;
	color: #f0f0f0;
}

[data-theme="dark"] .uiux-auth-modal__field input:focus {
	border-color: #aaa;
	background: #333;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .uiux-auth-modal__submit {
	background: #f0f0f0;
	color: #111;
}

[data-theme="dark"] .uiux-auth-modal__submit:hover {
	background: #fff;
}

[data-theme="dark"] .uiux-auth-modal__forgot {
	color: #666;
}

[data-theme="dark"] .uiux-auth-modal__forgot:hover {
	color: #aaa;
}

[data-theme="dark"] .uiux-auth-modal__google-btn {
	background: #2c2c2e;
	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .uiux-auth-modal__google-btn:hover {
	background: #3a3a3c;
	border-color: rgba(255, 255, 255, 0.22);
	color: #fff;
}

[data-theme="dark"] .uiux-auth-modal__divider {
	color: #555;
}

[data-theme="dark"] .uiux-auth-modal__divider::before,
[data-theme="dark"] .uiux-auth-modal__divider::after {
	background: rgba(255, 255, 255, 0.08);
}

/* ── Auth modal — mobile ─────────────────────────────────────────────────── */

@media ( max-width: 480px ) {
	.uiux-auth-modal__card {
		border-radius: 16px;
		padding: 1.5rem 1.25rem 1.25rem;
	}
}