/*
 * ImageVault Pro components.
 *
 * Static states (colour, shadow, visibility) live in the sections below. Every transition,
 * hover transform and component animation lives in the single motion block at the end,
 * so reduced-motion users get instant, fully usable state changes.
 * Colours come from tokens.css only.
 */

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.ivp-app:not(.ivp-portal) {
	display: flex;
	flex-direction: column;
}

.ivp-app .ivp-container {
	width: 100%;
	max-width: var(--ivp-container);
	margin-inline: auto;
	padding-inline: var(--ivp-sp-4);
}

.ivp-app .ivp-main {
	flex: 1 0 auto;
	width: 100%;
	min-height: 60vh;
	outline: none;
}

.ivp-app .ivp-page {
	width: 100%;
	max-width: var(--ivp-container);
	margin-inline: auto;
	padding: var(--ivp-sp-8) var(--ivp-sp-4) var(--ivp-sp-16);
}

.ivp-app .ivp-stack {
	display: flex;
	flex-direction: column;
	gap: var(--ivp-gap, var(--ivp-sp-4));
}

.ivp-app .ivp-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ivp-gap, var(--ivp-sp-3));
}

.ivp-app .ivp-page-header {
	display: grid;
	gap: var(--ivp-sp-3);
	margin-bottom: var(--ivp-sp-8);
}

.ivp-app .ivp-page-header__title {
	font-size: var(--ivp-fs-4xl);
}

.ivp-app .ivp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--ivp-sp-2);
	font-size: var(--ivp-fs-xs);
	font-weight: var(--ivp-fw-semibold);
	letter-spacing: var(--ivp-ls-wide);
	text-transform: uppercase;
	color: var(--ivp-primary);
}

.ivp-app .ivp-lead {
	max-width: 40rem;
	font-size: var(--ivp-fs-lg);
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-muted {
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ivp-sp-3);
	margin-top: var(--ivp-sp-2);
}

.ivp-app .ivp-gradient-text {
	color: var(--ivp-primary);
	background: var(--ivp-grad-text);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ivp-app .ivp-mesh-bg {
	background-color: var(--ivp-bg);
	background-image: var(--ivp-grad-mesh);
}

.ivp-app .ivp-blob {
	position: absolute;
	z-index: 0;
	width: var(--ivp-blob-size, 18rem);
	aspect-ratio: 1;
	border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	background: var(--ivp-blob-fill, var(--ivp-grad-aurora));
	opacity: var(--ivp-blob-opacity, 0.35);
	filter: blur(var(--ivp-blob-blur, 48px));
	pointer-events: none;
	will-change: transform;
}

.ivp-app .ivp-blob--sunset { --ivp-blob-fill: var(--ivp-grad-sunset); }
.ivp-app .ivp-blob--ocean { --ivp-blob-fill: var(--ivp-grad-ocean); }
.ivp-app .ivp-blob--candy { --ivp-blob-fill: var(--ivp-grad-candy); }
.ivp-app .ivp-blob--forest { --ivp-blob-fill: var(--ivp-grad-forest); }

.ivp-app .ivp-divider {
	height: 1px;
	margin-block: var(--ivp-sp-6);
	border: 0;
	background: var(--ivp-border);
}

.ivp-app .ivp-link {
	color: var(--ivp-link);
	font-weight: var(--ivp-fw-medium);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
}

.ivp-app .ivp-link:hover {
	text-decoration-color: currentColor;
}

.ivp-app .ivp-kbd {
	display: inline-grid;
	place-items: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 var(--ivp-sp-1);
	border: 1px solid var(--ivp-border-strong);
	border-bottom-width: 2px;
	border-radius: var(--ivp-r-xs);
	font-family: var(--ivp-font-mono);
	font-size: var(--ivp-fs-xs);
	color: var(--ivp-text-muted);
	background: var(--ivp-surface);
}

@media (max-width: 47.99rem) {
	.ivp-app .ivp-hide-sm {
		display: none !important;
	}
}

@media (min-width: 48rem) {
	.ivp-app .ivp-show-sm {
		display: none !important;
	}

	.ivp-app .ivp-container,
	.ivp-app .ivp-page {
		padding-inline: var(--ivp-sp-6);
	}

	.ivp-app .ivp-page {
		padding-top: var(--ivp-sp-12);
	}
}

/* Mounts are filled by page scripts; keep a minimum so the footer does not jump. */
.ivp-app .ivp-mount {
	min-height: 6rem;
}

.ivp-app .ivp-mount[aria-busy="true"] {
	cursor: progress;
}

/* Auth pages */
.ivp-app .ivp-auth {
	position: relative;
	display: grid;
	place-items: center;
	padding: var(--ivp-sp-10) var(--ivp-sp-4) var(--ivp-sp-16);
}

.ivp-app .ivp-auth__card {
	width: 100%;
	max-width: var(--ivp-container-narrow);
	display: grid;
	gap: var(--ivp-sp-4);
	padding: var(--ivp-sp-8) var(--ivp-sp-6);
}

.ivp-app .ivp-auth__title {
	font-size: var(--ivp-fs-3xl);
}

.ivp-app .ivp-auth__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--ivp-sp-2) var(--ivp-sp-4);
	font-size: var(--ivp-fs-sm);
}

/* Notices */
.ivp-app .ivp-notice {
	--ivp-notice-color: var(--ivp-info);
	--ivp-notice-soft: var(--ivp-info-soft);
	display: flex;
	align-items: flex-start;
	gap: var(--ivp-sp-3);
	padding: var(--ivp-sp-3) var(--ivp-sp-4);
	border: 1px solid var(--ivp-notice-soft);
	border-inline-start: 4px solid var(--ivp-notice-color);
	border-radius: var(--ivp-r-md);
	font-size: var(--ivp-fs-sm);
	color: var(--ivp-text);
	background: var(--ivp-notice-soft);
}

.ivp-app .ivp-notice > .ivp-icon {
	flex-shrink: 0;
	color: var(--ivp-notice-color);
}

.ivp-app .ivp-notice--success { --ivp-notice-color: var(--ivp-success); --ivp-notice-soft: var(--ivp-success-soft); }
.ivp-app .ivp-notice--warning { --ivp-notice-color: var(--ivp-warning); --ivp-notice-soft: var(--ivp-warning-soft); }
.ivp-app .ivp-notice--danger { --ivp-notice-color: var(--ivp-danger); --ivp-notice-soft: var(--ivp-danger-soft); }

/* ==========================================================================
   Icons
   ========================================================================== */

.ivp-app .ivp-icon {
	display: inline-block;
	flex-shrink: 0;
	width: var(--ivp-icon-size, 1.25em);
	height: var(--ivp-icon-size, 1.25em);
	vertical-align: -0.25em;
	overflow: visible;
	pointer-events: none;
}

.ivp-app .ivp-icon--xs { --ivp-icon-size: 0.875rem; }
.ivp-app .ivp-icon--sm { --ivp-icon-size: 1rem; }
.ivp-app .ivp-icon--md { --ivp-icon-size: 1.25rem; }
.ivp-app .ivp-icon--lg { --ivp-icon-size: 1.5rem; }
.ivp-app .ivp-icon--xl { --ivp-icon-size: 2rem; }
.ivp-app .ivp-icon--2xl { --ivp-icon-size: 3rem; }

.ivp-app .ivp-icon--grad-aurora { stroke: url(#ivp-ig-aurora); --ivp-icon-fill: url(#ivp-ig-aurora); }
.ivp-app .ivp-icon--grad-sunset { stroke: url(#ivp-ig-sunset); --ivp-icon-fill: url(#ivp-ig-sunset); }
.ivp-app .ivp-icon--grad-ocean { stroke: url(#ivp-ig-ocean); --ivp-icon-fill: url(#ivp-ig-ocean); }
.ivp-app .ivp-icon--grad-candy { stroke: url(#ivp-ig-candy); --ivp-icon-fill: url(#ivp-ig-candy); }
.ivp-app .ivp-icon--grad-forest { stroke: url(#ivp-ig-forest); --ivp-icon-fill: url(#ivp-ig-forest); }
.ivp-app .ivp-icon--grad-primary { stroke: url(#ivp-ig-primary); --ivp-icon-fill: url(#ivp-ig-primary); }

/* Icon chip: an icon on a soft tinted square, used by features and stat cards. */
.ivp-app .ivp-icon-chip {
	display: inline-grid;
	place-items: center;
	width: var(--ivp-chip-size, 3rem);
	height: var(--ivp-chip-size, 3rem);
	border-radius: var(--ivp-r-md);
	color: var(--ivp-primary);
	background: var(--ivp-primary-soft);
}

.ivp-app .ivp-icon-chip > .ivp-icon {
	--ivp-icon-size: 1.5rem;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.ivp-app .ivp-btn {
	--ivp-btn-fg: var(--ivp-text);
	--ivp-btn-bg: var(--ivp-surface);
	--ivp-btn-border: var(--ivp-border-strong);
	--ivp-btn-h: var(--ivp-tap);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ivp-sp-2);
	min-height: var(--ivp-btn-h);
	padding: 0 var(--ivp-sp-5);
	border: 1px solid var(--ivp-btn-border);
	border-radius: var(--ivp-r-md);
	font-family: inherit;
	font-size: var(--ivp-fs-sm);
	font-weight: var(--ivp-fw-semibold);
	line-height: 1.2;
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	color: var(--ivp-btn-fg);
	background: var(--ivp-btn-bg);
	box-shadow: var(--ivp-shadow-xs);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

.ivp-app .ivp-btn:hover {
	color: var(--ivp-btn-fg);
	text-decoration: none;
}

.ivp-app .ivp-btn:focus-visible {
	outline: 2px solid var(--ivp-focus);
	outline-offset: 2px;
	box-shadow: var(--ivp-ring);
}

.ivp-app .ivp-btn--secondary:hover,
.ivp-app .ivp-btn:not(.ivp-btn--primary):not(.ivp-btn--ghost):not(.ivp-btn--danger):hover {
	--ivp-btn-bg: var(--ivp-surface-2);
	--ivp-btn-border: var(--ivp-primary);
	--ivp-btn-fg: var(--ivp-primary);
}

.ivp-app .ivp-btn--primary {
	--ivp-btn-fg: var(--ivp-white);
	--ivp-btn-border: transparent;
	background: var(--ivp-grad-primary);
	background-size: 160% 160%;
	background-position: 0% 50%;
	box-shadow: var(--ivp-shadow-sm);
}

.ivp-app .ivp-btn--primary:hover {
	background-position: 100% 50%;
	box-shadow: var(--ivp-shadow-glow);
}

.ivp-app .ivp-btn--ghost {
	--ivp-btn-fg: var(--ivp-text);
	--ivp-btn-bg: transparent;
	--ivp-btn-border: transparent;
	box-shadow: none;
}

.ivp-app .ivp-btn--ghost:hover {
	--ivp-btn-fg: var(--ivp-primary);
	--ivp-btn-bg: var(--ivp-primary-soft);
}

.ivp-app .ivp-btn--danger {
	--ivp-btn-fg: var(--ivp-on-danger);
	--ivp-btn-bg: var(--ivp-danger);
	--ivp-btn-border: transparent;
}

.ivp-app .ivp-btn--danger:hover {
	box-shadow: 0 10px 28px -8px var(--ivp-danger-ring), 0 0 0 1px var(--ivp-danger-ring);
}

.ivp-app .ivp-btn--danger:focus-visible {
	outline-color: var(--ivp-danger);
	box-shadow: 0 0 0 4px var(--ivp-danger-ring);
}

.ivp-app .ivp-btn--sm {
	--ivp-btn-h: 2.25rem;
	padding-inline: var(--ivp-sp-3);
	font-size: var(--ivp-fs-xs);
	border-radius: var(--ivp-r-sm);
}

.ivp-app .ivp-btn--lg {
	--ivp-btn-h: 3.25rem;
	padding-inline: var(--ivp-sp-7);
	font-size: var(--ivp-fs-base);
	border-radius: var(--ivp-r-lg);
}

.ivp-app .ivp-btn--icon {
	width: var(--ivp-btn-h);
	padding: 0;
	border-radius: var(--ivp-r-full);
}

.ivp-app .ivp-btn--block {
	display: flex;
	width: 100%;
}

.ivp-app .ivp-btn > .ivp-icon {
	--ivp-icon-size: 1.15em;
}

.ivp-app .ivp-btn--lg > .ivp-icon {
	--ivp-icon-size: 1.25em;
}

.ivp-app .ivp-btn:disabled,
.ivp-app .ivp-btn[aria-disabled="true"],
.ivp-app .ivp-btn.is-disabled {
	opacity: 0.5;
	box-shadow: none;
	cursor: not-allowed;
	filter: saturate(0.6);
}

.ivp-app a.ivp-btn[aria-disabled="true"] {
	pointer-events: none;
}

/* Loading keeps the label in flow (so width never changes) and paints it transparent. */
.ivp-app .ivp-btn__spinner {
	position: absolute;
	inset: 0;
	display: none;
	place-items: center;
	color: var(--ivp-btn-fg);
	pointer-events: none;
}

.ivp-app .ivp-btn.is-loading {
	color: transparent;
	cursor: progress;
	pointer-events: none;
}

.ivp-app .ivp-btn.is-loading > .ivp-icon {
	visibility: hidden;
}

.ivp-app .ivp-btn.is-loading > .ivp-btn__spinner {
	display: grid;
}

.ivp-app .ivp-btn.is-loading:disabled {
	opacity: 1;
	filter: none;
}

.ivp-app .ivp-btn-group {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--ivp-sp-2);
}

/* Ripple host is injected by ui.js so buttons never need overflow:hidden (tooltips stay visible). */
.ivp-app .ivp-ripples {
	position: absolute;
	inset: -1px;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

.ivp-app .ivp-ripple {
	position: absolute;
	border-radius: 50%;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
}

.ivp-app .ivp-btn--primary .ivp-ripple {
	background: var(--ivp-white);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.ivp-app .ivp-form {
	display: grid;
	gap: var(--ivp-sp-4);
}

.ivp-app .ivp-field {
	position: relative;
	display: grid;
	gap: var(--ivp-sp-2);
	min-width: 0;
}

.ivp-app .ivp-field--inline {
	display: flex;
	align-items: center;
	gap: var(--ivp-sp-2);
}

.ivp-app .ivp-label {
	font-size: var(--ivp-fs-sm);
	font-weight: var(--ivp-fw-medium);
	color: var(--ivp-text);
}

.ivp-app .ivp-field--inline .ivp-label {
	font-weight: var(--ivp-fw-regular);
}

.ivp-app .ivp-control {
	position: relative;
	display: block;
	min-width: 0;
}

.ivp-app .ivp-input,
.ivp-app .ivp-textarea,
.ivp-app .ivp-select {
	display: block;
	width: 100%;
	min-height: 3rem;
	padding: var(--ivp-sp-3) var(--ivp-sp-4);
	border: 1.5px solid var(--ivp-border-strong);
	border-radius: var(--ivp-r-md);
	font-family: inherit;
	font-size: var(--ivp-fs-base);
	line-height: 1.4;
	color: var(--ivp-text);
	background-color: var(--ivp-surface);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.ivp-app .ivp-textarea,
.ivp-app textarea.ivp-input {
	min-height: 7.5rem;
	line-height: var(--ivp-lh);
	resize: vertical;
}

.ivp-app .ivp-select,
.ivp-app select.ivp-input {
	padding-inline-end: var(--ivp-sp-10);
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 1.25rem) 50%,
		calc(100% - 0.9375rem) 50%;
	background-size: 0.3125rem 0.3125rem;
	background-repeat: no-repeat;
	cursor: pointer;
}

.ivp-app .ivp-input::placeholder,
.ivp-app .ivp-textarea::placeholder {
	color: var(--ivp-text-subtle);
	opacity: 1;
}

.ivp-app .ivp-input:hover,
.ivp-app .ivp-textarea:hover,
.ivp-app .ivp-select:hover {
	border-color: var(--ivp-text-subtle);
}

.ivp-app .ivp-input:focus,
.ivp-app .ivp-textarea:focus,
.ivp-app .ivp-select:focus {
	outline: none;
	border-color: var(--ivp-primary);
	box-shadow: var(--ivp-ring);
}

.ivp-app .ivp-input:active,
.ivp-app .ivp-select:active {
	border-color: var(--ivp-primary);
}

.ivp-app .ivp-input:disabled,
.ivp-app .ivp-textarea:disabled,
.ivp-app .ivp-select:disabled,
.ivp-app .ivp-input[readonly] {
	color: var(--ivp-text-muted);
	background-color: var(--ivp-surface-2);
	border-color: var(--ivp-border);
	cursor: not-allowed;
}

.ivp-app .ivp-input[readonly] {
	cursor: text;
}

/* Floating labels: <div class="ivp-control ivp-float"><input placeholder=" "><label></div> */
.ivp-app .ivp-float > .ivp-input,
.ivp-app .ivp-float > .ivp-textarea,
.ivp-app .ivp-float > .ivp-select {
	min-height: 3.5rem;
	padding-top: 1.5rem;
	padding-bottom: 0.5rem;
}

.ivp-app .ivp-float > .ivp-label {
	position: absolute;
	top: 1rem;
	left: calc(var(--ivp-sp-4) + 1.5px);
	max-width: calc(100% - var(--ivp-sp-8));
	overflow: hidden;
	font-size: var(--ivp-fs-base);
	font-weight: var(--ivp-fw-regular);
	line-height: 1.5rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--ivp-text-subtle);
	transform-origin: 0 0;
	pointer-events: none;
}

.ivp-app .ivp-float > .ivp-input::placeholder,
.ivp-app .ivp-float > .ivp-textarea::placeholder {
	color: transparent;
}

.ivp-app .ivp-float > :focus ~ .ivp-label,
.ivp-app .ivp-float > :not(:placeholder-shown) ~ .ivp-label,
.ivp-app .ivp-float > .ivp-select ~ .ivp-label {
	font-weight: var(--ivp-fw-medium);
	color: var(--ivp-text-muted);
	transform: translateY(-0.625rem) scale(0.78);
}

/* Separate rules: an unsupported pseudo-class would void the whole selector list. */
.ivp-app .ivp-float > :-webkit-autofill ~ .ivp-label {
	transform: translateY(-0.625rem) scale(0.78);
}

.ivp-app .ivp-float > :autofill ~ .ivp-label {
	transform: translateY(-0.625rem) scale(0.78);
}

.ivp-app .ivp-float > :focus ~ .ivp-label {
	color: var(--ivp-primary);
}

/* Validation */
.ivp-app .ivp-field__status {
	position: absolute;
	top: 50%;
	right: var(--ivp-sp-3);
	display: none;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: -0.625rem;
	pointer-events: none;
}

.ivp-app .ivp-field__status > .ivp-icon {
	--ivp-icon-size: 1.25rem;
	position: absolute;
	inset: 0;
	display: none;
}

.ivp-app .ivp-field.is-invalid .ivp-field__status,
.ivp-app .ivp-field.is-valid .ivp-field__status,
.ivp-app .ivp-field.is-loading .ivp-field__status {
	display: block;
}

.ivp-app .ivp-field.is-invalid .ivp-field__status-invalid,
.ivp-app .ivp-field.is-valid .ivp-field__status-valid,
.ivp-app .ivp-field.is-loading .ivp-field__status-loading {
	display: block;
}

.ivp-app .ivp-field__status-invalid { color: var(--ivp-danger); }
.ivp-app .ivp-field__status-valid { color: var(--ivp-success); }
.ivp-app .ivp-field__status-loading { color: var(--ivp-primary); }

.ivp-app .ivp-field.is-invalid .ivp-input,
.ivp-app .ivp-field.is-valid .ivp-input,
.ivp-app .ivp-field.is-loading .ivp-input {
	padding-inline-end: var(--ivp-sp-10);
}

.ivp-app .ivp-field.is-invalid .ivp-input,
.ivp-app .ivp-field.is-invalid .ivp-textarea,
.ivp-app .ivp-field.is-invalid .ivp-select,
.ivp-app .ivp-input[aria-invalid="true"] {
	border-color: var(--ivp-danger);
}

.ivp-app .ivp-field.is-invalid .ivp-input:focus,
.ivp-app .ivp-field.is-invalid .ivp-textarea:focus,
.ivp-app .ivp-field.is-invalid .ivp-select:focus,
.ivp-app .ivp-input[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 4px var(--ivp-danger-ring);
}

.ivp-app .ivp-field.is-invalid .ivp-float > .ivp-label {
	color: var(--ivp-danger);
}

.ivp-app .ivp-field.is-valid .ivp-input,
.ivp-app .ivp-field.is-valid .ivp-textarea {
	border-color: var(--ivp-success);
}

.ivp-app .ivp-field__msg {
	display: flex;
	align-items: flex-start;
	gap: var(--ivp-sp-1);
	font-size: var(--ivp-fs-sm);
	color: var(--ivp-danger);
}

.ivp-app .ivp-field.is-valid .ivp-field__msg {
	color: var(--ivp-success);
}

.ivp-app .ivp-field__msg:empty {
	display: none;
}

.ivp-app .ivp-field__hint {
	font-size: var(--ivp-fs-sm);
	color: var(--ivp-text-muted);
}

/* Password field with show/hide toggle */
.ivp-app .ivp-password > .ivp-input {
	padding-inline-end: 3.25rem;
}

.ivp-app .ivp-field.is-invalid .ivp-password > .ivp-input,
.ivp-app .ivp-field.is-valid .ivp-password > .ivp-input {
	padding-inline-end: 5.25rem;
}

.ivp-app .ivp-password .ivp-field__status {
	right: 3.25rem;
}

.ivp-app .ivp-password__toggle {
	position: absolute;
	top: 50%;
	right: var(--ivp-sp-1);
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-top: -1.25rem;
	border-radius: var(--ivp-r-full);
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-password__toggle:hover {
	color: var(--ivp-primary);
	background: var(--ivp-primary-soft);
}

.ivp-app .ivp-password__toggle > .ivp-icon {
	--ivp-icon-size: 1.25rem;
	grid-area: 1 / 1;
}

.ivp-app .ivp-password__toggle .ivp-icon-eye-off,
.ivp-app .ivp-password__toggle[aria-pressed="true"] .ivp-icon-eye {
	opacity: 0;
	transform: rotate(-30deg) scale(0.6);
}

.ivp-app .ivp-password__toggle[aria-pressed="true"] .ivp-icon-eye-off {
	opacity: 1;
	transform: none;
}

/* Strength meter: data-score 0–4 */
.ivp-app .ivp-strength {
	--ivp-strength-color: var(--ivp-border-strong);
	display: grid;
	gap: var(--ivp-sp-1);
}

.ivp-app .ivp-strength__bars {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ivp-sp-1);
}

.ivp-app .ivp-strength__bars > i {
	position: relative;
	display: block;
	height: 6px;
	overflow: hidden;
	border-radius: var(--ivp-r-full);
	background: var(--ivp-surface-3);
}

.ivp-app .ivp-strength__bars > i::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--ivp-strength-color);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.ivp-app .ivp-strength__label {
	min-height: 1.25rem;
	font-size: var(--ivp-fs-xs);
	font-weight: var(--ivp-fw-semibold);
	color: var(--ivp-strength-color);
}

.ivp-app .ivp-strength[data-score="1"] { --ivp-strength-color: var(--ivp-danger); }
.ivp-app .ivp-strength[data-score="2"] { --ivp-strength-color: var(--ivp-warning); }
.ivp-app .ivp-strength[data-score="3"] { --ivp-strength-color: var(--ivp-info); }
.ivp-app .ivp-strength[data-score="4"] { --ivp-strength-color: var(--ivp-success); }

.ivp-app .ivp-strength[data-score="1"] .ivp-strength__bars > i:nth-child(-n+1)::after,
.ivp-app .ivp-strength[data-score="2"] .ivp-strength__bars > i:nth-child(-n+2)::after,
.ivp-app .ivp-strength[data-score="3"] .ivp-strength__bars > i:nth-child(-n+3)::after,
.ivp-app .ivp-strength[data-score="4"] .ivp-strength__bars > i::after {
	transform: scaleX(1);
}

/* Native checkbox (legacy) and custom check */
.ivp-app .ivp-checkbox {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--ivp-primary);
	cursor: pointer;
}

.ivp-app .ivp-check {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--ivp-sp-3);
	min-height: var(--ivp-tap);
	font-size: var(--ivp-fs-sm);
	cursor: pointer;
}

.ivp-app .ivp-check__input,
.ivp-app .ivp-switch__input,
.ivp-app .ivp-tile__check {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.ivp-app .ivp-check__box {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 1.375rem;
	height: 1.375rem;
	border: 2px solid var(--ivp-border-strong);
	border-radius: var(--ivp-r-xs);
	color: var(--ivp-white);
	background: var(--ivp-surface);
}

.ivp-app .ivp-check__box > .ivp-icon {
	--ivp-icon-size: 0.9375rem;
	stroke-width: 3;
	opacity: 0;
	transform: scale(0);
}

.ivp-app .ivp-check:hover .ivp-check__box {
	border-color: var(--ivp-primary);
}

.ivp-app .ivp-check__input:focus-visible + .ivp-check__box {
	box-shadow: var(--ivp-ring);
	border-color: var(--ivp-primary);
}

.ivp-app .ivp-check__input:checked + .ivp-check__box {
	border-color: transparent;
	background: var(--ivp-grad-primary);
}

.ivp-app .ivp-check__input:checked + .ivp-check__box > .ivp-icon {
	opacity: 1;
	transform: none;
}

.ivp-app .ivp-check__input:disabled + .ivp-check__box,
.ivp-app .ivp-check__input:disabled ~ .ivp-check__label {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Switch */
.ivp-app .ivp-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--ivp-sp-3);
	min-height: var(--ivp-tap);
	font-size: var(--ivp-fs-sm);
	cursor: pointer;
}

.ivp-app .ivp-switch__track {
	position: relative;
	flex-shrink: 0;
	width: 2.75rem;
	height: 1.5rem;
	border-radius: var(--ivp-r-full);
	background: var(--ivp-surface-3);
	box-shadow: inset 0 0 0 1px var(--ivp-border-strong);
}

.ivp-app .ivp-switch__thumb {
	position: absolute;
	top: 0.1875rem;
	left: 0.1875rem;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	background: var(--ivp-white);
	box-shadow: var(--ivp-shadow-sm);
}

.ivp-app .ivp-switch__input:checked + .ivp-switch__track {
	background: var(--ivp-grad-primary);
	box-shadow: none;
}

.ivp-app .ivp-switch__input:checked + .ivp-switch__track .ivp-switch__thumb {
	transform: translateX(1.25rem);
}

.ivp-app .ivp-switch__input:focus-visible + .ivp-switch__track {
	box-shadow: var(--ivp-ring);
}

.ivp-app .ivp-switch__input:disabled + .ivp-switch__track {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Search box */
.ivp-app .ivp-search {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
}

.ivp-app .ivp-search__icon {
	position: absolute;
	left: var(--ivp-sp-4);
	--ivp-icon-size: 1.125rem;
	color: var(--ivp-text-subtle);
}

.ivp-app .ivp-search__input {
	min-height: 2.75rem;
	padding-inline: 2.75rem 3rem;
	border-color: transparent;
	border-radius: var(--ivp-r-full);
	font-size: var(--ivp-fs-sm);
	background-color: var(--ivp-surface-2);
}

.ivp-app .ivp-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.ivp-app .ivp-search__input:hover {
	border-color: var(--ivp-border-strong);
}

.ivp-app .ivp-search__input:focus {
	background-color: var(--ivp-surface);
}

.ivp-app .ivp-search:focus-within .ivp-search__icon {
	color: var(--ivp-primary);
}

.ivp-app .ivp-search__kbd {
	position: absolute;
	right: var(--ivp-sp-3);
	pointer-events: none;
}

.ivp-app .ivp-search:focus-within .ivp-search__kbd {
	opacity: 0;
}

/* Header live search results */
.ivp-app .ivp-hsearch {
	position: absolute;
	top: calc(100% + var(--ivp-sp-2));
	left: 0;
	z-index: var(--ivp-z-dropdown);
	display: grid;
	gap: var(--ivp-sp-1);
	width: max(100%, 24rem);
	max-width: calc(100vw - var(--ivp-sp-8));
	max-height: min(32rem, calc(100vh - var(--ivp-header-h) - var(--ivp-sp-8)));
	padding: var(--ivp-sp-2);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--ivp-border);
	border-radius: var(--ivp-r-lg);
	text-align: start;
	color: var(--ivp-text);
	background: var(--ivp-surface);
	box-shadow: var(--ivp-shadow-lg);
}

.ivp-app .ivp-hsearch[hidden],
.ivp-app .ivp-hsearch__state[hidden] {
	display: none;
}

.ivp-app .ivp-hsearch__list {
	display: grid;
	gap: var(--ivp-sp-1);
	min-width: 0;
}

.ivp-app .ivp-hsearch.is-busy .ivp-hsearch__list {
	opacity: 0.6;
}

.ivp-app .ivp-hsearch__group {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.ivp-app .ivp-hsearch__group + .ivp-hsearch__group {
	padding-top: var(--ivp-sp-1);
	border-top: 1px solid var(--ivp-border);
}

.ivp-app .ivp-hsearch__heading {
	padding: var(--ivp-sp-2) var(--ivp-sp-2) var(--ivp-sp-1);
	font-size: var(--ivp-fs-xs);
	font-weight: var(--ivp-fw-bold);
	letter-spacing: var(--ivp-ls-wide);
	text-transform: uppercase;
	color: var(--ivp-text-subtle);
}

.ivp-app .ivp-hsearch__option {
	display: flex;
	align-items: center;
	gap: var(--ivp-sp-3);
	min-width: 0;
	min-height: 3rem;
	padding: var(--ivp-sp-1) var(--ivp-sp-2);
	border-radius: var(--ivp-r-md);
	text-decoration: none;
	color: var(--ivp-text);
}

.ivp-app .ivp-hsearch__option:hover {
	background: var(--ivp-surface-2);
}

.ivp-app .ivp-hsearch__option.is-active {
	outline: 2px solid var(--ivp-focus);
	outline-offset: -2px;
	background: var(--ivp-primary-soft);
}

.ivp-app .ivp-hsearch__thumb {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	overflow: hidden;
	border-radius: var(--ivp-r-sm);
	color: var(--ivp-text-subtle);
	background: var(--ivp-surface-2);
	--ivp-icon-size: 1.25rem;
}

.ivp-app .ivp-hsearch__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ivp-app .ivp-hsearch__thumb img.is-blurred {
	filter: blur(6px);
	transform: scale(1.2);
}

.ivp-app .ivp-hsearch__body {
	display: grid;
	flex: 1 1 auto;
	gap: 2px;
	min-width: 0;
}

.ivp-app .ivp-hsearch__title,
.ivp-app .ivp-hsearch__meta {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ivp-app .ivp-hsearch__title {
	font-size: var(--ivp-fs-sm);
	font-weight: var(--ivp-fw-medium);
}

.ivp-app .ivp-hsearch__meta {
	font-size: var(--ivp-fs-xs);
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-hsearch__mark {
	padding: 0 1px;
	border-radius: 2px;
	color: var(--ivp-n-950);
	background: var(--ivp-amber);
}

.ivp-app .ivp-hsearch__option--all {
	min-height: 2.75rem;
	margin-top: var(--ivp-sp-1);
	font-weight: var(--ivp-fw-semibold);
	color: var(--ivp-primary);
}

.ivp-app .ivp-hsearch__option--all .ivp-hsearch__thumb {
	width: 2rem;
	height: 2rem;
	margin-inline: 0.25rem;
	color: var(--ivp-primary);
	background: var(--ivp-primary-soft);
	--ivp-icon-size: 1rem;
}

.ivp-app .ivp-hsearch__option--all .ivp-hsearch__title {
	font-weight: var(--ivp-fw-semibold);
}

.ivp-app .ivp-hsearch__state {
	display: flex;
	align-items: center;
	gap: var(--ivp-sp-2);
	margin: 0;
	padding: var(--ivp-sp-3) var(--ivp-sp-2);
	font-size: var(--ivp-fs-sm);
	color: var(--ivp-text-muted);
	--ivp-icon-size: 1.125rem;
}

.ivp-app .ivp-hsearch__state .ivp-icon {
	flex: none;
	color: var(--ivp-primary);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.ivp-app .ivp-card {
	position: relative;
	display: block;
	padding: var(--ivp-sp-6);
	border: 1px solid var(--ivp-border);
	border-radius: var(--ivp-r-xl);
	color: inherit;
	background: var(--ivp-surface);
	box-shadow: var(--ivp-shadow-sm);
}

.ivp-app .ivp-card:not(.ivp-card--static):not(.ivp-auth__card):hover {
	box-shadow: var(--ivp-shadow-lg);
}

.ivp-app .ivp-card--gradient {
	border: 1.5px solid transparent;
	background:
		linear-gradient(var(--ivp-surface), var(--ivp-surface)) padding-box,
		var(--ivp-grad-aurora) border-box;
	background-size: 100% 100%, 200% 200%;
}

.ivp-app .ivp-card--gradient:not(.ivp-card--static):hover {
	box-shadow: var(--ivp-shadow-glow), var(--ivp-shadow-lg);
}

.ivp-app .ivp-card--interactive,
.ivp-app a.ivp-card {
	cursor: pointer;
	text-decoration: none;
}

.ivp-app .ivp-card--interactive:focus-visible,
.ivp-app a.ivp-card:focus-visible {
	outline: 2px solid var(--ivp-focus);
	outline-offset: 3px;
}

.ivp-app .ivp-card--interactive:active,
.ivp-app a.ivp-card:active {
	box-shadow: var(--ivp-shadow-md);
}

.ivp-app .ivp-card.is-disabled {
	opacity: 0.55;
	box-shadow: none;
	pointer-events: none;
}

.ivp-app .ivp-card.is-loading {
	pointer-events: none;
}

.ivp-app .ivp-card.is-loading > * {
	visibility: hidden;
}

.ivp-app .ivp-card.is-loading::after {
	content: "";
	position: absolute;
	inset: var(--ivp-sp-6);
	border-radius: var(--ivp-r-md);
	background:
		linear-gradient(var(--ivp-skeleton-base), var(--ivp-skeleton-base)) 0 0 / 55% 1.25rem no-repeat,
		linear-gradient(var(--ivp-skeleton-base), var(--ivp-skeleton-base)) 0 2.25rem / 100% 0.75rem no-repeat,
		linear-gradient(var(--ivp-skeleton-base), var(--ivp-skeleton-base)) 0 3.5rem / 85% 0.75rem no-repeat,
		linear-gradient(var(--ivp-skeleton-base), var(--ivp-skeleton-base)) 0 4.75rem / 65% 0.75rem no-repeat;
}

.ivp-app .ivp-card__media {
	margin: calc(-1 * var(--ivp-sp-6)) calc(-1 * var(--ivp-sp-6)) var(--ivp-sp-5);
	overflow: hidden;
	border-radius: var(--ivp-r-xl) var(--ivp-r-xl) 0 0;
}

.ivp-app .ivp-card__title {
	margin-bottom: var(--ivp-sp-2);
	font-size: var(--ivp-fs-xl);
}

.ivp-app .ivp-card__body {
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ivp-sp-3);
	margin-top: var(--ivp-sp-5);
	padding-top: var(--ivp-sp-4);
	border-top: 1px solid var(--ivp-border);
}

/* ==========================================================================
   Image tiles
   ========================================================================== */

.ivp-app .ivp-tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
	gap: var(--ivp-sp-3);
}

@media (min-width: 48rem) {
	.ivp-app .ivp-tile-grid {
		grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
		gap: var(--ivp-sp-4);
	}
}

.ivp-app .ivp-tile {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--ivp-r-lg);
	color: var(--ivp-on-image);
	background: var(--ivp-skeleton-base);
	box-shadow: var(--ivp-shadow-xs);
	isolation: isolate;
	cursor: pointer;
	outline: none;
}

.ivp-app .ivp-tile:hover {
	box-shadow: var(--ivp-shadow-md);
}

.ivp-app .ivp-tile:focus-visible {
	box-shadow: 0 0 0 3px var(--ivp-surface), 0 0 0 5px var(--ivp-focus);
}

.ivp-app .ivp-tile:has(.ivp-tile__link:focus-visible) {
	box-shadow: 0 0 0 3px var(--ivp-surface), 0 0 0 5px var(--ivp-focus);
}

.ivp-app .ivp-tile__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	outline: none;
}

.ivp-app .ivp-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.ivp-app .ivp-tile__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 2px;
	padding: var(--ivp-sp-3);
	background: var(--ivp-scrim);
	opacity: 0;
	pointer-events: none;
}

.ivp-app .ivp-tile__title {
	overflow: hidden;
	font-size: var(--ivp-fs-sm);
	font-weight: var(--ivp-fw-semibold);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ivp-app .ivp-tile__meta {
	font-size: var(--ivp-fs-xs);
	opacity: 0.85;
}

.ivp-app .ivp-tile__actions {
	position: absolute;
	top: var(--ivp-sp-2);
	right: var(--ivp-sp-2);
	z-index: 3;
	display: flex;
	gap: var(--ivp-sp-1);
}

.ivp-app .ivp-tile__action {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--ivp-r-full);
	color: var(--ivp-on-image);
	background: var(--ivp-tile-action-bg);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
}

.ivp-app .ivp-tile__action > .ivp-icon {
	--ivp-icon-size: 1.0625rem;
}

.ivp-app .ivp-tile__action:hover,
.ivp-app .ivp-tile__action:focus-visible {
	color: var(--ivp-white);
	background: var(--ivp-primary-1);
}

.ivp-app .ivp-tile__action--danger:hover,
.ivp-app .ivp-tile__action--danger:focus-visible {
	background: var(--ivp-rose-deep);
}

.ivp-app .ivp-tile:hover .ivp-tile__overlay,
.ivp-app .ivp-tile:focus-within .ivp-tile__overlay,
.ivp-app .ivp-tile:hover .ivp-tile__action,
.ivp-app .ivp-tile:focus-within .ivp-tile__action {
	opacity: 1;
}

.ivp-app .ivp-tile__select {
	position: absolute;
	top: var(--ivp-sp-2);
	left: var(--ivp-sp-2);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	cursor: pointer;
	opacity: 0;
	transform: scale(0.6);
}

.ivp-app .ivp-tile__box {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid var(--ivp-il-on-photo);
	border-radius: var(--ivp-r-full);
	color: var(--ivp-white);
	background: var(--ivp-tile-action-bg);
	box-shadow: var(--ivp-shadow-sm);
}

.ivp-app .ivp-tile__box > .ivp-icon {
	--ivp-icon-size: 0.875rem;
	stroke-width: 3;
	opacity: 0;
	transform: scale(0);
}

.ivp-app .ivp-tile:hover .ivp-tile__select,
.ivp-app .ivp-tile:focus-within .ivp-tile__select,
.ivp-app .ivp-tile-grid.is-selecting .ivp-tile__select,
.ivp-app .ivp-tile.is-selected .ivp-tile__select {
	opacity: 1;
	transform: none;
}

.ivp-app .ivp-tile__check:focus-visible + .ivp-tile__box {
	box-shadow: 0 0 0 3px var(--ivp-focus);
}

.ivp-app .ivp-tile__check:checked + .ivp-tile__box,
.ivp-app .ivp-tile.is-selected .ivp-tile__box {
	border-color: transparent;
	background: var(--ivp-grad-primary);
}

.ivp-app .ivp-tile__check:checked + .ivp-tile__box > .ivp-icon,
.ivp-app .ivp-tile.is-selected .ivp-tile__box > .ivp-icon {
	opacity: 1;
	transform: none;
}

.ivp-app .ivp-tile.is-selected {
	background: var(--ivp-primary-soft);
	box-shadow: inset 0 0 0 3px var(--ivp-primary);
}

.ivp-app .ivp-tile.is-selected .ivp-tile__img {
	transform: scale(0.9);
	border-radius: var(--ivp-r-md);
}

.ivp-app .ivp-tile.is-disabled {
	opacity: 0.5;
	filter: grayscale(0.8);
	pointer-events: none;
}

.ivp-app .ivp-tile.is-loading,
.ivp-app .ivp-tile--skeleton {
	cursor: default;
	box-shadow: none;
}

.ivp-app .ivp-tile.is-loading > :not(.ivp-tile__shine) {
	visibility: hidden;
}

.ivp-app .ivp-tile.is-loading::after,
.ivp-app .ivp-tile--skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(100deg, transparent 30%, var(--ivp-skeleton-shine) 50%, transparent 70%);
	background-size: 200% 100%;
	background-position: 200% 0;
	background-repeat: no-repeat;
}

.ivp-app .ivp-tile__badge {
	position: absolute;
	bottom: var(--ivp-sp-2);
	left: var(--ivp-sp-2);
	z-index: 3;
}

@media (hover: none) {
	.ivp-app .ivp-tile__action,
	.ivp-app .ivp-tile__select {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Modal and drawer
   ========================================================================== */

.ivp-app .ivp-modal {
	position: fixed;
	inset: 0;
	z-index: var(--ivp-z-modal);
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.ivp-app .ivp-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--ivp-overlay);
	-webkit-backdrop-filter: blur(8px) saturate(1.2);
	backdrop-filter: blur(8px) saturate(1.2);
	opacity: 0;
}

.ivp-app .ivp-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: calc(100dvh - var(--ivp-sp-8));
	overflow: hidden;
	border: 1px solid var(--ivp-border);
	border-radius: var(--ivp-r-2xl) var(--ivp-r-2xl) 0 0;
	color: var(--ivp-text);
	background: var(--ivp-surface);
	box-shadow: var(--ivp-shadow-xl);
	opacity: 0;
	transform: translateY(32px) scale(0.98);
	outline: none;
}

.ivp-app .ivp-modal.is-open .ivp-modal__backdrop {
	opacity: 1;
}

.ivp-app .ivp-modal.is-open .ivp-modal__panel {
	opacity: 1;
	transform: none;
}

.ivp-app .ivp-modal__header {
	display: flex;
	align-items: center;
	gap: var(--ivp-sp-3);
	padding: var(--ivp-sp-5) var(--ivp-sp-5) var(--ivp-sp-3) var(--ivp-sp-6);
}

.ivp-app .ivp-modal__title {
	flex: 1;
	min-width: 0;
	font-size: var(--ivp-fs-xl);
}

.ivp-app .ivp-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--ivp-sp-2) var(--ivp-sp-6) var(--ivp-sp-6);
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-modal__footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--ivp-sp-3);
	padding: var(--ivp-sp-4) var(--ivp-sp-6);
	border-top: 1px solid var(--ivp-border);
	background: var(--ivp-surface-2);
}

@media (min-width: 48rem) {
	.ivp-app .ivp-modal {
		align-items: center;
		padding: var(--ivp-sp-6);
	}

	.ivp-app .ivp-modal__panel {
		max-width: var(--ivp-modal-w, 32rem);
		max-height: calc(100dvh - var(--ivp-sp-12));
		border-radius: var(--ivp-r-2xl);
		transform: translateY(24px) scale(0.94);
	}

	.ivp-app .ivp-modal--lg {
		--ivp-modal-w: 48rem;
	}
}

.ivp-app .ivp-modal--drawer {
	align-items: stretch;
	justify-content: flex-end;
	padding: 0;
}

.ivp-app .ivp-modal--drawer .ivp-modal__panel {
	width: min(100%, 24rem);
	max-width: none;
	height: 100%;
	max-height: none;
	border-width: 0 0 0 1px;
	border-radius: var(--ivp-r-2xl) 0 0 var(--ivp-r-2xl);
	transform: translateX(100%);
}

.ivp-app .ivp-modal--drawer.is-open .ivp-modal__panel {
	transform: none;
}

/* ==========================================================================
   Toasts
   ========================================================================== */

.ivp-app .ivp-toasts {
	position: fixed;
	right: var(--ivp-sp-4);
	bottom: var(--ivp-sp-4);
	left: var(--ivp-sp-4);
	z-index: var(--ivp-z-toast);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--ivp-sp-2);
	pointer-events: none;
}

@media (min-width: 36rem) {
	.ivp-app .ivp-toasts {
		left: auto;
		width: 24rem;
	}
}

.ivp-app .ivp-toast {
	--ivp-toast-color: var(--ivp-info);
	--ivp-toast-soft: var(--ivp-info-soft);
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	gap: var(--ivp-sp-3);
	padding: var(--ivp-sp-3) var(--ivp-sp-3) var(--ivp-sp-4) var(--ivp-sp-4);
	overflow: hidden;
	border: 1px solid var(--ivp-border);
	border-radius: var(--ivp-r-lg);
	color: var(--ivp-text);
	background: var(--ivp-surface);
	box-shadow: var(--ivp-shadow-lg);
	pointer-events: auto;
}

.ivp-app .ivp-toast--success { --ivp-toast-color: var(--ivp-success); --ivp-toast-soft: var(--ivp-success-soft); }
.ivp-app .ivp-toast--warning { --ivp-toast-color: var(--ivp-warning); --ivp-toast-soft: var(--ivp-warning-soft); }
.ivp-app .ivp-toast--danger { --ivp-toast-color: var(--ivp-danger); --ivp-toast-soft: var(--ivp-danger-soft); }
.ivp-app .ivp-toast--loading { --ivp-toast-color: var(--ivp-primary); --ivp-toast-soft: var(--ivp-primary-soft); }

.ivp-app .ivp-toast__icon {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--ivp-r-full);
	color: var(--ivp-toast-color);
	background: var(--ivp-toast-soft);
}

.ivp-app .ivp-toast__icon > .ivp-icon {
	--ivp-icon-size: 1.125rem;
}

.ivp-app .ivp-toast__content {
	min-width: 0;
	padding-top: 0.3rem;
}

.ivp-app .ivp-toast__title {
	font-size: var(--ivp-fs-sm);
	font-weight: var(--ivp-fw-semibold);
}

.ivp-app .ivp-toast__msg {
	font-size: var(--ivp-fs-sm);
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-toast__title + .ivp-toast__msg {
	margin-top: 2px;
}

.ivp-app .ivp-toast__close {
	--ivp-btn-h: 2rem;
}

.ivp-app .ivp-toast__progress {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
	height: 3px;
	background: var(--ivp-toast-color);
	transform-origin: 0 50%;
}

.ivp-app .ivp-toast.is-leaving {
	opacity: 0;
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.ivp-app .ivp-tabs__list {
	position: relative;
	display: flex;
	gap: var(--ivp-sp-1);
	overflow-x: auto;
	border-bottom: 1px solid var(--ivp-border);
	scrollbar-width: none;
}

.ivp-app .ivp-tabs__list::-webkit-scrollbar {
	display: none;
}

.ivp-app .ivp-tabs__tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--ivp-sp-2);
	flex-shrink: 0;
	min-height: var(--ivp-tap);
	padding: 0 var(--ivp-sp-4);
	border-radius: var(--ivp-r-sm) var(--ivp-r-sm) 0 0;
	font-size: var(--ivp-fs-sm);
	font-weight: var(--ivp-fw-medium);
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-tabs__tab:hover {
	color: var(--ivp-text);
	background: var(--ivp-surface-2);
}

.ivp-app .ivp-tabs__tab:focus-visible {
	outline-offset: -2px;
}

.ivp-app .ivp-tabs__tab[aria-selected="true"] {
	color: var(--ivp-primary);
	box-shadow: inset 0 -3px 0 var(--ivp-primary);
}

.ivp-app .ivp-tabs__tab:disabled {
	opacity: 0.45;
	background: none;
}

.ivp-app .ivp-tabs.is-ready .ivp-tabs__tab[aria-selected="true"] {
	box-shadow: none;
}

.ivp-app .ivp-tabs__indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	display: none;
	width: var(--ivp-tab-w, 0);
	height: 3px;
	border-radius: var(--ivp-r-full) var(--ivp-r-full) 0 0;
	background: var(--ivp-grad-primary);
	transform: translateX(var(--ivp-tab-x, 0));
	pointer-events: none;
}

.ivp-app .ivp-tabs.is-ready .ivp-tabs__indicator {
	display: block;
}

.ivp-app .ivp-tabs__panel {
	padding-top: var(--ivp-sp-6);
}

/* ==========================================================================
   Tooltips: data-ivp-tooltip="Text" (mirror it in aria-label for screen readers)
   ========================================================================== */

.ivp-app [data-ivp-tooltip] {
	position: relative;
}

.ivp-app [data-ivp-tooltip]::after {
	content: attr(data-ivp-tooltip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: var(--ivp-z-dropdown);
	width: max-content;
	max-width: 16rem;
	padding: var(--ivp-sp-1) var(--ivp-sp-2);
	border-radius: var(--ivp-r-sm);
	font-size: var(--ivp-fs-xs);
	font-weight: var(--ivp-fw-medium);
	line-height: 1.4;
	white-space: normal;
	text-align: center;
	color: var(--ivp-tooltip-text);
	background: var(--ivp-tooltip-bg);
	box-shadow: var(--ivp-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 4px);
	pointer-events: none;
}

.ivp-app [data-ivp-tooltip-pos="bottom"]::after {
	top: calc(100% + 8px);
	bottom: auto;
	transform: translate(-50%, -4px);
}

.ivp-app [data-ivp-tooltip]:hover::after,
.ivp-app [data-ivp-tooltip]:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* End-aligned: the tooltip grows inward from the trigger's right edge, for triggers at the edge of a scroll box. */
.ivp-app [data-ivp-tooltip-align="end"]::after {
	right: 0;
	left: auto;
	transform: translate(0, 4px);
}

.ivp-app [data-ivp-tooltip-align="end"][data-ivp-tooltip-pos="bottom"]::after {
	transform: translate(0, -4px);
}

.ivp-app [data-ivp-tooltip-align="end"]:hover::after,
.ivp-app [data-ivp-tooltip-align="end"]:focus-visible::after {
	transform: none;
}

@media (hover: none) {
	.ivp-app [data-ivp-tooltip]:hover::after {
		opacity: 0;
		visibility: hidden;
	}
}

/* ==========================================================================
   Dropdown menu
   ========================================================================== */

.ivp-app .ivp-dropdown {
	position: relative;
	display: inline-flex;
}

.ivp-app .ivp-menu {
	position: absolute;
	top: calc(100% + var(--ivp-sp-2));
	right: 0;
	z-index: var(--ivp-z-dropdown);
	display: grid;
	gap: 2px;
	min-width: 14rem;
	max-width: calc(100vw - var(--ivp-sp-8));
	padding: var(--ivp-sp-2);
	border: 1px solid var(--ivp-border);
	border-radius: var(--ivp-r-lg);
	background: var(--ivp-surface);
	box-shadow: var(--ivp-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(0.97);
	transform-origin: top right;
}

.ivp-app .ivp-menu--start {
	right: auto;
	left: 0;
	transform-origin: top left;
}

.ivp-app .ivp-dropdown.is-open > .ivp-menu,
html:not(.ivp-js) .ivp-app .ivp-dropdown:focus-within > .ivp-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ivp-app .ivp-menu__header {
	display: grid;
	gap: 2px;
	padding: var(--ivp-sp-2) var(--ivp-sp-3) var(--ivp-sp-3);
	margin-bottom: var(--ivp-sp-1);
	border-bottom: 1px solid var(--ivp-border);
	font-size: var(--ivp-fs-sm);
}

.ivp-app .ivp-menu__header strong {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ivp-app .ivp-menu__header span {
	overflow: hidden;
	font-size: var(--ivp-fs-xs);
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-menu__item {
	display: flex;
	align-items: center;
	gap: var(--ivp-sp-3);
	width: 100%;
	min-height: 2.5rem;
	padding: var(--ivp-sp-2) var(--ivp-sp-3);
	border-radius: var(--ivp-r-sm);
	font-size: var(--ivp-fs-sm);
	font-weight: var(--ivp-fw-medium);
	text-align: start;
	text-decoration: none;
	color: var(--ivp-text);
}

.ivp-app .ivp-menu__item > .ivp-icon {
	--ivp-icon-size: 1.125rem;
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-menu__item:hover,
.ivp-app .ivp-menu__item:focus-visible {
	color: var(--ivp-primary);
	background: var(--ivp-primary-soft);
	outline: none;
	text-decoration: none;
}

.ivp-app .ivp-menu__item:hover > .ivp-icon,
.ivp-app .ivp-menu__item:focus-visible > .ivp-icon {
	color: currentColor;
}

.ivp-app .ivp-menu__item[aria-current="page"] {
	color: var(--ivp-primary);
}

.ivp-app .ivp-menu__item--danger,
.ivp-app .ivp-menu__item--danger > .ivp-icon {
	color: var(--ivp-danger);
}

.ivp-app .ivp-menu__item--danger:hover,
.ivp-app .ivp-menu__item--danger:focus-visible {
	color: var(--ivp-danger);
	background: var(--ivp-danger-soft);
}

.ivp-app .ivp-menu__item:disabled,
.ivp-app .ivp-menu__item[aria-disabled="true"] {
	opacity: 0.5;
	background: none;
	pointer-events: none;
}

.ivp-app .ivp-menu__sep {
	height: 1px;
	margin: var(--ivp-sp-1) 0;
	background: var(--ivp-border);
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.ivp-app .ivp-breadcrumbs__list {
	display: flex;
	align-items: center;
	gap: var(--ivp-sp-2);
	overflow-x: auto;
	font-size: var(--ivp-fs-sm);
	white-space: nowrap;
	scrollbar-width: none;
}

.ivp-app .ivp-breadcrumbs__list::-webkit-scrollbar {
	display: none;
}

.ivp-app .ivp-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--ivp-sp-2);
	min-width: 0;
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-breadcrumbs__item + .ivp-breadcrumbs__item::before {
	content: "";
	flex-shrink: 0;
	width: 0.4em;
	height: 0.4em;
	border-top: 1.5px solid var(--ivp-text-subtle);
	border-right: 1.5px solid var(--ivp-text-subtle);
	transform: rotate(45deg);
}

.ivp-app .ivp-breadcrumbs__link {
	display: inline-flex;
	align-items: center;
	gap: var(--ivp-sp-1);
	max-width: 12rem;
	padding: var(--ivp-sp-1) var(--ivp-sp-2);
	margin: calc(-1 * var(--ivp-sp-1)) calc(-1 * var(--ivp-sp-2));
	overflow: hidden;
	border-radius: var(--ivp-r-sm);
	text-overflow: ellipsis;
	text-decoration: none;
	color: inherit;
}

.ivp-app .ivp-breadcrumbs__link:hover {
	color: var(--ivp-primary);
	background: var(--ivp-primary-soft);
}

.ivp-app .ivp-breadcrumbs__item [aria-current="page"] {
	max-width: 16rem;
	overflow: hidden;
	font-weight: var(--ivp-fw-semibold);
	text-overflow: ellipsis;
	color: var(--ivp-text);
}

/* ==========================================================================
   Pagination and load more (keyset: prev/next and load-more only, no page numbers needed)
   ========================================================================== */

.ivp-app .ivp-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ivp-sp-1);
	margin-top: var(--ivp-sp-8);
}

.ivp-app .ivp-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ivp-sp-1);
	min-width: var(--ivp-tap);
	min-height: var(--ivp-tap);
	padding: 0 var(--ivp-sp-3);
	border: 1px solid var(--ivp-border);
	border-radius: var(--ivp-r-md);
	font-size: var(--ivp-fs-sm);
	font-weight: var(--ivp-fw-medium);
	text-decoration: none;
	color: var(--ivp-text);
	background: var(--ivp-surface);
}

.ivp-app .ivp-pagination__link:hover {
	color: var(--ivp-primary);
	border-color: var(--ivp-primary);
	text-decoration: none;
}

.ivp-app .ivp-pagination__link[aria-current="page"] {
	color: var(--ivp-white);
	border-color: transparent;
	background: var(--ivp-grad-primary);
	box-shadow: var(--ivp-shadow-sm);
}

.ivp-app .ivp-pagination__link[aria-disabled="true"] {
	opacity: 0.45;
	pointer-events: none;
}

.ivp-app .ivp-pagination__gap {
	padding: 0 var(--ivp-sp-1);
	color: var(--ivp-text-subtle);
}

.ivp-app .ivp-load-more {
	display: grid;
	justify-items: center;
	gap: var(--ivp-sp-2);
	margin-top: var(--ivp-sp-8);
	font-size: var(--ivp-fs-sm);
	color: var(--ivp-text-muted);
}

/* ==========================================================================
   Progress bars
   ========================================================================== */

.ivp-app .ivp-progress {
	--ivp-progress-fill: var(--ivp-grad-primary);
	position: relative;
	width: 100%;
	height: var(--ivp-progress-h, 8px);
	overflow: hidden;
	border-radius: var(--ivp-r-full);
	background: var(--ivp-surface-3);
}

.ivp-app .ivp-progress__bar {
	position: relative;
	display: block;
	width: var(--ivp-progress, 0%);
	max-width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
	background: var(--ivp-progress-fill);
}

.ivp-app .ivp-progress--sm { --ivp-progress-h: 4px; }
.ivp-app .ivp-progress--lg { --ivp-progress-h: 12px; }
.ivp-app .ivp-progress--aurora { --ivp-progress-fill: var(--ivp-grad-aurora); }
.ivp-app .ivp-progress--success { --ivp-progress-fill: var(--ivp-grad-forest); }
.ivp-app .ivp-progress--warning { --ivp-progress-fill: var(--ivp-grad-sunset); }
.ivp-app .ivp-progress--danger { --ivp-progress-fill: var(--ivp-danger); }

.ivp-app .ivp-progress--indeterminate .ivp-progress__bar {
	width: 100%;
	opacity: 0.55;
}

.ivp-app .ivp-progress-row {
	display: grid;
	gap: var(--ivp-sp-2);
}

.ivp-app .ivp-progress-row__label {
	display: flex;
	justify-content: space-between;
	gap: var(--ivp-sp-3);
	font-size: var(--ivp-fs-sm);
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-progress-row__label strong {
	color: var(--ivp-text);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Quota ring: <span class="ivp-ring" style="--ivp-ring-value:42" data-level="ok">
   ========================================================================== */

.ivp-app .ivp-ring {
	--ivp-ring-size: 3.5rem;
	--ivp-ring-stroke: url(#ivp-ig-ring-aurora);
	position: relative;
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	width: var(--ivp-ring-size);
	height: var(--ivp-ring-size);
	border-radius: 50%;
}

.ivp-app .ivp-ring--sm { --ivp-ring-size: 2.25rem; }
.ivp-app .ivp-ring--lg { --ivp-ring-size: 8rem; }

.ivp-app .ivp-ring[data-level="warning"] { --ivp-ring-stroke: url(#ivp-ig-ring-sunset); }
.ivp-app .ivp-ring[data-level="danger"] { --ivp-ring-stroke: var(--ivp-danger); }

.ivp-app .ivp-ring__svg {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.ivp-app .ivp-ring__track,
.ivp-app .ivp-ring__value {
	fill: none;
	stroke-width: 3.5;
}

.ivp-app .ivp-ring__track {
	stroke: var(--ivp-surface-3);
}

.ivp-app .ivp-ring__value {
	stroke: var(--ivp-ring-stroke);
	stroke-linecap: round;
	stroke-dasharray: var(--ivp-ring-value, 0) 100;
}

.ivp-app .ivp-ring[data-empty] .ivp-ring__value {
	stroke: none;
}

.ivp-app .ivp-ring__label {
	grid-area: 1 / 1;
	font-size: calc(var(--ivp-ring-size) * 0.24);
	font-weight: var(--ivp-fw-bold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--ivp-text);
}

.ivp-app .ivp-ring--sm .ivp-ring__label {
	font-size: 0.625rem;
}

.ivp-app .ivp-ring--lg .ivp-ring__label {
	display: grid;
	gap: 2px;
	justify-items: center;
	font-size: var(--ivp-fs-2xl);
}

.ivp-app .ivp-ring__sub {
	font-size: var(--ivp-fs-xs);
	font-weight: var(--ivp-fw-medium);
	color: var(--ivp-text-muted);
}

/* ==========================================================================
   Badges and pills
   ========================================================================== */

.ivp-app .ivp-badge {
	--ivp-badge-fg: var(--ivp-text-muted);
	--ivp-badge-bg: var(--ivp-surface-2);
	display: inline-flex;
	align-items: center;
	gap: var(--ivp-sp-1);
	padding: 0.125rem var(--ivp-sp-2);
	border-radius: var(--ivp-r-full);
	font-size: var(--ivp-fs-xs);
	font-weight: var(--ivp-fw-semibold);
	line-height: 1.5;
	white-space: nowrap;
	color: var(--ivp-badge-fg);
	background: var(--ivp-badge-bg);
	box-shadow: inset 0 0 0 1px var(--ivp-border);
}

.ivp-app .ivp-badge > .ivp-icon {
	--ivp-icon-size: 0.875rem;
}

.ivp-app .ivp-badge--primary { --ivp-badge-fg: var(--ivp-primary); --ivp-badge-bg: var(--ivp-primary-soft); box-shadow: none; }
.ivp-app .ivp-badge--success { --ivp-badge-fg: var(--ivp-success); --ivp-badge-bg: var(--ivp-success-soft); box-shadow: none; }
.ivp-app .ivp-badge--warning { --ivp-badge-fg: var(--ivp-warning); --ivp-badge-bg: var(--ivp-warning-soft); box-shadow: none; }
.ivp-app .ivp-badge--danger { --ivp-badge-fg: var(--ivp-danger); --ivp-badge-bg: var(--ivp-danger-soft); box-shadow: none; }
.ivp-app .ivp-badge--info { --ivp-badge-fg: var(--ivp-info); --ivp-badge-bg: var(--ivp-info-soft); box-shadow: none; }

.ivp-app .ivp-badge--gradient {
	--ivp-badge-fg: var(--ivp-white);
	--ivp-badge-bg: var(--ivp-grad-primary);
	box-shadow: none;
}

.ivp-app .ivp-badge--glow {
	--ivp-badge-fg: var(--ivp-white);
	--ivp-badge-bg: var(--ivp-grad-primary);
	box-shadow: var(--ivp-shadow-glow);
}

.ivp-app .ivp-badge--on-image {
	--ivp-badge-fg: var(--ivp-on-image);
	--ivp-badge-bg: var(--ivp-tile-action-bg);
	box-shadow: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ivp-app .ivp-badge__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.ivp-app .ivp-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--ivp-sp-2);
	min-height: 2.25rem;
	padding: 0 var(--ivp-sp-4);
	border: 1px solid var(--ivp-border-strong);
	border-radius: var(--ivp-r-full);
	font-size: var(--ivp-fs-sm);
	font-weight: var(--ivp-fw-medium);
	text-decoration: none;
	color: var(--ivp-text);
	background: var(--ivp-surface);
}

.ivp-app .ivp-pill > .ivp-icon {
	--ivp-icon-size: 1rem;
}

.ivp-app .ivp-pill:hover {
	border-color: var(--ivp-primary);
	color: var(--ivp-primary);
	text-decoration: none;
}

.ivp-app .ivp-pill[aria-pressed="true"],
.ivp-app .ivp-pill.is-active {
	border-color: var(--ivp-primary);
	color: var(--ivp-primary);
	background: var(--ivp-primary-soft);
}

.ivp-app .ivp-pill:disabled {
	opacity: 0.5;
	pointer-events: none;
}

.ivp-app .ivp-pill__remove {
	display: grid;
	place-items: center;
	width: 1.375rem;
	height: 1.375rem;
	margin-inline-end: calc(-1 * var(--ivp-sp-2));
	border-radius: 50%;
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-pill__remove:hover {
	color: var(--ivp-danger);
	background: var(--ivp-danger-soft);
}

.ivp-app .ivp-pill__remove > .ivp-icon {
	--ivp-icon-size: 0.875rem;
}

/* ==========================================================================
   Avatar (initials on a gradient: no external image requests)
   ========================================================================== */

.ivp-app .ivp-avatar {
	--ivp-avatar-size: 2.5rem;
	position: relative;
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	width: var(--ivp-avatar-size);
	height: var(--ivp-avatar-size);
	border-radius: 50%;
	font-size: calc(var(--ivp-avatar-size) * 0.4);
	font-weight: var(--ivp-fw-semibold);
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ivp-white);
	background: var(--ivp-avatar-bg, var(--ivp-grad-avatar-0));
	user-select: none;
}

.ivp-app .ivp-avatar > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.ivp-app .ivp-avatar--g1 { --ivp-avatar-bg: var(--ivp-grad-avatar-1); }
.ivp-app .ivp-avatar--g2 { --ivp-avatar-bg: var(--ivp-grad-avatar-2); }
.ivp-app .ivp-avatar--g3 { --ivp-avatar-bg: var(--ivp-grad-avatar-3); }
.ivp-app .ivp-avatar--g4 { --ivp-avatar-bg: var(--ivp-grad-avatar-4); }

.ivp-app .ivp-avatar--sm { --ivp-avatar-size: 2rem; }
.ivp-app .ivp-avatar--lg { --ivp-avatar-size: 3.5rem; }
.ivp-app .ivp-avatar--xl { --ivp-avatar-size: 5rem; }

.ivp-app .ivp-avatar__status {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 28%;
	height: 28%;
	min-width: 8px;
	min-height: 8px;
	border: 2px solid var(--ivp-surface);
	border-radius: 50%;
	background: var(--ivp-success);
}

.ivp-app .ivp-avatar-stack {
	display: inline-flex;
}

.ivp-app .ivp-avatar-stack > .ivp-avatar {
	box-shadow: 0 0 0 2px var(--ivp-surface);
}

.ivp-app .ivp-avatar-stack > .ivp-avatar + .ivp-avatar {
	margin-inline-start: -0.625rem;
}

/* ==========================================================================
   Empty state: illustration, heading, body, call to action
   ========================================================================== */

.ivp-app .ivp-empty {
	display: grid;
	justify-items: center;
	gap: var(--ivp-sp-4);
	max-width: 36rem;
	margin-inline: auto;
	padding: var(--ivp-sp-12) var(--ivp-sp-4);
	text-align: center;
}

.ivp-app .ivp-empty--compact {
	padding-block: var(--ivp-sp-8);
}

.ivp-app .ivp-empty__art {
	width: min(100%, var(--ivp-empty-art, 18rem));
	margin-bottom: var(--ivp-sp-2);
}

.ivp-app .ivp-empty--compact .ivp-empty__art {
	--ivp-empty-art: 12rem;
}

.ivp-app .ivp-empty__code {
	font-size: clamp(4rem, 3rem + 6vw, 7rem);
	font-weight: var(--ivp-fw-black);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--ivp-primary);
	background: var(--ivp-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ivp-app .ivp-empty__title {
	font-size: var(--ivp-fs-2xl);
}

.ivp-app .ivp-empty__text,
.ivp-app .ivp-empty .ivp-lead {
	max-width: 30rem;
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-empty__actions,
.ivp-app .ivp-empty .ivp-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ivp-sp-3);
	margin-top: var(--ivp-sp-2);
}

/* ==========================================================================
   Skeletons
   ========================================================================== */

.ivp-app .ivp-skeleton {
	position: relative;
	display: block;
	width: var(--ivp-sk-w, 100%);
	height: var(--ivp-sk-h, 1em);
	overflow: hidden;
	border-radius: var(--ivp-r-sm);
	background-color: var(--ivp-skeleton-base);
}

.ivp-app .ivp-skeleton--text { --ivp-sk-h: 0.875rem; border-radius: var(--ivp-r-xs); }
.ivp-app .ivp-skeleton--title { --ivp-sk-h: 1.5rem; --ivp-sk-w: 60%; }
.ivp-app .ivp-skeleton--circle { --ivp-sk-w: var(--ivp-sk-size, 2.5rem); --ivp-sk-h: var(--ivp-sk-size, 2.5rem); border-radius: 50%; }
.ivp-app .ivp-skeleton--rect { --ivp-sk-h: auto; aspect-ratio: 4 / 3; border-radius: var(--ivp-r-lg); }
.ivp-app .ivp-skeleton--square { --ivp-sk-h: auto; aspect-ratio: 1; border-radius: var(--ivp-r-lg); }

.ivp-app .ivp-skeleton-group {
	display: grid;
	gap: var(--ivp-sp-3);
}

/* ==========================================================================
   Page-top loading bar
   ========================================================================== */

.ivp-app .ivp-loading-bar {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	z-index: var(--ivp-z-loading);
	width: 0;
	height: 3px;
	border-radius: 0 var(--ivp-r-full) var(--ivp-r-full) 0;
	background: var(--ivp-grad-aurora);
	box-shadow: 0 0 12px var(--ivp-glow-color);
	opacity: 0;
	pointer-events: none;
}

.ivp-app .ivp-loading-bar.is-active {
	width: 85%;
	opacity: 1;
}

.ivp-app .ivp-loading-bar.is-done {
	width: 100%;
	opacity: 0;
}

/* ==========================================================================
   Header, logo, nav, theme toggle
   ========================================================================== */

.ivp-app .ivp-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: var(--ivp-z-header);
	border-bottom: 1px solid var(--ivp-border);
	background: var(--ivp-glass);
	-webkit-backdrop-filter: blur(14px) saturate(1.6);
	backdrop-filter: blur(14px) saturate(1.6);
}

.ivp-app .ivp-header__inner {
	display: flex;
	align-items: center;
	gap: var(--ivp-sp-3);
	min-height: var(--ivp-header-h);
}

.ivp-app .ivp-header__nav {
	display: none;
}

.ivp-app .ivp-header__search {
	display: none;
	flex: 1 1 auto;
	max-width: 26rem;
}

.ivp-app .ivp-header__actions {
	display: flex;
	align-items: center;
	gap: var(--ivp-sp-2);
	margin-inline-start: auto;
}

@media (min-width: 48rem) {
	.ivp-app .ivp-header__search {
		display: flex;
	}

	.ivp-app .ivp-header__search + .ivp-header__actions {
		margin-inline-start: 0;
	}

	.ivp-app .ivp-header--member .ivp-header__search {
		margin-inline-start: auto;
	}
}

@media (min-width: 64rem) {
	.ivp-app .ivp-header__nav {
		display: block;
		margin-inline-start: var(--ivp-sp-4);
	}

	.ivp-app .ivp-menu-toggle {
		display: none;
	}
}

.ivp-app .ivp-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--ivp-sp-2);
	min-width: 0;
	min-height: var(--ivp-tap);
	font-size: var(--ivp-fs-lg);
	font-weight: var(--ivp-fw-bold);
	letter-spacing: var(--ivp-ls-tight);
	text-decoration: none;
	color: var(--ivp-text);
}

.ivp-app .ivp-logo:hover {
	color: var(--ivp-text);
	text-decoration: none;
}

.ivp-app .ivp-logo__mark {
	display: block;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	filter: drop-shadow(0 4px 10px var(--ivp-glow-edge));
}

.ivp-app .ivp-logo__mark--custom {
	width: auto;
	max-width: 7.5rem;
	object-fit: contain;
}

.ivp-app .ivp-logo__name {
	max-width: 11rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ivp-app .ivp-nav__list {
	display: flex;
	align-items: center;
	gap: var(--ivp-sp-1);
}

.ivp-app .ivp-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--ivp-sp-2);
	min-height: 2.5rem;
	padding: 0 var(--ivp-sp-3);
	border-radius: var(--ivp-r-full);
	font-size: var(--ivp-fs-sm);
	font-weight: var(--ivp-fw-medium);
	text-decoration: none;
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-nav__link > .ivp-icon {
	--ivp-icon-size: 1.0625rem;
}

.ivp-app .ivp-nav__link:hover {
	color: var(--ivp-text);
	background: var(--ivp-surface-2);
	text-decoration: none;
}

.ivp-app .ivp-nav__link[aria-current="page"] {
	color: var(--ivp-primary);
	background: var(--ivp-primary-soft);
}

.ivp-app .ivp-theme-toggle {
	position: relative;
}

.ivp-app .ivp-theme-toggle > .ivp-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: calc(var(--ivp-icon-size, 1.25rem) / -2) 0 0 calc(var(--ivp-icon-size, 1.25rem) / -2);
	--ivp-icon-size: 1.25rem;
}

.ivp-app .ivp-theme-toggle__sun {
	opacity: 0;
	transform: rotate(-90deg) scale(0.4);
}

.ivp-app .ivp-theme-toggle__moon {
	opacity: 1;
	transform: none;
}

:root[data-ivp-theme="dark"] .ivp-app .ivp-theme-toggle__sun {
	opacity: 1;
	transform: none;
}

:root[data-ivp-theme="dark"] .ivp-app .ivp-theme-toggle__moon {
	opacity: 0;
	transform: rotate(90deg) scale(0.4);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-ivp-theme="light"]) .ivp-app .ivp-theme-toggle__sun {
		opacity: 1;
		transform: none;
	}

	:root:not([data-ivp-theme="light"]) .ivp-app .ivp-theme-toggle__moon {
		opacity: 0;
		transform: rotate(90deg) scale(0.4);
	}
}

/* Member header widgets */
.ivp-app .ivp-quota {
	display: inline-flex;
	align-items: center;
	gap: var(--ivp-sp-2);
	min-height: var(--ivp-tap);
	padding: 0 var(--ivp-sp-2);
	border-radius: var(--ivp-r-full);
	font-size: var(--ivp-fs-xs);
	line-height: 1.3;
	text-decoration: none;
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-quota:hover {
	color: var(--ivp-text);
	background: var(--ivp-surface-2);
	text-decoration: none;
}

.ivp-app .ivp-quota__text {
	display: none;
}

.ivp-app .ivp-quota__text strong {
	display: block;
	font-weight: var(--ivp-fw-semibold);
	color: var(--ivp-text);
	font-variant-numeric: tabular-nums;
}

@media (min-width: 80rem) {
	.ivp-app .ivp-quota__text {
		display: block;
	}
}

.ivp-app .ivp-avatar-btn {
	display: grid;
	place-items: center;
	width: var(--ivp-tap);
	height: var(--ivp-tap);
	border-radius: 50%;
}

.ivp-app .ivp-avatar-btn:hover .ivp-avatar,
.ivp-app .ivp-avatar-btn[aria-expanded="true"] .ivp-avatar {
	box-shadow: 0 0 0 3px var(--ivp-primary-ring);
}

/* Below 36rem these labels stay in the accessibility tree but are visually hidden. */
@media (max-width: 35.99rem) {
	.ivp-app .ivp-header__upload-label,
	.ivp-app .ivp-header--member .ivp-logo__name {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

@media (min-width: 36rem) {
	.ivp-app .ivp-header__upload {
		width: auto;
		padding-inline: var(--ivp-sp-4);
		border-radius: var(--ivp-r-md);
	}
}

/* Mobile nav: an ivp-modal--drawer with staggered links */
.ivp-app .ivp-mobile-nav .ivp-modal__panel {
	padding-bottom: var(--ivp-sp-6);
}

.ivp-app .ivp-mobile-nav__list {
	display: grid;
	gap: var(--ivp-sp-1);
	padding: var(--ivp-sp-2) var(--ivp-sp-4);
}

.ivp-app .ivp-mobile-nav__link {
	display: flex;
	align-items: center;
	gap: var(--ivp-sp-3);
	min-height: 3rem;
	padding: 0 var(--ivp-sp-4);
	border-radius: var(--ivp-r-md);
	font-size: var(--ivp-fs-base);
	font-weight: var(--ivp-fw-medium);
	text-decoration: none;
	color: var(--ivp-text);
}

.ivp-app .ivp-mobile-nav__link > .ivp-icon {
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-mobile-nav__link:hover,
.ivp-app .ivp-mobile-nav__link[aria-current="page"] {
	color: var(--ivp-primary);
	background: var(--ivp-primary-soft);
	text-decoration: none;
}

.ivp-app .ivp-mobile-nav__link:hover > .ivp-icon,
.ivp-app .ivp-mobile-nav__link[aria-current="page"] > .ivp-icon {
	color: currentColor;
}

.ivp-app .ivp-mobile-nav__actions {
	display: grid;
	gap: var(--ivp-sp-2);
	margin-top: auto;
	padding: var(--ivp-sp-4) var(--ivp-sp-6) 0;
}

.ivp-app .ivp-mobile-nav__account {
	display: flex;
	align-items: center;
	gap: var(--ivp-sp-3);
	margin: 0 var(--ivp-sp-4) var(--ivp-sp-2);
	padding: var(--ivp-sp-3) var(--ivp-sp-4);
	border-radius: var(--ivp-r-lg);
	background: var(--ivp-surface-2);
	font-size: var(--ivp-fs-sm);
}

.ivp-app .ivp-mobile-nav__account div {
	min-width: 0;
}

.ivp-app .ivp-mobile-nav__account div > span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: var(--ivp-fs-xs);
	color: var(--ivp-text-muted);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.ivp-app .ivp-footer {
	position: relative;
	margin-top: auto;
	padding: var(--ivp-sp-12) 0 var(--ivp-sp-8);
	background: var(--ivp-surface);
}

.ivp-app .ivp-footer::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	background: var(--ivp-grad-aurora);
	background-size: 200% 100%;
}

.ivp-app .ivp-footer__grid {
	display: grid;
	gap: var(--ivp-sp-8);
	grid-template-columns: 1fr;
}

@media (min-width: 36rem) {
	.ivp-app .ivp-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.ivp-app .ivp-footer__grid {
		grid-template-columns: 2fr repeat(3, 1fr);
	}
}

.ivp-app .ivp-footer__brand {
	display: grid;
	align-content: start;
	gap: var(--ivp-sp-3);
}

.ivp-app .ivp-footer__tagline {
	max-width: 22rem;
	font-size: var(--ivp-fs-sm);
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-footer__heading {
	margin-bottom: var(--ivp-sp-3);
	font-size: var(--ivp-fs-xs);
	font-weight: var(--ivp-fw-semibold);
	letter-spacing: var(--ivp-ls-wide);
	text-transform: uppercase;
	color: var(--ivp-text-subtle);
}

.ivp-app .ivp-footer__links {
	display: grid;
	gap: var(--ivp-sp-1);
}

.ivp-app .ivp-footer__link {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	font-size: var(--ivp-fs-sm);
	text-decoration: none;
	color: var(--ivp-text-muted);
}

.ivp-app .ivp-footer__link:hover {
	color: var(--ivp-primary);
	text-decoration: none;
}

.ivp-app .ivp-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ivp-sp-4);
	margin-top: var(--ivp-sp-10);
	padding-top: var(--ivp-sp-6);
	border-top: 1px solid var(--ivp-border);
	font-size: var(--ivp-fs-sm);
	color: var(--ivp-text-subtle);
}

.ivp-app .ivp-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ivp-sp-2);
}

.ivp-app .ivp-social__link {
	display: grid;
	place-items: center;
	width: var(--ivp-tap);
	height: var(--ivp-tap);
	border-radius: 50%;
	color: var(--ivp-text-muted);
	background: var(--ivp-surface-2);
}

.ivp-app .ivp-social__link:hover,
.ivp-app .ivp-social__link:focus-visible {
	color: var(--ivp-white);
	background: var(--ivp-grad-primary);
	box-shadow: var(--ivp-shadow-glow);
}

/* ==========================================================================
   Illustrations: colour roles so every drawing follows the theme
   ========================================================================== */

.ivp-app .ivp-illus {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	overflow: visible;
}

.ivp-app .ivp-il-surface { fill: var(--ivp-surface); }
.ivp-app .ivp-il-surface-2 { fill: var(--ivp-surface-2); }
.ivp-app .ivp-il-surface-3 { fill: var(--ivp-surface-3); }
.ivp-app .ivp-il-edge { stroke: var(--ivp-border-strong); stroke-width: 1.5; }
.ivp-app .ivp-il-line { fill: none; stroke: var(--ivp-border-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ivp-app .ivp-il-ink { fill: var(--ivp-text); }
.ivp-app .ivp-il-muted { fill: var(--ivp-text-subtle); }
.ivp-app .ivp-il-soft { fill: var(--ivp-primary-soft); }
.ivp-app .ivp-il-shadow { fill: var(--ivp-il-shadow); }
.ivp-app .ivp-il-on-photo { fill: var(--ivp-il-on-photo); }
.ivp-app .ivp-il-c-violet { fill: var(--ivp-violet); }
.ivp-app .ivp-il-c-indigo { fill: var(--ivp-indigo); }
.ivp-app .ivp-il-c-cyan { fill: var(--ivp-cyan); }
.ivp-app .ivp-il-c-teal { fill: var(--ivp-teal); }
.ivp-app .ivp-il-c-pink { fill: var(--ivp-pink); }
.ivp-app .ivp-il-c-rose { fill: var(--ivp-rose); }
.ivp-app .ivp-il-c-amber { fill: var(--ivp-amber); }
.ivp-app .ivp-il-c-lime { fill: var(--ivp-lime); }
.ivp-app .ivp-il-s-violet { fill: none; stroke: var(--ivp-violet); }
.ivp-app .ivp-il-s-cyan { fill: none; stroke: var(--ivp-cyan); }
.ivp-app .ivp-il-s-pink { fill: none; stroke: var(--ivp-pink); }
.ivp-app .ivp-il-s-amber { fill: none; stroke: var(--ivp-amber); }
.ivp-app .ivp-il-s-teal { fill: none; stroke: var(--ivp-teal); }
.ivp-app .ivp-il-s-primary { fill: none; stroke: var(--ivp-primary); }
.ivp-app .ivp-il-s-danger { fill: none; stroke: var(--ivp-danger); }
.ivp-app .ivp-il-s-success { fill: none; stroke: var(--ivp-success); }
.ivp-app .ivp-il-s-on-photo { fill: none; stroke: var(--ivp-il-on-photo); }

/* Confetti pieces spawned by IVP.ui.confetti() */
.ivp-app .ivp-confetti {
	position: fixed;
	inset: 0;
	z-index: var(--ivp-z-toast);
	overflow: hidden;
	pointer-events: none;
}

.ivp-app .ivp-confetti__piece {
	position: absolute;
	top: -2%;
	width: 8px;
	height: 14px;
	border-radius: 2px;
	opacity: 0;
}

/* ==========================================================================
   Banner slots (Services\BannerSlots). "wide" creatives show from 48rem,
   "narrow" ones (the 300x250 phone creative) below it; desktop-only slots
   from 64rem.
   ========================================================================== */

.ivp-app .ivp-slot {
	display: grid;
	justify-items: center;
	gap: var(--ivp-sp-1);
	max-width: 100%;
	margin: var(--ivp-sp-5) auto;
}

.ivp-app .ivp-slot__label {
	font-size: var(--ivp-fs-xs);
	font-weight: var(--ivp-fw-semibold);
	letter-spacing: var(--ivp-ls-wide);
	text-transform: uppercase;
	color: var(--ivp-text-subtle);
}

.ivp-app .ivp-slot__frame {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

.ivp-app .ivp-slot__item {
	display: block;
	width: calc(var(--ivp-slot-w) * 1px);
	max-width: 100%;
	aspect-ratio: var(--ivp-slot-w) / var(--ivp-slot-h);
	overflow: hidden;
	border-radius: var(--ivp-r-sm);
	background: var(--ivp-surface-2);
	box-shadow: var(--ivp-shadow-xs);
}

.ivp-app .ivp-slot__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ivp-app .ivp-slot__item--wide,
.ivp-app .ivp-slot--wide-only,
.ivp-app .ivp-slot--desktop {
	display: none;
}

.ivp-app .ivp-slot--house .ivp-slot__frame > * {
	max-width: 100%;
}

@media (min-width: 48rem) {
	.ivp-app .ivp-slot__item--wide {
		display: block;
	}

	.ivp-app .ivp-slot--wide-only {
		display: grid;
	}

	.ivp-app .ivp-slot__item--narrow,
	.ivp-app .ivp-slot--narrow-only {
		display: none;
	}
}

@media (min-width: 64rem) {
	.ivp-app .ivp-slot--desktop {
		display: grid;
	}
}

/* ==========================================================================
   Usage meters and the over-plan account notice
   ========================================================================== */

.ivp-app .ivp-usage {
	display: grid;
	gap: var(--ivp-sp-4);
}

.ivp-app .ivp-usage__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ivp-sp-3);
}

.ivp-app .ivp-usage__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--ivp-r-md);
	color: var(--ivp-primary);
	background: var(--ivp-primary-soft);
	--ivp-icon-size: 1.125rem;
}

.ivp-app .ivp-usage__item--warning .ivp-usage__icon {
	color: var(--ivp-warning);
	background: var(--ivp-warning-soft);
}

.ivp-app .ivp-usage__item--danger .ivp-usage__icon,
.ivp-app .ivp-usage__item--full .ivp-usage__icon {
	color: var(--ivp-danger);
	background: var(--ivp-danger-soft);
}

.ivp-app .ivp-usage__body {
	flex: 1;
	min-width: 0;
}

.ivp-app .ivp-usage__hint {
	color: var(--ivp-text-muted);
	font-size: var(--ivp-fs-xs);
}

.ivp-app .ivp-usage__hint--full {
	color: var(--ivp-danger);
	font-weight: var(--ivp-fw-semibold);
}

/* Sits in .ivp-main above the page, lined up with .ivp-page's container and padding. */
.ivp-app .ivp-account-notice {
	--ivp-notice-gutter: var(--ivp-sp-4);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ivp-sp-3);
	margin: var(--ivp-sp-4) max(var(--ivp-notice-gutter), calc((100% - var(--ivp-container)) / 2 + var(--ivp-notice-gutter))) 0;
}

@media (min-width: 48rem) {
	.ivp-app .ivp-account-notice {
		--ivp-notice-gutter: var(--ivp-sp-6);
	}
}

.ivp-app .ivp-account-notice__icon {
	flex-shrink: 0;
	--ivp-icon-size: 1.5rem;
}

.ivp-app .ivp-account-notice__text {
	display: flex;
	flex: 1 1 12rem;
	flex-direction: column;
	gap: var(--ivp-sp-1);
	min-width: 0;
}

.ivp-app .ivp-account-notice__cta {
	flex-shrink: 0;
}

/* ==========================================================================
   Impersonation bar: an administrator viewing the app as a member
   ========================================================================== */

.ivp-app .ivp-imp-bar {
	position: sticky;
	top: 0;
	z-index: var(--ivp-z-toast);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ivp-sp-2) var(--ivp-sp-3);
	padding: var(--ivp-sp-2) var(--ivp-sp-4);
	color: var(--ivp-on-primary);
	background: var(--ivp-grad-sunset);
	box-shadow: var(--ivp-shadow-md);
}

.ivp-app .ivp-imp-bar__icon {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--ivp-r-full);
	background: var(--ivp-scrim);
	--ivp-icon-size: 1rem;
}

.ivp-app .ivp-imp-bar__text {
	flex: 1 1 14rem;
	min-width: 0;
	margin: 0;
	font-size: var(--ivp-fs-sm);
	font-weight: var(--ivp-fw-semibold);
}

.ivp-app .ivp-imp-bar__form {
	flex-shrink: 0;
	margin: 0;
}

.ivp-app .ivp-imp-bar__btn {
	color: var(--ivp-text);
	background: var(--ivp-surface);
	box-shadow: var(--ivp-shadow-sm);
}

.ivp-app .ivp-imp-bar__btn:hover {
	color: var(--ivp-primary);
}

.ivp-app .ivp-imp-bar__btn:focus-visible {
	outline: 2px solid var(--ivp-on-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   Read-only bar: the site is paused for an incident
   ========================================================================== */

.ivp-app .ivp-ro-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ivp-sp-2) var(--ivp-sp-3);
	padding: var(--ivp-sp-2) var(--ivp-sp-4);
	font-size: var(--ivp-fs-sm);
	font-weight: var(--ivp-fw-semibold);
	text-align: center;
	color: var(--ivp-amber-ink);
	background: var(--ivp-amber);
}

.ivp-app .ivp-ro-bar__text {
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}

.ivp-app .ivp-ro-bar > .ivp-icon {
	--ivp-icon-size: 1.125rem;
}

/* ==========================================================================
   Sensitive content: blurred until the visitor asks to see it
   ========================================================================== */

.ivp-app .ivp-nsfw {
	position: relative;
}

.ivp-app .ivp-nsfw.is-covered {
	overflow: hidden;
}

.ivp-app .ivp-nsfw.is-covered img {
	filter: blur(28px) saturate(0.7);
}

.ivp-app .ivp-nsfw__cover {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ivp-sp-2);
	width: 100%;
	margin: 0;
	padding: var(--ivp-sp-3);
	border: 0;
	border-radius: inherit;
	font: inherit;
	font-size: var(--ivp-fs-sm);
	font-weight: var(--ivp-fw-semibold);
	line-height: var(--ivp-lh-tight);
	text-align: center;
	color: var(--ivp-on-image);
	background: var(--ivp-overlay);
	cursor: pointer;
}

.ivp-app .ivp-nsfw__cover:focus-visible {
	outline: 3px solid var(--ivp-focus);
	outline-offset: -3px;
}

.ivp-app .ivp-nsfw__badge {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--ivp-r-full);
	color: var(--ivp-white);
	background: var(--ivp-grad-candy);
	box-shadow: var(--ivp-shadow-md);
	--ivp-icon-size: 1.25rem;
}

.ivp-app .ivp-nsfw__title {
	max-width: 100%;
	overflow-wrap: anywhere;
}

.ivp-app .ivp-nsfw__text {
	max-width: 24rem;
	font-weight: var(--ivp-fw-regular);
	opacity: 0.85;
}

.ivp-app .ivp-nsfw__show {
	display: inline-flex;
	align-items: center;
	gap: var(--ivp-sp-1);
	padding: var(--ivp-sp-1) var(--ivp-sp-3);
	border-radius: var(--ivp-r-full);
	font-size: var(--ivp-fs-xs);
	color: var(--ivp-text);
	background: var(--ivp-surface);
	box-shadow: var(--ivp-shadow-sm);
	--ivp-icon-size: 0.875rem;
}

.ivp-app .ivp-nsfw__cover:hover .ivp-nsfw__show {
	color: var(--ivp-primary);
}

.ivp-app .ivp-nsfw__cover--lg {
	gap: var(--ivp-sp-3);
	font-size: var(--ivp-fs-lg);
}

.ivp-app .ivp-nsfw__cover--lg .ivp-nsfw__badge {
	width: 3.5rem;
	height: 3.5rem;
	--ivp-icon-size: 1.75rem;
}

.ivp-app .ivp-nsfw__cover--lg .ivp-nsfw__text {
	font-size: var(--ivp-fs-sm);
}

.ivp-app .ivp-nsfw__cover--lg .ivp-nsfw__show {
	padding: var(--ivp-sp-2) var(--ivp-sp-4);
	font-size: var(--ivp-fs-sm);
}

.ivp-app .ivp-tile.is-covered .ivp-tile__overlay {
	z-index: 1;
}

.ivp-app .ivp-tile > .ivp-nsfw__cover {
	gap: var(--ivp-sp-1);
	font-size: var(--ivp-fs-xs);
}

.ivp-app .ivp-nsfw-toggle {
	display: inline-flex;
	align-items: center;
}

.ivp-app .ivp-upload-options {
	display: grid;
	gap: var(--ivp-sp-1);
	margin-bottom: var(--ivp-sp-4);
	padding: var(--ivp-sp-3) var(--ivp-sp-4);
	border: 1px solid var(--ivp-border);
	border-radius: var(--ivp-r-lg);
	background: var(--ivp-surface);
}

.ivp-app .ivp-upload-options .ivp-field__hint {
	margin: 0;
	padding-inline-start: calc(1.375rem + var(--ivp-sp-3));
}

/* ==========================================================================
   Motion. Everything that moves is here and only here.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* Banner slots */
	.ivp-app .ivp-slot__item {
		transition: transform var(--ivp-dur) var(--ivp-ease), box-shadow var(--ivp-dur) var(--ivp-ease);
	}

	.ivp-app .ivp-slot__item:hover {
		transform: translateY(-2px);
		box-shadow: var(--ivp-shadow-md);
	}

	/* Buttons */
	.ivp-app .ivp-btn {
		transition:
			background-color var(--ivp-dur-fast) var(--ivp-ease),
			background-position var(--ivp-dur-slow) var(--ivp-ease),
			border-color var(--ivp-dur-fast) var(--ivp-ease),
			color var(--ivp-dur-fast) var(--ivp-ease),
			box-shadow var(--ivp-dur) var(--ivp-ease),
			transform var(--ivp-dur) var(--ivp-ease-spring),
			opacity var(--ivp-dur-fast) var(--ivp-ease);
	}

	.ivp-app .ivp-btn--primary:hover,
	.ivp-app .ivp-btn--danger:hover {
		transform: translateY(-2px);
	}

	.ivp-app .ivp-btn:active {
		transform: translateY(0) scale(0.97);
		transition-duration: 80ms;
	}

	.ivp-app .ivp-btn:disabled,
	.ivp-app .ivp-btn[aria-disabled="true"],
	.ivp-app .ivp-btn.is-loading {
		transform: none;
	}

	.ivp-app .ivp-btn__spinner .ivp-icon,
	.ivp-app .ivp-icon-spinner,
	.ivp-app .ivp-icon--spin {
		animation: ivp-spin 0.8s linear infinite;
	}

	.ivp-app .ivp-ripple {
		animation: ivp-ripple 600ms var(--ivp-ease) forwards;
	}

	/* Icons */
	.ivp-app .ivp-icon {
		transition: transform var(--ivp-dur) var(--ivp-ease-spring), color var(--ivp-dur-fast) var(--ivp-ease), opacity var(--ivp-dur-fast) var(--ivp-ease);
	}

	.ivp-app .ivp-icon-anim--scale:hover,
	.ivp-app :is(a, button, label):hover > .ivp-icon-anim--scale,
	.ivp-app :is(a, button):focus-visible > .ivp-icon-anim--scale {
		transform: scale(1.18);
	}

	.ivp-app .ivp-icon-anim--rotate:hover,
	.ivp-app :is(a, button, label):hover > .ivp-icon-anim--rotate,
	.ivp-app :is(a, button):focus-visible > .ivp-icon-anim--rotate {
		transform: rotate(90deg);
	}

	.ivp-app .ivp-icon-anim--bounce:hover,
	.ivp-app :is(a, button, label):hover > .ivp-icon-anim--bounce,
	.ivp-app :is(a, button):focus-visible > .ivp-icon-anim--bounce {
		--ivp-bounce: -4px;
		animation: ivp-bounceSoft 0.7s var(--ivp-ease) both;
	}

	.ivp-app .ivp-icon-anim--wiggle:hover,
	.ivp-app :is(a, button, label):hover > .ivp-icon-anim--wiggle,
	.ivp-app :is(a, button):focus-visible > .ivp-icon-anim--wiggle {
		animation: ivp-wiggle 0.6s var(--ivp-ease-in-out) both;
	}

	.ivp-app .ivp-icon-anim--draw:hover,
	.ivp-app :is(a, button, label):hover > .ivp-icon-anim--draw,
	.ivp-app :is(a, button):focus-visible > .ivp-icon-anim--draw {
		stroke-dasharray: 1;
		animation: ivp-drawLine 0.7s var(--ivp-ease) both;
	}

	.ivp-app .ivp-done .ivp-icon-check,
	.ivp-app .ivp-done .ivp-icon-check-circle,
	.ivp-app .ivp-icon-check.ivp-done,
	.ivp-app .ivp-icon-check-circle.ivp-done {
		animation: ivp-checkPop 0.5s var(--ivp-ease-spring) both;
	}

	/* Forms */
	.ivp-app .ivp-input,
	.ivp-app .ivp-textarea,
	.ivp-app .ivp-select {
		transition: border-color var(--ivp-dur-fast) var(--ivp-ease), box-shadow var(--ivp-dur) var(--ivp-ease), background-color var(--ivp-dur-fast) var(--ivp-ease);
	}

	.ivp-app .ivp-float > .ivp-label {
		transition: transform var(--ivp-dur) var(--ivp-ease), color var(--ivp-dur-fast) var(--ivp-ease);
	}

	.ivp-app .ivp-field.is-invalid .ivp-field__msg,
	.ivp-app .ivp-field.is-valid .ivp-field__msg {
		--ivp-rise: -4px;
		animation: ivp-fadeUp var(--ivp-dur) var(--ivp-ease) both;
	}

	.ivp-app .ivp-field.is-invalid .ivp-field__status-invalid,
	.ivp-app .ivp-field.is-valid .ivp-field__status-valid {
		animation: ivp-checkPop 0.45s var(--ivp-ease-spring) both;
	}

	.ivp-app .ivp-field__status-loading {
		animation: ivp-spin 0.8s linear infinite;
	}

	.ivp-app .ivp-password__toggle,
	.ivp-app .ivp-password__toggle > .ivp-icon {
		transition: opacity var(--ivp-dur) var(--ivp-ease), transform var(--ivp-dur) var(--ivp-ease-spring), color var(--ivp-dur-fast) var(--ivp-ease), background-color var(--ivp-dur-fast) var(--ivp-ease);
	}

	.ivp-app .ivp-strength__bars > i::after {
		transition: transform var(--ivp-dur-slow) var(--ivp-ease), background-color var(--ivp-dur) var(--ivp-ease);
	}

	.ivp-app .ivp-strength__bars > i:nth-child(2)::after { transition-delay: 50ms; }
	.ivp-app .ivp-strength__bars > i:nth-child(3)::after { transition-delay: 100ms; }
	.ivp-app .ivp-strength__bars > i:nth-child(4)::after { transition-delay: 150ms; }

	.ivp-app .ivp-strength__label {
		transition: color var(--ivp-dur) var(--ivp-ease);
	}

	.ivp-app .ivp-check__box,
	.ivp-app .ivp-tile__box {
		transition: background-color var(--ivp-dur-fast) var(--ivp-ease), border-color var(--ivp-dur-fast) var(--ivp-ease), box-shadow var(--ivp-dur-fast) var(--ivp-ease);
	}

	.ivp-app .ivp-check__input:checked + .ivp-check__box > .ivp-icon,
	.ivp-app .ivp-tile__check:checked + .ivp-tile__box > .ivp-icon,
	.ivp-app .ivp-tile.is-selected .ivp-tile__box > .ivp-icon {
		animation: ivp-checkPop 0.4s var(--ivp-ease-spring) both;
	}

	.ivp-app .ivp-switch__track,
	.ivp-app .ivp-switch__thumb {
		transition: background-color var(--ivp-dur) var(--ivp-ease), box-shadow var(--ivp-dur) var(--ivp-ease), transform var(--ivp-dur) var(--ivp-ease-spring);
	}

	.ivp-app .ivp-search__icon,
	.ivp-app .ivp-search__kbd {
		transition: color var(--ivp-dur-fast) var(--ivp-ease), opacity var(--ivp-dur-fast) var(--ivp-ease);
	}

	/* Cards */
	.ivp-app .ivp-card {
		transition: transform var(--ivp-dur) var(--ivp-ease), box-shadow var(--ivp-dur) var(--ivp-ease), background-position var(--ivp-dur-slow) var(--ivp-ease);
	}

	.ivp-app .ivp-card:not(.ivp-card--static):not(.ivp-auth__card):hover {
		transform: translateY(-4px);
	}

	.ivp-app .ivp-card--interactive:active,
	.ivp-app a.ivp-card:active {
		transform: translateY(-1px);
		transition-duration: 80ms;
	}

	.ivp-app .ivp-card--gradient:not(.ivp-card--static):hover {
		background-position: 0 0, 100% 50%;
	}

	.ivp-app .ivp-card.is-loading::after {
		background-image:
			linear-gradient(100deg, transparent 30%, var(--ivp-skeleton-shine) 50%, transparent 70%),
			linear-gradient(var(--ivp-skeleton-base), var(--ivp-skeleton-base)),
			linear-gradient(var(--ivp-skeleton-base), var(--ivp-skeleton-base)),
			linear-gradient(var(--ivp-skeleton-base), var(--ivp-skeleton-base)),
			linear-gradient(var(--ivp-skeleton-base), var(--ivp-skeleton-base));
		background-size: 200% 100%, 55% 1.25rem, 100% 0.75rem, 85% 0.75rem, 65% 0.75rem;
		background-position: 200% 0, 0 0, 0 2.25rem, 0 3.5rem, 0 4.75rem;
		animation: ivp-cardShimmer 1.6s linear infinite;
	}

	@keyframes ivp-cardShimmer {
		to { background-position: -200% 0, 0 0, 0 2.25rem, 0 3.5rem, 0 4.75rem; }
	}

	/* Tiles */
	.ivp-app .ivp-tile {
		transition: box-shadow var(--ivp-dur) var(--ivp-ease), transform var(--ivp-dur) var(--ivp-ease-spring), background-color var(--ivp-dur) var(--ivp-ease);
	}

	.ivp-app .ivp-tile:active {
		transform: scale(0.98);
	}

	.ivp-app .ivp-tile__img {
		transition: transform var(--ivp-dur-slow) var(--ivp-ease), border-radius var(--ivp-dur) var(--ivp-ease);
	}

	.ivp-app .ivp-tile:hover .ivp-tile__img {
		transform: scale(1.06);
	}

	.ivp-app .ivp-tile.is-selected .ivp-tile__img,
	.ivp-app .ivp-tile.is-selected:hover .ivp-tile__img {
		transform: scale(0.9);
	}

	.ivp-app .ivp-tile__overlay {
		transition: opacity var(--ivp-dur) var(--ivp-ease);
	}

	.ivp-app .ivp-tile__action {
		transform: translateY(-6px);
		transition: opacity var(--ivp-dur) var(--ivp-ease), transform var(--ivp-dur) var(--ivp-ease-spring), background-color var(--ivp-dur-fast) var(--ivp-ease);
	}

	.ivp-app .ivp-tile__action:nth-child(2) { transition-delay: 40ms; }
	.ivp-app .ivp-tile__action:nth-child(3) { transition-delay: 80ms; }
	.ivp-app .ivp-tile__action:nth-child(4) { transition-delay: 120ms; }

	.ivp-app .ivp-tile:hover .ivp-tile__action,
	.ivp-app .ivp-tile:focus-within .ivp-tile__action {
		transform: none;
	}

	.ivp-app .ivp-tile__action:hover {
		transform: scale(1.1);
		transition-delay: 0s;
	}

	.ivp-app .ivp-tile__select {
		transition: opacity var(--ivp-dur) var(--ivp-ease), transform var(--ivp-dur) var(--ivp-ease-spring);
	}

	.ivp-app .ivp-tile.is-loading::after,
	.ivp-app .ivp-tile--skeleton::after {
		animation: ivp-shimmer 1.6s linear infinite;
	}

	.ivp-app .ivp-tile.is-entering {
		animation: ivp-scaleIn var(--ivp-dur-slow) var(--ivp-ease-spring) both;
		animation-delay: calc(var(--i, 0) * 40ms);
	}

	/* Modal and drawer */
	.ivp-app .ivp-modal__backdrop {
		transition: opacity var(--ivp-dur) var(--ivp-ease);
	}

	.ivp-app .ivp-modal__panel {
		transition: opacity var(--ivp-dur) var(--ivp-ease), transform var(--ivp-dur-slow) var(--ivp-ease-spring);
	}

	.ivp-app .ivp-modal:not(.is-open) .ivp-modal__panel {
		transition-duration: var(--ivp-dur-fast), var(--ivp-dur);
		transition-timing-function: var(--ivp-ease), var(--ivp-ease);
	}

	.ivp-app .ivp-modal--drawer .ivp-modal__panel {
		transition: opacity var(--ivp-dur) var(--ivp-ease), transform var(--ivp-dur-slow) var(--ivp-ease);
	}

	.ivp-app .ivp-mobile-nav__list > li,
	.ivp-app .ivp-mobile-nav__actions,
	.ivp-app .ivp-mobile-nav__account {
		opacity: 0;
		transform: translateX(24px);
		transition: opacity var(--ivp-dur) var(--ivp-ease), transform var(--ivp-dur-slow) var(--ivp-ease);
	}

	.ivp-app .ivp-mobile-nav.is-open .ivp-mobile-nav__list > li,
	.ivp-app .ivp-mobile-nav.is-open .ivp-mobile-nav__actions,
	.ivp-app .ivp-mobile-nav.is-open .ivp-mobile-nav__account {
		opacity: 1;
		transform: none;
		transition-delay: calc(120ms + var(--i, 0) * var(--ivp-stagger-step));
	}

	/* Toasts */
	.ivp-app .ivp-toast {
		animation: ivp-slideInRight var(--ivp-dur-slow) var(--ivp-ease-spring) both;
		transition: opacity var(--ivp-dur) var(--ivp-ease), transform var(--ivp-dur) var(--ivp-ease);
	}

	.ivp-app .ivp-toast.is-leaving {
		animation: none;
		transform: translateX(24px) scale(0.96);
	}

	.ivp-app .ivp-toast__progress {
		display: block;
		animation: ivp-toastProgress var(--ivp-toast-duration, 5000ms) linear forwards;
	}

	.ivp-app .ivp-toast:hover .ivp-toast__progress,
	.ivp-app .ivp-toast:focus-within .ivp-toast__progress {
		animation-play-state: paused;
	}

	.ivp-app .ivp-toast--success .ivp-toast__icon .ivp-icon {
		animation: ivp-checkPop 0.5s var(--ivp-ease-spring) 0.15s both;
	}

	/* Tabs */
	.ivp-app .ivp-tabs__tab {
		transition: color var(--ivp-dur-fast) var(--ivp-ease), background-color var(--ivp-dur-fast) var(--ivp-ease);
	}

	.ivp-app .ivp-tabs__indicator {
		transition: transform var(--ivp-dur) var(--ivp-ease), width var(--ivp-dur) var(--ivp-ease);
	}

	.ivp-app .ivp-tabs__panel:not([hidden]) {
		--ivp-rise: 8px;
		animation: ivp-fadeUp var(--ivp-dur) var(--ivp-ease) both;
	}

	/* Tooltips, dropdowns */
	.ivp-app [data-ivp-tooltip]::after {
		transition: opacity var(--ivp-dur-fast) var(--ivp-ease), transform var(--ivp-dur-fast) var(--ivp-ease), visibility 0s linear var(--ivp-dur-fast);
	}

	.ivp-app [data-ivp-tooltip]:hover::after,
	.ivp-app [data-ivp-tooltip]:focus-visible::after {
		transition: opacity var(--ivp-dur-fast) var(--ivp-ease) 350ms, transform var(--ivp-dur-fast) var(--ivp-ease) 350ms, visibility 0s linear 350ms;
	}

	.ivp-app .ivp-hsearch:not([hidden]) {
		--ivp-rise: -6px;
		animation: ivp-fadeUp var(--ivp-dur-fast) var(--ivp-ease) both;
	}

	.ivp-app .ivp-hsearch__group {
		--ivp-rise: 6px;
		animation: ivp-fadeUp var(--ivp-dur-fast) var(--ivp-ease) both;
	}

	.ivp-app .ivp-hsearch__group + .ivp-hsearch__group {
		animation-delay: 40ms;
	}

	.ivp-app .ivp-hsearch__state.is-loading .ivp-icon {
		animation: ivp-pulse 900ms var(--ivp-ease) infinite;
	}

	.ivp-app .ivp-hsearch__option,
	.ivp-app .ivp-hsearch__list {
		transition: background-color var(--ivp-dur-fast) var(--ivp-ease), opacity var(--ivp-dur-fast) var(--ivp-ease);
	}

	.ivp-app .ivp-menu {
		transition: opacity var(--ivp-dur-fast) var(--ivp-ease), transform var(--ivp-dur) var(--ivp-ease-spring), visibility 0s linear var(--ivp-dur);
	}

	.ivp-app .ivp-dropdown.is-open > .ivp-menu {
		transition: opacity var(--ivp-dur-fast) var(--ivp-ease), transform var(--ivp-dur) var(--ivp-ease-spring), visibility 0s;
	}

	.ivp-app .ivp-menu__item {
		transition: background-color var(--ivp-dur-fast) var(--ivp-ease), color var(--ivp-dur-fast) var(--ivp-ease);
	}

	/* Breadcrumbs, pagination, pills, links */
	.ivp-app .ivp-breadcrumbs--animated .ivp-breadcrumbs__item {
		animation: ivp-slideInLeft var(--ivp-dur) var(--ivp-ease) both;
		animation-delay: calc(var(--i, 0) * var(--ivp-stagger-step));
		--ivp-slide: 8px;
	}

	.ivp-app .ivp-breadcrumbs__link,
	.ivp-app .ivp-pagination__link,
	.ivp-app .ivp-pill,
	.ivp-app .ivp-pill__remove,
	.ivp-app .ivp-link,
	.ivp-app .ivp-nav__link,
	.ivp-app .ivp-mobile-nav__link,
	.ivp-app .ivp-footer__link,
	.ivp-app .ivp-quota {
		transition: color var(--ivp-dur-fast) var(--ivp-ease), background-color var(--ivp-dur-fast) var(--ivp-ease), border-color var(--ivp-dur-fast) var(--ivp-ease), text-decoration-color var(--ivp-dur-fast) var(--ivp-ease), transform var(--ivp-dur) var(--ivp-ease-spring);
	}

	.ivp-app .ivp-pagination__link:active,
	.ivp-app .ivp-pill:active {
		transform: scale(0.95);
	}

	/* Progress, ring, loading bar */
	.ivp-app .ivp-progress__bar {
		transition: width var(--ivp-dur-slow) var(--ivp-ease);
	}

	.ivp-app .ivp-progress__bar::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image: linear-gradient(100deg, transparent 30%, var(--ivp-skeleton-shine) 50%, transparent 70%);
		background-size: 200% 100%;
		background-repeat: no-repeat;
		opacity: 0.5;
		animation: ivp-shimmer 2.2s linear infinite;
	}

	.ivp-app .ivp-progress--indeterminate .ivp-progress__bar {
		width: 40%;
		opacity: 1;
		animation: ivp-indeterminate 1.4s var(--ivp-ease-in-out) infinite;
	}

	.ivp-app .ivp-ring__value {
		transition: stroke-dasharray var(--ivp-dur-slow) var(--ivp-ease);
		animation: ivp-ringFill 1.4s var(--ivp-ease) both;
	}

	.ivp-app .ivp-ring[data-level="danger"] {
		animation: ivp-pulseGlow 2.4s ease-out infinite;
		--ivp-glow-color: var(--ivp-danger-ring);
		--ivp-shadow-glow: 0 0 0 0 transparent;
	}

	.ivp-app .ivp-loading-bar {
		transition: opacity var(--ivp-dur) var(--ivp-ease) 150ms, width var(--ivp-dur) var(--ivp-ease);
	}

	.ivp-app .ivp-loading-bar.is-active {
		animation: ivp-loadingBar 8s cubic-bezier(0.1, 0.7, 0.2, 1) both;
		transition: opacity var(--ivp-dur-fast) var(--ivp-ease);
	}

	/* Badges, avatar, skeletons */
	.ivp-app .ivp-badge--glow {
		animation: ivp-pulseGlow 2.4s ease-out infinite;
	}

	.ivp-app .ivp-badge--glow .ivp-badge__dot {
		animation: ivp-pulse 1.6s var(--ivp-ease-in-out) infinite;
	}

	.ivp-app .ivp-avatar,
	.ivp-app .ivp-avatar-btn {
		transition: box-shadow var(--ivp-dur) var(--ivp-ease), transform var(--ivp-dur) var(--ivp-ease-spring);
	}

	.ivp-app .ivp-avatar-btn:active .ivp-avatar {
		transform: scale(0.94);
	}

	.ivp-app .ivp-skeleton::after {
		content: "";
		position: absolute;
		inset: 0;
		background-image: linear-gradient(100deg, transparent 30%, var(--ivp-skeleton-shine) 50%, transparent 70%);
		background-size: 200% 100%;
		background-repeat: no-repeat;
		animation: ivp-shimmer 1.6s linear infinite;
	}

	/* Header, logo, theme toggle, social */
	.ivp-app .ivp-logo__mark {
		transition: transform var(--ivp-dur) var(--ivp-ease-spring);
	}

	.ivp-app .ivp-logo:hover .ivp-logo__mark {
		transform: rotate(-8deg) scale(1.06);
	}

	.ivp-app .ivp-theme-toggle > .ivp-icon {
		transition: opacity var(--ivp-dur) var(--ivp-ease), transform var(--ivp-dur-slow) var(--ivp-ease-spring);
	}

	.ivp-app .ivp-social__link {
		transition: color var(--ivp-dur-fast) var(--ivp-ease), background-color var(--ivp-dur-fast) var(--ivp-ease), box-shadow var(--ivp-dur) var(--ivp-ease), transform var(--ivp-dur) var(--ivp-ease-spring);
	}

	.ivp-app .ivp-social__link:hover,
	.ivp-app .ivp-social__link:focus-visible {
		transform: translateY(-3px);
	}

	.ivp-app .ivp-footer::before {
		animation: ivp-gradientShift 10s var(--ivp-ease-in-out) infinite;
	}

	.ivp-app .ivp-empty__art {
		animation: ivp-scaleIn var(--ivp-dur-slow) var(--ivp-ease-spring) both;
	}

	.ivp-app .ivp-empty__title { animation: ivp-fadeUp var(--ivp-dur-slow) var(--ivp-ease) 80ms both; }
	.ivp-app .ivp-empty__text { animation: ivp-fadeUp var(--ivp-dur-slow) var(--ivp-ease) 140ms both; }
	.ivp-app .ivp-empty__actions { animation: ivp-fadeUp var(--ivp-dur-slow) var(--ivp-ease) 200ms both; }

	.ivp-app .ivp-gradient-text--animated {
		animation: ivp-gradientShift 6s var(--ivp-ease-in-out) infinite;
	}

	/* Confetti */
	.ivp-app .ivp-confetti__piece {
		animation: ivp-confettiFall var(--ivp-dur-piece, 2.6s) cubic-bezier(0.2, 0.6, 0.4, 1) var(--ivp-delay, 0s) forwards;
	}

	/* Over-plan account notice */
	.ivp-app .ivp-account-notice {
		animation: ivp-fadeUp var(--ivp-dur-slow) var(--ivp-ease) both;
	}

	.ivp-app .ivp-usage__item--full .ivp-usage__icon,
	.ivp-app .ivp-usage__item--danger .ivp-usage__icon {
		animation: ivp-pulse 2.4s var(--ivp-ease-in-out) infinite;
	}

	/* Impersonation bar */
	.ivp-app .ivp-imp-bar {
		animation: ivp-fadeIn var(--ivp-dur) var(--ivp-ease) both;
	}

	.ivp-app .ivp-imp-bar__icon {
		animation: ivp-pulse 2.8s var(--ivp-ease-in-out) infinite;
	}

	/* Read-only bar */
	.ivp-app .ivp-ro-bar {
		animation: ivp-fadeIn var(--ivp-dur) var(--ivp-ease) both;
	}

	.ivp-app .ivp-ro-bar > .ivp-icon {
		animation: ivp-pulse 2.8s var(--ivp-ease-in-out) infinite;
	}

	/* Sensitive content */
	.ivp-app .ivp-nsfw img {
		transition: filter var(--ivp-dur-slow) var(--ivp-ease);
	}

	.ivp-app .ivp-nsfw__badge {
		animation: ivp-pulse 3s var(--ivp-ease-in-out) infinite;
	}

	.ivp-app .ivp-nsfw__show {
		transition: color var(--ivp-dur-fast) var(--ivp-ease), transform var(--ivp-dur) var(--ivp-ease-spring);
	}

	.ivp-app .ivp-nsfw__cover:hover .ivp-nsfw__show,
	.ivp-app .ivp-nsfw__cover:focus-visible .ivp-nsfw__show {
		transform: translateY(-2px);
	}
}