/*
 * Account / Restore inside drahys_modern shell.
 * Loaded last — protects theme frame/header from legacy Bootstrap resets.
 */

body.account-app {
	margin: 0;
	font-family: var(--m-font-body, "Roboto", Arial, sans-serif);
	font-size: 13px;
	line-height: 1.55;
	color: var(--m-text, #c8bba8);
	background:
		linear-gradient(180deg, rgba(8, 5, 2, 0.1) 0%, rgba(8, 5, 2, 0.04) 30%, rgba(6, 4, 2, 0.12) 70%, rgba(6, 4, 2, 0.22) 100%),
		url("/application/themes/drahys_modern/assets/images/background.jpg?v=2") no-repeat center center / cover fixed,
		linear-gradient(180deg, #1a120b 0%, #120c07 45%, #0a0704 100%) !important;
	background-color: var(--m-bg, #0a0704) !important;
}

/* Legacy account CSS hides nothing we still need */
.account-app .body-wrap,
.account-app .top-title,
.account-app .top-nav_wrap,
.account-app .slider-section,
.account-app footer:not(.modern-footer) {
	display: none !important;
}

/* Keep shell links on theme gold, not Bootstrap blue */
.account-app .modern-header a,
.account-app .modern-footer a,
.account-app .modern-page-copy a,
.account-app .modern-nav-list > .nav-item > .nav-link,
.account-app .modern-foot-list a {
	color: #dcc078;
	text-decoration: none;
}

.account-app .modern-nav-list > .nav-item > .nav-link:hover,
.account-app .modern-nav-list > .nav-item > .nav-link.active,
.account-app .modern-foot-list a:hover {
	color: var(--m-gold-bright, #f5ddb0);
	text-decoration: none;
}

.account-app .modern-logo-text span,
.account-app .modern-logo-text small {
	color: inherit;
}

.account-app .modern-page {
	margin-top: 32px;
}

/* Top nav matches the main site 1:1 (3 items per side); safety only */
.account-app .modern-nav-list .nav-link {
	white-space: nowrap;
}

.account-app .modern-nav-side--left {
	min-width: 0;
	overflow: visible;
}

/* Match the main site's mobile drawer without requiring its Bootstrap bundle. */
.account-app .modern-mobile-menu {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(360px, 90vw);
	height: 100dvh;
	max-height: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 1px solid var(--m-border-strong);
	background: #140d07;
	color: var(--m-text);
}
.account-app .modern-mobile-menu:not([open]) { display: none; }
.account-app .modern-mobile-menu[open] { display: flex; flex-direction: column; }
.account-app .modern-mobile-menu::backdrop { background: rgba(0, 0, 0, 0.65); }
.modern-mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; }
.modern-mobile-menu-header h2 { margin: 0; font-size: 18px; }
.modern-mobile-menu-close { background: transparent; border: 0; color: inherit; font-size: 28px; cursor: pointer; }
.modern-mobile-menu-body { display: block; overflow-y: auto; padding: 0 16px 16px; }
.modern-mobile-menu-body > .navbar-nav { display: flex; flex-direction: column; padding: 0; list-style: none; }
.modern-mobile-menu .nav-link { display: block; padding: 10px 0; color: #dcc078; }
.modern-mobile-menu .dropdown-menu { position: static; margin: 0; list-style: none; }

/* The account dropdown extends below the navigation bar. */
.account-app .modern-nav-side--right {
	min-width: 0;
	overflow: visible;
}

/* Extra top padding so the hanging logo plaque never overlaps the toolbar */
.account-app .modern-content-inner {
	padding: 46px 22px 8px;
}

.account-app .account-services.box {
	margin-bottom: 0;
	background: linear-gradient(180deg, rgba(22, 16, 10, 0.98), rgba(14, 10, 6, 0.99));
	border: 1px solid #3f2d14;
	box-shadow:
		inset 0 0 0 1px rgba(212, 173, 98, 0.06),
		inset 0 0 40px rgba(0, 0, 0, 0.35);
}

.account-services {
	/* one shared width for alerts, form cards and buttons */
	--card-w: 560px;
	padding: 0.85rem 1rem 1.1rem;
}

.account-services .main-section,
.account-services .main-section.py-2,
.account-services .container {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.account-services .account-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.55rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(107, 80, 32, 0.45);
}

.account-services .account-toolbar a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.38rem 0.7rem;
	border: 1px solid rgba(107, 80, 32, 0.55);
	border-radius: 4px;
	background: linear-gradient(180deg, rgba(36, 24, 10, 0.92), rgba(18, 12, 6, 0.96));
	color: var(--m-gold, #e4c06a) !important;
	font-family: var(--m-font-display, "Cinzel", Georgia, serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.account-services .account-toolbar a:hover,
.account-services .account-toolbar a:focus-visible,
.account-services .account-toolbar a.active {
	color: var(--m-gold-bright, #f5ddb0) !important;
	border-color: var(--m-item-hover-border, rgba(212, 173, 98, 0.38));
	background: var(--m-item-hover-bg, rgba(212, 173, 98, 0.06));
	box-shadow: var(--m-item-hover-shadow, 0 0 10px rgba(212, 173, 98, 0.1));
	outline: none;
}

.account-services .main-section_title,
.account-services .main-section_title span {
	color: var(--m-gold-bright, #f5ddb0);
	font-family: var(--m-font-display, "Cinzel", Georgia, serif);
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Every signed-in Account Manager page uses the same visual hierarchy. */
.account-services .account-page-heading {
	display: grid;
	grid-template-columns: auto minmax(24px, 1fr);
	align-items: center;
	gap: 0.35rem 0.75rem;
	min-height: 34px;
	overflow: hidden;
}

.account-services .account-page-heading > *::before,
.account-services .account-page-heading > *::after {
	content: none !important;
}

.account-services .account-page-heading-title {
	white-space: nowrap;
}

.account-services .account-page-heading-line {
	display: block;
	height: 1px;
	background: linear-gradient(90deg, rgba(228, 221, 203, 0.9), rgba(107, 80, 32, 0.18));
}

.account-services .account-page-heading small {
	grid-column: 1 / -1;
	margin-top: -0.15rem;
	color: var(--m-text-dim, #948676);
	font-family: inherit;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.45;
	text-transform: none;
}

.account-services .account-workspace-panel {
	overflow: hidden;
	border: 1px solid rgba(107, 80, 32, 0.55);
	border-radius: 4px;
	background: rgba(14, 9, 5, 0.78);
}

.account-services .account-workspace-heading {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.9rem 1rem;
	border-bottom: 1px solid rgba(107, 80, 32, 0.45);
	background: rgba(212, 173, 98, 0.08);
}

.account-services .account-workspace-heading-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border: 1px solid rgba(212, 173, 98, 0.55);
	border-radius: 50%;
	color: var(--m-gold-bright, #f5ddb0);
	background: rgba(8, 5, 2, 0.7);
	font-size: 18px;
}

.account-services .account-workspace-heading h2 {
	margin: 0;
	color: var(--m-gold-bright, #f5ddb0);
	font-family: var(--m-font-display, "Cinzel", Georgia, serif);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}

.account-services .account-workspace-heading p {
	margin: 0.2rem 0 0;
	color: var(--m-text-dim, #948676);
	font-size: 13px;
	line-height: 1.45;
}

.account-services .account-workspace-body {
	display: block;
	padding: 1rem;
}

.account-services .account-page-content > .main-section_title,
.account-services .account-page-content > [class*="col"] > .main-section_title {
	display: none !important;
}

.account-services .account-page-content > [class*="col"] {
	width: 100%;
	max-width: 100%;
}

.account-services .account-page-content .alert {
	max-width: none;
}

.account-services .account-page-content > [class*="col"] > form:not(.account-security-form) {
	padding: 1rem;
	border: 1px solid rgba(107, 80, 32, 0.35);
	border-radius: 4px;
	background: rgba(8, 5, 2, 0.42);
}

.account-services .account-page-deleteaccount .account-workspace-panel {
	border-color: rgba(170, 68, 52, 0.52);
}

.account-services a {
	color: var(--m-gold, #e4c06a);
}

.account-services a:hover {
	color: var(--m-gold-bright, #f5ddb0);
	text-decoration: none;
}

.account-services .left-account {
	background: rgba(8, 5, 2, 0.55);
	border: 1px solid rgba(63, 46, 20, 0.85);
	border-radius: 4px;
}

.account-services .left-account_item a {
	color: var(--m-text, #c8bba8) !important;
	text-decoration: none !important;
}

.account-services .left-account_item a:hover,
.account-services .left-account_item_active a {
	color: var(--m-gold-bright, #f5ddb0) !important;
}

/* Service menu: make it read clearly as a clickable menu */
.account-services .left-account_item a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid transparent;
	border-bottom-color: rgba(107, 80, 32, 0.28);
	border-radius: 3px;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.account-services .left-account_item:last-child a {
	border-bottom-color: transparent;
}

.account-services .left-account_item a i {
	width: 16px;
	flex: 0 0 auto;
	text-align: center;
	color: #9a7a42;
}

.account-services .left-account_item a::after {
	content: "\203A"; /* chevron */
	margin-left: auto;
	color: rgba(212, 173, 98, 0.4);
	font-size: 15px;
	line-height: 1;
}

.account-services .left-account_item a:hover,
.account-services .left-account_item a:focus-visible {
	background: var(--m-item-hover-bg, rgba(212, 173, 98, 0.06));
	border-color: var(--m-item-hover-border, rgba(212, 173, 98, 0.38));
	box-shadow: var(--m-item-hover-shadow, 0 0 10px rgba(212, 173, 98, 0.1));
	outline: none;
}

.account-services .left-account_item a:hover i,
.account-services .left-account_item a:hover::after,
.account-services .left-account_item a:focus-visible i,
.account-services .left-account_item a:focus-visible::after {
	color: var(--m-gold-bright, #f5ddb0);
}

.account-services .left-account_item_active a {
	background: linear-gradient(90deg, rgba(212, 173, 98, 0.22), rgba(212, 173, 98, 0.05));
	border-left-color: var(--m-gold, #e4c06a);
}

.account-services .left-account_item a.disabled {
	opacity: 0.45;
	cursor: default;
}

.account-services .left-account_item a.disabled:hover {
	background: transparent;
	border-color: transparent;
	border-bottom-color: rgba(107, 80, 32, 0.28);
	box-shadow: none;
}

/* Summary panels: warm dark instead of legacy navy blue */
.account-services .account_details,
.account-services .account_characters,
.account-services .account_portal,
.account-services .account_activity {
	background: rgba(18, 12, 6, 0.72);
	border: 1px solid rgba(107, 80, 32, 0.45);
	border-radius: 4px;
	color: var(--m-text, #c8bba8);
	overflow: hidden;
}

.account-services .account_details-header,
.account-services .account_characters-header,
.account-services .account_portal-header,
.account-services .account_activity-header {
	background: rgba(212, 173, 98, 0.08);
	border-bottom: 1px solid rgba(107, 80, 32, 0.45);
	padding: 0.72rem 0.9rem;
}

.account-services .account_details-header-text,
.account-services .account_characters-header-text,
.account-services .account_portal-header-text,
.account-services .account_activity-header-text {
	color: var(--m-gold-bright, #f5ddb0);
	font-family: var(--m-font-display, "Cinzel", Georgia, serif);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.85rem;
}

.account-services .account_portal-header-text i,
.account-services .account_activity-header-text i {
	margin-right: 5px;
}

.account-services .account-portal-stat-row {
	padding-top: 0.25rem;
	border-top: 1px solid rgba(107, 80, 32, 0.22);
}

.account-services .account_details-body {
	padding: 0;
}

.account-services .account-details-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.account-services .account-detail-item {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	align-items: center;
	min-width: 0;
	min-height: 58px;
	gap: 0.85rem;
	padding: 0.65rem 1rem;
	border-bottom: 1px solid rgba(107, 80, 32, 0.28);
	background: rgba(5, 3, 2, 0.16);
}

.account-services .account-detail-item:nth-child(odd) {
	border-right: 0;
	background: rgba(212, 173, 98, 0.035);
}

.account-services .account-detail-item:last-child {
	border-bottom: 0;
}

.account-services .account-detail-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border: 1px solid rgba(212, 173, 98, 0.42);
	border-radius: 50%;
	background: rgba(212, 173, 98, 0.06);
	color: var(--m-gold, #d4ad62);
	font-size: 14px;
}

.account-services .account-detail-copy {
	display: grid;
	grid-template-columns: minmax(150px, 34%) minmax(0, 1fr);
	align-items: center;
	min-width: 0;
	gap: 1rem;
}

.account-services .account-detail-copy > small {
	color: var(--m-text-dim, #948676);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.account-services .account-detail-copy > strong {
	overflow: hidden;
	color: var(--m-text, #c8bba8);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-services .account-balance-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	padding: 0;
	border-top: 1px solid rgba(107, 80, 32, 0.45);
	background: rgba(5, 3, 2, 0.26);
}

.account-services .account-balance-card {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) 12px;
	align-items: center;
	min-width: 0;
	min-height: 62px;
	gap: 0.85rem;
	padding: 0.65rem 1rem;
	border: 1px solid transparent;
	border-bottom-color: rgba(107, 80, 32, 0.28);
	border-radius: 0;
	background: rgba(5, 3, 2, 0.18);
	color: var(--m-text, #c8bba8) !important;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.account-services .account-balance-card:nth-child(even) {
	background: rgba(212, 173, 98, 0.035);
}

.account-services .account-balance-card:last-child {
	border-bottom: 0;
}

.account-services .account-balance-card:hover {
	border-color: var(--m-item-hover-border, rgba(212, 173, 98, 0.38));
	background: var(--m-item-hover-bg, rgba(212, 173, 98, 0.06));
	box-shadow: var(--m-item-hover-shadow, 0 0 10px rgba(212, 173, 98, 0.1));
}

.account-services .account-balance-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(212, 173, 98, 0.44);
	border-radius: 4px;
	background: rgba(212, 173, 98, 0.08);
	color: var(--m-gold-bright, #f5ddb0);
}

.account-services .account-balance-copy {
	display: grid;
	min-width: 0;
	grid-template-columns: minmax(150px, 34%) minmax(60px, 110px) minmax(0, 1fr);
	align-items: center;
	column-gap: 1rem;
}

.account-services .account-balance-copy small {
	color: var(--m-text-dim, #948676);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.account-services .account-balance-copy strong {
	color: var(--m-gold-bright, #f5ddb0);
	font-family: var(--m-font-display, "Cinzel", Georgia, serif);
	font-size: 20px;
	line-height: 1;
}

.account-services .account-balance-copy em {
	overflow: hidden;
	color: var(--m-gold, #d4ad62);
	font-size: 12px;
	font-weight: 600;
	font-style: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-services .account-balance-arrow {
	color: var(--m-gold, #d4ad62);
	font-size: 10px;
}

.account-services .account-role-row {
	align-items: center;
	padding: 0.25rem 0;
}

.account-services .account-role-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

.account-services .account-role-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 25px;
	padding: 0.2rem 0.55rem;
	border: 1px solid var(--account-role-color, rgba(212, 173, 98, 0.55));
	border-radius: 3px;
	background: rgba(212, 173, 98, 0.08);
	color: var(--account-role-color, var(--m-gold-bright, #f5ddb0));
	font-family: var(--m-font-display, "Cinzel", Georgia, serif);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
}

.account-services .account-role-badge.is-secure {
	--account-role-color: #8bd39a;
}

.account-services .account-role-unavailable {
	color: var(--m-text-dim, #948676);
	font-size: 12px;
}

.account-services .account_portal-links a.is-staff-service {
	border-color: rgba(126, 89, 176, 0.55);
	background: linear-gradient(180deg, rgba(35, 22, 48, 0.72), rgba(19, 12, 27, 0.78));
}

.account-services .account_portal-links a.is-staff-service i {
	color: #c89cff;
}

/* Account security lives in the unified manager instead of the retired UCP. */
.account-services .account-security-panel {
	overflow: hidden;
	border: 1px solid rgba(107, 80, 32, 0.55);
	border-radius: 4px;
	background: rgba(14, 9, 5, 0.78);
}

.account-services .account-security-panel > header {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.9rem 1rem;
	border-bottom: 1px solid rgba(107, 80, 32, 0.45);
	background: rgba(212, 173, 98, 0.08);
}

.account-services .account-security-heading-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border: 1px solid rgba(212, 173, 98, 0.55);
	border-radius: 50%;
	color: var(--m-gold-bright, #f5ddb0);
	background: rgba(8, 5, 2, 0.7);
	font-size: 18px;
}

.account-services .account-security-panel h2,
.account-services .account-security-panel h3,
.account-services .account-security-page h3 {
	margin: 0;
	color: var(--m-gold-bright, #f5ddb0);
	font-family: var(--m-font-display, "Cinzel", Georgia, serif);
	letter-spacing: 0;
}

.account-services .account-security-panel h2 {
	font-size: 18px;
}

.account-services .account-security-panel h3 {
	font-size: 15px;
}

.account-services .account-security-page h3 {
	font-size: 15px;
}

.account-services .account-security-panel header p,
.account-services .account-security-copy p {
	margin: 0.2rem 0 0;
	color: var(--m-text-dim, #948676);
}

.account-services .account-security-body {
	padding: 0;
}

.account-services .account-security-status {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.8rem;
	border: 1px solid rgba(180, 148, 72, 0.35);
	border-left: 3px solid rgba(228, 192, 106, 0.8);
	background: rgba(30, 22, 10, 0.7);
}

.account-services .account-security-status.is-enabled {
	border-color: rgba(88, 168, 106, 0.35);
	border-left-color: rgba(88, 168, 106, 0.9);
	background: rgba(11, 28, 13, 0.7);
}

.account-services .account-security-status-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--m-gold-bright, #f5ddb0);
	font-size: 20px;
}

.account-services .account-security-status.is-enabled .account-security-status-icon {
	color: #8bd39a;
}

.account-services .account-security-status strong,
.account-services .account-security-status small {
	display: block;
}

.account-services .account-security-status strong {
	color: #ead9b9;
	font-size: 14px;
}

.account-services .account-security-status small {
	margin-top: 0.1rem;
	color: var(--m-text-dim, #948676);
	font-size: 12px;
}

.account-services .account-security-setup {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 176px;
	gap: 1rem 1.25rem;
	align-items: center;
	margin-top: 1rem;
}

.account-services .account-security-steps {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: security-step;
}

.account-services .account-security-steps li {
	position: relative;
	min-height: 34px;
	padding-left: 45px;
	counter-increment: security-step;
}

.account-services .account-security-steps li::before {
	content: counter(security-step);
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(212, 173, 98, 0.5);
	border-radius: 50%;
	color: var(--m-gold-bright, #f5ddb0);
	font-family: var(--m-font-display, "Cinzel", Georgia, serif);
	font-weight: 700;
}

.account-services .account-security-steps strong,
.account-services .account-security-steps span {
	display: block;
}

.account-services .account-security-steps strong {
	color: #ead9b9;
	font-size: 13px;
}

.account-services .account-security-steps span {
	color: var(--m-text-dim, #948676);
	font-size: 12px;
}

.account-services .account-security-qr {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 176px;
	height: 176px;
	padding: 8px;
	border: 1px solid rgba(212, 173, 98, 0.55);
	background: #f3efe7;
}

.account-services .account-security-qr img {
	display: block;
	width: 158px;
	height: 158px;
}

.account-services .account-security-qr-unavailable {
	color: #5c5145;
	text-align: center;
}

.account-services .account-security-key {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0.8rem;
	border: 1px solid rgba(107, 80, 32, 0.4);
	background: rgba(8, 5, 2, 0.55);
}

.account-services .account-security-key span {
	color: var(--m-text-dim, #948676);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.account-services .account-security-key code {
	color: var(--m-gold-bright, #f5ddb0);
	font-size: 14px;
	letter-spacing: 0.12em;
}

.account-services .account-security-copy {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(107, 80, 32, 0.35);
}

.account-services .account-security-form {
	display: grid;
	grid-template-columns: minmax(160px, 220px) auto;
	gap: 0.35rem 0.65rem;
	align-items: end;
	margin-top: 1rem;
}

.account-services .account-security-form label {
	grid-column: 1 / -1;
	margin: 0;
	color: #ead9b9;
	font-weight: 600;
}

.account-services .account-security-form input[type="text"] {
	width: 100%;
	height: 40px;
	padding: 0 0.8rem;
	font-size: 17px;
	letter-spacing: 0.18em;
}

@media (max-width: 767.98px) {
	.account-services .account-security-setup {
		grid-template-columns: 1fr;
	}

	.account-services .account-security-qr {
		justify-self: center;
	}

	.account-services .account-security-key {
		grid-column: 1;
		align-items: flex-start;
		flex-direction: column;
	}

	.account-services .account-security-key code {
		font-size: 12px;
		word-break: break-all;
	}

	.account-services .account-security-form {
		grid-template-columns: 1fr;
	}

	.account-services .account-security-form .button {
		width: 100%;
	}
}

.account-services .account_portal-links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.55rem;
	padding: 0.75rem;
}

.account-services .account_portal-links > a {
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: 58px;
	gap: 0.65rem;
	padding: 0.65rem 0.75rem;
	border: 1px solid rgba(107, 80, 32, 0.5);
	border-radius: 4px;
	background: linear-gradient(180deg, rgba(37, 25, 11, 0.84), rgba(16, 10, 5, 0.92));
	color: #ead297 !important;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.account-services .account_portal-links > a:hover {
	border-color: var(--m-item-hover-border, rgba(212, 173, 98, 0.38));
	background: var(--m-item-hover-bg, rgba(212, 173, 98, 0.06));
	box-shadow: var(--m-item-hover-shadow, 0 0 10px rgba(212, 173, 98, 0.1));
	transform: translateY(-1px);
}

.account-services .account_portal-links > a[aria-disabled="true"] {
	pointer-events: none;
	cursor: default;
	opacity: 0.6;
}

.account-services .account_portal-links > a > i {
	width: 22px;
	flex: 0 0 22px;
	color: #d4ad62;
	font-size: 1rem;
	text-align: center;
}

.account-services .account_portal-links span {
	display: flex;
	min-width: 0;
	flex-direction: column;
	font-weight: 700;
	line-height: 1.3;
}

.account-services .account_portal-links small {
	margin-top: 0.1rem;
	color: var(--m-text-dim, #948676);
	font-size: 11px;
	font-weight: 400;
}

.account-services .account_activity-body {
	padding: 0.25rem 0.75rem;
}

.account-services .account_activity-item {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.6rem;
	min-height: 52px;
	border-bottom: 1px solid rgba(107, 80, 32, 0.28);
}

.account-services .account_activity-item:last-child {
	border-bottom: 0;
}

.account-services .account_activity-icon {
	color: #c59e54;
	font-size: 0.95rem;
	text-align: center;
}

.account-services .account_activity-copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.account-services .account_activity-copy strong {
	overflow: hidden;
	color: #e8d9b7;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-services .account_activity-copy small,
.account-services .account_activity-item time {
	color: var(--m-text-dim, #948676);
	font-size: 11px;
}

.account-services .account_activity-item.is-failed .account_activity-icon,
.account-services .account_activity-item.is-failed .account_activity-copy strong {
	color: #d88978;
}

.account-services .account_activity-empty {
	padding: 1rem 0.25rem;
	color: var(--m-text-dim, #948676);
	text-align: center;
}

/* Empty results should explain the state instead of leaving a blank panel. */
.account-services .account-empty-state {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-height: 82px;
	padding: 1rem 1.1rem;
	border: 1px solid rgba(107, 80, 32, 0.48);
	border-left: 3px solid rgba(212, 173, 98, 0.72);
	border-radius: 4px;
	background: linear-gradient(180deg, rgba(31, 21, 10, 0.72), rgba(13, 8, 4, 0.86));
}

.account-services .account-empty-state-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border: 1px solid rgba(212, 173, 98, 0.5);
	border-radius: 50%;
	background: rgba(8, 5, 2, 0.62);
	color: var(--m-gold-bright, #f5ddb0);
	font-size: 17px;
}

.account-services .account-empty-state-copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 0.18rem;
}

.account-services .account-empty-state-copy strong {
	color: #ead9b5;
	font-size: 13px;
	font-weight: 700;
}

.account-services .account-empty-state-copy span {
	color: var(--m-text-dim, #948676);
	font-size: 12px;
	line-height: 1.5;
}

/* Character list: stacked rows (one per line) with a compact avatar */
.account-services .character-wrap {
	flex: 0 0 100%;
	max-width: 100%;
}

.account-services .character-background {
	background: rgba(212, 173, 98, 0.06);
	border: 1px solid rgba(107, 80, 32, 0.45);
	border-radius: 4px;
	align-items: center;
	flex-wrap: nowrap;
	padding: 6px 10px;
	margin: 0 0 8px;
	transition: transform 0.13s ease, background 0.13s ease, border-color 0.13s ease, box-shadow 0.13s ease;
}

/* Lift on hover so the row feels interactive */
.account-services .character-background:hover {
	transform: translateY(-2px);
	background: var(--m-item-hover-bg, rgba(212, 173, 98, 0.06));
	border-color: var(--m-item-hover-border, rgba(212, 173, 98, 0.38));
	box-shadow: var(--m-item-hover-shadow, 0 0 10px rgba(212, 173, 98, 0.1));
}

.account-services .character-background img {
	width: 88px;
	height: auto;
	flex: 0 0 auto;
	border: 1px solid rgba(107, 80, 32, 0.5);
	border-radius: 4px;
}

.account-services .character-background > div {
	flex: 1 1 auto;
	max-width: none;
	padding-left: 12px;
}

/* Summary character grid: compact Armory links with the useful UCP stats. */
.account-services .account-page-manage .account_characters-body {
	padding: 0.65rem;
}

.account-services .account-page-manage .character-wrap {
	flex: 0 0 100%;
	max-width: 100%;
	padding: 0.25rem;
}

.account-services .account-character-card {
	display: grid;
	grid-template-columns: 48px minmax(180px, 1fr) 72px 210px 14px;
	align-items: center;
	gap: 0.65rem;
	min-height: 58px;
	padding: 0.35rem 0.6rem;
	border: 1px solid rgba(107, 80, 32, 0.48);
	border-radius: 4px;
	background: rgba(212, 173, 98, 0.055);
	color: var(--m-text, #c8bba8) !important;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.account-services .account-character-card:hover {
	border-color: var(--m-item-hover-border, rgba(212, 173, 98, 0.38));
	background: var(--m-item-hover-bg, rgba(212, 173, 98, 0.06));
	box-shadow: var(--m-item-hover-shadow, 0 0 10px rgba(212, 173, 98, 0.1));
	transform: translateY(-1px);
}

.account-services .account-character-card > img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border: 1px solid rgba(212, 173, 98, 0.45);
	border-radius: 3px;
}

.account-services .account-character-main {
	display: flex;
	min-width: 0;
	flex-direction: column;
	line-height: 1.25;
}

.account-services .account-character-main strong {
	overflow: hidden;
	color: #f1e2c2;
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-services .account-character-main small,
.account-services .account-character-level small {
	color: var(--m-text-dim, #948676);
	font-size: 10px;
}

.account-services .account-character-level {
	display: flex;
	min-width: 34px;
	flex-direction: column;
	align-items: center;
	padding-left: 0.55rem;
	border-left: 1px solid rgba(107, 80, 32, 0.3);
	line-height: 1.15;
}

.account-services .account-character-level strong {
	color: var(--m-gold-bright, #f5ddb0);
	font-size: 14px;
}

.account-services .account-character-money {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	color: #d9c9aa;
	font-size: 10px;
	white-space: nowrap;
	justify-content: flex-end;
}

.account-services .account-character-money > span {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.account-services .account-coin {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.7);
}

.account-services .account-coin.is-gold { background: #d8aa2c; }
.account-services .account-coin.is-silver { background: #a6acb1; }
.account-services .account-coin.is-copper { background: #a96035; }

.account-services .account-character-arrow {
	color: rgba(212, 173, 98, 0.48);
	font-size: 10px;
}

.account-services .account-character-card:hover .account-character-arrow {
	color: var(--m-gold-bright, #f5ddb0);
}

/* Dedicated service catalogue keeps prices and discounts discoverable. */
.account-services .account-service-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.account-services .account-service-card {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	gap: 0.3rem 0.75rem;
	min-height: 118px;
	padding: 0.85rem;
	overflow: hidden;
	border: 1px solid rgba(107, 80, 32, 0.5);
	border-radius: 4px;
	background: linear-gradient(180deg, rgba(35, 23, 10, 0.82), rgba(13, 8, 4, 0.94));
	color: var(--m-text, #c8bba8) !important;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.account-services .account-service-card:hover {
	border-color: var(--m-item-hover-border, rgba(212, 173, 98, 0.38));
	background: var(--m-item-hover-bg, rgba(212, 173, 98, 0.06));
	box-shadow: var(--m-item-hover-shadow, 0 0 10px rgba(212, 173, 98, 0.1));
	transform: translateY(-1px);
}

.account-services .account-service-card.is-destructive {
	border-color: rgba(148, 65, 57, 0.68);
	background: linear-gradient(180deg, rgba(57, 20, 16, 0.82), rgba(23, 8, 7, 0.96));
	box-shadow: inset 3px 0 0 rgba(174, 70, 60, 0.5);
}

.account-services .account-service-card.is-destructive:hover {
	border-color: rgba(197, 92, 80, 0.88);
	background: linear-gradient(180deg, rgba(72, 25, 20, 0.9), rgba(29, 9, 8, 0.98));
}

.account-services .account-service-card.is-destructive .account-service-icon {
	border-color: rgba(190, 88, 77, 0.62);
	background: rgba(45, 12, 10, 0.78);
	color: #e5a096;
}

.account-services .account-service-card.is-destructive .account-service-copy strong {
	color: #edb5aa;
}

.account-services .account-service-card.is-destructive .account-service-copy small {
	color: #ae8a83;
}

.account-services .account-service-card.is-destructive .account-service-pricing {
	border-color: rgba(190, 88, 77, 0.58);
	background: linear-gradient(180deg, rgba(151, 54, 45, 0.2), rgba(63, 17, 13, 0.32));
}

.account-services .account-service-card.is-destructive .account-service-price,
.account-services .account-service-card.is-destructive .account-service-open {
	color: #e6a096;
}

.account-services .account-service-icon {
	grid-row: 1 / 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(212, 173, 98, 0.48);
	border-radius: 50%;
	color: var(--m-gold-bright, #f5ddb0);
	background: rgba(8, 5, 2, 0.66);
	font-size: 18px;
}

.account-services .account-service-icon i {
	font-size: 18px !important;
}

.account-services .account-service-copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.account-services .account-service-copy strong {
	color: #f1dfb6;
	font-family: var(--m-font-display, "Cinzel", Georgia, serif);
	font-size: 13px;
	letter-spacing: 0;
}

.account-services .account-service-copy small {
	display: block;
	min-height: 2.7em;
	margin-top: 0.2rem;
	color: var(--m-text-dim, #948676);
	font-size: 11px;
	line-height: 1.35;
}

.account-services .account-service-pricing {
	align-self: start;
	display: flex;
	width: 72px;
	height: 52px;
	padding: 0.35rem 0.6rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 1px solid rgba(212, 173, 98, 0.45);
	border-radius: 3px;
	background: linear-gradient(180deg, rgba(212, 173, 98, 0.14), rgba(65, 42, 12, 0.22));
	text-align: center;
}

.account-services .account-service-price {
	color: var(--m-gold-bright, #f5ddb0);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.1;
	white-space: nowrap;
	text-shadow: 0 0 10px rgba(224, 176, 68, 0.2);
	text-transform: uppercase;
}

.account-services .account-service-price img,
.account-services .account-service-original img,
.account-services .account-service-discount img {
	width: 12px;
	height: 12px;
	margin-top: -2px;
	vertical-align: middle;
}

.account-services .account-service-original {
	margin-top: 0.2rem;
	color: #8f8171;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	text-decoration: line-through;
	text-decoration-color: rgba(206, 96, 78, 0.9);
	text-decoration-thickness: 1px;
	white-space: nowrap;
}

.account-services .account-service-pricing.is-free .account-service-price {
	font-size: 12px;
	text-align: center;
	text-transform: uppercase;
}

.account-services .account-service-discount {
	position: absolute;
	top: 11px;
	left: -29px;
	width: 96px;
	padding: 0.22rem 0;
	transform: rotate(-45deg);
	border-top: 1px solid rgba(148, 181, 104, 0.55);
	border-bottom: 1px solid rgba(67, 105, 52, 0.75);
	background: linear-gradient(180deg, rgba(52, 91, 48, 0.98), rgba(20, 53, 28, 0.98));
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.42);
	color: #d4e3ae;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	transform-origin: center;
	z-index: 2;
}

.account-services .account-service-discount img {
	width: 10px;
	height: 10px;
}

.account-services .account-service-card:has(.account-service-discount) .account-service-pricing {
	margin-top: 0;
	margin-right: 0;
}

.account-services .account-service-open {
	grid-column: 2 / 4;
	color: var(--m-gold, #e4c06a);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: right;
	text-transform: uppercase;
}

.account-services .account-service-open i {
	margin-left: 0.25rem;
	font-size: 9px;
}

.account-services .account-service-card.is-disabled {
	opacity: 0.48;
	pointer-events: none;
}

/* Character actions share one compact, readable row across every service. */
.account-services .account-page-content .repair_character-item {
	margin-bottom: 0.65rem;
}

.account-services .account-page-content .repair_character-item > .container {
	max-width: none;
	padding: 0;
}

.account-services .account-page-content .repair_character-item > .container > .row {
	align-items: stretch;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(107, 80, 32, 0.45);
	border-radius: 4px;
	background: rgba(212, 173, 98, 0.05);
}

.account-services .account-page-content .repair_character-item .character-background {
	min-height: 54px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.account-services .account-page-content .repair_character-item .link-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	height: 100%;
	padding: 0.6rem 0.8rem;
	border: 0 !important;
	border-left: 1px solid rgba(107, 80, 32, 0.45) !important;
	background: linear-gradient(180deg, rgba(53, 35, 13, 0.88), rgba(22, 13, 6, 0.96));
	color: var(--m-gold-bright, #f5ddb0) !important;
	font-family: var(--m-font-display, "Cinzel", Georgia, serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
	box-shadow: none;
}

.account-services .account-page-content .repair_character-item .link-button:hover {
	background: linear-gradient(180deg, rgba(78, 53, 20, 0.94), rgba(32, 19, 7, 0.98));
	box-shadow: inset 0 0 0 1px var(--m-item-hover-border, rgba(212, 173, 98, 0.38)), var(--m-item-hover-shadow, 0 0 10px rgba(212, 173, 98, 0.1));
}

/* Auctions keep their four modes, but use the same restrained gold navigation. */
.account-services .account-page-auction .auction_nav-wrap {
	margin-bottom: 0.8rem;
}

.account-services .account-page-auction .nav-tabs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.35rem;
}

.account-services .account-page-auction .nav-tabs .nav-item {
	min-width: 0;
	background: transparent;
}

.account-services .account-page-auction .nav-tabs .nav-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0.55rem 0.65rem;
	border: 1px solid rgba(107, 80, 32, 0.45) !important;
	border-radius: 4px;
	background: rgba(8, 5, 2, 0.42);
	color: var(--m-text, #c8bba8);
	font-size: 12px;
	line-height: 1.25;
	text-align: center;
}

.account-services .account-page-auction .nav-tabs .nav-link:hover {
	border-color: var(--m-item-hover-border, rgba(212, 173, 98, 0.38)) !important;
	background: var(--m-item-hover-bg, rgba(212, 173, 98, 0.06));
	color: var(--m-gold-bright, #f5ddb0);
	box-shadow: var(--m-item-hover-shadow, 0 0 10px rgba(212, 173, 98, 0.1));
}

.account-services .account-page-auction .nav-tabs .nav-link.active {
	border-color: #d2a84e !important;
	background: linear-gradient(180deg, rgba(91, 61, 20, 0.82), rgba(34, 20, 7, 0.94));
	color: #f7dfaa;
	box-shadow: inset 0 1px 0 rgba(255, 234, 173, 0.18);
}

/* Exchange setup reads as a compact form rather than a legacy two-column table. */
.account-services .account-page-charexchange form {
	max-width: 760px;
	margin: 0 auto;
}

.account-services .account-page-charexchange form > .row {
	display: grid;
	grid-template-columns: minmax(190px, 0.85fr) minmax(220px, 1.15fr);
	gap: 0.65rem;
	align-items: stretch;
	margin: 0 0 0.65rem !important;
}

.account-services .account-page-charexchange form > .row > [class*="col"] {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 !important;
}

.account-services .account-page-charexchange form .character-background {
	min-height: 44px;
	margin: 0;
	padding: 0.65rem 0.8rem !important;
	background: rgba(212, 173, 98, 0.07);
}

.account-services .account-page-charexchange form .inline-input,
.account-services .account-page-charexchange form .inline-input input,
.account-services .account-page-charexchange form select {
	width: 100%;
	max-width: none;
	height: 44px;
}

.account-services .account-page-charexchange form .button {
	width: 100%;
	height: 44px;
}

/* Every simple field form (register, password/email change, recovery,
   activation, restore, …) is a centered card like the sign-in one.
   Forms with tables/selects (auction, expansion) keep their own layout. */
.account-services form:has(.inline-input):not(:has(table, select)) {
	max-width: var(--card-w);
	margin: 1rem auto 0.75rem;
}

.account-services form:has(.inline-input):not(:has(table, select)) .inline-input {
	max-width: none;
}

.account-services form:has(.inline-input):not(:has(table, select)) .button {
	width: 100%;
	margin-top: 0.35rem;
}

/* Inside the centered card everything stacks full-width (no side-by-side
   Bootstrap columns), matching the sign-in layout */
.account-services form:has(.inline-input):not(:has(table, select)) .row {
	display: block;
	margin: 0;
}

.account-services form:has(.inline-input):not(:has(table, select)) .row > [class*="col"] {
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0 0 0.5rem;
	text-align: center;
}

/* Sign-in: centered modern card */
.account-services .account-login {
	max-width: var(--card-w);
	margin: 1.4rem auto 0.9rem;
}

.account-services .account-login .inline-input {
	max-width: none;
}

.account-services .account-login .alert {
	margin-bottom: 1rem;
}

.account-services .account-login .account-login-submit {
	width: 100%;
	margin-top: 0.35rem;
}

.account-services .account-login-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.9rem;
}

.account-services .account-login-links a {
	display: inline-flex;
	align-items: center;
	padding: 5px 8px;
	border: 1px solid transparent;
	border-radius: 4px;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.account-services .account-login-links a:hover,
.account-services .account-login-links a:focus-visible {
	border-color: var(--m-item-hover-border, rgba(212, 173, 98, 0.38));
	background: var(--m-item-hover-bg, rgba(212, 173, 98, 0.06));
	box-shadow: var(--m-item-hover-shadow, 0 0 10px rgba(212, 173, 98, 0.1));
	outline: none;
}

/* Separator dot between the helper links stays subtle gold, not white */
.account-services .account-login-links span {
	color: rgba(212, 173, 98, 0.45);
}

/* Quiet footnotes at the bottom of the card — no box, just dim text */
.account-services .account-login-notes {
	margin: 1rem auto 0;
	padding: 0.75rem 0 0;
	border-top: 1px solid rgba(107, 80, 32, 0.3);
	list-style: none;
	text-align: center;
	color: var(--m-text-dim, #948676);
	font-size: 12px;
}

.account-services .account-login-notes li {
	margin: 0.2rem 0;
}

/* Checkboxes (e.g. registration rules): themed and with breathing room */
.account-services .form-check {
	display: inline-block;
	margin: 0.9rem auto 0.5rem;
	text-align: left;
}

.account-services .form-check-input {
	width: 17px;
	height: 17px;
	margin-top: 3px;
	accent-color: #d4a030;
}

.account-services .form-check-label {
	color: var(--m-text, #c8bba8);
	padding-left: 4px;
}

/* The legacy wrappers are transparent — the input itself carries the styling */
.account-services .transparent-twenty,
.account-services .inline-input {
	background: transparent;
	border: 0;
}

.account-services .inline-input {
	display: block;
	max-width: 460px;
}

.account-services .inline-input input {
	width: 100%;
	height: 40px;
	padding: 0 12px 0 40px;
	border-radius: 4px;
}

.account-services .inline-icon {
	color: rgba(212, 173, 98, 0.55);
}

.account-services .services_card {
	border: 1px solid rgba(107, 80, 32, 0.55);
	background: rgba(18, 12, 6, 0.82);
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.account-services .services_card:hover {
	border-color: var(--m-item-hover-border, rgba(212, 173, 98, 0.38));
	background: var(--m-item-hover-bg, rgba(212, 173, 98, 0.06));
	box-shadow: var(--m-item-hover-shadow, 0 0 10px rgba(212, 173, 98, 0.1));
}

.account-services .services_card-header {
	color: var(--m-gold, #e4c06a);
}

.account-services .services_card-body {
	color: var(--m-text-dim, #948676);
}

/* Buttons: compact gold, consistent with the theme (not the huge CTA look) */
.account-services .button,
.account-services button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: auto;
	height: 40px;
	padding: 0 26px;
	border-radius: 4px;
	font-family: var(--m-font-display, "Cinzel", Georgia, serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
}

.account-services .button span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

/* Account actions use the same framed dark-gold treatment as the CMS. */
.account-services .button.button-custom,
.account-services button.button-custom {
	color: #f7dfaa !important;
	background: linear-gradient(180deg, rgba(91, 61, 20, 0.9), rgba(34, 20, 7, 0.98));
	border: 1px solid #d2a84e;
	box-shadow:
		inset 0 1px 0 rgba(255, 234, 173, 0.28),
		inset 0 0 0 1px rgba(255, 204, 91, 0.08),
		0 0 0 1px rgba(58, 38, 10, 0.95),
		0 3px 10px rgba(0, 0, 0, 0.58),
		0 0 13px rgba(210, 168, 78, 0.12);
	text-shadow: 0 1px 2px #000;
}

.account-services .button.button-custom:hover,
.account-services button.button-custom:hover {
	color: #fff2cc !important;
	background: linear-gradient(180deg, rgba(119, 82, 28, 0.95), rgba(48, 29, 9, 0.99));
	border-color: #f0ca68;
	box-shadow:
		inset 0 1px 0 rgba(255, 239, 190, 0.38),
		inset 0 0 0 1px rgba(255, 214, 112, 0.12),
		0 0 0 1px rgba(73, 48, 12, 0.95),
		0 4px 12px rgba(0, 0, 0, 0.62),
		0 0 18px rgba(228, 192, 106, 0.2);
	transform: translateY(-1px);
}

.account-services .button.button-custom:active,
.account-services button.button-custom:active {
	background: linear-gradient(180deg, rgba(44, 27, 9, 0.99), rgba(76, 51, 16, 0.94));
	box-shadow: inset 0 2px 7px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(58, 38, 10, 0.95);
	transform: translateY(0);
}

/* Alerts: themed, centered with the form cards, colour-coded by severity
   (info = neutral gold, error = red, success = green, warning = amber).
   Wider than the form so longer messages stay 1-2 calm lines instead of
   a tall shouting block. */
.account-services .alert {
	max-width: var(--card-w);
	margin: 0 auto 1rem;
	border-radius: 4px;
	border: 1px solid rgba(107, 80, 32, 0.35);
	border-left-width: 3px;
	padding: 0.6rem 1rem;
	font-weight: 400;
	line-height: 1.55;
	text-align: center;
}

/* Structured content reads better left-aligned */
.account-services .alert:has(ul),
.account-services .alert:has(ol) {
	text-align: left;
}

.account-services .alert ul,
.account-services .alert ol {
	margin: 0.35rem 0 0;
	padding-left: 1.4rem;
	text-align: left;
}

.account-services .alert li {
	margin-bottom: 0.15rem;
}

.account-services .alert p {
	margin: 0.35rem 0;
}

.account-services .alert p:last-child {
	margin-bottom: 0;
}

.account-services .alert hr {
	margin: 0.5rem auto;
	max-width: 240px;
	border-color: rgba(255, 255, 255, 0.12);
}

.account-services .alert a {
	color: var(--m-gold, #e4c06a);
}

.account-services .alert-primary,
.account-services .alert-info,
.account-services .alert-black {
	background: rgba(30, 22, 10, 0.85);
	border-color: rgba(180, 148, 72, 0.35);
	border-left-color: rgba(228, 192, 106, 0.8);
	color: #e3cf9a;
}

.account-services .alert-success {
	background: rgba(11, 28, 13, 0.85);
	border-color: rgba(88, 168, 106, 0.35);
	border-left-color: rgba(88, 168, 106, 0.85);
	color: #abd8b2;
}

.account-services .alert-danger {
	background: rgba(42, 12, 9, 0.85);
	border-color: rgba(195, 72, 56, 0.4);
	border-left-color: rgba(199, 74, 56, 0.85);
	color: #eaa79d;
}

.account-services .alert-danger a,
.account-services .alert-success a {
	color: inherit;
	text-decoration: underline;
}

.account-services .alert-warning {
	background: rgba(40, 28, 8, 0.93);
	border-color: rgba(200, 155, 60, 0.55);
	border-left-color: #d9a441;
	color: #eccf8d;
}

.account-services input[type="text"],
.account-services input[type="password"],
.account-services input[type="email"],
.account-services select,
.account-services textarea {
	background: rgba(8, 5, 2, 0.75);
	border: 1px solid rgba(107, 80, 32, 0.55);
	border-radius: 4px;
	color: var(--m-text, #c8bba8);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.account-services input[type="text"]:focus,
.account-services input[type="password"]:focus,
.account-services input[type="email"]:focus,
.account-services select:focus,
.account-services textarea:focus {
	outline: none;
	border-color: var(--m-gold-dim, #b89448);
	box-shadow: 0 0 0 2px rgba(212, 173, 98, 0.15);
}

.account-services input::placeholder {
	color: rgba(148, 134, 118, 0.85);
}

/* Statistics and restriction history share one restrained data-view language. */
.account-services .account-page-best .statistics-wrap,
.account-services .account-page-banlist .statistics-wrap {
	display: block;
	width: 100%;
}

.account-services .account-data-tabs {
	display: grid;
	gap: 0.4rem;
	margin: 0 0 0.8rem;
	padding: 0 0 0.8rem;
	border: 0;
	border-bottom: 1px solid rgba(107, 80, 32, 0.42);
}

.account-services .account-ranking-tabs {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-services .account-ban-tabs {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-services .account-data-tabs .nav-item {
	min-width: 0;
	margin: 0;
	background: transparent !important;
}

.account-services .account-data-tabs .nav-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 44px;
	padding: 0.55rem 0.7rem;
	border: 1px solid rgba(107, 80, 32, 0.52) !important;
	border-radius: 3px;
	background: linear-gradient(180deg, rgba(31, 20, 9, 0.76), rgba(12, 7, 4, 0.9)) !important;
	color: var(--m-text, #c8bba8) !important;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

.account-services .account-data-tabs .nav-link i {
	color: #9f7b35;
	font-size: 12px;
}

.account-services .account-data-tabs .nav-link:hover,
.account-services .account-data-tabs .nav-link:focus-visible {
	border-color: var(--m-item-hover-border, rgba(212, 173, 98, 0.38)) !important;
	background: var(--m-item-hover-bg, rgba(212, 173, 98, 0.06)) !important;
	color: var(--m-gold-bright, #f5ddb0) !important;
	box-shadow: var(--m-item-hover-shadow, 0 0 10px rgba(212, 173, 98, 0.1));
	outline: none;
}

.account-services .account-data-tabs .nav-link.active {
	border-color: #c99a3e !important;
	background: linear-gradient(180deg, rgba(86, 57, 18, 0.88), rgba(35, 21, 7, 0.96)) !important;
	color: #f6d991 !important;
	box-shadow: inset 0 1px 0 rgba(255, 231, 166, 0.18), 0 0 12px rgba(183, 127, 35, 0.08);
}

.account-services .account-data-tabs .nav-link.active i {
	color: #f2ca70;
}

.account-services .account-page-best .tab-content {
	overflow-x: auto;
	border: 1px solid rgba(107, 80, 32, 0.48);
	border-radius: 3px;
	background: rgba(6, 4, 2, 0.44);
}

.account-services .account-page-best .table-custom,
.account-services .account-page-banlist .table-custom {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	background: transparent !important;
	color: var(--m-text, #c8bba8);
	font-size: 12px;
}

.account-services .account-page-best .table-custom {
	min-width: 520px;
}

.account-services .account-page-banlist .table-custom {
	min-width: 720px;
}

.account-services .account-page-best .table-custom .thead-custom,
.account-services .account-page-banlist .table-custom .thead-custom {
	background: rgba(212, 173, 98, 0.07) !important;
}

.account-services .account-page-best .table-custom .thead-custom th,
.account-services .account-page-banlist .table-custom .thead-custom th {
	padding: 0.75rem 0.65rem;
	border-top: 0;
	border-bottom: 1px solid rgba(107, 80, 32, 0.62);
	color: #bca574;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: left;
	text-transform: uppercase;
	vertical-align: middle;
}

.account-services .account-page-best .table-custom td,
.account-services .account-page-best .table-custom tbody th,
.account-services .account-page-banlist .table-custom td,
.account-services .account-page-banlist .table-custom tbody th {
	padding: 0.7rem 0.65rem;
	border-top: 1px solid rgba(63, 46, 20, 0.58);
	color: var(--m-text, #c8bba8);
	font-weight: 400;
	text-align: left;
	vertical-align: middle;
}

.account-services .account-page-best .table-custom tbody tr:nth-child(even),
.account-services .account-page-banlist .table-custom tbody tr:nth-child(even) {
	background: rgba(212, 173, 98, 0.025);
}

.account-services .account-page-best .table-custom tbody tr:hover,
.account-services .account-page-banlist .table-custom tbody tr:hover {
	background: var(--m-item-hover-bg, rgba(212, 173, 98, 0.06));
}

.account-services .account-page-best .table-custom tbody tr:hover > :first-child,
.account-services .account-page-banlist .table-custom tbody tr:hover > :first-child {
	box-shadow: inset 1px 0 var(--m-item-hover-border, rgba(212, 173, 98, 0.38));
}

.account-services .account-page-best .table-custom tbody tr:hover > :last-child,
.account-services .account-page-banlist .table-custom tbody tr:hover > :last-child {
	box-shadow: inset -1px 0 var(--m-item-hover-border, rgba(212, 173, 98, 0.38));
}

/* Restore's public service catalogue follows the same framed hover contract. */
.account-app .modern-restore-service-card:hover,
.account-app .modern-restore-service-card:focus-visible {
	border-color: var(--m-item-hover-border, rgba(212, 173, 98, 0.38));
	background: var(--m-item-hover-bg, rgba(212, 173, 98, 0.06));
	box-shadow: var(--m-item-hover-shadow, 0 0 10px rgba(212, 173, 98, 0.1));
	outline: none;
}

.account-services .account-page-best .table-custom tbody th[scope="row"] {
	width: 52px;
	color: #d9b65f;
	font-family: var(--m-font-display, "Cinzel", Georgia, serif);
	font-weight: 700;
}

.account-services .account-page-best .table-custom td img {
	width: 16px;
	height: 16px;
	margin-right: 0.35rem;
	border: 1px solid rgba(212, 173, 98, 0.28);
	vertical-align: -3px;
}

.account-services .account-page-banlist .account-ban-section {
	margin-top: 0.65rem;
	overflow-x: auto;
	border: 1px solid rgba(107, 80, 32, 0.46);
	border-radius: 3px;
	background: rgba(6, 4, 2, 0.4);
}

.account-services .account-page-banlist .account-ban-section-title,
.account-services .account-page-banlist .inactive_bans {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 720px;
	padding: 0.7rem 0.8rem;
	border-bottom: 1px solid rgba(107, 80, 32, 0.5);
	background: rgba(212, 173, 98, 0.065);
	color: #d4bc86;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.account-services .account-page-banlist .account-ban-section-active .account-ban-section-title {
	border-left: 3px solid rgba(182, 76, 62, 0.72);
	background: rgba(126, 41, 31, 0.09);
	color: #dba096;
}

.account-services .account-page-banlist .account-ban-section-title i,
.account-services .account-page-banlist .inactive_bans i {
	font-size: 15px;
}

.account-services .account-page-banlist .account-ban-section-title span,
.account-services .account-page-banlist .inactive_bans span {
	display: flex;
	flex-direction: column;
}

.account-services .account-page-banlist .account-ban-section-title small,
.account-services .account-page-banlist .inactive_bans small {
	margin-top: 0.1rem;
	color: var(--m-text-dim, #948676);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.account-services .account-page-banlist .table-custom .thead-custom th:only-child {
	padding: 1.15rem;
	color: var(--m-text-dim, #948676);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
}

.account-services .account-page-banlist .table-custom .thead-custom a {
	color: #d1b775 !important;
	text-decoration: none;
}

.account-services .account-page-banlist .table-custom .thead-custom a:hover {
	color: var(--m-gold-bright, #f5ddb0) !important;
}

.account-services .account-page-banlist .services_card {
	border: 1px solid rgba(107, 80, 32, 0.46);
	border-radius: 3px;
	background: rgba(12, 8, 4, 0.62);
}

.account-services .account-page-banlist .services_card-header {
	padding-bottom: 0.55rem;
	border-bottom: 1px solid rgba(107, 80, 32, 0.4);
	color: #e3cf9f;
	font-weight: 700;
}

.account-services .account-page-banlist .services_card-body {
	padding-top: 0.6rem;
	color: var(--m-text, #c8bba8);
	line-height: 1.55;
}

.account-services .account-page-banlist .badge-primary {
	border: 1px solid rgba(212, 173, 98, 0.55);
	background: rgba(212, 173, 98, 0.1) !important;
	color: #efd28d !important;
}

.account-services .table {
	color: var(--m-text, #c8bba8);
}

.account-services .table td,
.account-services .table th {
	border-color: rgba(63, 46, 20, 0.65);
}

@media (max-width: 991.98px) {
	.account-app .modern-page {
		max-width: calc(100% - 12px);
		margin-top: 18px;
	}

	.account-app .modern-content-inner {
		padding: 12px 10px 6px;
	}

	.account-services {
		padding: 0.65rem 0.55rem 0.85rem;
	}

	.account-services .account-toolbar a {
		font-size: 10px;
		padding: 0.32rem 0.5rem;
	}

	.account-services .account_portal-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.account-services .account-balance-grid {
		grid-template-columns: 1fr;
	}

	.account-services .account-workspace-body {
		padding: 0.75rem;
	}

	.account-services .account-service-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 575.98px) {
	.account-services .account-page-heading small {
		display: none;
	}

	.account-services .account-workspace-heading {
		align-items: flex-start;
		padding: 0.75rem;
	}

	.account-services .account-workspace-heading-icon {
		width: 36px;
		height: 36px;
		flex-basis: 36px;
		font-size: 15px;
	}

	.account-services .account-workspace-heading h2 {
		font-size: 15px;
	}

	.account-services .account-workspace-heading p {
		font-size: 12px;
	}

	.account-services .account-workspace-body {
		padding: 0.55rem;
	}

	.account-services .account-page-content > [class*="col"] > form:not(.account-security-form) {
		padding: 0.7rem;
	}

	.account-services .account-page-content .repair_character-item .link-button {
		min-height: 44px;
		border-top: 1px solid rgba(107, 80, 32, 0.45) !important;
		border-left: 0 !important;
	}

	.account-services .account-page-auction .nav-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.account-services .account-data-tabs .nav-link {
		min-height: 40px;
		padding: 0.45rem 0.35rem;
		font-size: 10px;
	}

	.account-services .account-page-charexchange form > .row {
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}

	.account-services .account_portal-links {
		grid-template-columns: 1fr;
	}

	.account-services .account-details-grid {
		grid-template-columns: 1fr;
	}

	.account-services .account-detail-item:nth-child(odd) {
		border-right: 0;
	}

	.account-services .account-detail-item {
		min-height: 64px;
		padding: 0.65rem 0.75rem;
	}

	.account-services .account-detail-copy {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.2rem;
	}

	.account-services .account-balance-grid {
		padding: 0;
	}

	.account-services .account-balance-card {
		padding: 0.65rem 0.75rem;
	}

	.account-services .account-balance-copy {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.2rem 0.75rem;
	}

	.account-services .account-balance-copy strong {
		grid-column: 2;
		grid-row: 1;
	}

	.account-services .account-balance-copy em {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.account-services .account_activity-item {
		grid-template-columns: 26px minmax(0, 1fr);
		padding: 0.45rem 0;
	}

	.account-services .account_activity-item time {
		grid-column: 2;
	}

	.account-services .account-portal-stat-row > div:first-child {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.account-services .account-portal-stat-row > div:nth-child(2) {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.account-services .account-character-card {
		grid-template-columns: 46px minmax(0, 1fr) 46px 12px;
		gap: 0.5rem;
	}

	.account-services .account-character-card > img {
		width: 46px;
		height: 46px;
	}

	.account-services .account-character-money {
		grid-column: 2 / 4;
		justify-self: start;
	}

	.account-services .account-character-level {
		grid-column: 3;
		grid-row: 1;
	}

	.account-services .account-character-arrow {
		grid-column: 4;
		grid-row: 1;
	}

	.account-services .account-service-card {
		grid-template-columns: 40px minmax(0, 1fr) auto;
		min-height: 108px;
		padding: 0.7rem;
	}

	.account-services .account-service-icon {
		width: 40px;
		height: 40px;
	}
}