:root {
	--wood-900: #3a2415;
	--wood-800: #56351d;
	--wood-700: #744924;
	--wood-600: #996737;
	--wood-500: #bf8750;
	--cream-50: #fff8e8;
	--cream-100: #f7ecd2;
	--cream-200: #ead9b6;
	--cream-300: #d8bf8f;
	--ink: #352012;
	--ink-soft: #6d4c2d;
	--gold: #f2c766;
	--gold-dark: #a56f22;
	--sky: #78acd5;
	--sky-dark: #3f7198;
	--leaf: #64a35b;
	--red: #b65343;
	--panel: rgba(255, 248, 232, .88);
	--panel-solid: #fff4dc;
	--line: rgba(86, 53, 29, .22);
	--shadow: 0 18px 48px rgba(58, 36, 21, .23);
	--shadow-soft: 0 10px 30px rgba(58, 36, 21, .16);
	--radius-xl: 26px;
	--radius-lg: 20px;
	--radius-md: 14px;
	--font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Verdana, Arial, sans-serif;
	--font-display: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html {
	min-height: 100%;
	background: var(--wood-700);
}

body {
	min-height: 100%;
	margin: 0;
	padding: 22px;
	font: 650 14px/1.55 var(--font-ui);
	color: var(--ink);
	background:
		radial-gradient(circle at 18% 8%, rgba(242, 199, 102, .22), transparent 28rem),
		radial-gradient(circle at 84% 14%, rgba(120, 172, 213, .18), transparent 26rem),
		linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 88px),
		repeating-linear-gradient(90deg, rgba(58,36,21,.34) 0 2px, transparent 2px 76px),
		linear-gradient(135deg, #4b2e1a 0%, #7a4e29 42%, #5f391f 100%);
}

.page-bg {
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 16px),
		radial-gradient(ellipse at 25% 24%, rgba(255, 236, 185, .12), transparent 24rem),
		radial-gradient(ellipse at 78% 72%, rgba(40, 18, 8, .16), transparent 30rem);
	mix-blend-mode: soft-light;
	opacity: .7;
}

.shell {
	position: relative;
	z-index: 1;
	width: min(1180px, 100%);
	margin: 0 auto;
}

a {
	color: var(--sky-dark);
	text-decoration: none;
	transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, border-color .16s ease;
}

a:hover {
	color: #214e70;
}

.eo-topbar,
.topnav,
.panel,
.content-card,
.stat-card,
.welcome-card,
#footer,
table,
.notice {
	position: relative;
	border: 1px solid rgba(255, 248, 232, .38);
	background:
		linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.08)),
		var(--panel);
	box-shadow: var(--shadow);
	backdrop-filter: blur(16px) saturate(1.08);
}

.eo-topbar {
	display: grid;
	grid-template-columns: minmax(260px, 1.1fr) minmax(220px, .8fr) minmax(220px, .7fr);
	gap: 14px;
	align-items: stretch;
	padding: 14px;
	border-radius: var(--radius-xl);
}

.eo-topbar::before,
.content-card::before,
.panel::before,
.welcome-card::before,
.stat-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(86, 53, 29, .12), inset 0 1px 0 rgba(255,255,255,.58);
}

.eo-brand,
.eo-current-page,
.eo-world-status {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border-radius: 20px;
	background: linear-gradient(135deg, rgba(255, 248, 232, .82), rgba(232, 210, 169, .58));
	border: 1px solid rgba(86, 53, 29, .16);
	box-shadow: var(--shadow-soft);
}

.eo-brand:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 32px rgba(58,36,21,.18);
}

.eo-logo {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	flex: 0 0 auto;
	border-radius: 18px;
	font: italic 950 24px/1 var(--font-display);
	color: #3a210f;
	background:
		radial-gradient(circle at 32% 25%, #fff4bf, transparent 32%),
		linear-gradient(135deg, var(--gold), #d89234 68%, #9c6424);
	border: 1px solid rgba(86, 53, 29, .28);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 20px rgba(165,111,34,.22);
}

.eo-title,
.eo-subtitle,
.eo-current-page span,
.eo-world-status span,
.eo-world-status em,
.status-kicker,
.eyebrow,
.topnav a,
.button,
#submit,
table thead th,
caption,
.stat-card span,
#footer span {
	text-transform: uppercase;
	letter-spacing: .08em;
}

.eo-title {
	display: block;
	font: italic 950 clamp(1.45rem, 3vw, 2.25rem)/1 var(--font-display);
	letter-spacing: -.03em;
	text-transform: none;
	color: var(--ink);
}

.eo-subtitle {
	display: block;
	margin-top: 2px;
	font-size: .72rem;
	font-weight: 900;
	color: var(--ink-soft);
}

.eo-current-page,
.eo-world-status {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.eo-current-page span,
.eo-world-status span,
.eo-world-status em {
	font-size: .72rem;
	font-style: normal;
	font-weight: 900;
	color: var(--ink-soft);
}

.eo-current-page strong,
.eo-world-status strong {
	font: italic 900 1.4rem/1.1 var(--font-display);
	color: var(--ink);
}

.eo-world-status a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 900;
	color: var(--leaf);
}

.eo-world-status a::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: var(--leaf);
	box-shadow: 0 0 0 4px rgba(100, 163, 91, .12);
}

.topnav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0;
	padding: 10px;
	border-radius: var(--radius-lg);
}

.topnav a,
.button,
#submit,
.pagination a,
.pagination strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 15px;
	border: 1px solid rgba(86, 53, 29, .16);
	border-radius: 14px;
	background: linear-gradient(180deg, #fff7e8, #ecd8b4);
	box-shadow: 0 6px 14px rgba(58,36,21,.12), inset 0 1px 0 rgba(255,255,255,.72);
	color: var(--ink);
	font-size: .74rem;
	font-weight: 950;
}

.topnav a:hover,
.button:hover,
#submit:hover,
.pagination a:hover {
	transform: translateY(-2px);
	background: linear-gradient(180deg, #ffffff, #f3dfba);
	box-shadow: 0 12px 20px rgba(58,36,21,.16), inset 0 1px 0 rgba(255,255,255,.8);
}

.topnav a:last-child,
.button,
#submit {
	background: linear-gradient(135deg, var(--gold), #e29a3f);
	color: #3a210f;
	border-color: rgba(86, 53, 29, .20);
}

.topnav a:last-child::before {
	content: "↓";
	margin-right: 7px;
	font-size: .95rem;
}

.main-grid {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 16px;
}

.sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.panel,
.content-card,
.welcome-card,
#footer {
	border-radius: var(--radius-xl);
	padding: 18px;
}

.content-card {
	min-width: 0;
	padding: 22px;
}

.panel h3,
.welcome-card h3 {
	margin: 0 0 12px;
	font: italic 900 1.45rem/1.1 var(--font-display);
	color: var(--ink);
}

.page-heading {
	position: relative;
	margin: 0 0 18px;
	padding: 18px;
	border-radius: 22px;
	background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(236,216,180,.55));
	border: 1px solid rgba(86, 53, 29, .12);
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(120, 172, 213, .16);
	color: var(--sky-dark);
	font-size: .70rem;
	font-weight: 950;
}

.eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--sky);
}

.page-heading h2 {
	margin: 0;
	font: italic 950 clamp(2rem, 4vw, 3.2rem)/1 var(--font-display);
	letter-spacing: -.04em;
	color: var(--ink);
}

.server-line {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 12px;
	border-radius: 16px;
	background: rgba(255,255,255,.34);
	border: 1px solid rgba(86, 53, 29, .12);
}
.server-line span,
label,
.showing,
.signed-in,
.hero p,
.welcome-card p,
.muted {
	color: var(--ink-soft);
}
.server-line b { color: var(--ink); }

.meter {
	height: 12px;
	padding: 2px;
	margin: 12px 0 14px;
	border-radius: 999px;
	background: rgba(86,53,29,.13);
	overflow: hidden;
}
.meter span {
	display: block;
	height: 100%;
	max-width: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--leaf), #9bd875);
}

.stacked-links {
	display: grid;
	gap: 10px;
}
.stacked-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 13px;
	border-radius: 16px;
	background: rgba(255,255,255,.36);
	border: 1px solid rgba(86, 53, 29, .12);
	color: var(--ink);
	font-weight: 850;
}
.stacked-links a:hover {
	transform: translateX(2px);
	background: rgba(255,255,255,.58);
}
.stacked-links a span {
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba(120,172,213,.18);
	color: var(--sky-dark);
}

label {
	display: block;
	margin: 10px 0 6px;
	font-weight: 850;
}

input[type="text"],
input[type="password"],
input[type="input"],
select,
textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid rgba(86, 53, 29, .18);
	border-radius: 14px;
	background: rgba(255,255,255,.54);
	color: var(--ink);
	outline: none;
	box-shadow: inset 0 1px 3px rgba(58,36,21,.08);
}
input:focus,
select:focus,
textarea:focus {
	border-color: rgba(63,113,152,.55);
	box-shadow: 0 0 0 4px rgba(120,172,213,.14), inset 0 1px 3px rgba(58,36,21,.08);
}
input[type="submit"] { cursor: pointer; width: auto; }

.notice {
	padding: 13px 15px;
	margin-bottom: 16px;
	border-radius: 18px;
}
.notice.message { border-color: rgba(100,163,91,.3); background: rgba(236, 255, 228, .82); }
.notice.error { border-color: rgba(182,83,67,.32); background: rgba(255, 238, 233, .86); }

.dashboard-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 16px;
}
.stat-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 140px;
	padding: 18px;
	border-radius: 24px;
	overflow: hidden;
}
.stat-card::after {
	content: "";
	position: absolute;
	right: -24px;
	bottom: -24px;
	width: 92px;
	height: 92px;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(242,199,102,.34), transparent 68%);
}
.stat-card span,
.stat-card strong,
.stat-card em { position: relative; z-index: 1; }
.stat-card span { font-size: .72rem; font-weight: 950; color: var(--sky-dark); }
.stat-card strong {
	font: italic 950 clamp(1.85rem, 3vw, 2.75rem)/1 var(--font-display);
	letter-spacing: -.04em;
	color: var(--ink);
}
.stat-card em { font-style: normal; color: var(--ink-soft); }

.welcome-card {
	background:
		linear-gradient(135deg, rgba(120,172,213,.16), transparent 38%),
		linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.10)),
		var(--panel);
}
.welcome-card p { max-width: 72ch; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.button.ghost {
	background: linear-gradient(180deg, #fff7e8, #ecd8b4);
}

.jumppage { margin: 0 0 10px; }
.jumppage form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jumppage input[type="text"] { width: 82px; }
.showing { display: block; margin: 8px 0 10px; font-weight: 800; }
.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.pagination strong { background: linear-gradient(135deg, var(--sky), #99c7e5); color: #163247; }

table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 22px;
	overflow: hidden;
	margin: 14px 0;
}
table thead th,
caption {
	padding: 13px 14px;
	background: linear-gradient(135deg, #784d27, #a36f3a);
	color: #fff8e8;
	text-align: left;
	font-size: .72rem;
	font-weight: 950;
}
table tbody td,
table tbody th {
	padding: 12px 14px;
	border-top: 1px solid rgba(86,53,29,.11);
	background: rgba(255,255,255,.38);
	text-align: left;
	vertical-align: top;
}
table tbody tr:nth-child(even) td,
table tbody tr:nth-child(even) th { background: rgba(255,255,255,.52); }
table tbody tr:hover td,
table tbody tr:hover th { background: rgba(242,199,102,.18); }

table img { vertical-align: middle; }
.gmoptions { display: flex; gap: 10px; padding: 0; margin: 0 0 14px; list-style: none; }
.gmoptions a {
	display: inline-flex;
	padding: 9px 12px;
	border-radius: 14px;
	background: rgba(120,172,213,.16);
	border: 1px solid rgba(63,113,152,.22);
	font-weight: 850;
}

#footer {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding: 16px 18px;
	border-radius: var(--radius-lg);
}
#footer span { color: var(--ink-soft); font-size: .72rem; font-weight: 950; }

@media (max-width: 1060px) {
	.eo-topbar,
	.main-grid { grid-template-columns: 1fr; }
	.dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	body { padding: 12px; }
	.eo-topbar,
	.topnav,
	.panel,
	.content-card,
	.welcome-card,
	#footer { border-radius: 20px; }
	.dashboard-grid { grid-template-columns: 1fr; }
	.topnav a,
	.button,
	#submit,
	.pagination a,
	.pagination strong { width: 100%; }
	.eo-brand,
	.eo-current-page,
	.eo-world-status { border-radius: 16px; }
	.eo-title { font-size: 1.55rem; }
	.page-heading h2 { font-size: 2rem; }
	table { display: block; overflow-x: auto; }
	#footer { flex-direction: column; }
}