@charset "utf-8";

/* ============================================================================
 * defaultHM -- a glassmorphism theme for FluxCP
 * ----------------------------------------------------------------------------
 * Layers, in order:
 *   1. Tokens            2. Base / typography     3. Animated backdrop
 *   4. Primitives        5. Topbar                6. Hero + status strip
 *   7. Shell / sidebar   8. Content panel         9. Inherited Flux classes
 *  10. Front page       11. Footer               12. Motion / responsive
 *
 * Sections 1-11 are this theme's own markup. Section 9 restyles the class
 * names that themes/default's module views already emit, which is what lets
 * every inherited view (item db, rankings, account pages, ...) come along.
 * ========================================================================== */


/* 1. Tokens ================================================================ */

:root {
	/* One system UI stack for everything -- nothing is downloaded, so the
	 * panel renders the same on a server with no outbound access. Headings
	 * are set apart by weight and tracking rather than by a second family. */
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--font-display: var(--font-body);
	--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

	--gold: #f0b429;
	--gold-lit: #ffdc84;
	--gold-deep: #b3761a;
	--sky: #5cb7ff;
	--teal: #3fd0c9;
	--violet: #8b7bf0;

	--good: #35d39b;
	--warn: #ffb340;
	--bad: #ff5f6d;

	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 18px;
	--r-xl: 26px;

	--topbar-h: 68px;
	--shell-max: 1440px;
	--sidebar-w: 264px;

	--ease: cubic-bezier(.22, .61, .36, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --- dark (the theme's natural habitat) --- */
html[data-scheme="dark"] {
	--page: #05080f;
	--page-2: #0a1020;
	--glass: rgba(150, 180, 228, .065);
	--glass-2: rgba(150, 180, 228, .105);
	--glass-hi: rgba(255, 255, 255, .055);
	--edge: rgba(190, 214, 255, .14);
	--edge-soft: rgba(190, 214, 255, .07);
	--edge-lit: rgba(240, 180, 41, .38);

	--text: #e7edfb;
	--text-dim: #a8b7d4;
	--text-mute: #6f83a5;

	--field: rgba(6, 12, 26, .5);
	--field-focus: rgba(6, 12, 26, .78);

	--shadow-sm: 0 4px 14px rgba(2, 5, 14, .45);
	--shadow: 0 18px 44px rgba(2, 5, 14, .55);
	--shadow-lg: 0 34px 80px rgba(2, 5, 14, .68);

	--aurora-a: #1e4f9c;
	--aurora-b: #6a3fa0;
	--aurora-c: #0d6b74;
	--row-alt: rgba(150, 180, 228, .035);

	/* Gold as *text*. --gold-lit stays reserved for gradients and fills, which
	 * need to stay bright in both schemes; this one has to stay readable. */
	--gold-ink: #ffdc84;
	color-scheme: dark;
}

/* --- light --- */
html[data-scheme="light"] {
	--page: #e9eef7;
	--page-2: #f6f8fc;
	--glass: rgba(255, 255, 255, .62);
	--glass-2: rgba(255, 255, 255, .82);
	--glass-hi: rgba(255, 255, 255, .8);
	--edge: rgba(24, 46, 88, .12);
	--edge-soft: rgba(24, 46, 88, .07);
	--edge-lit: rgba(179, 118, 26, .45);

	--text: #14203a;
	--text-dim: #47597a;
	--text-mute: #74849f;

	--field: rgba(255, 255, 255, .78);
	--field-focus: #ffffff;

	--shadow-sm: 0 4px 14px rgba(24, 46, 88, .09);
	--shadow: 0 18px 40px rgba(24, 46, 88, .12);
	--shadow-lg: 0 34px 70px rgba(24, 46, 88, .16);

	--aurora-a: #7fb2f5;
	--aurora-b: #c0a8f0;
	--aurora-c: #86d8d4;
	--row-alt: rgba(24, 46, 88, .028);

	/* Amber rather than gold -- #ffdc84 is unreadable on a pale panel. */
	--gold-ink: #8a5d0f;
	color-scheme: light;
}


/* 2. Base / typography ===================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--topbar-h) + 16px);
	-webkit-text-size-adjust: 100%;
}

body.hm {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--text);
	background: var(--page);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

table { font-family: inherit; font-size: inherit; }

h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -.012em;
	color: var(--text);
	line-height: 1.25;
}

h2 {
	margin: 0 0 6px;
	font-size: 24px;
	letter-spacing: -.018em;
}

h3 {
	margin: 26px 0 10px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.005em;
	text-transform: none;
	color: var(--text);
	border: 0;
	padding-bottom: 8px;
	position: relative;
}

h3::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 46px; height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--gold), transparent);
}

h4 { margin: 0 0 4px; font-size: 16px; }

p { margin: 0 0 12px; }

a {
	color: var(--sky);
	text-decoration: none;
	transition: color .18s var(--ease);
}

a:hover { color: var(--gold-ink); }
a img { border: 0; }

strong { font-weight: 700; }
small { font-size: 12px; }

hr {
	border: 0;
	border-top: 1px solid var(--edge-soft);
	margin: 22px 0;
}

code, kbd, samp, pre { font-family: var(--font-mono); }

::selection { background: rgba(240, 180, 41, .3); color: var(--text); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: var(--glass-2);
	border-radius: 10px;
	border: 2px solid transparent;
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--edge); background-clip: padding-box; }

.hm-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 12px 18px;
	background: var(--gold);
	color: #1a1204;
	border-radius: 0 0 var(--r-md) 0;
	font-weight: 700;
}
.hm-skip:focus { left: 0; color: #1a1204; }

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	border-radius: 4px;
}


/* 3. Animated backdrop ===================================================== */

.hm-backdrop {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	background:
		radial-gradient(1200px 620px at 78% -8%, color-mix(in srgb, var(--aurora-a) 26%, transparent), transparent 70%),
		linear-gradient(180deg, var(--page-2), var(--page) 58%);
}

/* color-mix is recent; this keeps older engines on a plain gradient. */
@supports not (background: color-mix(in srgb, red 10%, blue)) {
	.hm-backdrop { background: linear-gradient(180deg, var(--page-2), var(--page) 58%); }
}

.hm-backdrop__aurora {
	position: absolute;
	display: block;
	width: 62vw;
	height: 62vw;
	max-width: 900px;
	max-height: 900px;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .38;
	will-change: transform;
}

.hm-backdrop__aurora--a {
	top: -22vw; left: -14vw;
	background: radial-gradient(circle at 40% 40%, var(--aurora-a), transparent 68%);
	animation: hm-drift-a 26s var(--ease) infinite alternate;
}

.hm-backdrop__aurora--b {
	top: 12vh; right: -20vw;
	background: radial-gradient(circle at 55% 45%, var(--aurora-b), transparent 68%);
	animation: hm-drift-b 32s var(--ease) infinite alternate;
	opacity: .3;
}

.hm-backdrop__aurora--c {
	bottom: -26vw; left: 26vw;
	background: radial-gradient(circle at 50% 50%, var(--aurora-c), transparent 68%);
	animation: hm-drift-c 38s var(--ease) infinite alternate;
	opacity: .26;
}

@keyframes hm-drift-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(9vw, 7vh, 0) scale(1.14); }
}
@keyframes hm-drift-b {
	from { transform: translate3d(0, 0, 0) scale(1.08); }
	to   { transform: translate3d(-11vw, 9vh, 0) scale(.92); }
}
@keyframes hm-drift-c {
	from { transform: translate3d(0, 0, 0) scale(.95); }
	to   { transform: translate3d(7vw, -8vh, 0) scale(1.2); }
}

/* Faint rune grid -- gives the glass something to refract. */
.hm-backdrop__grid {
	position: absolute;
	inset: -1px;
	display: block;
	background-image:
		linear-gradient(var(--edge-soft) 1px, transparent 1px),
		linear-gradient(90deg, var(--edge-soft) 1px, transparent 1px);
	background-size: 68px 68px;
	-webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 12%, transparent 78%);
	mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 12%, transparent 78%);
	opacity: .55;
}

.hm-backdrop__vignette {
	position: absolute;
	inset: 0;
	display: block;
	background: radial-gradient(ellipse 120% 80% at 50% 42%, transparent 42%, rgba(0, 0, 0, .42) 100%);
}

html[data-scheme="light"] .hm-backdrop__vignette {
	background: radial-gradient(ellipse 120% 80% at 50% 42%, transparent 48%, rgba(24, 46, 88, .1) 100%);
}


/* 4. Primitives ============================================================ */

.hm-ico {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

/* --- buttons --- */
.hm-btn,
input[type=submit],
input[type=button],
input[type=reset],
button.submit_button,
.submit_button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--text);
	background: var(--glass-2);
	border: 1px solid var(--edge);
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .16s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .18s var(--ease);
	-webkit-appearance: none;
	appearance: none;
}

.hm-btn:hover,
input[type=submit]:hover,
input[type=button]:hover,
input[type=reset]:hover,
.submit_button:hover {
	color: var(--text);
	transform: translateY(-2px);
	border-color: var(--edge-lit);
	box-shadow: var(--shadow-sm);
}

.hm-btn:active,
input[type=submit]:active,
input[type=button]:active,
input[type=reset]:active { transform: translateY(0); }

.hm-btn--gold,
input[type=submit] {
	color: #22180a;
	background: linear-gradient(160deg, var(--gold-lit), var(--gold) 45%, var(--gold-deep));
	border-color: rgba(255, 232, 168, .55);
	box-shadow: 0 8px 22px rgba(240, 180, 41, .22);
}

.hm-btn--gold:hover,
input[type=submit]:hover {
	color: #22180a;
	box-shadow: 0 14px 32px rgba(240, 180, 41, .34);
}

.hm-btn--ghost {
	background: var(--glass);
	color: var(--text);
}

.hm-btn--sm { padding: 8px 14px; font-size: 12.5px; }

/* --- icon button --- */
.hm-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	color: var(--text-dim);
	background: var(--glass);
	border: 1px solid var(--edge-soft);
	border-radius: 50%;
	cursor: pointer;
	transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}

.hm-icon-btn:hover {
	color: var(--gold-ink);
	border-color: var(--edge-lit);
	transform: translateY(-1px);
}

.hm-icon-btn .hm-ico { width: 18px; height: 18px; }

/* --- chips --- */
.hm-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	font-size: 12.5px;
	color: var(--text-dim);
	background: var(--glass);
	border: 1px solid var(--edge-soft);
	border-radius: 999px;
	white-space: nowrap;
}

.hm-chip strong { color: var(--text); font-variant-numeric: tabular-nums; }
.hm-chip--gold { border-color: var(--edge-lit); }
.hm-chip--gold .hm-ico, .hm-chip--gold strong { color: var(--gold-ink); }

/* --- fields --- */
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=search],
input[type=date],
input[type=url],
input[type=tel],
input[type=file],
select,
textarea {
	font-family: var(--font-body);
	font-size: 13.5px;
	color: var(--text);
	background: var(--field);
	border: 1px solid var(--edge);
	border-radius: var(--r-sm);
	padding: 9px 12px;
	outline: none;
	max-width: 100%;
	transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}

select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 32px;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* The arrow is painted with currentColor, so re-assert the field background. */
select { background-color: var(--field); }
select option { color: #14203a; background: #ffffff; }
html[data-scheme="dark"] select option { color: #e7edfb; background: #0f172b; }

textarea {
	width: 100%;
	max-width: 560px;
	min-height: 130px;
	line-height: 1.55;
	resize: vertical;
}

input:focus, select:focus, textarea:focus {
	border-color: var(--edge-lit);
	background: var(--field-focus);
	box-shadow: 0 0 0 3px rgba(240, 180, 41, .14);
}

input::placeholder, textarea::placeholder { color: var(--text-mute); }

input[type=checkbox], input[type=radio] {
	width: 15px;
	height: 15px;
	accent-color: var(--gold);
	vertical-align: middle;
	cursor: pointer;
}

label { color: var(--text-dim); }
label:hover { cursor: pointer; }

.hm-field {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--text-mute);
}

.hm-field--inline > span {
	text-transform: uppercase;
	letter-spacing: .09em;
	font-size: 10.5px;
	font-weight: 700;
}

.hm-field select { padding: 7px 30px 7px 11px; font-size: 12.5px; }

/* --- section head --- */
.hm-section-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}

.hm-section-head h2 { margin: 0; }

.hm-rule {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--edge), transparent);
}

.hm-lead { font-size: 15px; color: var(--text-dim); }


/* 5. Topbar ================================================================ */

.hm-topbar {
	position: sticky;
	top: 0;
	z-index: 60;
	height: var(--topbar-h);
	border-bottom: 1px solid transparent;
	transition: height .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}

.hm-topbar.is-stuck {
	height: 58px;
	background: var(--glass-2);
	border-bottom-color: var(--edge-soft);
	box-shadow: var(--shadow-sm);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	backdrop-filter: blur(18px) saturate(150%);
}

.hm-topbar__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	max-width: var(--shell-max);
	margin: 0 auto;
	padding: 0 24px;
}

.hm-topbar__spacer { flex: 1; }

.hm-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	color: var(--text);
	text-decoration: none;
	white-space: nowrap;
}

.hm-brand__mark {
	width: 38px;
	height: 38px;
	transition: transform .5s var(--ease-out), filter .3s var(--ease);
	filter: drop-shadow(0 3px 10px rgba(240, 180, 41, .28));
}

.hm-brand:hover .hm-brand__mark { transform: rotate(-8deg) scale(1.06); }

.hm-brand__text { display: flex; flex-direction: column; line-height: 1.15; }

.hm-brand__text strong {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.005em;
	background: linear-gradient(100deg, var(--gold-lit), var(--gold) 55%, var(--gold-deep));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* The bright gold wordmark vanishes on a pale background. */
html[data-scheme="light"] .hm-brand__text strong {
	background: linear-gradient(100deg, #a3730f, #6b4708 70%);
	-webkit-background-clip: text;
	background-clip: text;
}

.hm-brand__text small {
	font-size: 10px;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--text-mute);
}

.hm-quicknav {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: 18px;
}

.hm-quicknav a {
	position: relative;
	padding: 8px 13px;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-dim);
	border-radius: var(--r-sm);
	transition: color .18s var(--ease), background .18s var(--ease);
}

.hm-quicknav a::after {
	content: "";
	position: absolute;
	left: 13px; right: 13px; bottom: 4px;
	height: 1.5px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--gold), var(--gold-lit));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .28s var(--ease-out);
}

.hm-quicknav a:hover { color: var(--text); background: var(--glass); }
.hm-quicknav a:hover::after { transform: scaleX(1); }

.hm-account { display: flex; align-items: center; gap: 9px; }

.hm-account__chip {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 14px 5px 5px;
	color: var(--text);
	background: var(--glass);
	border: 1px solid var(--edge-soft);
	border-radius: 999px;
	transition: border-color .2s var(--ease), transform .2s var(--ease);
}

.hm-account__chip:hover { color: var(--text); border-color: var(--edge-lit); transform: translateY(-1px); }

.hm-account__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: none;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	color: #22180a;
	background: linear-gradient(150deg, var(--gold-lit), var(--gold-deep));
	border-radius: 50%;
}

.hm-account__name {
	font-size: 13px;
	font-weight: 600;
	max-width: 130px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* scheme toggle: swap the two glyphs */
.hm-scheme-toggle .hm-ico { position: absolute; transition: opacity .25s var(--ease), transform .35s var(--ease-out); }
.hm-scheme-toggle { position: relative; }
html[data-scheme="dark"] .hm-ico--sun { opacity: 0; transform: rotate(-60deg) scale(.6); }
html[data-scheme="dark"] .hm-ico--moon { opacity: 1; transform: none; }
html[data-scheme="light"] .hm-ico--moon { opacity: 0; transform: rotate(60deg) scale(.6); }
html[data-scheme="light"] .hm-ico--sun { opacity: 1; transform: none; }

/* burger */
.hm-navtoggle { display: none; }

.hm-burger { display: block; width: 17px; }
.hm-burger i {
	display: block;
	height: 1.8px;
	margin: 3.6px 0;
	background: currentColor;
	border-radius: 2px;
	transition: transform .3s var(--ease-out), opacity .2s var(--ease);
}
.hm-navtoggle[aria-expanded="true"] .hm-burger i:nth-child(1) { transform: translateY(5.4px) rotate(45deg); }
.hm-navtoggle[aria-expanded="true"] .hm-burger i:nth-child(2) { opacity: 0; }
.hm-navtoggle[aria-expanded="true"] .hm-burger i:nth-child(3) { transform: translateY(-5.4px) rotate(-45deg); }


/* 6. Hero + status strip =================================================== */

.hm-hero {
	position: relative;
	z-index: 1;
	margin-top: calc(var(--topbar-h) * -1);
	padding: calc(var(--topbar-h) + 62px) 24px 52px;
	overflow: hidden;
	isolation: isolate;
}

/* One art layer per slide, stacked and crossfaded. */
.hm-hero__arts {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.hm-hero__art {
	position: absolute;
	inset: -10% 0 -14%;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	opacity: 0;
	transition: opacity .8s var(--ease);
	will-change: transform;
}

.hm-hero__art.is-active { opacity: .8; }

html[data-scheme="light"] .hm-hero__art.is-active { opacity: .3; }

.hm-hero__fade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, transparent 30%, var(--page) 96%);
}

.hm-hero__inner {
	max-width: var(--shell-max);
	margin: 0 auto;
	text-align: center;
}

.hm-hero__eyebrow {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--gold-ink);
}

.hm-hero__title {
	margin: 0 0 16px;
	font-size: clamp(34px, 5.6vw, 64px);
	font-weight: 800;
	letter-spacing: -.03em;
	background: linear-gradient(180deg, #fff 8%, var(--gold-lit) 55%, var(--gold-deep) 118%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 14px 46px rgba(240, 180, 41, .18);
}

html[data-scheme="light"] .hm-hero__title {
	background: linear-gradient(180deg, #2b3a5c 8%, #8a6a1f 60%, var(--gold-deep) 120%);
	-webkit-background-clip: text;
	background-clip: text;
}

.hm-hero__lead {
	max-width: 620px;
	margin: 0 auto 30px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--text-dim);
}

.hm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-bottom: 34px;
}

.hm-hero__actions .hm-btn { padding: 14px 28px; font-size: 14px; }

/* --- slides ---
 * All slides share one grid cell, so the track is as tall as the tallest and
 * nothing jumps when the active slide changes. */
.hm-slides { display: grid; }

.hm-slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility .5s;
}

.hm-slide.is-active { opacity: 1; visibility: visible; transform: none; }

/* Only one slide? Then it is just a hero, not a carousel. */
.hm-slides > .hm-slide:only-child { opacity: 1; visibility: visible; transform: none; }

.hm-slide--image { justify-self: center; max-width: 1100px; width: 100%; }

.hm-slide__imagelink { display: block; color: inherit; }

.hm-slide__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-lg);
	border: 1px solid var(--edge-soft);
	box-shadow: var(--shadow);
}

.hm-slide__caption {
	margin: 14px 0 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--text-dim);
}

.hm-slide__imagelink:hover .hm-slide__caption { color: var(--gold-ink); }

/* news slide */
.hm-hero__news {
	list-style: none;
	max-width: 640px;
	margin: 0 auto 26px;
	padding: 10px;
	text-align: left;
	background: var(--glass);
	border: 1px solid var(--edge-soft);
	border-radius: var(--r-lg);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
}

.hm-hero__news li + li { border-top: 1px solid var(--edge-soft); }

.hm-hero__news-row {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 10px 14px;
	color: var(--text-dim);
	border-radius: var(--r-sm);
	transition: color .18s var(--ease), background .2s var(--ease);
}

a.hm-hero__news-row:hover { color: var(--text); background: var(--glass-hi); }

.hm-hero__news-title {
	flex: 1;
	min-width: 0;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hm-hero__news time {
	flex: none;
	font-size: 11px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--text-mute);
	font-variant-numeric: tabular-nums;
}

/* --- slider controls --- */
.hm-hero__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 0 28px;
}

.hm-hero__arrow { width: 34px; height: 34px; }
.hm-hero__arrow .hm-ico { width: 16px; height: 16px; }

.hm-dots { display: flex; align-items: center; gap: 8px; }

.hm-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.hm-dot span {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--text-mute);
	opacity: .55;
	transition: width .3s var(--ease-out), background .25s var(--ease), opacity .25s var(--ease);
}

.hm-dot:hover span { opacity: .9; }

.hm-dot.is-active span {
	width: 22px;
	background: var(--gold);
	opacity: 1;
}

/* status strip */
.hm-statusbar {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 9px;
	background: var(--glass);
	border: 1px solid var(--edge-soft);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-sm);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
}

.hm-stat {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px;
	color: var(--text);
	border-radius: 999px;
	transition: background .2s var(--ease);
}

a.hm-stat:hover { background: var(--glass-2); color: var(--text); }

.hm-stat__body { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.hm-stat__body strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.hm-stat__body small { font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--text-mute); }

.hm-stat__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: none;
	background: var(--text-mute);
}

.hm-stat--state.is-up .hm-stat__dot {
	background: var(--good);
	box-shadow: 0 0 0 0 rgba(53, 211, 155, .6);
	animation: hm-pulse 2.4s var(--ease) infinite;
}
.hm-stat--state.is-partial .hm-stat__dot { background: var(--warn); }
.hm-stat--state.is-down .hm-stat__dot { background: var(--bad); }

@keyframes hm-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(53, 211, 155, .55); }
	70%  { box-shadow: 0 0 0 9px rgba(53, 211, 155, 0); }
	100% { box-shadow: 0 0 0 0 rgba(53, 211, 155, 0); }
}

.hm-statusbar__stamp {
	padding: 0 14px 0 6px;
	font-size: 10.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--text-mute);
}


/* 7. Shell / sidebar ======================================================= */

.hm-shell {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
	gap: 24px;
	max-width: var(--shell-max);
	margin: 0 auto;
	padding: 28px 24px 64px;
	align-items: start;
}

body.hm--home .hm-shell { padding-top: 8px; }

.hm-sidebar {
	position: sticky;
	top: calc(var(--topbar-h) + 14px);
	max-height: calc(100vh - var(--topbar-h) - 34px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 2px;
}

.hm-sidebar-scrim { display: none; }

.hm-nav {
	padding: 10px;
	background: var(--glass);
	border: 1px solid var(--edge-soft);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
}

.hm-nav + .hm-nav { margin-top: 14px; }

.hm-nav--admin {
	border-color: var(--edge-lit);
	background: linear-gradient(180deg, rgba(240, 180, 41, .09), var(--glass) 60%);
}

.hm-nav__head {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 10px 12px;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--text-mute);
	background: none;
	border: 0;
	border-radius: var(--r-sm);
	text-align: left;
}

.hm-nav__toggle { cursor: pointer; transition: color .18s var(--ease), background .18s var(--ease); }
.hm-nav__toggle:hover { color: var(--text); background: var(--glass-hi); }

/* The admin heading carries a badge as well as a label, so it needs the
 * label to shrink rather than wrap mid-word in a 264px column. */
.hm-nav--admin .hm-nav__head { gap: 8px; letter-spacing: .08em; }
.hm-nav--admin .hm-nav__head > span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hm-nav__ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hm-nav__head > span:not(.hm-nav__badge) { flex: 1; }

.hm-nav__caret {
	width: 14px; height: 14px; flex: none;
	fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
	transition: transform .3s var(--ease-out);
}

.hm-nav__toggle[aria-expanded="false"] .hm-nav__caret { transform: rotate(-90deg); }

.hm-nav__badge {
	flex: none;
	padding: 3px 8px;
	font-family: var(--font-body);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .1em;
	color: #22180a;
	background: linear-gradient(150deg, var(--gold-lit), var(--gold));
	border-radius: 999px;
}

.hm-nav__list {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
	overflow: hidden;
	transition: height .3s var(--ease-out), opacity .25s var(--ease);
}

.hm-nav__list[hidden] { display: none; }

.hm-nav__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px 8px 20px;
	font-size: 13.5px;
	color: var(--text-dim);
	border-radius: var(--r-sm);
	transition: color .18s var(--ease), background .2s var(--ease), padding-left .2s var(--ease);
}

.hm-nav__link::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 50%;
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background: currentColor;
	opacity: .32;
	transition: opacity .2s var(--ease), transform .25s var(--ease-out), background .2s var(--ease);
}

.hm-nav__link:hover {
	color: var(--text);
	background: var(--glass-hi);
	padding-left: 24px;
}

.hm-nav__link:hover::before { opacity: .8; }

.hm-nav__link.is-active {
	color: var(--text);
	font-weight: 600;
	background: linear-gradient(90deg, rgba(240, 180, 41, .16), transparent 82%);
	box-shadow: inset 2px 0 0 var(--gold);
}

.hm-nav__link.is-active::before { background: var(--gold); opacity: 1; transform: scale(1.35); }

.hm-nav__ext { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }

.hm-nav--admin .hm-nav__link:hover { color: var(--gold-ink); }

.hm-main { min-width: 0; }


/* 8. Content panel ========================================================= */

.hm-panel {
	position: relative;
	padding: 30px 32px 34px;
	background: var(--glass);
	border: 1px solid var(--edge-soft);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow);
	-webkit-backdrop-filter: blur(20px) saturate(145%);
	backdrop-filter: blur(20px) saturate(145%);
	overflow: hidden;
}

/* Specular edge along the top -- the thing that sells "glass". */
.hm-panel::before {
	content: "";
	position: absolute;
	top: 0; left: 8%; right: 8%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--edge), transparent);
	pointer-events: none;
}

.hm-panel > h2:first-child,
.hm-panel > .hm-section-head:first-child,
.hm-panel > .hm-empty:first-child { margin-top: 0; }

.hm-panel > *:last-child { margin-bottom: 0; }

/* Sub-menu tabs */
.hm-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--edge-soft);
}

.hm-tabs__item {
	padding: 7px 15px;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-dim);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	transition: color .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}

.hm-tabs__item:hover { color: var(--text); background: var(--glass-hi); }

.hm-tabs__item.is-active {
	color: #22180a;
	font-weight: 700;
	background: linear-gradient(150deg, var(--gold-lit), var(--gold));
	border-color: rgba(255, 232, 168, .5);
}

/* Page actions */
.hm-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 10px 14px;
	background: var(--glass-hi);
	border: 1px dashed var(--edge-soft);
	border-radius: var(--r-md);
}

.hm-actions__label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-mute);
	margin-right: 4px;
}

.hm-actions__item {
	padding: 5px 12px;
	font-size: 12.5px;
	color: var(--text-dim);
	background: var(--glass);
	border: 1px solid var(--edge-soft);
	border-radius: 999px;
	transition: color .18s var(--ease), border-color .2s var(--ease), transform .18s var(--ease);
}

.hm-actions__item:hover { color: var(--gold-ink); border-color: var(--edge-lit); transform: translateY(-1px); }

/* Login strip */
.hm-loginbox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
	padding: 12px 18px;
	background: var(--glass);
	border: 1px solid var(--edge-soft);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
}

.hm-loginbox__id { display: flex; align-items: center; gap: 11px; }
.hm-loginbox__who { display: flex; flex-direction: column; line-height: 1.3; }
.hm-loginbox__who a { font-weight: 700; font-size: 14px; color: var(--text); }
.hm-loginbox__who a:hover { color: var(--gold-ink); }
.hm-loginbox__who small { font-size: 11.5px; color: var(--text-mute); }

.hm-loginbox__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }

.hm-loginbox__admin {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding-top: 11px;
	border-top: 1px solid var(--edge-soft);
	font-size: 12.5px;
}

.hm-loginbox__admin a { color: var(--text-dim); }
.hm-loginbox__admin a:hover { color: var(--gold-ink); }
.hm-loginbox__admin a:not(:last-child)::after { content: "\00b7"; margin-left: 8px; color: var(--text-mute); }


/* 9. Inherited Flux classes ================================================ */

/* --- callouts --- */
.message, .notice, .red, .green, .note {
	display: block;
	margin: 0 0 16px;
	padding: 13px 17px;
	font-size: 14px;
	font-weight: 500;
	border-radius: var(--r-md);
	border: 1px solid var(--edge-soft);
	border-left-width: 3px;
	background: var(--glass-hi);
	color: var(--text);
}

.message { border-left-color: var(--sky); }
.notice  { border-left-color: var(--sky); color: var(--text); }
.red     { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--glass-hi)); }
.green   { border-left-color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--glass-hi)); }
.note    { border-left-color: var(--warn); font-style: normal; color: var(--text-dim); }

@supports not (background: color-mix(in srgb, red 10%, blue)) {
	.red   { background: rgba(255, 95, 109, .12); }
	.green { background: rgba(53, 211, 155, .12); }
}

.important { font-size: 15px; color: var(--text); }
.important .server-name { font-weight: 700; color: var(--gold-ink); }

.module-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.center { text-align: center; }
.clear { clear: both; }

/* --- status words --- */
.up      { font-weight: 700; color: var(--good); text-transform: uppercase; letter-spacing: .05em; }
.down    { font-weight: 700; color: var(--bad);  text-transform: uppercase; letter-spacing: .05em; }
.online  { color: var(--good); font-weight: 600; }
.offline { color: var(--text-mute); }

.state-pending { color: var(--warn); font-weight: 600; }
.state-banned  { color: var(--bad); font-weight: 600; }
.state-permanently-banned { color: var(--bad); font-weight: 800; text-transform: uppercase; }
.state-unknown { color: var(--text-mute); }

.not-applicable { font-style: italic; color: var(--text-mute); opacity: .75; }
.keyword { color: var(--gold-ink); font-style: normal; font-weight: 600; }
.hold-hours { color: var(--warn); font-style: italic; }

/* --- tables ---------------------------------------------------------------
 * Wide tables get wrapped in .hm-tablewrap by js/flux.hm.js so they can scroll
 * sideways on narrow screens instead of blowing out the layout. */

.hm-tablewrap {
	max-width: 100%;
	margin-bottom: 16px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	border-radius: var(--r-md);
}

.horizontal-table,
.vertical-table,
.woe-table,
#server_status,
.install_table {
	width: 100%;
	border-spacing: 0;
	border-collapse: separate;
	background: transparent;
	border: 1px solid var(--edge-soft);
	border-radius: var(--r-md);
	overflow: hidden;
}

.vertical-table { width: 100%; }

.horizontal-table th,
.vertical-table th,
.woe-table th,
#server_status th,
.install_table th {
	padding: 11px 14px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: left;
	color: var(--text-mute);
	background: var(--glass-hi);
	border: 0;
	border-bottom: 1px solid var(--edge-soft);
	white-space: nowrap;
}

.horizontal-table td,
.vertical-table td,
.woe-table td,
#server_status td,
.install_table td {
	padding: 11px 14px;
	font-size: 13.5px;
	color: var(--text-dim);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--edge-soft);
	vertical-align: middle;
}

.horizontal-table tr:last-child td,
.vertical-table tr:last-child td,
.woe-table tr:last-child td,
#server_status tr:last-child td { border-bottom: 0; }

.horizontal-table tbody tr,
.woe-table tbody tr { transition: background .18s var(--ease); }

.horizontal-table tr:nth-child(even) td { background: var(--row-alt); }
.horizontal-table tr:hover td { background: var(--glass-hi); color: var(--text); }

/* vertical tables are label/value pairs, not lists -- no zebra, no hover */
.vertical-table th {
	width: 1%;
	white-space: nowrap;
	text-align: right;
	vertical-align: middle;
	background: var(--glass-hi);
}

/* ...except when they are not. Several views (account storage, guild members,
 * cart) use .vertical-table for a real data grid with a row of column
 * headings. js/flux.hm.js detects that shape -- a first row holding more than
 * one <th> -- and tags it, so those get list styling instead of label styling. */
.vertical-table.hm-datagrid { width: 100%; }

.vertical-table.hm-datagrid th {
	width: auto;
	text-align: left;
	vertical-align: bottom;
}

.vertical-table.hm-datagrid tr:nth-child(even) td { background: var(--row-alt); }
.vertical-table.hm-datagrid tr:hover td { background: var(--glass-hi); color: var(--text); }

/* Views hand-align these cells; do not fight them. */
.horizontal-table td[align=right], .vertical-table td[align=right] { text-align: right; }
.horizontal-table td[align=center], .vertical-table td[align=center] { text-align: center; }

.vertical-table label { display: block; padding: 0; }
.vertical-table form { margin: 0; padding: 0; }
.vertical-table .td-action { text-align: right; }

.td-checkbox { text-align: center; }
.td-action, .action { color: var(--text-mute); }

.action a, .action span.anchor, .block-link {
	color: var(--sky);
	border: 0;
	cursor: pointer;
}
.action a:hover, .action span.anchor:hover, .block-link:hover { color: var(--gold-ink); }

.block-link { display: block; padding: 3px 0; }
.button-action { padding: 10px 0 0; text-align: left; }

.empty-row { display: none; }

/* Flat fill, not a gradient: a gradient restarts inside every cell and reads
 * as vertical banding across the row. The gold rail goes on the first cell. */
.top-ranked td {
	font-weight: 700;
	color: var(--text);
	background: rgba(240, 180, 41, .12) !important;
}

.top-ranked td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.top-ranked a { color: var(--gold-ink); border: 0; }

.item-drop-mvp td  { background: rgba(255, 95, 109, .08) !important; color: var(--text); }
.item-drop-card td { background: rgba(92, 183, 255, .08) !important; color: var(--text); }
.equipped td       { background: rgba(63, 208, 201, .08) !important; }

.mvp {
	display: inline-block;
	padding: 1px 6px;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .08em;
	color: #2a0a0d;
	background: var(--bad);
	border-radius: 999px;
	vertical-align: middle;
}

.sortable { color: var(--text-mute); text-decoration: none; border-bottom: 1px dotted var(--edge); }
.sortable:hover { color: var(--gold-ink); border-bottom-color: var(--gold); }

/* The status view puts the world name in a <th> at the start of each row. It
 * is a row label, not a column heading, so it must not pick up the shaded
 * heading fill -- on the light scheme that read as a white block. */
#server_status th.server {
	color: var(--text);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	background: transparent;
	vertical-align: middle;
}

#server_status .status { text-align: center; }
#server_status td.status { text-align: center; }

/* The first row is column labels built from <td class="status">, so give that
 * row the heading treatment the markup does not ask for. */
#server_status tr:first-child td {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-mute);
	background: var(--glass-hi);
	white-space: nowrap;
}

.woe-table .server { font-weight: 700; color: var(--text); }
.woe-table .time { font-style: normal; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.woe-table td { font-size: 13.5px; }

.character-stats { border-collapse: collapse; width: auto; border: 0; }
.character-stats td { padding: 4px 16px 4px 0; border: 0; text-align: center; background: none; }
.character-stats .stat-name {
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-mute);
}
.character-stats .stat-value { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

.job-classes { border-spacing: 0; }
.job-classes td { padding: 2px 12px 2px 0; border: 0; border-right: 1px solid var(--edge-soft); background: none; }

.install_table td { width: auto; text-align: center; }
.created { color: var(--good); }
.missing { color: var(--bad); }

.normalslotted .equipped { color: var(--text); }
.overslotted1 { color: #52e07a; }
.overslotted2 { color: var(--sky); }
.overslotted3 { color: var(--warn); }
.overslotted4 { color: var(--violet); }

.monster-mode { margin: 0; padding: 0; list-style: none; }
.monster-mode li { padding: 3px 0 3px 14px; position: relative; border-bottom: 1px solid var(--edge-soft); }
.monster-mode li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: .7; }

/* --- forms --- */
.generic-form,
.generic-form-div {
	width: auto;
	padding: 22px 24px;
	background: var(--glass-hi);
	border: 1px solid var(--edge-soft);
	border-radius: var(--r-md);
}

.generic-form-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; }

.generic-form-table th {
	width: 1%;
	padding: 0 16px 0 0;
	font-weight: 600;
	font-size: 13px;
	text-align: right;
	white-space: nowrap;
	color: var(--text-dim);
	background: none;
	border: 0;
	vertical-align: middle;
}

.generic-form-table th label { display: block; padding: 0; }

.generic-form-table td {
	padding: 3px 0;
	background: none;
	border: 0;
	color: var(--text-dim);
	vertical-align: middle;
}

.generic-form-table td > div { display: block; padding: 4px 0; }

/* ...except the two that are widgets, not layout wrappers. */
.generic-form-table td > div.security-code { display: inline-block; padding: 6px; }
.generic-form-table td > div.g-recaptcha { display: inline-block; padding: 0; }
.generic-form-table td p { margin: 4px 0; color: var(--text-dim); }
.generic-form-table td input[type=checkbox] { display: inline-block; margin: 0 6px 0 0; }
.generic-form-table td input[type=text],
.generic-form-table td input[type=password],
.generic-form-table td select { min-width: 240px; }

#register_form input[type=text],
#register_form input[type=password],
#login_form input[type=text],
#login_form input[type=password],
#register_form select,
#login_form select { width: 260px; max-width: 100%; }

.security-code {
	display: inline-block;
	vertical-align: middle;
	margin: 6px 10px 6px 0;
	padding: 6px;
	width: auto;
	height: auto;
	background: var(--field);
	border: 1px solid var(--edge-soft);
	border-radius: var(--r-sm);
	line-height: 0;
}
.security-code img { border-radius: 4px; display: block; }

.g-recaptcha { margin: 6px 0; }

.multi-select { width: 100%; }
.script { width: 100%; }

/* search panels */
.toggler {
	margin: 0 0 12px;
	font-style: normal;
	font-weight: 600;
}

.toggler a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 15px;
	font-size: 12.5px;
	color: var(--text-dim);
	background: var(--glass-hi);
	border: 1px solid var(--edge-soft);
	border-radius: 999px;
	transition: color .18s var(--ease), border-color .2s var(--ease);
}
.toggler a::before { content: "\1F50D"; font-size: 11px; filter: grayscale(1); }
.toggler a:hover { color: var(--gold-ink); border-color: var(--edge-lit); }

.search-form { display: none; }

.search-form, .search-form2 {
	margin: 0 0 18px;
	padding: 16px 18px;
	background: var(--glass-hi);
	border: 1px solid var(--edge-soft);
	border-radius: var(--r-md);
}

.search-form p, .search-form2 p {
	margin: 0 0 10px;
	padding: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-mute);
	text-align: left;
	border-bottom: 1px solid var(--edge-soft);
}

.search-form label, .search-form2 label {
	display: inline-block;
	margin: 0 6px 4px 0;
	font-size: 12px;
	font-style: normal;
	color: var(--text-dim);
}

.search-form input[type=text], .search-form2 input[type=text] {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 6px 9px;
	font-size: 12.5px;
	width: 130px;
}

.search-form select, .search-form2 select { margin: 0 6px 6px 0; padding: 6px 28px 6px 9px; font-size: 12.5px; }
.search-form input[type=checkbox], .search-form2 input[type=checkbox] { margin: 0 4px 6px 0; }

.search-form input[type=submit], .search-form2 input[type=submit],
.search-form input[type=button], .search-form2 input[type=button],
.search-form input[type=reset], .search-form2 input[type=reset] {
	margin: 0 6px 6px 0;
	padding: 8px 16px;
	font-size: 12.5px;
}

/* --- info + pagination --- */
.info-text {
	margin: 0 0 14px;
	padding: 10px 14px;
	font-size: 12.5px;
	color: var(--text-mute);
	background: var(--glass-hi);
	border: 1px solid var(--edge-soft);
	border-radius: var(--r-md);
	text-align: center;
}

.info-text-total, .info-text-results { font-weight: 700; color: var(--text); }

.pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-top: 22px;
	padding-top: 16px;
	color: var(--text-mute);
	text-align: center;
	border-top: 1px solid var(--edge-soft);
}

.pages a, .pages .page-num {
	display: inline-block;
	min-width: 32px;
	padding: 6px 9px;
	font-size: 12.5px;
	color: var(--text-dim);
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	transition: color .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}

.pages a:hover { color: var(--text); background: var(--glass-hi); border-color: var(--edge-soft); }

.pages .current-page {
	font-weight: 700;
	color: #22180a;
	background: linear-gradient(150deg, var(--gold-lit), var(--gold));
	border-color: rgba(255, 232, 168, .5);
}

.pages .page-prev, .pages .page-next { color: var(--sky); }

.jump-to-page { margin-top: 12px; font-size: 12px; text-align: center; color: var(--text-mute); }
.jump-to-page input { padding: 5px 8px; font-size: 12px; width: 70px; }

/* --- code-ish --- */
.request, .fs-path {
	display: inline-block;
	padding: 4px 9px;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--gold-ink);
	background: var(--field);
	border: 1px solid var(--edge-soft);
	border-radius: var(--r-sm);
	word-break: break-all;
}

.raw-txn-log {
	padding: 14px 16px;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-dim);
	background: var(--field);
	border: 1px solid var(--edge-soft);
	border-radius: var(--r-md);
	width: 100%;
	overflow: auto;
}

.script-line { font-family: var(--font-mono); display: flex; }
.script-line-num {
	display: inline-block;
	min-width: 46px;
	padding: 4px 10px;
	color: var(--text-mute);
	background: var(--glass-hi);
	border-right: 1px solid var(--edge-soft);
	text-align: right;
	user-select: none;
}
.script-line-code { display: inline-block; padding: 4px 12px; white-space: pre-wrap; }

.block { display: block; width: 100%; max-width: 520px; min-height: 44px; }
.block.reason, .reason { color: var(--text-dim); }

/* --- shop / cart / donate --- */
.shop-table { width: 100%; border-spacing: 0 12px; border-collapse: separate; color: var(--text); }

.shop-table td {
	padding: 16px;
	background: var(--glass-hi);
	border: 1px solid var(--edge-soft);
	border-top-width: 1px;
	border-bottom-width: 1px;
	transition: border-color .2s var(--ease), transform .2s var(--ease);
}

.shop-table tr td:first-child { border-radius: var(--r-md) 0 0 var(--r-md); border-right: 0; }
.shop-table tr td:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; border-left: 0; }
.shop-table tr:hover td { border-color: var(--edge-lit); }

.shop-item-image { width: 84px; height: auto; text-align: center; }
.shop-item-name {
	margin: 0 0 6px;
	padding: 0 0 6px;
	font-family: var(--font-display);
	font-size: 17px;
	color: var(--text);
	border-bottom: 1px solid var(--edge-soft);
}
.shop-item-info { text-align: left; color: var(--text-dim); }
.shop-item-cost-qty { width: 160px; text-align: center; color: var(--text-mute); }
.shop-server-name { color: var(--text-dim); }
.shop-item-action a { color: var(--sky); border: 0; }
.shop-item-action a:hover { color: var(--gold-ink); }

.cost { font-size: 16px; font-weight: 700; color: var(--gold-ink); text-transform: uppercase; }
.qty  { color: var(--text); }
.short { width: 60px; }

.current-shop-category { font-weight: 700; color: var(--gold-ink); }

.cart { width: 100%; }
.cart label { display: block; }
.cart h4 { margin: 12px 0 4px; font-size: 15px; }

.cart-items-text {
	margin: 0 0 12px;
	padding: 12px 16px;
	color: var(--text-dim);
	background: var(--glass-hi);
	border: 1px solid var(--edge-soft);
	border-radius: var(--r-md);
}

.cart-info-text, .cart-total-text, .checkout-info-text { margin: 0 0 6px; }
.cart-item-name { color: var(--text); border-bottom: 1px dotted var(--edge); }
.cart-item-count { font-size: 15px; font-weight: 700; color: var(--gold-ink); }
.cart-sub-total, .remaining-balance, .donation-amount { color: var(--text); font-weight: 700; }
.remove-from-cart { width: 100%; text-align: right; }

.checkout-text { font-size: 15px; font-weight: 700; }
.checkout-text a { border-bottom: 1px dotted var(--edge); }
.checkout-text a:hover { border-bottom-color: var(--gold); }

.enter-donation-amount { margin: 0 0 8px; font-size: 15px; }
.donation-amount-text { margin: 0; font-size: 17px; text-align: center; }
.credit-amount-text {
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-mute);
	text-align: center;
}
.credit-amount { color: var(--text-dim); }
.reset-amount-text { margin: 0; font-size: 11.5px; text-align: center; }
.exchange-rate { font-size: 15px; font-weight: 700; color: var(--gold-ink); }

.credit-balance {
	float: right;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px 14px;
	padding: 10px 18px;
	color: var(--text);
	background: linear-gradient(150deg, rgba(240, 180, 41, .16), var(--glass-hi));
	border: 1px solid var(--edge-lit);
	border-radius: 999px;
	box-shadow: var(--shadow-sm);
}

.credit-balance .balance-text {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-mute);
}

.credit-balance .balance-amount {
	font-size: 18px;
	font-weight: 800;
	color: var(--gold-ink);
	font-variant-numeric: tabular-nums;
}

/* --- guild emblem picker --- */
.emblem-server {
	margin: 0 0 10px;
	padding: 0 0 8px;
	font-size: 15px;
	border-bottom: 1px solid var(--edge-soft);
}
.emblem-server label { display: block; }


/* 10. Front page =========================================================== */

.hm-news { display: grid; gap: 16px; }

.hm-news__item {
	position: relative;
	padding: 22px 24px;
	background: var(--glass-hi);
	border: 1px solid var(--edge-soft);
	border-radius: var(--r-md);
	transition: transform .3s var(--ease-out), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.hm-news__item::before {
	content: "";
	position: absolute;
	left: 0; top: 18px; bottom: 18px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--gold), transparent);
	opacity: .6;
}

.hm-news__item:hover {
	transform: translateY(-3px);
	border-color: var(--edge-lit);
	box-shadow: var(--shadow-sm);
}

.hm-news__head { margin-bottom: 10px; }
.hm-news__head h4 { margin: 0 0 3px; font-size: 19px; }

.hm-news__meta {
	font-size: 11px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--text-mute);
}

.hm-news__body { color: var(--text-dim); line-height: 1.7; }
.hm-news__body img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.hm-news__body p:last-child { margin-bottom: 0; }

.hm-news__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--edge-soft);
}

.hm-news__edited { color: var(--text-mute); font-size: 11.5px; }

.hm-news__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--gold-ink);
}

.hm-news__link .hm-ico { width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
.hm-news__link:hover .hm-ico { transform: translateX(3px); }

.hm-empty {
	padding: 44px 24px;
	text-align: center;
	color: var(--text-dim);
}

.hm-empty__code {
	font-family: var(--font-display);
	font-size: 76px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	background: linear-gradient(180deg, var(--edge), transparent);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: .9;
}

.hm-empty h2 { margin-top: 4px; }
.hm-empty .hm-btn { margin-top: 10px; }

.hm-steps { margin: 16px 0; padding-left: 20px; }
.hm-steps li { margin-bottom: 10px; }
.hm-steps li p { margin: 0; }
.hm-signoff { text-align: right; color: var(--text-mute); }


/* 11. Footer + to-top ====================================================== */

.hm-footer {
	position: relative;
	z-index: 1;
	margin-top: auto;
	border-top: 1px solid var(--edge-soft);
	background: linear-gradient(180deg, transparent, var(--glass));
}

.hm-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	max-width: var(--shell-max);
	margin: 0 auto;
	padding: 22px 24px 30px;
}

.hm-footer__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--text-dim);
}

.hm-footer__brand img { opacity: .85; }

.hm-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

.hm-footer__links a {
	padding: 6px 12px;
	font-size: 12.5px;
	color: var(--text-dim);
	border-radius: var(--r-sm);
	transition: color .18s var(--ease), background .2s var(--ease);
}

.hm-footer__links a:hover { color: var(--text); background: var(--glass-hi); }

.hm-footer__sep { margin: 0 6px; opacity: .5; }

.hm-footer__prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-left: auto; }

.hm-footer__meta { width: 100%; padding-top: 14px; border-top: 1px solid var(--edge-soft); }
.hm-footer__meta p { margin: 2px 0; font-size: 11.5px; color: var(--text-mute); }
.hm-footer__meta a { color: var(--text-dim); }
.hm-footer__meta a:hover { color: var(--gold-ink); }
.hm-footer__meta strong { color: var(--text-dim); font-variant-numeric: tabular-nums; }

.hm-totop {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 70;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--text);
	background: var(--glass-2);
	border: 1px solid var(--edge);
	border-radius: 50%;
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .3s var(--ease), transform .3s var(--ease-out), border-color .2s var(--ease);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.hm-totop[hidden] { display: none; }
.hm-totop.is-shown { opacity: 1; transform: translateY(0); }
.hm-totop:hover { border-color: var(--edge-lit); }
.hm-totop svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* 12. Motion, responsive, print ============================================ */

/* Scroll reveal. Only armed once JS confirms it can un-arm them again. */
.hm-js [data-hm-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
}

.hm-js [data-hm-reveal].is-revealed { opacity: 1; transform: none; }

.hm-js [data-hm-reveal][data-hm-reveal-delay="1"] { transition-delay: .08s; }
.hm-js [data-hm-reveal][data-hm-reveal-delay="2"] { transition-delay: .16s; }
.hm-js [data-hm-reveal][data-hm-reveal-delay="3"] { transition-delay: .24s; }
.hm-js [data-hm-reveal][data-hm-reveal-delay="4"] { transition-delay: .32s; }

/* Rows stagger in as the table enters the viewport. */
.hm-js tr[data-hm-row] {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.hm-js tr[data-hm-row].is-revealed { opacity: 1; transform: none; }

/* --- large desktop --- */
@media (max-width: 1180px) {
	.hm-quicknav { display: none; }
}

/* --- tablet: sidebar becomes a drawer --- */
@media (max-width: 900px) {
	:root { --topbar-h: 60px; }

	.hm-navtoggle { display: inline-flex; }

	.hm-shell {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px 16px 52px;
	}

	.hm-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 90;
		width: min(300px, 86vw);
		max-height: none;
		height: 100%;
		padding: calc(var(--topbar-h) + 12px) 12px 24px;
		background: var(--page-2);
		border-right: 1px solid var(--edge-soft);
		box-shadow: var(--shadow-lg);
		transform: translateX(-102%);
		transition: transform .34s var(--ease-out);
		-webkit-backdrop-filter: blur(22px);
		backdrop-filter: blur(22px);
	}

	.hm-sidebar.is-open { transform: none; }

	.hm-sidebar-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 80;
		background: rgba(3, 6, 14, .58);
		opacity: 0;
		transition: opacity .3s var(--ease);
	}

	.hm-sidebar-scrim[hidden] { display: none; }
	.hm-sidebar-scrim.is-shown { opacity: 1; }

	body.hm-locked { overflow: hidden; }

	.hm-panel { padding: 22px 18px 26px; border-radius: var(--r-md); }
	.hm-hero { padding: calc(var(--topbar-h) + 52px) 18px 68px; }
	.hm-account__name { display: none; }
	.hm-account__chip { padding: 5px; }
	.hm-brand__text small { display: none; }
}

/* --- phone --- */
@media (max-width: 620px) {
	body.hm { font-size: 13.5px; }

	.hm-topbar__inner { padding: 0 14px; gap: 8px; }
	.hm-brand__text strong { font-size: 15px; }

	.hm-hero__lead { font-size: 14.5px; }
	.hm-hero__actions .hm-btn { flex: 1 1 auto; justify-content: center; }
	.hm-statusbar { width: 100%; justify-content: center; }

	.hm-hero__news-row { flex-direction: column; align-items: flex-start; gap: 3px; }
	.hm-hero__news-title { white-space: normal; }

	.hm-footer__links { width: 100%; }

	.hm-loginbox { flex-direction: column; align-items: flex-start; }
	.hm-loginbox__tools { margin-left: 0; width: 100%; }

	.credit-balance { float: none; margin: 0 0 14px; width: 100%; justify-content: space-between; }

	.hm-footer__prefs { margin-left: 0; width: 100%; }

	/* Stack label/field pairs instead of squeezing them. */
	.generic-form-table,
	.generic-form-table tbody,
	.generic-form-table tr,
	.generic-form-table th,
	.generic-form-table td { display: block; width: 100%; }

	.generic-form-table th { padding: 0 0 4px; text-align: left; }
	.generic-form-table tr { margin-bottom: 12px; }
	.generic-form-table td input[type=text],
	.generic-form-table td input[type=password],
	.generic-form-table td select { min-width: 0; width: 100%; }

	#register_form input[type=text],
	#register_form input[type=password],
	#login_form input[type=text],
	#login_form input[type=password],
	#register_form select,
	#login_form select { width: 100%; }

	.generic-form, .generic-form-div { padding: 16px; }

	.shop-table, .shop-table tbody, .shop-table tr, .shop-table td { display: block; width: 100%; }
	.shop-table tr { margin-bottom: 12px; }
	.shop-table tr td:first-child, .shop-table tr td:last-child {
		border-radius: 0;
		border-left-width: 1px;
		border-right-width: 1px;
	}
	.shop-table tr td:first-child { border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 0; }
	.shop-table tr td:last-child { border-radius: 0 0 var(--r-md) var(--r-md); border-top: 0; }
	.shop-item-cost-qty { width: auto; }
}

/* --- respect the OS setting --- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.hm-js [data-hm-reveal],
	.hm-js tr[data-hm-row] { opacity: 1 !important; transform: none !important; }

	.hm-hero__art { transform: none !important; }
}

@media print {
	.hm-backdrop, .hm-topbar, .hm-sidebar, .hm-hero, .hm-totop, .hm-footer__prefs { display: none !important; }
	body.hm { background: #fff; color: #000; }
	.hm-shell { display: block; padding: 0; }
	.hm-panel { background: #fff; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; }
}