/**
 * Modern skin — Sci-Fi HUD / Cyberpunk theme
 *
 * Backgrounds: images/decor/01.jpg (login, sharp), images/decor/02.jpg (mail)
 */

:root {
	--hud-void: #04060d;
	--hud-deep: #080c18;
	--hud-panel: rgba(6, 12, 24, 0.88);
	--hud-panel-solid: rgba(4, 10, 22, 0.94);
	--hud-cyan: #00f0ff;
	--hud-cyan-dim: #00b8c4;
	--hud-magenta: #ff2bd6;
	--hud-amber: #ffb020;
	--hud-green: #39ff14;
	--hud-primary: var(--hud-cyan);
	--hud-primary-dark: #0099aa;
	--hud-primary-light: #66f8ff;
	--hud-accent: var(--hud-magenta);
	--hud-text: #ffffff;
	--hud-text-muted: #e8f8ff;
	--hud-mail-overlay: rgba(4, 6, 13, 0.75);
	--hud-mail-panel: rgba(4, 10, 22, 0.32);
	--hud-mail-header: rgba(6, 14, 28, 0.62);
	--hud-border: rgba(0, 240, 255, 0.45);
	--hud-border-dim: rgba(0, 240, 255, 0.18);
	--hud-glow-cyan: 0 0 12px rgba(0, 240, 255, 0.55), 0 0 32px rgba(0, 240, 255, 0.15);
	--hud-glow-magenta: 0 0 12px rgba(255, 43, 214, 0.5);
	--hud-radius: 2px;
	--hud-radius-sm: 1px;
	--hud-transition: 0.15s ease;
	--hud-menu-width: 120px;
	--hud-menu-width-sm: 72px;
	--hud-scanline: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(0, 240, 255, 0.02) 2px,
		rgba(0, 240, 255, 0.02) 4px
	);

	/* legacy aliases used below */
	--modern-primary: var(--hud-cyan);
	--modern-primary-dark: var(--hud-cyan-dim);
	--modern-primary-light: var(--hud-primary-light);
	--modern-accent: var(--hud-magenta);
	--modern-accent-pink: var(--hud-magenta);
	--modern-surface: var(--hud-panel);
	--modern-surface-muted: rgba(8, 16, 32, 0.9);
	--modern-surface-solid: var(--hud-panel-solid);
	--modern-border: var(--hud-border-dim);
	--modern-text: var(--hud-text);
	--modern-text-muted: var(--hud-text-muted);
	--modern-shadow-lg: 0 0 40px rgba(0, 0, 0, 0.7);
	--modern-glow: var(--hud-glow-cyan);
	--modern-transition: var(--hud-transition);
	--space-void: var(--hud-void);
	--space-deep: var(--hud-deep);
}

html.dark-mode {
	--hud-panel: rgba(4, 8, 18, 0.92);
	--hud-text: #e8fcff;
}

/* ── HUD utility: corner brackets ─────────────────────────── */

.hud-panel,
.task-login #login-form,
#layout-sidebar,
#layout-list,
#layout-content,
.popover,
.ui-dialog {
	position: relative;
}

.hud-corners::before,
.hud-corners::after,
.task-login #login-form::before,
.task-login #login-form::after,
#layout-sidebar::before,
#layout-list::before {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	pointer-events: none;
	z-index: 2;
}

/* ── Backgrounds (login = sharp, no blur) ─────────────────── */

.space-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: var(--hud-void);
}

.space-bg-login {
	background-image: url(../images/decor/01.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* sharp — no filter, no blur */
	filter: none;
	transform: translateZ(0);
	image-rendering: auto;
}

/* light tint only — keeps photo crisp */
.space-bg-login::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(4, 6, 13, 0.15) 0%,
		rgba(4, 6, 13, 0.35) 100%
	);
	backdrop-filter: none;
	filter: none;
}

.space-bg-mail {
	display: none;
}

/* Mail — single full-screen background (fixed, one image) */
body.task-mail::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: url(../images/decor/02.jpg) center center / cover no-repeat fixed;
	opacity: 1;
	filter: none;
}

/* ~75% dim overlay on background image */
body.task-mail::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		var(--hud-scanline),
		var(--hud-mail-overlay);
}

body.task-mail #layout {
	position: relative;
	z-index: 1;
}

/* Mail — glass panels (transparent so one bg shows through) */
body.task-mail #layout-menu {
	background: rgba(4, 8, 18, 0.5) !important;
	box-shadow: inset -1px 0 0 rgba(0, 240, 255, 0.12);
}

body.task-mail #layout-sidebar,
body.task-mail #layout-list {
	background: var(--hud-mail-panel) !important;
}

body.task-mail #layout-content {
	background: #060a14 !important;
	position: relative;
	overflow: hidden;
}

/* Large MSA logo in message column (no space bg image) */
body.task-mail #layout-content::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: url(../images/msa_logo.png) center center / min(520px, 58%) auto no-repeat;
	opacity: 0.2;
	filter: drop-shadow(0 0 28px rgba(0, 240, 255, 0.35));
}

body.task-mail #layout-content > .header {
	position: relative;
	z-index: 2;
}

body.task-mail #layout-content .iframe-wrapper {
	position: relative;
	z-index: 1;
	background: #060a14 !important;
}

body.task-mail #layout-content #messagecontframe {
	background: #060a14 !important;
}

/* Message iframe document — solid panel, large logo, bright text */
html.iframe body {
	background: #060a14 !important;
}

html.iframe #layout-content {
	background: #060a14 !important;
	position: relative;
	min-height: 100%;
}

html.iframe #layout-content::before {
	content: "";
	position: fixed;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
	width: min(560px, 72vw);
	height: min(300px, 38vh);
	z-index: 0;
	pointer-events: none;
	background: url(../images/msa_logo.png) center/contain no-repeat;
	opacity: 0.22;
	filter: drop-shadow(0 0 32px rgba(0, 240, 255, 0.4));
}

html.iframe .content.frame-content {
	background: transparent !important;
	position: relative;
	z-index: 1;
}

html.iframe #message-header {
	position: relative;
	z-index: 1;
	background: rgba(6, 14, 28, 0.88) !important;
	border-bottom: 1px solid var(--hud-border-dim);
}

html.iframe #message-content {
	position: relative;
	z-index: 1;
	background: rgba(4, 10, 22, 0.82) !important;
}

html.iframe #message-header > .subject,
html.iframe #message-header .header-summary,
html.iframe #message-header .header-summary span,
html.iframe #message-header .header-headers,
html.iframe #message-header .header-headers td,
html.iframe #message-header .header-links a {
	color: #ffffff !important;
	font-weight: 600;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 1), 0 0 12px rgba(0, 0, 0, 0.6);
}

html.iframe #message-header > .subject {
	font-size: 1.35rem;
	font-weight: 700;
	text-shadow: 0 0 12px rgba(0, 240, 255, 0.45), 0 2px 8px rgba(0, 0, 0, 1);
}

html.iframe #messagebody,
html.iframe #messagebody .message-part,
html.iframe #messagebody .message-htmlpart {
	font-size: 1.1rem !important;
	font-weight: 600 !important;
	line-height: 1.7 !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 1), 0 0 2px #000 !important;
}

/* Force white text in HTML and plain-text bodies; override inline email styles */
html.iframe #messagebody .message-part,
html.iframe #messagebody .message-part *,
html.iframe #messagebody .message-htmlpart,
html.iframe #messagebody .message-htmlpart * {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

html.iframe #messagebody .message-part a,
html.iframe #messagebody .message-part a *,
html.iframe #messagebody .message-htmlpart a,
html.iframe #messagebody .message-htmlpart a * {
	color: #00acff !important;
	-webkit-text-fill-color: #00acff !important;
}

html.iframe #messagebody .message-part a:hover,
html.iframe #messagebody .message-part a:hover *,
html.iframe #messagebody .message-htmlpart a:hover,
html.iframe #messagebody .message-htmlpart a:hover * {
	color: #0099dd !important;
	-webkit-text-fill-color: #0099dd !important;
}

html.iframe #messagebody .message-part,
html.iframe #messagebody .message-htmlpart {
	background: rgba(4, 10, 22, 0.9) !important;
	padding: 1.25rem 1.5rem !important;
	border: 1px solid var(--hud-border-dim);
	margin-top: 0.5rem;
}

html.iframe .attachmentslist {
	background: rgba(6, 14, 28, 0.9) !important;
}

html.iframe .attachmentslist li,
html.iframe .attachmentslist li a {
	color: #ffffff !important;
	font-weight: 600;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

body.task-mail #folderlist-content,
body.task-mail #messagelist-content,
body.task-mail .listbox .scroller {
	background: transparent !important;
}

body.task-mail #layout > div > .header,
body.task-mail #layout-content > .header,
body.task-mail .listbox .header,
body.task-mail #layout > div > .footer,
body.task-mail .listbox .footer,
body.task-mail .menu.pagenav,
body.task-mail .menu.pagenav + .navlist {
	background: var(--hud-mail-header) !important;
	color: #ffffff !important;
}

body.task-mail .menu.pagenav .pagenav-text,
body.task-mail .menu.pagenav a {
	color: #ffffff !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

body.task-mail .folderlist li a {
	color: #ffffff !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
	font-weight: 500;
}

body.task-mail .folderlist li.selected > a {
	color: var(--hud-cyan) !important;
	font-weight: 700;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.6), 0 1px 4px rgba(0, 0, 0, 0.9);
}

body.task-mail #messagelist-content .messagelist td.subject span.fromto,
body.task-mail #messagelist-content .messagelist td.subject span.subject,
body.task-mail #messagelist-content .messagelist td.subject span.date,
body.task-mail #messagelist-content .messagelist td.subject span.size,
body.task-mail #messagelist-content .messagelist td.subject span.subject a,
body.task-mail #messagelist-content .listing tbody tr td {
	color: #ffffff !important;
	font-weight: 500;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

body.task-mail #messagelist-content .messagelist tr.selected td.subject span {
	font-weight: 700;
	text-shadow: 0 0 8px rgba(0, 240, 255, 0.4), 0 1px 4px rgba(0, 0, 0, 0.9);
}

body.task-mail .header-title,
body.task-mail .username {
	color: #ffffff !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

body.task-mail #layout-list .searchbar,
body.task-mail #layout-sidebar .searchbar {
	background: var(--hud-mail-header) !important;
}

body.task-mail #layout-list .searchbar input,
body.task-mail #layout-sidebar .searchbar input {
	color: #ffffff !important;
	text-shadow: none;
}

body.task-mail .toolbar a.button,
body.task-mail .toolbar button,
body.task-mail .header a.button {
	color: #ffffff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

body,
button,
input,
select,
textarea {
	font-family: 'Bahnschrift', 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif !important;
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	color: var(--hud-text);
	letter-spacing: 0.02em;
}

h1, h2, h3,
.header,
.header-title,
#layout-menu .menu a,
#layout-menu .menu button,
.btn,
.btn-primary,
input[type="submit"] {
	font-family: 'Bahnschrift', 'Segoe UI Semibold', 'Segoe UI', system-ui, sans-serif !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}

code, .listing .size, .listing .date {
	font-family: 'Consolas', 'Cascadia Mono', 'Courier New', monospace !important;
}

body.task-login,
body.task-mail,
body.task-addressbook,
body.task-settings {
	background: var(--hud-void) !important;
}

#layout {
	position: relative;
	z-index: 1;
}

/* ── Task menu column (wider) ─────────────────────────────── */

@media screen and (min-width: 481px) {
	#layout-menu {
		width: var(--hud-menu-width-sm) !important;
		min-width: var(--hud-menu-width-sm) !important;
		max-width: var(--hud-menu-width-sm) !important;
	}
}

@media screen and (min-width: 1025px) {
	#layout-menu {
		width: var(--hud-menu-width) !important;
		min-width: var(--hud-menu-width) !important;
		max-width: var(--hud-menu-width) !important;
	}
}

#layout-menu {
	background:
		linear-gradient(180deg, rgba(0, 240, 255, 0.06) 0%, transparent 30%),
		linear-gradient(0deg, rgba(255, 43, 214, 0.05) 0%, transparent 25%),
		rgba(4, 8, 18, 0.96) !important;
	border-right: 1px solid var(--hud-border) !important;
	box-shadow: inset -1px 0 0 rgba(0, 240, 255, 0.12), 4px 0 24px rgba(0, 0, 0, 0.6);
	backdrop-filter: none;
}

#layout-menu::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(180deg, transparent, var(--hud-cyan), transparent);
	opacity: 0.6;
	pointer-events: none;
}

#layout-menu .popover-header,
#layout-menu .special-buttons {
	background: transparent !important;
	border-bottom: 1px solid var(--hud-border-dim);
}

@media screen and (min-width: 481px) {
	#layout-menu .popover-header {
		padding: 0 !important;
		background-color: #ffffff !important;
	}
}

#layout-menu .menu a,
#layout-menu .menu button {
	border-radius: var(--hud-radius);
	margin: 4px 10px;
	padding: 12px 6px !important;
	color: var(--hud-text-muted) !important;
	border: 1px solid transparent;
	transition: color var(--hud-transition), border-color var(--hud-transition), box-shadow var(--hud-transition), background var(--hud-transition);
	font-size: 0.65rem !important;
	line-height: 1.3;
}

#layout-menu .menu a .inner,
#layout-menu .menu button .inner {
	display: block;
}

#layout-menu .menu a.selected,
#layout-menu .menu button.selected {
	background: rgba(0, 240, 255, 0.08) !important;
	border-color: var(--hud-border) !important;
	color: var(--hud-cyan) !important;
	box-shadow: var(--hud-glow-cyan), inset 0 0 20px rgba(0, 240, 255, 0.06);
	text-shadow: 0 0 8px rgba(0, 240, 255, 0.8);
}

#layout-menu .menu a:hover,
#layout-menu .menu button:hover {
	background: rgba(0, 240, 255, 0.05) !important;
	border-color: var(--hud-border-dim) !important;
	color: var(--hud-cyan) !important;
}

#layout-menu .menu .compose.button {
	background: transparent !important;
	color: var(--hud-magenta) !important;
	border: 1px solid var(--hud-magenta) !important;
	border-radius: var(--hud-radius);
	margin: 10px !important;
	font-weight: 700;
	box-shadow: var(--hud-glow-magenta), inset 0 0 16px rgba(255, 43, 214, 0.08);
}

#layout-menu .menu .compose.button:hover {
	background: rgba(255, 43, 214, 0.12) !important;
	text-shadow: 0 0 10px rgba(255, 43, 214, 0.9);
}

#layout-menu #logo {
	max-height: 52px;
	max-width: calc(var(--hud-menu-width) - 20px);
	width: auto;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.7));
}

/* ── HUD panels (default; mail overrides above) ───────────── */

#layout-sidebar,
#layout-list,
#layout-content,
.listbox .header,
.popupmenu .popover-header {
	background: var(--hud-panel) !important;
	backdrop-filter: none;
	border-color: var(--hud-border-dim) !important;
}

#layout-sidebar,
#layout-list {
	border-right: 1px solid var(--hud-border-dim) !important;
	box-shadow: inset 0 0 30px rgba(0, 240, 255, 0.03);
}

#layout > div > .header,
#layout-content > .header,
.listbox .header {
	background: rgba(6, 14, 28, 0.95) !important;
	border-bottom: 1px solid var(--hud-border) !important;
	color: var(--hud-cyan) !important;
	text-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
	box-shadow: 0 1px 0 rgba(0, 240, 255, 0.1);
}

.toolbar a.button,
.toolbar button,
.header a.button,
.header button {
	border-radius: var(--hud-radius);
	color: var(--hud-text) !important;
	border: 1px solid transparent;
	transition: all var(--hud-transition);
}

.toolbar a.button:hover,
.toolbar button:hover,
.header a.button:hover {
	background: rgba(0, 240, 255, 0.08) !important;
	border-color: var(--hud-border-dim) !important;
	box-shadow: var(--hud-glow-cyan);
	color: var(--hud-cyan) !important;
}

/* ── Message list ─────────────────────────────────────────── */

#messagelist-content .listing tbody tr {
	transition: background var(--hud-transition);
	color: #ffffff;
	border-bottom: 1px solid rgba(0, 240, 255, 0.05);
}

#messagelist-content .messagelist td.subject span.fromto,
#messagelist-content .messagelist td.subject span.subject,
#messagelist-content .messagelist td.subject span.date,
#messagelist-content .messagelist td.subject span.size,
#messagelist-content .messagelist td.subject span.subject a,
#messagelist-content .listing tbody tr td {
	color: #ffffff !important;
}

#messagelist-content .messagelist tr.selected td.subject span.fromto,
#messagelist-content .messagelist tr.selected td.subject span.subject,
#messagelist-content .messagelist tr.selected td.subject span.date,
#messagelist-content .messagelist tr.selected td.subject span.size,
#messagelist-content .messagelist tr.selected td.subject span.subject a {
	color: #ffffff !important;
}

#messagelist-content .listing tbody tr.selected,
#messagelist-content .listing tbody tr.selected td {
	background: rgba(0, 240, 255, 0.1) !important;
	box-shadow: inset 3px 0 0 var(--hud-cyan), 0 0 20px rgba(0, 240, 255, 0.05);
}

#messagelist-content .listing tbody tr:hover td {
	background: rgba(0, 240, 255, 0.05) !important;
}

#messagelist-content .listing .flagged {
	color: var(--hud-magenta) !important;
	text-shadow: 0 0 8px rgba(255, 43, 214, 0.6);
}

.listing,
.folderlist,
.messagelist {
	color: var(--hud-text);
}

/* ── Buttons ──────────────────────────────────────────────── */

.btn-primary,
button.btn-primary,
a.btn-primary,
input[type="submit"].btn-primary {
	background: transparent !important;
	border: 1px solid var(--hud-cyan) !important;
	border-radius: var(--hud-radius) !important;
	font-weight: 700;
	color: var(--hud-cyan) !important;
	box-shadow: var(--hud-glow-cyan), inset 0 0 20px rgba(0, 240, 255, 0.06);
	transition: all var(--hud-transition);
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
	background: rgba(0, 240, 255, 0.12) !important;
	color: #fff !important;
	box-shadow: 0 0 24px rgba(0, 240, 255, 0.7), inset 0 0 30px rgba(0, 240, 255, 0.1);
	text-shadow: 0 0 10px var(--hud-cyan);
}

/* ── Form inputs (HUD fields) ─────────────────────────────── */

.form-control,
input.form-control,
select.form-control,
textarea.form-control {
	border-radius: var(--hud-radius) !important;
	border: 1px solid var(--hud-border-dim) !important;
	background: rgba(2, 8, 18, 0.85) !important;
	color: var(--hud-cyan) !important;
	font-family: 'Consolas', 'Cascadia Mono', monospace !important;
	transition: border-color var(--hud-transition), box-shadow var(--hud-transition);
}

.form-control:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
	border-color: var(--hud-cyan) !important;
	box-shadow: var(--hud-glow-cyan), inset 0 0 12px rgba(0, 240, 255, 0.05) !important;
	background: rgba(4, 12, 24, 0.95) !important;
	outline: none;
}

.form-control::placeholder {
	color: var(--hud-text-muted);
	opacity: 0.8;
}

/* ── Login (sharp bg + HUD card) ────────────────────────── */

.task-login {
	min-height: 100vh;
	background: var(--hud-void) !important;
}

.task-login #layout-content {
	position: relative;
	z-index: 1;
	background: transparent !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
}

.task-login #logo {
	position: static !important;
	top: auto !important;
	max-height: 400px;
	max-width: 960px;
	width: auto;
	height: auto;
	object-fit: contain;
	margin-bottom: 3rem;
	filter:
		brightness(1.2)
		contrast(1.15)
		saturate(1.1)
		drop-shadow(0 0 24px rgba(0, 240, 255, 0.9))
		drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
}

.task-login #login-form {
	position: relative;
	z-index: 1;
	top: auto !important;
	width: 100%;
	max-width: 420px;
	margin: 0;
	padding: 2.5rem 2rem;
	background: var(--hud-panel-solid);
	backdrop-filter: none;
	border-radius: var(--hud-radius);
	box-shadow: var(--hud-glow-cyan), 0 20px 60px rgba(0, 0, 0, 0.65);
	border: 1px solid var(--hud-border);
}

/* HUD corner brackets on login card */
.task-login #login-form::before {
	top: -1px;
	left: -1px;
	border-top: 2px solid var(--hud-cyan);
	border-left: 2px solid var(--hud-cyan);
	box-shadow: -2px -2px 12px rgba(0, 240, 255, 0.5);
}

.task-login #login-form::after {
	bottom: -1px;
	right: -1px;
	border-bottom: 2px solid var(--hud-magenta);
	border-right: 2px solid var(--hud-magenta);
	box-shadow: 2px 2px 12px rgba(255, 43, 214, 0.4);
}

html.dark-mode .task-login #login-form {
	background: rgba(2, 6, 14, 0.96);
}

.task-login #login-form table {
	width: 100%;
	border-collapse: collapse;
}

.task-login #login-form table,
.task-login #login-form tbody {
	display: block;
	width: 100%;
}

.task-login #login-form tr {
	display: block;
	width: 100%;
	margin-bottom: 1.75rem;
}

.task-login #login-form tr:last-of-type {
	margin-bottom: 0.5rem;
}

.task-login #login-form td {
	display: block;
	width: 100% !important;
	padding: 0;
}

.task-login #login-form td.title {
	margin-bottom: 0.55rem;
}

.task-login #login-form .row {
	margin-bottom: 0;
	margin-right: 0;
	margin-left: 0;
}

.task-login #login-form label {
	display: block;
	color: var(--hud-cyan);
	font-family: 'Bahnschrift', 'Segoe UI', system-ui, sans-serif !important;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 0.45rem;
}

.task-login #login-form input.form-control,
.task-login #login-form #rcmloginuser,
.task-login #login-form #rcmloginpwd,
.task-login #login-form #rcmloginhost,
.task-login #login-form select.form-control {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	box-sizing: border-box;
	padding: 0.8rem 1rem;
	font-size: 0.95rem;
}

/* Login button — centered */
.task-login #login-form p.formbuttons,
.task-login #login-form .formbuttons {
	display: flex !important;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0.75rem 0 0;
	padding: 0;
	text-align: center;
}

.task-login #login-form .formbuttons input,
.task-login #login-form .formbuttons button,
.task-login #login-form input[type="submit"],
.task-login #login-form #rcmloginsubmit {
	width: auto !important;
	min-width: 180px;
	padding: 0.85rem 2.5rem;
	font-size: 0.85rem;
	margin: 0;
}

.task-login #login-footer {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--hud-border-dim);
	color: var(--hud-cyan);
	font-size: 1.35rem;
	font-weight: 600;
	font-family: 'Bahnschrift', 'Segoe UI', system-ui, sans-serif !important;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	text-shadow: 0 0 16px rgba(0, 240, 255, 0.55);
}

.task-login #login-footer .support-link {
	color: var(--hud-magenta);
	text-shadow: 0 0 8px rgba(255, 43, 214, 0.5);
}

/* ── Popovers & dialogs ───────────────────────────────────── */

.popover {
	border-radius: var(--hud-radius) !important;
	box-shadow: var(--hud-glow-cyan), var(--modern-shadow-lg) !important;
	border: 1px solid var(--hud-border) !important;
	background: var(--hud-panel-solid) !important;
	backdrop-filter: none;
	overflow: hidden;
}

.popover .menu li a,
.popover .menu li button {
	color: var(--hud-text) !important;
}

.popover .menu li a:hover,
.popover .menu li button:hover {
	background: rgba(0, 240, 255, 0.1) !important;
	color: var(--hud-cyan) !important;
	text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

.ui-dialog {
	border-radius: var(--hud-radius) !important;
	box-shadow: var(--hud-glow-cyan) !important;
	border: 1px solid var(--hud-border) !important;
	background: var(--hud-panel-solid) !important;
	overflow: hidden;
}

.ui-dialog .ui-dialog-titlebar {
	background: rgba(6, 14, 28, 0.98) !important;
	border-bottom: 1px solid var(--hud-border) !important;
	color: var(--hud-cyan) !important;
	font-family: 'Bahnschrift', 'Segoe UI', system-ui, sans-serif !important;
}

/* ── Search bar ───────────────────────────────────────────── */

#layout-list .searchbar,
#layout-sidebar .searchbar {
	background: rgba(6, 14, 28, 0.95) !important;
	border-bottom: 1px solid var(--hud-border-dim) !important;
}

#layout-list .searchbar input,
#layout-sidebar .searchbar input {
	border-radius: var(--hud-radius) !important;
	background: rgba(2, 8, 18, 0.9) !important;
	border-color: var(--hud-border-dim) !important;
	color: var(--hud-cyan) !important;
}

/* ── Folder tree ──────────────────────────────────────────── */

.folderlist li a {
	color: var(--hud-text-muted) !important;
}

.folderlist li.selected > a {
	color: var(--hud-cyan) !important;
	font-weight: 600;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.folderlist li a:hover {
	color: var(--hud-primary-light) !important;
}

/* ── Scrollbars ───────────────────────────────────────────── */

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: var(--hud-deep);
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--hud-cyan), var(--hud-magenta));
	border-radius: 0;
	box-shadow: 0 0 6px var(--hud-cyan);
}

/* ── Quota HUD bar ────────────────────────────────────────── */

#quotadisplay .bar {
	border-radius: 0;
	overflow: hidden;
	background: rgba(2, 8, 18, 0.9);
	border: 1px solid var(--hud-border-dim);
}

#quotadisplay .value {
	background: linear-gradient(90deg, var(--hud-cyan), var(--hud-magenta)) !important;
	box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}

/* ── Message view ─────────────────────────────────────────── */

#message-header {
	border-bottom: 1px solid var(--hud-border);
	color: #ffffff;
}

#message-header > .subject,
#message-header .header-summary,
#message-header .header-summary span,
#message-header .header-headers,
#message-header .header-headers .header-title,
#message-header .header-headers td,
#message-header .header-links a {
	color: #ffffff !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

#message-header > .subject {
	font-weight: 700;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.35), 0 1px 4px rgba(0, 0, 0, 0.9);
}

#message-content {
	background: rgba(4, 10, 22, 0.82) !important;
}

#messagebody,
#messagebody .message-part,
#messagebody .message-htmlpart,
.message-partheaders,
.message-partheaders .headers-table,
.message-partheaders .headers-table td {
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.7;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 1), 0 0 2px #000;
}

#messagebody .message-part,
#messagebody .message-htmlpart {
	background: rgba(4, 10, 22, 0.9) !important;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--hud-border-dim);
}

/* Force white text in HTML and plain-text bodies; override inline email styles */
#messagebody .message-part,
#messagebody .message-part *,
#messagebody .message-htmlpart,
#messagebody .message-htmlpart * {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

#messagebody .message-part a,
#messagebody .message-part a *,
#messagebody .message-htmlpart a,
#messagebody .message-htmlpart a * {
	color: #00acff !important;
	-webkit-text-fill-color: #00acff !important;
}

#messagebody .message-part a:hover,
#messagebody .message-part a:hover *,
#messagebody .message-htmlpart a:hover,
#messagebody .message-htmlpart a:hover * {
	color: #0099dd !important;
	-webkit-text-fill-color: #0099dd !important;
}

.message-partheaders,
.message-partheaders .headers-table,
.message-partheaders .headers-table td {
	color: #ffffff !important;
}

.attachmentslist {
	background: rgba(6, 14, 28, 0.9) !important;
	border-color: var(--hud-border-dim) !important;
}

.attachmentslist li,
.attachmentslist li a,
.attachmentslist .attachment-name {
	color: #ffffff !important;
	font-weight: 600;
}

.iframe-wrapper {
	background: #060a14 !important;
}

/* ── Other tasks ──────────────────────────────────────────── */

body.task-addressbook,
body.task-settings {
	background:
		var(--hud-scanline),
		radial-gradient(ellipse at 20% 30%, rgba(0, 240, 255, 0.08) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 70%, rgba(255, 43, 214, 0.06) 0%, transparent 50%),
		var(--hud-deep) !important;
}