/**
 * RWD Login Kit — login screen (v2.1, flat).
 *
 * Design language: flat two-tone (near-black / white), no cards, no drop
 * shadows, everything centred in a single non-scrolling viewport. The media
 * panel floats inset from the page edges with rounded corners; the form sits
 * directly on the page background, Material-style fields with hairline
 * borders.
 *
 * Still layered over WordPress's own login markup, so every login action
 * (sign in, lost password, reset, register, interim) inherits the design.
 */

/* -------------------------------------------------------------------------
 * Fonts — bundled locally, no external requests
 * ---------------------------------------------------------------------- */

@font-face {
	font-family: 'IRANSansXFaNum';
	src: url('../fonts/IRANSansXFaNum-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter Tight';
	src: url('../fonts/Inter_18pt-Medium.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* -------------------------------------------------------------------------
 * Tokens
 * ---------------------------------------------------------------------- */

:root {
	--rwd-accent: #4a90e2;
	--rwd-accent-rgb: 74, 144, 226;

	--rwd-radius: 5px;
	--rwd-radius-lg: 10px;

	--rwd-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--rwd-duration: 180ms;

	--rwd-gap: 14px;         /* inset of the media panel from the viewport */
	--rwd-panel-width: 50%;

	color-scheme: light;
}

:root[data-rwd-theme='light'] {
	--rwd-bg: #ffffff;
	--rwd-text: #111214;
	--rwd-text-muted: #74777d;
	--rwd-border: #e3e5e8;
	--rwd-border-focus: #111214;
	--rwd-field-bg: #fafafa;
	--rwd-danger: #c62828;
	--rwd-danger-bg: #fdf0f0;
	--rwd-success: #1b7f4d;
	--rwd-success-bg: #eefaf3;
	--rwd-switch-off: #d4d7db;

	color-scheme: light;
}

:root[data-rwd-theme='dark'] {
	--rwd-bg: #0a0a0b;
	--rwd-text: #f2f3f5;
	--rwd-text-muted: #8b8f96;
	--rwd-border: #26282c;
	--rwd-border-focus: #f2f3f5;
	--rwd-field-bg: #121316;
	--rwd-danger: #ef7070;
	--rwd-danger-bg: #1c1113;
	--rwd-success: #4fc98b;
	--rwd-success-bg: #0e1a14;
	--rwd-switch-off: #3d4147;

	color-scheme: dark;
}

/* -------------------------------------------------------------------------
 * Page shell — single viewport, no scroll on desktop
 * ---------------------------------------------------------------------- */

html.rwd-html,
body.rwd-login {
	height: 100%;
}

body.rwd-login {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100dvh;
	max-height: 100vh;
	max-height: 100dvh;
	margin: 0;
	padding: 24px;
	overflow: hidden;
	background: var(--rwd-bg);
	color: var(--rwd-text);
	font-family: 'IRANSansXFaNum', 'Inter Tight', -apple-system, 'Segoe UI', Tahoma, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
}

/* Form controls do not inherit the page font on their own. */
body.rwd-login input,
body.rwd-login button,
body.rwd-login select,
body.rwd-login textarea {
	font-family: inherit;
}

body.rwd-login.rwd-layout-split.rwd-panel-left {
	padding-left: calc(var(--rwd-panel-width) + 24px);
}

body.rwd-login.rwd-layout-split.rwd-panel-right {
	padding-right: calc(var(--rwd-panel-width) + 24px);
}

body.rwd-login #login {
	width: 100%;
	max-width: 340px;
	padding: 0;
	margin: 0;
}

body.rwd-login .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * Brand + heading
 * ---------------------------------------------------------------------- */

body.rwd-login h1.wp-login-logo {
	margin: 0 0 18px;
}

body.rwd-login h1.wp-login-logo a {
	display: inline-block;
	width: 56px;
	height: 56px;
	overflow: hidden;
	color: transparent;
	text-indent: -9999px;
	background: var(--rwd-logo, none) center / contain no-repeat;
}

/* Without a logo image the h1 is redundant next to .rwd-form-head. */
body.rwd-login:not(.rwd-has-logo) h1.wp-login-logo {
	display: none;
}

body.rwd-login .rwd-form-head {
	margin: 0 0 26px;
}

body.rwd-login .rwd-form-head h2 {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--rwd-text);
}

body.rwd-login .rwd-form-head p {
	margin: 0;
	font-size: 13px;
	color: var(--rwd-text-muted);
}

/* -------------------------------------------------------------------------
 * Form — no box, no background, no shadow
 * ---------------------------------------------------------------------- */

body.rwd-login form {
	padding: 0;
	margin: 0;
	overflow: visible;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Field-group rhythm. WordPress wraps the username in a <p> but the password
 * in a .user-pass-wrap <div>, so both need the margin or the groups collapse
 * into each other — which is exactly what made each label look attached to
 * the field above it instead of its own. */
body.rwd-login form p,
body.rwd-login form .user-pass-wrap {
	/* float:none matters: WordPress floats several of these rows, and a
	 * floated row leaves the flow — its bottom margin stops pushing anything,
	 * which silently collapses the whole vertical rhythm. */
	float: none;
	clear: both;
	width: 100%;
	margin: 0 0 26px;
	text-align: center;
}

body.rwd-login form .user-pass-wrap p,
body.rwd-login form p.submit {
	margin-bottom: 0;
}

/* Label hugs its own field: 8px below the label vs 26px between groups. */
body.rwd-login form label {
	display: block;
	float: none;
	margin: 0 0 8px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--rwd-label-color, var(--rwd-text-muted));
	letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------
 * Fields — Material-style, hairline border, centred text
 * ---------------------------------------------------------------------- */

body.rwd-login input[type='text'],
body.rwd-login input[type='password'],
body.rwd-login input[type='email'],
body.rwd-login input[type='tel'],
body.rwd-login input[type='number'] {
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	padding: 11px 44px;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--rwd-field-text, var(--rwd-text));
	text-align: center;
	/* Transparent, outlined-only: the floating label straddles the border and
	 * masks it with the page colour — a filled input would show a seam.
	 * --rwd-field-bg-custom is only emitted when the admin picks a colour. */
	background: var(--rwd-field-bg-custom, transparent);
	border: 1px solid var(--rwd-border);
	border-radius: var(--rwd-radius);
	box-shadow: none;
	transition: border-color var(--rwd-duration) var(--rwd-ease);
}

body.rwd-login input::placeholder {
	color: var(--rwd-text-muted);
	opacity: 0.8;
}

body.rwd-login input[type='text']:hover,
body.rwd-login input[type='password']:hover,
body.rwd-login input[type='email']:hover {
	border-color: var(--rwd-text-muted);
}

body.rwd-login input[type='text']:focus,
body.rwd-login input[type='password']:focus,
body.rwd-login input[type='email']:focus,
body.rwd-login input[type='tel']:focus {
	border-color: var(--rwd-border-focus);
	outline: none;
	box-shadow: none;
	background: transparent;
}

/* --- Floating labels (MUI-style outlined fields) -------------------------- */

body.rwd-login .rwd-float {
	position: relative;
}

body.rwd-login .rwd-float label {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	margin: 0;
	padding: 0 8px;
	font-size: 14px;
	color: var(--rwd-label-color, var(--rwd-text-muted));
	white-space: nowrap;
	pointer-events: none;
	background: transparent;
	transform: translate(-50%, -50%);
	transition:
		top var(--rwd-duration) var(--rwd-ease),
		font-size var(--rwd-duration) var(--rwd-ease),
		color var(--rwd-duration) var(--rwd-ease),
		background-color var(--rwd-duration) var(--rwd-ease);
}

/* Focused or filled: the label lifts onto the border. Its background matches
 * the page, which visually cuts the outline exactly like MUI's notch. */
body.rwd-login .rwd-float input:focus + label,
body.rwd-login .rwd-float input:not(:placeholder-shown) + label,
body.rwd-login .rwd-float input:-webkit-autofill + label {
	top: 0;
	font-size: 11.5px;
	background: var(--rwd-bg);
}

body.rwd-login .rwd-float input:focus + label {
	color: var(--rwd-label-color, var(--rwd-text));
}

body.rwd-login input:-webkit-autofill,
body.rwd-login input:-webkit-autofill:hover,
body.rwd-login input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--rwd-text);
	caret-color: var(--rwd-text);
	transition: background-color 100000s ease-in-out 0s;
}

/* --- Password reveal ------------------------------------------------------ */

body.rwd-login .rwd-field {
	position: relative;
}

body.rwd-login .rwd-reveal {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	color: var(--rwd-text-muted);
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: 4px;
	transform: translateY(-50%);
	transition: color var(--rwd-duration) var(--rwd-ease);
}

body.rwd-login .rwd-reveal:hover {
	color: var(--rwd-text);
}

body.rwd-login .rwd-reveal:focus-visible {
	outline: 1.5px solid var(--rwd-text);
	outline-offset: 1px;
}

body.rwd-login .rwd-reveal svg {
	width: 18px;
	height: 18px;
}

body.rwd-login .wp-hide-pw {
	display: none !important;
}

/* --- Caps Lock hint ------------------------------------------------------- */

body.rwd-login .rwd-capslock {
	display: flex;
	gap: 6px;
	align-items: center;
	justify-content: center;
	margin-top: 8px;
	font-size: 12px;
	color: var(--rwd-danger);
	opacity: 0;
	transition: opacity var(--rwd-duration) var(--rwd-ease);
}

body.rwd-login .rwd-capslock.is-visible {
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Remember me — rendered as a switch
 * ---------------------------------------------------------------------- */

/* The switch and its text are siblings in WordPress markup, so the gap has to
 * live on the row itself — without it they render flush against each other. */
body.rwd-login p.forgetmenot {
	display: flex;
	float: none;
	clear: both;
	gap: 10px;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0 0 28px;
}

body.rwd-login .forgetmenot input {
	margin: 0;
}

body.rwd-login .forgetmenot label {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--rwd-label-color, var(--rwd-text-muted));
	cursor: pointer;
}

body.rwd-login input[type='checkbox'] {
	position: relative;
	flex: 0 0 auto;
	width: 36px;
	height: 20px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background: var(--rwd-switch-off);
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	transition: background-color var(--rwd-duration) var(--rwd-ease);
}

/* WordPress paints its own ✓ into checked checkboxes via ::before; kill it or
 * it lands on top of the switch thumb. */
body.rwd-login input[type='checkbox']::before {
	content: none !important;
}

body.rwd-login input[type='checkbox']::after {
	position: absolute;
	top: 2px;
	inset-inline-start: 2px;
	width: 16px;
	height: 16px;
	content: '';
	background: var(--rwd-bg);
	border-radius: 50%;
	transition: transform var(--rwd-duration) var(--rwd-ease);
}

body.rwd-login input[type='checkbox']:checked {
	background: var(--rwd-btn-bg, var(--rwd-text));
}

body.rwd-login input[type='checkbox']:checked::after {
	transform: translateX(16px);
}

[dir='rtl'] body.rwd-login input[type='checkbox']:checked::after,
body.rwd-login[dir='rtl'] input[type='checkbox']:checked::after {
	transform: translateX(-16px);
}

body.rwd-login input[type='checkbox']:focus-visible {
	outline: 1.5px solid var(--rwd-text);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Buttons — flat, no shadow, no movement
 * ---------------------------------------------------------------------- */

body.rwd-login .submit,
body.rwd-login p.submit {
	float: none;
	clear: both;
	width: 100%;
	margin: 0;
}

/* Monochrome by default — white button on the dark theme, black on the light
 * one. --rwd-btn-bg/fg are only emitted by PHP when the admin picks a custom
 * accent, so out of the box the button matches the flat two-tone design. */
body.rwd-login input[type='submit'],
body.rwd-login .button-primary {
	display: block;
	float: none;
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	padding: 12px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--rwd-btn-fg, var(--rwd-bg));
	text-shadow: none;
	cursor: pointer;
	background: var(--rwd-btn-bg, var(--rwd-text));
	border: 0;
	border-radius: var(--rwd-radius);
	box-shadow: none;
	transition: opacity var(--rwd-duration) var(--rwd-ease);
}

/* --rwd-btn-hover / --rwd-btn-hover-op are only emitted by PHP when the admin
 * picks a custom hover colour; the default stays the opacity-dip hover. */
body.rwd-login input[type='submit']:hover,
body.rwd-login .button-primary:hover {
	background: var(--rwd-btn-hover, var(--rwd-btn-bg, var(--rwd-text)));
	opacity: var(--rwd-btn-hover-op, 0.88);
	filter: none;
	box-shadow: none;
	transform: none;
}

body.rwd-login input[type='submit']:active {
	opacity: 0.8;
}

body.rwd-login input[type='submit']:focus-visible {
	outline: 1.5px solid var(--rwd-text);
	outline-offset: 2px;
	box-shadow: none;
}

body.rwd-login form.is-submitting input[type='submit'] {
	pointer-events: none;
	opacity: 0.7;
}

/* -------------------------------------------------------------------------
 * Messages — flat strips
 * ---------------------------------------------------------------------- */

body.rwd-login #login_error,
body.rwd-login .message,
body.rwd-login .notice,
body.rwd-login .success {
	box-sizing: border-box;
	padding: 11px 14px;
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--rwd-danger);
	text-align: center;
	background: var(--rwd-danger-bg);
	border: 0;
	border-radius: var(--rwd-radius);
	box-shadow: none;
}

body.rwd-login .message,
body.rwd-login .notice-success,
body.rwd-login .success {
	color: var(--rwd-success);
	background: var(--rwd-success-bg);
}

body.rwd-login #login_error a,
body.rwd-login .message a {
	color: inherit;
}

/* -------------------------------------------------------------------------
 * Secondary links — small, centred, quiet
 * ---------------------------------------------------------------------- */

body.rwd-login #nav,
body.rwd-login #backtoblog {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 16px;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 20px 0 0;
	font-size: 0; /* swallows the raw " | " separators WordPress prints */
}

body.rwd-login #backtoblog {
	margin-top: 8px;
}

body.rwd-login #nav a,
body.rwd-login #backtoblog a,
body.rwd-login .privacy-policy-page-link a {
	font-size: 12.5px;
	color: var(--rwd-text-muted);
	text-decoration: none;
	transition: color var(--rwd-duration) var(--rwd-ease);
}

body.rwd-login #nav a:hover,
body.rwd-login #backtoblog a:hover,
body.rwd-login .privacy-policy-page-link a:hover {
	color: var(--rwd-text);
}

body.rwd-login #nav a:focus-visible,
body.rwd-login #backtoblog a:focus-visible {
	outline: 1.5px solid var(--rwd-text);
	outline-offset: 3px;
	border-radius: 3px;
}

body.rwd-login .privacy-policy-page-link {
	margin: 10px 0 0;
	text-align: center;
}

/* Sub-form links are opt-in per site; the clean default shows none of them. */
body.rwd-login.rwd-hide-nav #nav,
body.rwd-login.rwd-hide-home #backtoblog,
body.rwd-login.rwd-hide-privacy .privacy-policy-page-link {
	display: none;
}

/* -------------------------------------------------------------------------
 * Language switcher (opt-in) — compact, flat
 * ---------------------------------------------------------------------- */

body.rwd-login .language-switcher {
	display: flex;
	justify-content: center;
	margin-top: 16px;
}

body.rwd-login .language-switcher form {
	display: flex;
	gap: 8px;
	align-items: center;
}

body.rwd-login .language-switcher label {
	margin: 0;
}

body.rwd-login .language-switcher select {
	min-height: 38px;
	padding: 6px 10px;
	font-size: 13px;
	color: var(--rwd-text);
	background: var(--rwd-field-bg);
	border: 1px solid var(--rwd-border);
	border-radius: var(--rwd-radius);
}

body.rwd-login .language-switcher input[type='submit'] {
	display: inline-flex;
	width: auto;
	min-height: 38px;
	padding: 8px 16px;
	font-size: 13px;
}

/* -------------------------------------------------------------------------
 * CAPTCHA
 * ---------------------------------------------------------------------- */

body.rwd-login .rwd-captcha {
	display: flex;
	justify-content: center;
	margin: 0 0 18px;
}

body.rwd-login .rwd-captcha:empty {
	display: none;
	margin: 0;
}

@media (max-width: 400px) {
	body.rwd-login .rwd-captcha > div {
		transform: scale(0.86);
		transform-origin: center;
	}
}

/* -------------------------------------------------------------------------
 * Media panel — inset from the edges, rounded, image fills it
 * ---------------------------------------------------------------------- */

.rwd-panel {
	position: fixed;
	top: var(--rwd-gap);
	bottom: var(--rwd-gap);
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: calc(var(--rwd-panel-width) - var(--rwd-gap) * 1.5);
	overflow: hidden;
	background: var(--rwd-field-bg);
	border-radius: var(--rwd-radius-lg);
}

body.rwd-panel-left .rwd-panel {
	left: var(--rwd-gap);
	right: auto;
}

body.rwd-panel-right .rwd-panel {
	right: var(--rwd-gap);
	left: auto;
}

body.rwd-layout-centered .rwd-panel {
	display: none;
}

/* Ambient wash for the gradient background styles; sits under any slides. */
.rwd-panel__backdrop {
	position: absolute;
	inset: -20%;
	background:
		radial-gradient(closest-side circle at 30% 30%, rgba(var(--rwd-accent-rgb), 0.5), transparent 70%),
		radial-gradient(closest-side circle at 70% 65%, rgba(129, 140, 248, 0.4), transparent 70%),
		radial-gradient(closest-side circle at 50% 90%, rgba(45, 212, 191, 0.28), transparent 70%);
	filter: blur(30px);
	will-change: transform;
	animation: rwd-drift 26s ease-in-out infinite alternate;
}

@keyframes rwd-drift {
	from { transform: translate3d(-3%, -2%, 0) scale(1); }
	to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

body.rwd-bg-plain .rwd-panel__backdrop {
	display: none;
}

/* --- Slides ---------------------------------------------------------------- */

.rwd-slider {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.rwd-slider__viewport {
	position: relative;
	flex: 1 1 auto;
	cursor: grab;
	touch-action: pan-y; /* horizontal swipes belong to the slider */
	user-select: none;
}

.rwd-slider__viewport:active {
	cursor: grabbing;
}

.rwd-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	visibility: hidden;
	opacity: 0;
	transition: opacity 600ms var(--rwd-ease), visibility 0s linear 600ms;
}

.rwd-slide.is-active {
	visibility: visible;
	opacity: 1;
	transition: opacity 600ms var(--rwd-ease), visibility 0s;
}

.rwd-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none; /* native image ghost-drag would eat the swipe */
	user-select: none;
	pointer-events: none;
}

.rwd-slide__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 64px 32px 78px;
	text-align: start;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
}

.rwd-slide__caption h2 {
	margin: 0 0 6px;
	font-size: clamp(19px, 1.8vw, 26px);
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.rwd-slide__caption p {
	max-width: 48ch;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

/* --- Slider nav — thin progress bars, like tabs ----------------------------- */

.rwd-slider__nav {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	gap: 18px;
	padding: 0 32px 22px;
}

.rwd-slider__dot {
	flex: 1 1 0;
	max-width: 140px;
	padding: 0;
	color: rgba(255, 255, 255, 0.6);
	text-align: start;
	cursor: pointer;
	background: none;
	border: 0;
	transition: color var(--rwd-duration) var(--rwd-ease);
}

.rwd-slider__dot:hover,
.rwd-slider__dot.is-active {
	color: #fff;
}

.rwd-slider__dot:focus-visible {
	outline: 1.5px solid #fff;
	outline-offset: 3px;
	border-radius: 3px;
}

.rwd-slider__label {
	display: block;
	margin-bottom: 8px;
	overflow: hidden;
	font-size: 11px;
	font-weight: 600;
	text-overflow: ellipsis;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.rwd-slider__track {
	display: block;
	height: 2px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 999px;
}

.rwd-slider__fill {
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: inherit;
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

[dir='rtl'] .rwd-slider__fill {
	transform-origin: right center;
}

.rwd-slider__dot.is-active .rwd-slider__fill {
	animation: rwd-progress var(--rwd-slide-duration, 6s) linear forwards;
}

@keyframes rwd-progress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* -------------------------------------------------------------------------
 * Fluid background — full-page WebGL shader behind everything
 * ---------------------------------------------------------------------- */

/* The canvas is injected by fluid.js as the first child of <body>. z-index -1
 * puts it behind the page, so the body itself must go transparent or the
 * themed background would paint over it. The canvas carries its own dark
 * fallback colour for the moment before the first frame lands. */
body.rwd-login.rwd-bg-fluid {
	background: transparent;
}

.rwd-fluid {
	position: fixed;
	inset: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	background: #041d04;
}

/* Film grain overlay, sitting on the canvas but under the page content. */
.rwd-fluid-grain {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.055;
	mix-blend-mode: overlay;
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzE2MCcgaGVpZ2h0PScxNjAnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==');
}

/* No card behind the form: it sits directly on the shader. The palette is
 * forced to a light-on-dark glass scheme at body level (winning over the
 * :root theme palette for everything inside the page), so the form stays
 * readable over the moving colour field whatever theme is active. Admin
 * colour overrides still apply — they are custom properties resolved later
 * (--rwd-btn-*, --rwd-field-*, --rwd-label-color). */
body.rwd-login.rwd-bg-fluid {
	--rwd-bg: #0b150d;
	--rwd-text: #ffffff;
	--rwd-text-muted: rgba(255, 255, 255, 0.78);
	--rwd-border: rgba(255, 255, 255, 0.32);
	--rwd-border-focus: #ffffff;
	--rwd-field-bg: rgba(255, 255, 255, 0.12);
	--rwd-switch-off: rgba(255, 255, 255, 0.28);
	--rwd-danger: #ffb4ab;
	--rwd-danger-bg: rgba(84, 18, 22, 0.55);
	--rwd-success: #9be9b9;
	--rwd-success-bg: rgba(10, 52, 32, 0.55);
}

/* Fields become glass so they read against the animation. */
body.rwd-login.rwd-bg-fluid input[type='text'],
body.rwd-login.rwd-bg-fluid input[type='password'],
body.rwd-login.rwd-bg-fluid input[type='email'],
body.rwd-login.rwd-bg-fluid input[type='tel'],
body.rwd-login.rwd-bg-fluid input[type='number'] {
	background: var(--rwd-field-bg-custom, var(--rwd-field-bg));
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
}

/* The lifted label cannot mask the border with the page colour here (the page
 * is a moving image), so it becomes a small glass pill instead. */
body.rwd-login.rwd-bg-fluid .rwd-float input:focus + label,
body.rwd-login.rwd-bg-fluid .rwd-float input:not(:placeholder-shown) + label,
body.rwd-login.rwd-bg-fluid .rwd-float input:-webkit-autofill + label {
	padding: 1px 10px;
	background: rgba(9, 20, 12, 0.72);
	border-radius: 999px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* The media panel turns to glass over the shader instead of its own wash. */
body.rwd-login.rwd-bg-fluid .rwd-panel {
	background: rgba(6, 16, 8, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
}

body.rwd-login.rwd-bg-fluid .rwd-panel__backdrop {
	display: none;
}

body.rwd-login.rwd-bg-fluid .rwd-theme-toggle,
body.rwd-login.rwd-bg-fluid .rwd-toast {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
}

body.rwd-login.rwd-bg-fluid .rwd-theme-toggle__icon {
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Extras
 * ---------------------------------------------------------------------- */

.rwd-login-extras {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	margin-top: 6px;
}

.rwd-theme-toggle {
	position: fixed;
	top: calc(var(--rwd-gap) + 10px);
	inset-inline-end: calc(var(--rwd-gap) + 10px);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	cursor: pointer;
	background: var(--rwd-field-bg);
	border: 1px solid var(--rwd-border);
	border-radius: 50%;
	box-shadow: none;
	transition: border-color var(--rwd-duration) var(--rwd-ease), background-color var(--rwd-duration) var(--rwd-ease);
}

.rwd-theme-toggle:hover {
	border-color: var(--rwd-text-muted);
	transform: none;
}

.rwd-theme-toggle:focus-visible {
	outline: 1.5px solid var(--rwd-text);
	outline-offset: 2px;
}

.rwd-theme-toggle__icon {
	width: 16px;
	height: 16px;
	color: var(--rwd-text);
	background: currentColor;
	-webkit-mask: var(--rwd-icon-sun) center / contain no-repeat;
	mask: var(--rwd-icon-sun) center / contain no-repeat;
}

:root[data-rwd-theme='dark'] .rwd-theme-toggle__icon {
	-webkit-mask-image: var(--rwd-icon-moon);
	mask-image: var(--rwd-icon-moon);
}

:root {
	--rwd-icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
	--rwd-icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
}

.rwd-login-footer {
	margin: 0;
	font-size: 12px;
	color: var(--rwd-text-muted);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Toasts — feedback in the bottom corner, form column never reflows
 * ---------------------------------------------------------------------- */

.rwd-toast {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 50;
	display: flex;
	gap: 10px;
	align-items: center;
	max-width: min(90vw, 380px);
	padding: 13px 16px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--rwd-text);
	text-align: start;
	pointer-events: none;
	background: var(--rwd-field-bg);
	border: 1px solid var(--rwd-border);
	border-radius: var(--rwd-radius);
	animation:
		rwd-toast-in 380ms var(--rwd-ease) both,
		rwd-toast-out 450ms var(--rwd-ease) 6s both;
}

.rwd-toast--error {
	color: var(--rwd-danger);
}

.rwd-toast--success {
	color: var(--rwd-success);
}

.rwd-toast__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	background: currentColor;
	border-radius: 50%;
}

@keyframes rwd-toast-in {
	from {
		opacity: 0;
		transform: translate3d(0, 16px, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes rwd-toast-out {
	to {
		opacity: 0;
		transform: translate3d(0, 8px, 0);
	}
}

/* -------------------------------------------------------------------------
 * Interim login (expired-session modal)
 * ---------------------------------------------------------------------- */

body.rwd-login.interim-login {
	max-height: none;
	padding: 16px;
	overflow: auto;
}

body.rwd-login.interim-login .rwd-panel,
body.rwd-login.interim-login .rwd-theme-toggle {
	display: none;
}

/* -------------------------------------------------------------------------
 * Responsive — panel becomes a top banner, scrolling allowed again
 * ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
	:root {
		--rwd-panel-width: 46%;
	}
}

@media (max-width: 900px) {
	body.rwd-login,
	body.rwd-login.rwd-layout-split.rwd-panel-left,
	body.rwd-login.rwd-layout-split.rwd-panel-right {
		max-height: none;
		justify-content: center;
		padding: max(24px, env(safe-area-inset-top, 0px)) 20px calc(40px + env(safe-area-inset-bottom, 0px));
		overflow: auto;
	}

	/* The media panel is desktop chrome; on a phone it costs half the screen
	 * for decoration, so it disappears and the form takes the viewport. */
	.rwd-panel {
		display: none;
	}

	body.rwd-login #login {
		max-width: 360px;
	}

	/* 16px inputs stop iOS Safari auto-zooming the page on focus, which used
	 * to leave the whole layout stuck zoomed-in after signing in. */
	body.rwd-login input[type='text'],
	body.rwd-login input[type='password'],
	body.rwd-login input[type='email'],
	body.rwd-login input[type='tel'],
	body.rwd-login input[type='number'] {
		font-size: 16px;
	}

	body.rwd-login .rwd-float label {
		font-size: 16px;
	}

	body.rwd-login .rwd-float input:focus + label,
	body.rwd-login .rwd-float input:not(:placeholder-shown) + label,
	body.rwd-login .rwd-float input:-webkit-autofill + label {
		font-size: 12px;
	}

	.rwd-theme-toggle {
		top: 12px;
		inset-inline-end: 12px;
		background: var(--rwd-bg);
	}
}

/* Small phones. */
@media (max-width: 480px) {
	body.rwd-login #login {
		max-width: 100%;
	}

	/* Feedback must not cover the submit button on a narrow screen. */
	.rwd-toast {
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		left: 12px;
		max-width: none;
	}

	.rwd-theme-toggle {
		width: 34px;
		height: 34px;
	}
}

/* -------------------------------------------------------------------------
 * Preferences
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body.rwd-login *,
	body.rwd-login *::before,
	body.rwd-login *::after,
	.rwd-panel *,
	.rwd-panel *::before,
	.rwd-panel *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.rwd-panel__backdrop {
		animation: none;
		transform: none;
	}
}

@media (prefers-contrast: more) {
	body.rwd-login input[type='text'],
	body.rwd-login input[type='password'],
	body.rwd-login input[type='email'] {
		border-width: 2px;
	}
}

@media (forced-colors: active) {
	body.rwd-login input[type='submit'] {
		border: 1px solid ButtonText;
	}

	body.rwd-login input[type='checkbox'] {
		border: 1px solid CanvasText;
	}
}