/* ============================================================
   TrivalRO shared Account / GM control-panel UI
   Applies to account index, view, password, e-mail, gender,
   credit transfer and transfer history pages.
   ============================================================ */

body.account-ui-page #main-wrapper {
	max-width: 1760px;
	margin-top: 34px;
	margin-bottom: 56px;
}

/* Player account overview follows the same global TrivalRO content rail used
   by rankings, downloads, service desk and other transactional workspaces. */
body.account-ui-page.account-action-view #main-wrapper {
	width: min(var(--trival-shared-content-rail, 1000px), calc(100vw - 48px)) !important;
	max-width: var(--trival-shared-content-rail, 1000px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

body.account-ui-page.account-action-view #content-col,
body.account-ui-page.account-action-view #content-box,
body.account-ui-page.account-action-view #content-box .content-inner {
	width: 100% !important;
	max-width: 100% !important;
}

/* GM account-management pages skip the large promotional hero. Keep only
   enough top spacing for the fixed status/nav bars. */
body.account-ui-page.account-admin-compact #main-wrapper {
	margin-top: 96px !important;
	margin-bottom: 44px;
}

body.account-ui-page.account-admin-compact #content-box .content-inner {
	padding-top: 8px;
}

/* Admin/GM rail sizing and admin background are defined once in the
   GLOBAL ADMIN RAIL block at the end of this stylesheet. */

body.account-ui-page #content-col {
	padding: 0 14px;
}

body.account-ui-page #content-box,
body.account-ui-page #content-box .content-inner {
	background: transparent;
	box-shadow: none;
}

body.account-ui-page #content-box .content-inner {
	padding: 18px 18px 34px;
}

body.account-ui-page:not(.account-action-index):not(.account-action-view) #content-box .content-inner {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

/* Page headings --------------------------------------------------------- */
body.account-ui-page #content-box .content-inner > h2:not(.announcements-title) {
	position: relative;
	margin: 20px 0 12px;
	padding: 0;
	color: #315f7d;
	font-family: 'Grobold', 'Arial Black', sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .25px;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

body.account-action-edit #content-box .content-inner > h2 {
	color: #fff;
	text-shadow: 0 2px 3px rgba(21,87,126,.72), 0 0 2px rgba(21,87,126,.45);
}

body.account-ui-page #content-box .content-inner > h2::before {
	display: none;
	content: none;
}

body.account-ui-page #content-box .content-inner > h3 {
	margin: 22px 0 9px;
	padding: 0 0 7px;
	border-bottom: 2px solid rgba(112,183,224,.28);
	color: #365d76;
	font-family: 'Grobold', 'Arial Black', sans-serif;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .25px;
	line-height: 1.3;
}

body.account-ui-page #content-box .content-inner > p {
	color: #526b7c;
	font-family: 'Informb', sans-serif;
	font-size: 12px;
	line-height: 1.55;
}

body.account-ui-page #content-box a {
	color: #2788c3;
	font-weight: 700;
	text-decoration: none;
}

body.account-ui-page #content-box a:hover {
	color: #156a9d;
	text-decoration: none;
}

/* Alerts --------------------------------------------------------------- */
body.account-ui-page p.red,
body.account-ui-page p.message,
body.account-ui-page p.notice {
	position: relative;
	max-width: 980px;
	margin: 12px auto 16px;
	padding: 14px 18px 13px 50px;
	border: 0 !important;
	border-radius: 14px;
	font-family: 'Informb', sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.45;
	text-align: left;
}

body.account-ui-page p.red::before,
body.account-ui-page p.message::before,
body.account-ui-page p.notice::before {
	position: absolute;
	left: 13px;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	margin-top: -14px;
	border-radius: 50%;
	font-family: 'Grobold', 'Arial Black', sans-serif;
	font-size: 12px;
	line-height: 1;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

body.account-ui-page p.red {
	background: linear-gradient(180deg, #fffafa 0%, #fff0f0 100%);
	color: #a94545;
	box-shadow: inset 0 0 0 2px rgba(229,112,112,.30), inset 0 -3px 0 rgba(205,83,83,.12), 0 7px 18px rgba(131,70,70,.10);
}

body.account-ui-page p.red::before {
	content: '!';
	background: linear-gradient(180deg, #ff7777 0%, #e84d4d 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 7px rgba(190,67,67,.24);
}

body.account-ui-page p.message {
	background: linear-gradient(180deg, #f8fffb 0%, #edf9f2 100%);
	color: #3d7652;
	box-shadow: inset 0 0 0 2px rgba(102,190,135,.26), inset 0 -3px 0 rgba(75,160,108,.10), 0 7px 18px rgba(61,119,82,.08);
}

body.account-ui-page p.message::before {
	content: '✓';
	background: linear-gradient(180deg, #79d59a 0%, #52b777 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 7px rgba(64,145,94,.20);
}

body.account-ui-page p.notice {
	background: linear-gradient(180deg, #fffdf6 0%, #fff8e4 100%);
	color: #80652a;
	box-shadow: inset 0 0 0 2px rgba(226,188,76,.25), inset 0 -3px 0 rgba(188,145,38,.10), 0 7px 18px rgba(139,109,41,.08);
}

body.account-ui-page p.notice::before {
	content: 'i';
	background: linear-gradient(180deg, #f1cf69 0%, #d9ad3d 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 7px rgba(157,120,32,.18);
}

/* Shared game table ---------------------------------------------------- */
body.account-ui-page table.horizontal-table,
body.account-ui-page table.vertical-table {
	width: 100%;
	max-width: 100%;
	margin: 10px 0 18px;
	border: 0 !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border-radius: 15px;
	background: rgba(255,255,255,.96);
	box-shadow: 0 10px 26px rgba(45,108,150,.12), inset 0 1px 0 rgba(255,255,255,.9);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

body.account-ui-page table.horizontal-table {
	display: block;
	white-space: nowrap;
}

body.account-ui-page table.vertical-table {
	display: block;
}

body.account-ui-page table.horizontal-table > tbody,
body.account-ui-page table.vertical-table > tbody {
	display: table;
	width: 100%;
	min-width: max-content;
	border-collapse: separate;
	border-spacing: 0;
}

body.account-ui-page table.horizontal-table th,
body.account-ui-page table.vertical-table th {
	padding: 11px 13px 9px !important;
	border: 0 !important;
	border-right: 1px solid rgba(121,180,214,.17) !important;
	border-bottom: 3px solid #79b9dc !important;
	background: linear-gradient(180deg, #eaf7fe 0%, #d9effb 100%) !important;
	color: #315f7d !important;
	font-family: 'Grobold', 'Arial Black', sans-serif !important;
	font-size: 9px !important;
	font-weight: 400 !important;
	letter-spacing: .28px;
	line-height: 1.25;
	text-align: left;
	text-shadow: 0 1px 0 rgba(255,255,255,.9);
	white-space: nowrap;
}

body.account-ui-page table.horizontal-table tr:first-child th:first-child,
body.account-ui-page table.vertical-table tr:first-child th:first-child {
	border-top-left-radius: 14px;
}

body.account-ui-page table.horizontal-table tr:first-child th:last-child,
body.account-ui-page table.vertical-table tr:first-child th:last-child {
	border-top-right-radius: 14px;
	border-right: 0 !important;
}

body.account-ui-page table.horizontal-table td,
body.account-ui-page table.vertical-table td {
	padding: 10px 13px !important;
	border: 0 !important;
	border-right: 1px solid rgba(125,171,199,.12) !important;
	border-bottom: 1px solid rgba(125,171,199,.14) !important;
	background: rgba(255,255,255,.95) !important;
	color: #405b6d;
	font-family: 'Informb', sans-serif;
	font-size: 11px;
	line-height: 1.35;
	vertical-align: middle;
}

body.account-ui-page table.horizontal-table tr:nth-child(even) td,
body.account-ui-page table.vertical-table tr:nth-child(even) td {
	background: #f8fcfe !important;
}

body.account-ui-page table.horizontal-table tr:hover td,
body.account-ui-page table.vertical-table tr:hover td {
	background: #eef8fd !important;
}

body.account-ui-page table.horizontal-table tr:last-child td,
body.account-ui-page table.vertical-table tr:last-child td {
	border-bottom: 0 !important;
}

body.account-ui-page table.horizontal-table td:last-child,
body.account-ui-page table.vertical-table td:last-child {
	border-right: 0 !important;
}

body.account-ui-page table.horizontal-table tr:last-child td:first-child,
body.account-ui-page table.vertical-table tr:last-child td:first-child {
	border-bottom-left-radius: 14px;
}

body.account-ui-page table.horizontal-table tr:last-child td:last-child,
body.account-ui-page table.vertical-table tr:last-child td:last-child {
	border-bottom-right-radius: 14px;
}

body.account-ui-page table th a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #315f7d !important;
	font-family: inherit;
	font-size: inherit;
	text-decoration: none !important;
}

body.account-ui-page table th a:hover {
	color: #1779b4 !important;
}

body.account-ui-page table td img {
	max-width: 32px;
	max-height: 32px;
	vertical-align: middle;
	image-rendering: auto;
}

body.account-ui-page .not-applicable {
	color: #9aabb6 !important;
	font-style: italic;
}

body.account-ui-page .online,
body.account-ui-page .state-normal,
body.account-ui-page .identified.yes,
body.account-ui-page .broken.no {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 4px 8px;
	border-radius: 999px;
	background: #e8f8ee;
	color: #3a8557 !important;
	font-size: 9px;
	font-weight: 700;
}

body.account-ui-page .offline,
body.account-ui-page .state-pending {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 4px 8px;
	border-radius: 999px;
	background: #f1f4f6;
	color: #8797a2 !important;
	font-size: 9px;
	font-weight: 700;
}

body.account-ui-page .state-banned,
body.account-ui-page .state-permanently-banned,
body.account-ui-page .broken.yes,
body.account-ui-page .identified.no {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 4px 8px;
	border-radius: 999px;
	background: #fff0f0;
	color: #c05b5b !important;
	font-size: 9px;
	font-weight: 700;
}

body.account-ui-page .block-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 6px 9px;
	border-radius: 8px;
	background: #edf7fc;
	color: #247eb4 !important;
	font-size: 9px;
	white-space: nowrap;
}

body.account-ui-page .block-link:hover {
	background: #dff1fa;
}

/* Result / paginator bars ---------------------------------------------- */
body.account-ui-page .info-text {
	margin: 10px 0 !important;
	padding: 10px 13px !important;
	border: 0 !important;
	border-radius: 11px;
	background: rgba(255,255,255,.90) !important;
	box-shadow: 0 5px 14px rgba(55,113,151,.10);
	color: #5e7687 !important;
	font-family: 'Informb', sans-serif;
	font-size: 10.5px !important;
	font-weight: 700;
	text-align: center;
}

body.account-ui-page .paginator,
body.account-ui-page ul.paginator,
body.account-ui-page .pagination {
	margin: 16px auto 8px !important;
}

/* Search panel on GM account list ------------------------------------- */
body.account-action-index p.toggler {
	margin: 8px 0 10px !important;
}

body.account-action-index p.toggler a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 9px 15px 7px;
	border-bottom: 3px solid #1674b0;
	border-radius: 10px;
	background: linear-gradient(180deg, #5bc3f4 0%, #2b9fde 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 5px 12px rgba(38,126,183,.22);
	color: #fff !important;
	font-family: 'Grobold', 'Arial Black', sans-serif;
	font-size: 9px;
	font-weight: 400;
	text-shadow: 0 1px 2px rgba(0,60,110,.5);
}

body.account-action-index .search-form {
	margin: 0 0 18px;
	padding: 15px;
	border: 0 !important;
	border-radius: 15px;
	background: rgba(255,255,255,.95);
	box-shadow: 0 9px 24px rgba(51,111,151,.12);
}

body.account-action-index .search-form p {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 9px;
	font-size: 0;
}

body.account-action-index .search-form p:last-child {
	margin-bottom: 0;
}

body.account-action-index .search-form label,
body.account-action-index .search-form input,
body.account-action-index .search-form select,
body.account-action-index .search-form .date-field {
	font-size: 10.5px;
}

body.account-action-index .search-form label {
	color: #587286;
	font-family: 'Informb', sans-serif;
	font-weight: 700;
}

/* Shared forms --------------------------------------------------------- */
body.account-ui-page form.generic-form {
	width: 100%;
	margin: 14px 0 22px;
	padding: 16px;
	border-radius: 16px;
	background: rgba(255,255,255,.96);
	box-shadow: 0 10px 26px rgba(45,108,150,.12);
}

body.account-ui-page table.generic-form-table {
	width: 100%;
	border: 0 !important;
	border-collapse: separate !important;
	border-spacing: 0 9px !important;
	background: transparent !important;
}

body.account-ui-page table.generic-form-table th,
body.account-ui-page table.generic-form-table td {
	border: 0 !important;
	background: transparent !important;
	padding: 4px 7px !important;
	vertical-align: middle;
}

body.account-ui-page table.generic-form-table th {
	width: 190px;
	color: #48697e;
	font-family: 'Grobold', 'Arial Black', sans-serif;
	font-size: 9px;
	font-weight: 400;
	letter-spacing: .2px;
	text-align: right;
}

body.account-ui-page table.generic-form-table td {
	color: #566f80;
	font-family: 'Informb', sans-serif;
	font-size: 11px;
	line-height: 1.45;
}

body.account-ui-page table.generic-form-table td p {
	margin: 0;
	color: #627b8d;
	font-size: 10.5px;
	line-height: 1.45;
}

body.account-ui-page table.generic-form-table td[rowspan] {
	padding: 12px 14px !important;
	border-radius: 11px;
	background: #eef7fc !important;
}

body.account-ui-page input[type='text'],
body.account-ui-page input[type='password'],
body.account-ui-page input[type='email'],
body.account-ui-page select,
body.account-ui-page textarea {
	box-sizing: border-box;
	min-height: 39px;
	padding: 8px 11px !important;
	border: 2px solid #a9cee7 !important;
	border-radius: 9px !important;
	background: #fff !important;
	box-shadow: inset 0 1px 2px rgba(67,111,139,.06) !important;
	color: #38586d !important;
	font-family: 'Informb', sans-serif !important;
	font-size: 11px !important;
	outline: none !important;
	transition: border-color .12s ease, box-shadow .12s ease;
}

body.account-ui-page input[type='text']:focus,
body.account-ui-page input[type='password']:focus,
body.account-ui-page input[type='email']:focus,
body.account-ui-page select:focus,
body.account-ui-page textarea:focus {
	border-color: #4eb7ee !important;
	box-shadow: 0 0 0 3px rgba(65,174,231,.12) !important;
}

body.account-ui-page table.generic-form-table input[type='text'],
body.account-ui-page table.generic-form-table input[type='password'],
body.account-ui-page table.generic-form-table input[type='email'] {
	width: min(100%, 340px);
}

body.account-ui-page textarea.reason {
	width: min(100%, 520px) !important;
	min-height: 92px;
	resize: vertical;
}

body.account-ui-page input[type='submit'],
body.account-ui-page input[type='button'],
body.account-ui-page button[type='submit'] {
	min-height: 38px;
	padding: 10px 16px 8px !important;
	border: 0 !important;
	border-bottom: 3px solid #1674b0 !important;
	border-radius: 10px !important;
	background: linear-gradient(180deg, #5bc3f4 0%, #35aaea 48%, #218fd2 100%) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 5px 12px rgba(38,126,183,.22) !important;
	color: #fff !important;
	font-family: 'Grobold', 'Arial Black', sans-serif !important;
	font-size: 9px !important;
	font-weight: 400 !important;
	letter-spacing: .25px;
	line-height: 1;
	text-shadow: 0 1px 2px rgba(0,60,110,.5);
	cursor: pointer;
}

body.account-ui-page input[type='submit']:hover,
body.account-ui-page input[type='button']:hover,
body.account-ui-page button[type='submit']:hover {
	filter: brightness(1.04);
}

body.account-ui-page input[type='submit']:active,
body.account-ui-page input[type='button']:active,
body.account-ui-page button[type='submit']:active {
	transform: translateY(2px);
	border-bottom-width: 1px !important;
}

body.account-ui-page .remaining-balance {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 25px;
	padding: 4px 8px;
	border-radius: 999px;
	background: #e8f6fd;
	color: #187aaf;
	font-weight: 700;
}

/* View-account sections ------------------------------------------------ */
body.account-action-view #content-box .content-inner {
	max-width: 1560px;
	margin: 0 auto;
}

body.account-action-view .account-page-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin: 2px 0 10px;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 0;
}

body.account-action-view .account-page-actions .account-action-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 39px;
	padding: 11px 18px 8px;
	border-bottom: 3px solid #1674b0;
	border-radius: 10px;
	background: linear-gradient(180deg, #5cc4f5 0%, #34a8ea 48%, #218fd2 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.58), inset 0 -2px 4px rgba(0,86,143,.16), 0 6px 14px rgba(38,126,183,.22);
	color: #fff !important;
	font-family: 'Grobold', 'Arial Black', sans-serif;
	font-size: 9px;
	font-weight: 400;
	letter-spacing: .3px;
	line-height: 1;
	text-decoration: none !important;
	text-shadow: 0 1px 2px rgba(0,60,110,.48);
	transition: filter .12s ease, transform .08s ease, box-shadow .08s ease;
}

body.account-action-view .account-page-actions .account-action-button::before {
	content: '✎';
	margin-right: 7px;
	font-family: Arial, sans-serif;
	font-size: 12px;
	line-height: 1;
}

body.account-action-view .account-page-actions .account-action-button:hover {
	filter: brightness(1.05);
	color: #fff !important;
}

body.account-action-view .account-page-actions .account-action-button:active {
	transform: translateY(2px);
	border-bottom-width: 1px;
	box-shadow: inset 0 2px 4px rgba(0,75,125,.18), 0 2px 6px rgba(38,126,183,.18);
}

body.account-action-view table.vertical-table:first-of-type {
	display: table;
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
	margin: 12px 0 22px;
	border-radius: 16px;
	background: rgba(255,255,255,.96);
	box-shadow: 0 12px 28px rgba(32,95,135,.15), inset 0 1px 0 rgba(255,255,255,.92);
	overflow: hidden;
}

body.account-action-view table.vertical-table:first-of-type > tbody {
	display: table-row-group;
	width: auto;
	min-width: 0;
}

body.account-action-view table.vertical-table:first-of-type tr {
	display: table-row;
}

body.account-action-view table.vertical-table:first-of-type th,
body.account-action-view table.vertical-table:first-of-type td {
	display: table-cell;
	padding: 13px 15px !important;
	border-right: 0 !important;
	border-bottom: 1px solid rgba(112,170,205,.16) !important;
	vertical-align: middle;
}

body.account-action-view table.vertical-table:first-of-type th {
	width: 16%;
	background: rgba(230,245,253,.90) !important;
	color: #426a83 !important;
	font-family: 'Grobold', 'Arial Black', sans-serif !important;
	font-size: 8.5px !important;
	letter-spacing: .28px;
	text-transform: uppercase;
}

body.account-action-view table.vertical-table:first-of-type td {
	width: 34%;
	min-width: 0;
	background: rgba(255,255,255,.96) !important;
	color: #355568;
	font-size: 11px;
}

body.account-action-view table.vertical-table:first-of-type tr:nth-child(even) th {
	background: rgba(236,248,254,.94) !important;
}

body.account-action-view table.vertical-table:first-of-type tr:nth-child(even) td {
	background: rgba(249,252,254,.96) !important;
}

body.account-action-view table.vertical-table:first-of-type tr:hover th,
body.account-action-view table.vertical-table:first-of-type tr:hover td {
	background: #f0f9fd !important;
}

body.account-action-view table.vertical-table:first-of-type tr:last-child th,
body.account-action-view table.vertical-table:first-of-type tr:last-child td {
	border-bottom: 0 !important;
}

body.account-action-view #content-box .content-inner > p:not(.red) {
	margin: 7px 0 12px;
}

/* Modify-account back navigation ------------------------------------- */
body.account-action-edit #submenu.account-edit-back-nav {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto 8px;
	padding: 0;
	background: transparent;
	box-shadow: none;
}

body.account-action-edit .account-edit-back-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 38px;
	padding: 9px 14px 7px 11px;
	border: 0;
	border-bottom: 3px solid #1674b0;
	border-radius: 10px;
	background: linear-gradient(180deg, #5cc4f5 0%, #34a8ea 48%, #218fd2 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 5px 12px rgba(38,126,183,.20);
	color: #fff !important;
	font-family: 'Grobold', 'Arial Black', sans-serif;
	font-size: 9px;
	font-weight: 400;
	letter-spacing: .22px;
	line-height: 1;
	text-decoration: none !important;
	text-shadow: 0 1px 2px rgba(0,60,110,.45);
}

body.account-action-edit .account-edit-back-button svg {
	flex: 0 0 auto;
}

body.account-action-edit .account-edit-back-button:hover {
	filter: brightness(1.05);
	color: #fff !important;
}

body.account-action-edit .account-edit-back-button:active {
	transform: translateY(2px);
	border-bottom-width: 1px;
}

/* Modify account ------------------------------------------------------- */
body.account-action-edit #content-box .content-inner {
	max-width: 1180px;
	margin: 0 auto;
}

body.account-action-edit .account-edit-form {
	margin: 0;
}

body.account-action-edit .account-edit-card {
	padding: 18px;
	border-radius: 18px;
	background: rgba(255,255,255,.96);
	box-shadow: 0 14px 34px rgba(45,108,150,.13), inset 0 1px 0 rgba(255,255,255,.96);
}

body.account-action-edit .account-edit-summary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}

body.account-action-edit .account-edit-summary-item {
	min-height: 78px;
	padding: 14px 16px 13px;
	border-radius: 13px;
	background: linear-gradient(180deg, #eef9fe 0%, #e2f2fb 100%);
	box-shadow: inset 0 -3px 0 rgba(83,164,209,.12), 0 5px 13px rgba(51,113,151,.08);
}

body.account-action-edit .account-edit-summary-label {
	display: block;
	margin-bottom: 7px;
	color: #6c8495;
	font-family: 'Grobold', 'Arial Black', sans-serif;
	font-size: 8.5px;
	font-weight: 400;
	letter-spacing: .35px;
	text-transform: uppercase;
}

body.account-action-edit .account-edit-summary-item > strong {
	display: block;
	color: #2f6688;
	font-family: 'Grobold', 'Arial Black', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.25;
}

body.account-action-edit .account-edit-summary-state {
	min-height: 26px;
	display: flex;
	align-items: center;
}

body.account-action-edit .account-edit-section-title {
	margin: 18px 0 10px;
	color: #3d6c89;
	font-family: 'Grobold', 'Arial Black', sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .35px;
	text-transform: uppercase;
}

body.account-action-edit .account-edit-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px 12px;
}

body.account-action-edit .account-edit-field {
	padding: 12px;
	border-radius: 12px;
	background: #f8fcfe;
	box-shadow: inset 0 0 0 1px rgba(110,177,215,.10);
}

body.account-action-edit .account-edit-field label {
	display: block;
	margin: 0 0 6px;
	color: #5a7689;
	font-family: 'Grobold', 'Arial Black', sans-serif;
	font-size: 8.5px;
	font-weight: 400;
	letter-spacing: .25px;
	text-transform: uppercase;
}

body.account-action-edit .account-edit-field input[type='text'],
body.account-action-edit .account-edit-field select {
	width: 100% !important;
	max-width: none !important;
	min-height: 43px;
}

body.account-action-edit .account-edit-readonly {
	display: flex;
	align-items: center;
	min-height: 43px;
	padding: 8px 11px;
	border-radius: 9px;
	background: #eaf4fa;
	color: #49697e;
	font-family: 'Informb', sans-serif;
	font-size: 11px;
	font-weight: 700;
}

body.account-action-edit .account-edit-date-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

body.account-action-edit .account-edit-date-card {
	padding: 13px;
	border-radius: 13px;
	background: #f8fcfe;
	box-shadow: inset 0 0 0 1px rgba(110,177,215,.10);
}

body.account-action-edit .account-edit-date-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

body.account-action-edit .account-edit-date-head strong,
body.account-action-edit .account-edit-info-card strong {
	display: block;
	margin-bottom: 3px;
	color: #486b81;
	font-family: 'Grobold', 'Arial Black', sans-serif;
	font-size: 9px;
	font-weight: 400;
}

body.account-action-edit .account-edit-date-head span,
body.account-action-edit .account-edit-info-card span {
	display: block;
	color: #7690a1;
	font-family: 'Informb', sans-serif;
	font-size: 9.5px;
	line-height: 1.35;
}

body.account-action-edit .account-edit-switch {
	position: relative;
	flex: 0 0 auto;
	width: 42px;
	height: 24px;
	cursor: pointer;
}

body.account-action-edit .account-edit-switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

body.account-action-edit .account-edit-switch > span {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: #cedde6;
	box-shadow: inset 0 2px 4px rgba(65,101,123,.16);
	transition: background .15s ease;
}

body.account-action-edit .account-edit-switch > span::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 5px rgba(55,92,113,.20);
	transition: transform .15s ease;
}

body.account-action-edit .account-edit-switch input:checked + span {
	background: linear-gradient(180deg, #57c4f5 0%, #2e9fe0 100%);
}

body.account-action-edit .account-edit-switch input:checked + span::after {
	transform: translateX(18px);
}

body.account-action-edit .account-edit-date-controls {
	overflow-x: auto;
	padding-bottom: 2px;
}

body.account-action-edit .account-edit-date-controls .date-field,
body.account-action-edit .account-edit-date-controls .date-time-field {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	white-space: normal;
}

body.account-action-edit .account-edit-date-controls select {
	width: auto !important;
	min-width: 78px;
	min-height: 39px;
	padding-right: 28px !important;
}

body.account-action-edit .account-edit-info-card {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background: linear-gradient(180deg, #f5fbff 0%, #eaf6fd 100%);
	box-shadow: inset 0 0 0 1px rgba(102,178,221,.13);
}

body.account-action-edit .account-edit-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 27px;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	background: linear-gradient(180deg, #69c7f3 0%, #318fd0 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 7px rgba(45,131,184,.18);
	color: #fff;
	font-family: 'Grobold', 'Arial Black', sans-serif;
	font-size: 11px;
	text-shadow: 0 1px 2px rgba(0,60,110,.35);
}

body.account-action-edit .account-edit-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 9px;
	margin-top: 16px;
	padding-top: 14px;
}

body.account-action-edit .account-edit-cancel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 10px 16px 8px;
	border-bottom: 3px solid #a4c6da;
	border-radius: 10px;
	background: linear-gradient(180deg, #ffffff 0%, #edf6fb 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 5px 12px rgba(59,108,139,.12);
	color: #4f7590 !important;
	font-family: 'Grobold', 'Arial Black', sans-serif;
	font-size: 9px;
	font-weight: 400;
	text-decoration: none !important;
}

body.account-action-edit .account-edit-cancel:hover {
	filter: brightness(1.03);
	color: #376783 !important;
}

/* Compact pages -------------------------------------------------------- */
body.account-action-changepass #content-box .content-inner,
body.account-action-changemail #content-box .content-inner,
body.account-action-changesex #content-box .content-inner,
body.account-action-transfer #content-box .content-inner,
body.account-action-xferlog #content-box .content-inner {
	max-width: 1080px;
}

body.account-action-changepass form.generic-form,
body.account-action-changemail form.generic-form,
body.account-action-changesex form.generic-form,
body.account-action-transfer form.generic-form {
	max-width: 940px;
}

body.account-action-changesex form.generic-form table td,
body.account-action-transfer form.generic-form table td {
	padding-top: 7px !important;
	padding-bottom: 7px !important;
}

body.account-action-xferlog #content-box .content-inner > h3 + p,
body.account-action-transfer #content-box .content-inner > h2 ~ p:last-child {
	margin: 10px 0 18px;
	padding: 15px 16px;
	border-radius: 13px;
	background: rgba(255,255,255,.94);
	box-shadow: 0 8px 20px rgba(52,108,145,.10);
	color: #5d7485;
}

/* Mobile --------------------------------------------------------------- */
@media (max-width: 900px) {
	body.account-ui-page #main-wrapper {
		margin-top: 12px !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	body.account-ui-page #content-col {
		padding: 0 !important;
	}

	body.account-ui-page #content-box .content-inner {
		padding: 12px 6px 28px !important;
	}

	body.account-ui-page #content-box .content-inner > h2:not(.announcements-title) {
		margin-top: 12px;
		font-size: 17px;
	}

	body.account-ui-page #content-box .content-inner > h3 {
		font-size: 12px;
	}

	body.account-ui-page table.horizontal-table,
	body.account-ui-page table.vertical-table {
		border-radius: 12px;
	}

	body.account-ui-page table.horizontal-table th,
	body.account-ui-page table.vertical-table th {
		padding: 9px 10px 8px !important;
		font-size: 8.5px !important;
	}

	body.account-ui-page table.horizontal-table td,
	body.account-ui-page table.vertical-table td {
		padding: 9px 10px !important;
		font-size: 10px;
	}

	body.account-ui-page form.generic-form {
		padding: 12px;
		border-radius: 13px;
	}

	body.account-ui-page table.generic-form-table,
	body.account-ui-page table.generic-form-table > tbody,
	body.account-ui-page table.generic-form-table tr,
	body.account-ui-page table.generic-form-table th,
	body.account-ui-page table.generic-form-table td {
		display: block;
		width: 100% !important;
	}

	body.account-ui-page table.generic-form-table tr {
		margin-bottom: 9px;
	}

	body.account-ui-page table.generic-form-table th {
		padding: 0 2px 5px !important;
		text-align: left;
	}

	body.account-ui-page table.generic-form-table td {
		padding: 3px 2px !important;
	}

	body.account-ui-page table.generic-form-table td[rowspan] {
		margin-top: 8px;
		padding: 10px 11px !important;
	}

	body.account-ui-page table.generic-form-table input[type='text'],
	body.account-ui-page table.generic-form-table input[type='password'],
	body.account-ui-page table.generic-form-table input[type='email'],
	body.account-ui-page table.generic-form-table select,
	body.account-ui-page table.generic-form-table textarea {
		width: 100% !important;
		max-width: none !important;
	}

	body.account-action-index .search-form {
		padding: 12px;
	}

	body.account-action-index .search-form p {
		align-items: stretch;
		gap: 7px;
	}

	body.account-action-index .search-form label {
		width: 100%;
	}

	body.account-action-index .search-form input[type='text'],
	body.account-action-index .search-form select {
		flex: 1 1 140px;
		min-width: 0;
	}

	body.account-action-edit .account-edit-card {
		padding: 13px;
		border-radius: 14px;
	}

	body.account-action-edit .account-edit-summary,
	body.account-action-edit .account-edit-grid,
	body.account-action-edit .account-edit-date-grid {
		grid-template-columns: 1fr;
	}

	body.account-action-edit .account-edit-summary {
		gap: 8px;
		margin-bottom: 14px;
	}

	body.account-action-edit .account-edit-summary-item {
		min-height: 66px;
		padding: 12px 13px;
	}

	body.account-action-edit .account-edit-field,
	body.account-action-edit .account-edit-date-card {
		padding: 11px;
	}

	body.account-action-edit .account-edit-date-controls .date-field,
	body.account-action-edit .account-edit-date-controls .date-time-field {
		flex-wrap: nowrap;
		min-width: max-content;
	}

	body.account-action-edit .account-edit-actions {
		align-items: stretch;
		flex-direction: column-reverse;
	}

	body.account-action-edit .account-edit-actions .account-edit-cancel,
	body.account-action-edit .account-edit-actions input[type='submit'] {
		width: 100%;
	}
}

@media (max-width: 700px) {
	body.account-action-view table.vertical-table:first-of-type {
		display: block;
		table-layout: auto;
		overflow: hidden;
	}

	body.account-action-view table.vertical-table:first-of-type > tbody {
		display: block;
	}

	body.account-action-view table.vertical-table:first-of-type tr {
		display: grid;
		grid-template-columns: 105px minmax(0, 1fr);
		width: 100%;
	}

	body.account-action-view table.vertical-table:first-of-type th,
	body.account-action-view table.vertical-table:first-of-type td {
		display: block;
		width: auto !important;
		min-width: 0;
		padding: 10px 11px !important;
		border-bottom: 1px solid rgba(112,170,205,.16) !important;
	}

	body.account-action-view table.vertical-table:first-of-type td[colspan="3"] {
		grid-column: 2;
	}

	body.account-action-view table.vertical-table:first-of-type th {
		font-size: 8px !important;
	}

	body.account-action-view table.vertical-table:first-of-type td {
		font-size: 10px;
		word-break: break-word;
	}
}

@media (max-width: 520px) {
	body.account-ui-page #content-box .content-inner > h2:not(.announcements-title) {
		font-size: 15px;
	}

	body.account-ui-page #content-box .content-inner > p {
		font-size: 10.5px;
	}

	body.account-ui-page input[type='submit'],
	body.account-ui-page input[type='button'],
	body.account-ui-page button[type='submit'] {
		width: 100%;
	}
}

/* ============================================================
   GLOBAL SHARED CONTENT RAIL
   One source of truth for compact TrivalRO workspaces. Admin/GM pages,
   Service Desk and Item Shop Manager all consume this same rail instead of
   hard-coding their own 1000px widths in separate stylesheets.
   ============================================================ */
:root {
	--trival-shared-content-rail: 1000px;
}

body.trival-shared-rail-page #main-wrapper {
	width: min(var(--trival-shared-content-rail), calc(100vw - 48px)) !important;
	max-width: var(--trival-shared-content-rail) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.trival-shared-rail-page #content-col,
body.trival-shared-rail-page #content-box,
body.trival-shared-rail-page #content-box .content-inner {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.trival-shared-rail-page #submenu.game-breadcrumb,
body.trival-shared-rail-page #pagemenu {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Homepage 30-day PvP ranking uses the SAME shared 1000px rail. This is
   intentionally defined here so the clean-ui 1320px public-page rule cannot
   make this ranking wider than the Admin/Service Desk/Item Shop rail. */
.home-pvp-ranking .pvp-inner {
	width: min(var(--trival-shared-content-rail), calc(100vw - 48px)) !important;
	max-width: var(--trival-shared-content-rail) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.home-pvp-ranking .pvp-table {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Keep the two ranking characters in the free gutters around the 1000px
   table. Roughly 350px outside each rail edge keeps them visible at 100%
   desktop zoom without placing artwork underneath the ranking rows. */
.home-pvp-ranking .is-chibi-left {
	left: -350px !important;
	z-index: 2 !important;
	pointer-events: none !important;
}

.home-pvp-ranking .is-chibi-right {
	right: -350px !important;
	z-index: 2 !important;
	pointer-events: none !important;
}

.home-pvp-ranking .is-chibi-left img,
.home-pvp-ranking .is-chibi-right img {
	max-height: 330px !important;
}

.home-pvp-ranking .pvp-title,
.home-pvp-ranking .pvp-sub,
.home-pvp-ranking .pvp-table {
	position: relative !important;
	z-index: 3 !important;
}

/* ============================================================
   GLOBAL ADMIN RAIL
   Admin-specific spacing/background layered on the shared rail above.
   ============================================================ */
body.admin-compact-page {
	background: #ffffff !important;
	background-image: none !important;
	background-color: #ffffff !important;
}

body.admin-compact-page #main-wrapper {
	margin-top: 96px !important;
	margin-bottom: 44px !important;
}

/* Item Shop is also an admin workspace, but its product section keeps its
   own background artwork. Only the inherited blue page/header background is
   removed; all actual manager content is aligned to the shared rail. */
body.itemshop-module-page {
	background: #ffffff !important;
	background-image: none !important;
	background-color: #ffffff !important;
}

body.itemshop-module-page #main-wrapper {
	/* Fixed TrivalRO bars end at ~76px. Start the Item Shop workspace exactly
	   there so the skipped hero does not leave an empty white header band. */
	margin-top: 76px !important;
	margin-bottom: 44px !important;
}

body.itemshop-module-page .shop-manager-inner {
	width: 100% !important;
	max-width: var(--trival-shared-content-rail) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Admin pages now sit on white, so use the normal TrivalRO ink palette instead
   of the previous white-on-sky text treatment. */
body.admin-compact-page #content-box .content-inner > h2,
body.admin-compact-page #content-box .content-inner > h3,
body.admin-compact-page.account-ui-page #content-box .content-inner > h2,
body.admin-compact-page.account-ui-page #content-box .content-inner > h3 {
	color: #376983 !important;
	text-shadow: none !important;
}

body.admin-compact-page #content-box .content-inner > h3,
body.admin-compact-page.account-ui-page #content-box .content-inner > h3 {
	border-bottom-color: transparent !important;
}

body.admin-compact-page #content-box .content-inner > p:not(.red):not(.message):not(.notice):not(.info-text) {
	color: #718797 !important;
	text-shadow: none !important;
}

/* Service Desk unread state. Red is intentionally reserved for a real unread
   notification, not decoration. */
.account-sub-dd > summary {
	position: relative;
}

.trival-account-unread-dot,
.trival-service-desk-unread-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #ff5c57;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .95);
}

.trival-account-unread-dot {
	margin-left: 6px;
	vertical-align: middle;
}

.account-service-desk-link {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.trival-service-desk-unread-dot {
	flex: 0 0 8px;
	margin-left: auto;
}

.sub-dd-admin > summary {
	position: relative;
}

.trival-admin-attention-dot,
.trival-admin-service-desk-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #ff5c57;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .95);
}

.trival-admin-attention-dot {
	margin-left: 6px;
	vertical-align: middle;
}

.admin-service-desk-link {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.trival-admin-service-desk-dot {
	flex: 0 0 8px;
	margin-left: auto;
}

@media (max-width: 1048px) {
	body.trival-shared-rail-page #main-wrapper {
		width: calc(100vw - 24px) !important;
		max-width: none !important;
	}

	body.admin-compact-page #main-wrapper {
		margin-top: 82px !important;
	}

	body.itemshop-module-page #main-wrapper {
		margin-top: 76px !important;
	}

	body.itemshop-module-page .shop-manager-inner {
		width: 100% !important;
		max-width: none !important;
	}
}