/* Account character roster: high-signal cards in place of the legacy table. */
#account-manage .account-roster {
	margin: 0 0 16px;
	overflow: hidden;
	border: 1px solid rgba(51, 142, 174, .52);
	border-radius: 12px;
	background: linear-gradient(145deg, #faffff, #e0f2f5);
	box-shadow: 0 9px 20px rgba(25, 89, 111, .12), inset 0 1px 0 rgba(255,255,255,.92);
}
#account-manage .account-roster__header {
	position: relative;
	display: flex;
	min-height: 82px;
	align-items: center;
	gap: 12px;
	padding: 13px 17px;
	overflow: hidden;
	background: radial-gradient(circle at 88% 18%, rgba(251,221,117,.23), transparent 20%), linear-gradient(110deg, #176e89, #32a1bc 60%, #23849e);
	color: #fff;
}
#account-manage .account-roster__header::after {
	position: absolute;
	right: -34px;
	bottom: -73px;
	width: 168px;
	height: 168px;
	border: 22px solid rgba(255,255,255,.1);
	border-radius: 50%;
	content: '';
}
#account-manage .account-roster__header > * { position: relative; z-index: 1; }
#account-manage .account-roster__header-icon {
	display: flex;
	width: 45px;
	height: 45px;
	flex: 0 0 45px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(226,255,255,.5);
	border-radius: 13px;
	background: rgba(4,74,94,.26);
	color: #ffdf70;
	font-size: 20px;
}
#account-manage .account-roster__header > div:nth-child(2) { min-width: 0; }
#account-manage .account-roster__header span,
#account-manage .account-roster__count span {
	display: block;
	font-family: 'Bebas Neue Bold', sans-serif;
	font-size: 11px;
	letter-spacing: .8px;
	text-transform: uppercase;
}
#account-manage .account-roster__header > div:nth-child(2) > span { color: #c4f7f6; }
#account-manage .account-roster__header h2 {
	margin: 1px 0 3px;
	color: #fff;
	font-family: 'Bebas Neue Bold', sans-serif;
	font-size: 27px;
	font-weight: normal;
	letter-spacing: .45px;
	line-height: 1;
	text-transform: uppercase;
}
#account-manage .account-roster__header p { margin: 0; color: rgba(255,255,255,.9); font: 11px/1.35 Arial, sans-serif; }
#account-manage .account-roster__count {
	min-width: 78px;
	margin-left: auto;
	padding: 8px 9px;
	border: 1px solid rgba(255,239,170,.4);
	border-radius: 9px;
	background: rgba(8,76,94,.22);
	text-align: center;
}
#account-manage .account-roster__count strong { display: block; color: #ffe274; font: normal 29px/.88 'Bebas Neue Bold', sans-serif; }
#account-manage .account-roster__count span { margin-top: 4px; color: #e8ffff; font-size: 9px; }

#account-manage .account-roster__list { display: grid; gap: 6px; padding: 9px; }
#account-manage .account-roster__character {
	position: relative;
	display: grid;
	min-height: 72px;
	grid-template-columns: 27px 58px minmax(138px, 1.15fr) minmax(156px, .9fr) 74px;
	align-items: center;
	gap: 8px;
	padding: 7px 9px;
	overflow: hidden;
	border: 1px solid rgba(77,153,180,.27);
	border-radius: 9px;
	background: linear-gradient(100deg, rgba(255,255,255,.94), rgba(233,246,248,.88));
	box-shadow: inset 0 1px rgba(255,255,255,.95);
	transition: border-color .17s ease, box-shadow .17s ease, transform .17s ease;
}
#account-manage .account-roster__character::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: #9bb9c3; content: ''; }
#account-manage .account-roster__character:hover { border-color: rgba(37,153,188,.62); box-shadow: 0 4px 10px rgba(25,95,118,.12), inset 0 1px rgba(255,255,255,.95); transform: translateY(-1px); }
#account-manage .account-roster__character.is-online::before { background: linear-gradient(#49cf91, #168a58); box-shadow: 0 0 9px rgba(41,190,117,.42); }
#account-manage .account-roster__position { color: #76a2af; font: normal 17px/1 'Bebas Neue Bold', sans-serif; text-align: center; }
#account-manage .account-roster__outfit {
	position: relative;
	display: flex;
	/* Keep the same 48px sprite viewport as Highscores. */
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 1px solid rgba(52,148,179,.35);
	border-radius: 9px;
	background: radial-gradient(circle at 35% 25%, #fff, #d9f2f4);
	box-shadow: inset 0 1px rgba(255,255,255,.9);
}
#account-manage .account-roster__outfit img {
    /* The generator returns one centred 64px canvas for every animation frame. */
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: 64px !important;
    height: 64px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
}
#account-manage .account-roster__identity { min-width: 0; }
#account-manage .account-roster__presence { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; color: #809da7; font: normal 9px/1 'Bebas Neue Bold', sans-serif; letter-spacing: .5px; text-transform: uppercase; }
#account-manage .account-roster__presence i { color: #a7bdc3; font-size: 7px; }
#account-manage .is-online .account-roster__presence { color: #258258; }
#account-manage .is-online .account-roster__presence i { color: #37ca7c; text-shadow: 0 0 5px rgba(48,204,122,.55); }
#account-manage .account-roster__identity > a { display: inline-flex; max-width: 100%; align-items: center; gap: 5px; overflow: hidden; color: #175e78; font: normal 22px/1 'Bebas Neue Bold', sans-serif; letter-spacing: .3px; text-decoration: none; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
#account-manage .account-roster__identity > a:hover { color: #d27822; text-decoration: none; }
#account-manage .account-roster__identity > a img { width: 11px; height: 11px; flex: 0 0 auto; }
#account-manage .account-roster__build { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
#account-manage .account-roster__build span { display: inline-flex; align-items: center; gap: 3px; color: #638490; font: 10px/1 Arial, sans-serif; }
#account-manage .account-roster__build i { color: #d5962d; font-size: 9px; }
#account-manage .account-roster__build b { color: #287995; font-weight: 700; }
#account-manage .account-roster__meta { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5px; min-width: 0; margin: 0; }
#account-manage .account-roster__meta div { min-width: 0; padding-left: 7px; border-left: 1px solid rgba(82,151,174,.2); }
#account-manage .account-roster__meta dt { display: flex; align-items: center; gap: 4px; margin: 0 0 3px; color: #799aa4; font: normal 9px/1 'Bebas Neue Bold', sans-serif; letter-spacing: .45px; text-transform: uppercase; }
#account-manage .account-roster__meta dt i { color: #3aa2bb; font-size: 9px; }
#account-manage .account-roster__meta dd { overflow: hidden; margin: 0; color: #3c6979; font: normal 12px/1.1 'Bebas Neue Bold', sans-serif; letter-spacing: .15px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
#account-manage .account-roster__edit {
	display: inline-flex;
	min-height: 35px;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 6px;
	border: 1px solid #18728f;
	border-radius: 7px;
	background: linear-gradient(180deg, #50b5cb, #1c7998);
	box-shadow: inset 0 1px rgba(255,255,255,.38), 0 3px 6px rgba(17,89,112,.2);
	color: #fff;
	font: normal 14px/1 'Bebas Neue Bold', sans-serif;
	letter-spacing: .25px;
	text-decoration: none;
	text-transform: uppercase;
	transition: filter .15s ease, transform .15s ease;
}
#account-manage .account-roster__edit:hover { color: #fff; filter: brightness(1.08); text-decoration: none; transform: translateY(-1px); }
#account-manage .account-roster__empty { display: grid; min-height: 145px; place-content: center; gap: 5px; padding: 20px; color: #628692; text-align: center; }
#account-manage .account-roster__empty i { color: #d39831; font-size: 30px; } #account-manage .account-roster__empty strong { color: #286f87; font: normal 22px/1 'Bebas Neue Bold', sans-serif; text-transform: uppercase; } #account-manage .account-roster__empty span { font: 11px/1.4 Arial, sans-serif; }

#account-manage .account-roster__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 7px; padding: 10px; border-top: 1px solid rgba(73,149,176,.25); background: rgba(218,240,244,.65); }
#account-manage .account-roster__action { display: flex; min-width: 0; flex-direction: column; gap: 6px; margin: 0 !important; padding: 8px; border: 1px solid rgba(71,149,177,.25); border-radius: 8px; background: rgba(255,255,255,.62); text-align: center; }
#account-manage .account-roster__action > span { overflow: hidden; color: #668995; font: normal 10px/1 'Bebas Neue Bold', sans-serif; letter-spacing: .35px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
#account-manage .account-roster__action > span i { margin-right: 3px; color: #d49428; }
#account-manage .account-roster__action input, #account-manage .account-roster__action button { width: 100%; min-height: 34px; margin: 0; padding: 7px 6px; font-size: 13px; }
#account-manage .account-roster__action--create { border-color: rgba(42,157,113,.42); background: linear-gradient(145deg,#f9fffd,#e5f7ed); } #account-manage .account-roster__action--create input, #account-manage .account-roster__action--create button { border-color: #197b55 !important; background: linear-gradient(180deg,#48b780,#197a54) !important; }
#account-manage .account-roster__action--market { border-color: rgba(191,133,35,.38); background: linear-gradient(145deg,#fffdf7,#fbefd0); } #account-manage .account-roster__action--market input, #account-manage .account-roster__action--market button { border-color: #bd791c !important; background: linear-gradient(180deg,#ecb348,#ca7d1d) !important; }
#account-manage .account-roster__action--transfer { border-color: rgba(102,83,166,.4); background: linear-gradient(145deg,#fcfbff,#ece7fb); } #account-manage .account-roster__action--transfer input, #account-manage .account-roster__action--transfer button { border-color: #6750a1 !important; background: linear-gradient(180deg,#8c76ca,#64509b) !important; }
#account-manage .account-roster__action--delete { border-color: rgba(183,65,67,.36); background: linear-gradient(145deg,#fffafa,#f9e5e5); } #account-manage .account-roster__action--delete input, #account-manage .account-roster__action--delete button { border-color: #b34346 !important; background: linear-gradient(180deg,#dc6c6a,#ab3f43) !important; }

@media (max-width: 720px) {
	#account-manage .account-roster__character { grid-template-columns: 24px 55px minmax(0, 1fr) 70px; }
	#account-manage .account-roster__meta { display: none; }
}
@media (max-width: 490px) {
	#account-manage .account-roster__header { align-items: flex-start; flex-wrap: wrap; }
	#account-manage .account-roster__count { margin-left: 0; }
	#account-manage .account-roster__character { grid-template-columns: 22px 54px minmax(0,1fr); padding: 8px; }
	#account-manage .account-roster__edit { grid-column: 2 / -1; }
	#account-manage .account-roster__actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
}