/* =====================================================================
   Asgard Tales — FluxCP Theme
   Palette derived from the Asgard Tales logo: orange (#E67300) + blue
   (#2266CC), per the project's own branding notes (item description
   colors). This file fully replaces the parent 'default' theme's
   stylesheet (child theme files shadow the parent's, they don't merge),
   so it also covers the generic table/form/pagination classes that every
   inherited page (account, item db, guild, rankings, etc.) still uses.
   ===================================================================== */

:root {
	--at-orange-light: #FFA64D;
	--at-orange-light2: #FF9224;
	--at-orange:        #E67300;
	--at-orange-dark:   #A95400;
	--at-orange-deep:   #763B00;

	--at-blue-light:   #6D9EE7;
	--at-blue-light2:  #4A87E1;
	--at-blue:          #2266CC;
	--at-blue-dark:     #194C98;
	--at-blue-deep:     #12366C;

	--at-purple-light:  #A98CFF;
	--at-purple-light2: #8F6BFF;
	--at-purple:        #6D4AFF;
	--at-purple-dark:   #4E32CC;
	--at-purple-deep:   #352290;

	--at-bg:            #f7f8fb;
	--at-panel:         #ffffff;
	--at-panel-alt:     #f1f4f9;
	--at-border:        rgba(20, 30, 50, 0.10);
	--at-border-soft:   rgba(20, 30, 50, 0.07);
	--at-text:          #29303d;
	--at-text-muted:    #667085;
	--at-heading:       #171b24;
	--at-shadow:        rgba(20, 30, 60, 0.10);

	--at-radius-lg: 20px;
	--at-radius-md: 12px;
	--at-radius-sm: 8px;

	--at-font-display: "Baloo 2", "Lucida Grande", Verdana, sans-serif;
	--at-font-body: "Nunito", "Lucida Grande", "Lucida Sans", Verdana, Tahoma, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	padding: 0;
	font-family: var(--at-font-body);
	font-size: 10.5pt;
	color: var(--at-text);
	background: var(--at-bg);
}

table { font-family: var(--at-font-body); font-size: 10.5pt; }
tr, td, th { vertical-align: top; }

h1, h2, h3, h4 { font-family: var(--at-font-display); color: var(--at-heading); }
h2 { font-size: 22px; margin: 0 0 14px; }
h3 { font-size: 16px; font-weight: 700; margin: 0 0 10px; text-transform: none; border: none; }
p { margin: 4px 0 8px; line-height: 1.55; }
a { color: var(--at-blue); text-decoration: none; }
a:hover { color: var(--at-blue-dark); }
a img { border: 0; }

label:hover { cursor: pointer; }

/* =====================================================================
   Page padding helper - used by sections in main/index.php and applied
   automatically to whatever the inherited (default-theme) module views
   render directly inside <main>, so they get the same centered content
   column without needing to be touched themselves.
   ===================================================================== */
.at-page-pad { max-width: 1180px; margin: 0 auto; padding: 28px 20px; }
/* Every direct child of <main> gets centered/padded except the full-bleed
   hero banner - a universal `>` rule rather than an enumerated tag list, so
   a heading level or element type we didn't think to list (h3, ul, a CMS
   page's own unwrapped text, etc.) never silently renders flush to the
   viewport edge the way individual tag selectors kept missing cases. */
.at-content > *:not(.at-hero) {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}
.at-content > table,
.at-content > form { padding-top: 20px; }

/* =====================================================================
   Inputs & buttons (generic - affects inherited forms too)
   ===================================================================== */
input[type=text], input[type=password], input[type=file], textarea, select {
	font-family: var(--at-font-body);
	padding: 8px 10px;
	font-size: 10.5pt;
	color: var(--at-text);
	background: var(--at-panel);
	border: 1px solid var(--at-border);
	border-radius: var(--at-radius-sm);
	outline-width: 0;
}
input.at-focused, input:focus, textarea:focus {
	border-color: var(--at-blue-light2);
	box-shadow: 0 0 0 3px rgba(34, 102, 204, 0.12);
}

input[type=submit], button, .submit_button {
	font-family: var(--at-font-display);
	display: inline-block;
	padding: 9px 20px;
	font-weight: 700;
	font-size: 10.5pt;
	color: #fff;
	background: linear-gradient(180deg, var(--at-blue-light2), var(--at-blue));
	border: 1px solid var(--at-blue-deep);
	border-radius: 999px;
	box-shadow: 0 3px 0 var(--at-blue-deep);
	cursor: pointer;
	transition: transform .1s ease, box-shadow .1s ease;
	margin: 0;
}
input[type=submit]:hover, button:hover, .submit_button:hover {
	transform: translateY(1px);
	box-shadow: 0 2px 0 var(--at-blue-deep);
	color: #fff;
	background: linear-gradient(180deg, var(--at-blue-light2), var(--at-blue));
}

.at-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--at-font-display);
	font-weight: 700;
	font-size: 10.5pt;
	padding: 10px 22px;
	border-radius: 999px;
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
	white-space: nowrap;
}
.at-btn:hover { transform: translateY(-2px); }
.at-btn-orange {
	color: #fff;
	background: linear-gradient(180deg, var(--at-orange-light2), var(--at-orange));
	border-color: var(--at-orange-deep);
	box-shadow: 0 4px 0 var(--at-orange-deep);
}
.at-btn-orange:hover { color: #fff; box-shadow: 0 2px 0 var(--at-orange-deep); }
.at-btn-blue {
	color: #fff;
	background: linear-gradient(180deg, var(--at-blue-light2), var(--at-blue));
	border-color: var(--at-blue-deep);
	box-shadow: 0 4px 0 var(--at-blue-deep);
}
.at-btn-blue:hover { color: #fff; box-shadow: 0 2px 0 var(--at-blue-deep); }
.at-btn-purple {
	color: #fff;
	background: linear-gradient(180deg, var(--at-purple-light2), var(--at-purple));
	border-color: var(--at-purple-deep);
	box-shadow: 0 4px 0 var(--at-purple-deep);
}
.at-btn-purple:hover { color: #fff; box-shadow: 0 2px 0 var(--at-purple-deep); }
.at-btn-ghost {
	color: var(--at-text);
	background: rgba(20, 30, 50, 0.04);
	border-color: var(--at-border);
}
.at-btn-ghost:hover { color: var(--at-heading); background: rgba(20, 30, 50, 0.08); }
.at-btn-sm { padding: 7px 16px; font-size: 9.5pt; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.at-btn-lg { padding: 14px 28px; font-size: 12pt; }
/* Buttons that sit side by side ("Register Now"/"Download Client" on the
   homepage hero, "Download from Google Drive"/"Download from Mega.nz" on
   the Downloads page) read oddly if one is visibly wider than the other
   purely because its own text is longer - force a shared width instead. */
.at-hero-actions .at-btn-lg,
.si-box .at-btn-lg { min-width: 230px; }

/* =====================================================================
   Top utility bar
   ===================================================================== */
.at-topbar { background: var(--at-heading); color: #cfd6e4; font-size: 9pt; }
.at-topbar-inner {
	max-width: 1180px; margin: 0 auto; padding: 6px 20px;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	flex-wrap: wrap;
}
.at-topbar-item { display: inline-flex; align-items: center; gap: 6px; }
.at-dot { width: 7px; height: 7px; border-radius: 50%; background: #3ddc73; display: inline-block; box-shadow: 0 0 6px #3ddc73; }

/* =====================================================================
   Header / nav
   ===================================================================== */
.at-header { background: var(--at-panel); border-bottom: 1px solid var(--at-border); position: sticky; top: 0; z-index: 100; }
.at-header-inner {
	max-width: 1180px; margin: 0 auto; padding: 10px 20px;
	display: flex; align-items: center; gap: 20px;
}
.at-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.at-logo img { height: 44px; width: auto; }

.at-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; margin-left: auto; }
.at-nav-toggle span { display: block; width: 24px; height: 3px; margin: 4px 0; background: var(--at-heading); border-radius: 2px; }

.at-nav { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 12px; }
/* Asgard Tales custom, 2026-09-09: nav-list takes the remaining space between
   the logo and the auth buttons (flex: 1) and centers its own items within
   that space, so the primary menu buttons sit centered in the bar instead of
   hugging the logo - .at-nav-auth stays pinned to the far right since it has
   no flex-grow of its own. Reset for mobile below (stacked list). */
.at-nav-list { list-style: none; display: flex; align-items: center; justify-content: center; flex: 1; gap: 4px; margin: 0; padding: 0; }
.at-nav-item { position: relative; }
.at-nav-item > a {
	display: flex; align-items: center; gap: 4px;
	padding: 10px 12px; border-radius: var(--at-radius-sm);
	font-weight: 700; font-size: 10pt; color: var(--at-text);
}
.at-nav-item > a:hover { background: var(--at-panel-alt); color: var(--at-heading); }
.at-caret { margin-top: 1px; }

.at-dropdown {
	list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0;
	background: var(--at-panel); border: 1px solid var(--at-border); border-radius: var(--at-radius-md);
	box-shadow: 0 12px 28px var(--at-shadow); min-width: 200px;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	z-index: 50;
}
.at-nav-item.has-dropdown:hover .at-dropdown,
.at-nav-item.has-dropdown.open .at-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.at-dropdown li a { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--at-radius-sm); font-size: 9.5pt; font-weight: 600; color: var(--at-text); }
.at-dropdown li a:hover { background: var(--at-panel-alt); color: var(--at-heading); }
.at-social-icon { flex-shrink: 0; }

.at-nav-auth { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.at-welcome { font-size: 9.5pt; font-weight: 700; color: var(--at-text-muted); }
.at-welcome a { color: var(--at-blue); }

/* =====================================================================
   Hero
   ===================================================================== */
.at-hero {
	position: relative;
	overflow: hidden;
	min-height: 560px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #fff;
	text-align: center;
}
/* Shorter hero variant - used as a page-title banner on inner pages
   (e.g. Server Info) instead of the full homepage-height hero. */
.at-hero-sm { min-height: 220px; }
.at-hero-sm .at-hero-slide { background-position: center; }
.at-hero-page-title {
	position: relative; z-index: 1;
	color: #fff;
	font-size: 40px; margin: 0; padding: 0 20px;
	text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
/* Almost every inherited (default-theme) page opens with its own <h2>/<h3>
   repeating the same title text that's now shown in the hero banner above
   it - hide just that one heading rather than editing 140+ templates. */
.at-hero + h2, .at-hero + h3 { display: none; }

.at-hero-bg { position: absolute; inset: 0; z-index: 0; }
.at-hero-slide {
	position: absolute; inset: 0;
	/* Bias the crop toward the bottom of the source image - each loading*.jpg
	   has the Asgard Tales logo baked into the top band, and cropping from
	   center was clipping it awkwardly. Biasing to the bottom keeps the
	   scene itself in view and pushes the logo band further out of frame. */
	background-size: cover; background-position: center 75%;
	opacity: 0;
	animation: atHeroFade 42s infinite;
}
@keyframes atHeroFade {
	0%   { opacity: 0; }
	3%   { opacity: 1; }
	14%  { opacity: 1; }
	17%  { opacity: 0; }
	100% { opacity: 0; }
}
.at-hero-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(10,14,26,.35) 0%, rgba(10,14,26,.55) 55%, rgba(10,14,26,.85) 100%);
}
.at-hero-content { position: relative; z-index: 1; padding: 60px 20px 20px; }
.at-hero-logo { max-width: 380px; width: 70%; height: auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.45)); }
.at-hero-tagline { max-width: 640px; margin: 14px auto 26px; font-size: 12.5pt; font-weight: 600; color: #f0f2f8; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.at-hero-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

.at-hero-stats {
	position: relative; z-index: 1;
	display: flex; justify-content: center; gap: 0;
	margin: 40px auto 0; padding: 0 20px;
	max-width: 900px; flex-wrap: wrap;
}
.at-stat {
	flex: 1; min-width: 130px;
	padding: 18px 10px;
	border-left: 1px solid rgba(255,255,255,.18);
}
.at-stat:first-child { border-left: none; }
.at-stat-num { display: block; font-family: var(--at-font-display); font-size: 24px; font-weight: 800; color: #fff; }
.at-stat-label { display: block; font-size: 9pt; color: rgba(255,255,255,.75); margin-top: 2px; }

/* =====================================================================
   Feature cards
   ===================================================================== */
.at-features {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
	padding-top: 44px; padding-bottom: 44px;
}
.at-feature {
	background: var(--at-panel); border: 1px solid var(--at-border-soft); border-radius: var(--at-radius-lg);
	padding: 22px; box-shadow: 0 6px 18px var(--at-shadow);
}
.at-feature h3 { margin: 4px 0 6px; }
.at-feature p { color: var(--at-text-muted); font-size: 9.5pt; margin: 0; }
.at-feature-icon {
	width: 46px; height: 46px; border-radius: 14px;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 10px; color: #fff;
}
.at-feature-icon-orange { background: linear-gradient(180deg, var(--at-orange-light2), var(--at-orange-dark)); }
.at-feature-icon-blue { background: linear-gradient(180deg, var(--at-blue-light2), var(--at-blue-dark)); }

/* =====================================================================
   News
   ===================================================================== */
.at-section-title { text-align: center; margin-bottom: 22px; }
.at-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.at-news-card { background: var(--at-panel); border: 1px solid var(--at-border-soft); border-radius: var(--at-radius-lg); padding: 20px; box-shadow: 0 6px 18px var(--at-shadow); }
.at-news-meta { font-size: 8.5pt; color: var(--at-text-muted); margin: -4px 0 8px; }
.at-news-body { font-size: 9.5pt; color: var(--at-text); }
.at-news-link { font-weight: 700; font-size: 9pt; }
.at-empty { text-align: center; color: var(--at-text-muted); padding: 20px; }

/* =====================================================================
   Footer
   ===================================================================== */
.at-footer { background: var(--at-heading); color: #b7bfd1; margin-top: 40px; }
.at-footer-inner { max-width: 1180px; margin: 0 auto; padding: 40px 20px 20px; display: flex; gap: 40px; flex-wrap: wrap; }
.at-footer-brand { display: flex; gap: 12px; max-width: 280px; }
.at-footer-brand img { width: auto; height: 44px; flex-shrink: 0; }
.at-footer-brand strong { color: #fff; font-family: var(--at-font-display); font-size: 14px; }
.at-footer-brand p { font-size: 9pt; color: #9aa3b8; margin: 4px 0 0; }
.at-footer-links { display: flex; gap: 36px; flex-wrap: wrap; flex: 1; }
.at-footer-col h4 { color: #fff; font-size: 9.5pt; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .04em; }
.at-footer-col ul { list-style: none; margin: 0; padding: 0; }
.at-footer-col li { margin-bottom: 6px; }
.at-footer-col a { display: inline-flex; align-items: center; gap: 6px; color: #9aa3b8; font-size: 9pt; }
.at-footer-col a:hover { color: #fff; }
.at-footer-bottom {
	max-width: 1180px; margin: 0 auto; padding: 14px 20px;
	border-top: 1px solid rgba(255,255,255,.08);
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
	font-size: 8.5pt; color: #7d8598;
}
.at-footer-bottom a { color: #9aa3b8; }
.at-footer-controls select { padding: 4px 8px; font-size: 8.5pt; border-radius: 6px; }
.at-render-details { justify-content: center; }

/* =====================================================================
   Messages / notices
   ===================================================================== */
.at-notice, .notice {
	display: block; margin-bottom: 14px; padding: 12px 16px;
	font-weight: 600; color: var(--at-blue-deep);
	background: #eaf2ff; border: 1px solid rgba(34,102,204,.25); border-radius: var(--at-radius-md);
}
.at-flash, .message {
	display: block; margin-bottom: 14px; padding: 12px 16px;
	font-weight: 700; color: #fff;
	background: var(--at-heading); border-radius: var(--at-radius-md);
}
.red { display: block; margin-bottom: 14px; padding: 12px 16px; font-weight: 700; color: #fff; background: #d64545; border-radius: var(--at-radius-md); }
.green { display: block; margin-bottom: 14px; padding: 12px 16px; font-weight: 700; color: #fff; background: #2fa563; border-radius: var(--at-radius-md); }
.note { padding: 8px 12px; color: var(--at-text-muted); background: var(--at-panel-alt); border-radius: var(--at-radius-sm); font-style: italic; }
.center { text-align: center; }
.keyword { color: var(--at-orange); font-style: italic; }
.up { font-weight: 700; color: #2fa563; text-transform: uppercase; }
.down { color: #d64545; text-transform: uppercase; }
.online { color: #2fa563; font-weight: 700; }
.offline { color: #aaa; }
.not-applicable { font-style: italic; color: #bbb; }
.state-pending { color: var(--at-orange); }
.state-banned { color: #d64545; }
.state-permanently-banned { font-weight: 700; color: #d64545; }

/* =====================================================================
   Generic tables / forms (used throughout inherited pages)
   ===================================================================== */
.horizontal-table, .vertical-table, .generic-form-table, .install_table {
	border-spacing: 0; border-collapse: collapse; width: 100%;
	background: var(--at-panel); border-radius: var(--at-radius-md); overflow: hidden;
	box-shadow: 0 6px 18px var(--at-shadow);
}
.horizontal-table tr, .vertical-table tr, .generic-form-table tr,
.horizontal-table td, .vertical-table td, .generic-form-table td { vertical-align: middle; }
.horizontal-table th, .vertical-table th, .generic-form-table th, .install_table th { vertical-align: top; }
.horizontal-table th, .vertical-table th, .generic-form-table th, .install_table th {
	padding: 10px 14px; background: var(--at-panel-alt); font-size: 9.5pt; border-bottom: 1px solid var(--at-border);
}
.horizontal-table td, .vertical-table td, .generic-form-table td, .install_table td {
	padding: 10px 14px; background: var(--at-panel); font-size: 9.5pt; border-bottom: 1px solid var(--at-border-soft);
}
.vertical-table label { display: block; padding: 4px 0; }
.td-checkbox { text-align: center; }
.td-action { color: var(--at-text-muted); text-align: center; }
.vertical-table .td-action { text-align: right; }
.vertical-table form { margin: 0; padding: 0; }

.pages { margin-top: 20px; padding-top: 14px; color: var(--at-text-muted); text-align: center; border-top: 1px solid var(--at-border); }
.pages .page-prev, .pages .page-next { color: var(--at-blue); font-weight: 700; }
.pages .page-num { padding: 0 6px; }
.pages .current-page { color: var(--at-heading); font-weight: 800; }

.raw-txn-log {
	padding: 12px; font-family: Monaco, "Lucida Console", "Courier New", monospace;
	background: var(--at-panel); border: 1px solid var(--at-border); border-radius: var(--at-radius-md);
	width: 96%; overflow: scroll;
}
.info-text-total, .info-text-results { font-weight: 700; }
.info-text { margin-bottom: 10px; padding: 10px; color: var(--at-text-muted); background: var(--at-panel); border: 1px solid var(--at-border); border-radius: var(--at-radius-md); text-align: center; }
.module-name { font-weight: 700; font-size: 13pt; font-family: var(--at-font-display); }

.search-form, .search-form2 {
	display: none; /* toggled open by the "Search..." link's toggleSearchForm() JS */
	margin: 0 0 14px; padding: 12px; border-top: none;
	background: var(--at-panel-alt); border-radius: var(--at-radius-md);
}
.search-form p, .search-form2 p { margin: 0; padding: 4px 0; color: var(--at-text-muted); border-bottom: none; }
.search-form label, .search-form2 label { display: inline-block; margin: 0 6px 3px 0; font-size: 9pt; font-style: normal; color: var(--at-text); }
.search-form input[type=text], .search-form2 input[type=text] { display: inline-block; margin: 0 0 4px; padding: 6px; font-size: 9pt; width: 120px; }
.search-form select, .search-form2 select { display: inline-block; margin: 2px 0; }

#submenu, #pagemenu {
	max-width: 1180px; margin: 0 auto; padding: 10px 20px;
	font-size: 9pt; color: var(--at-text-muted);
}
#pagemenu { border-bottom: 1px solid var(--at-border); }
#pagemenu a, #submenu a { font-weight: 700; margin-right: 4px; }
.current-sub-menu { color: var(--at-heading); }

.request, .fs-path {
	display: inline-block; padding: 2px 6px;
	font-family: Monaco, "Lucida Console", monospace; font-size: 8.5pt;
	background: var(--at-panel-alt); border-radius: 4px;
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 900px) {
	.at-nav-toggle { display: block; }
	.at-nav {
		display: none; position: absolute; top: 100%; left: 0; right: 0;
		background: var(--at-panel); border-bottom: 1px solid var(--at-border);
		flex-direction: column; align-items: stretch; padding: 10px 20px 16px;
	}
	.at-nav.at-nav-open { display: flex; }
	.at-nav-list { flex-direction: column; align-items: stretch; justify-content: flex-start; flex: initial; }
	.at-dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; border: none; padding: 0 0 0 14px; }
	.at-nav-item.open .at-dropdown { display: block; }
	.at-nav-auth { margin-top: 10px; }
	.at-features { grid-template-columns: repeat(2, 1fr); }
	.at-topbar-inner { justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
	.at-features { grid-template-columns: 1fr; }
	.at-hero-actions { flex-direction: column; align-items: center; }
	.at-stat { min-width: 45%; border-left: none; }
}

/* =====================================================================
   Server Info "boxes" layout (themes/asgardtales/server/info.php)
   ===================================================================== */
.si-page { padding-top: 6px; }

.si-quickstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.si-stat {
	display: flex; flex-direction: column; gap: 2px;
	background: var(--at-panel); border: 1px solid var(--at-border-soft); border-radius: var(--at-radius-lg);
	padding: 16px 18px; box-shadow: 0 6px 18px var(--at-shadow);
}
.si-stat-label { font-size: 8.5pt; color: var(--at-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.si-stat-value { font-family: var(--at-font-display); font-size: 20px; font-weight: 800; }
.si-stat-sub { font-size: 8.5pt; color: var(--at-text-muted); }
.si-blue { color: var(--at-blue); }
.si-orange { color: var(--at-orange); }

.si-panel {
	background: var(--at-panel); border: 1px solid var(--at-border-soft); border-radius: var(--at-radius-lg);
	padding: 22px; box-shadow: 0 6px 18px var(--at-shadow); margin-bottom: 20px;
}
.si-panel h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.si-panel-highlight { background: linear-gradient(135deg, var(--at-panel), var(--at-panel-alt)); }
.si-panel-highlight h3 { font-size: 19px; }
.si-panel-highlight > p { color: var(--at-text-muted); margin-bottom: 18px; }

.si-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.si-dot-blue { background: var(--at-blue); }
.si-dot-orange { background: var(--at-orange); }

.si-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
/* Equal-width variant - .si-split itself is intentionally asymmetric
   (built for the homepage's uneven notes/summary panels), which was the
   real reason the Downloads page's two boxes still looked uneven even
   after the buttons inside them got a matching min-width. */
.si-split-even { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.si-box { border-radius: var(--at-radius-md); padding: 16px 18px; }
.si-box h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 11pt; }
.si-box-blue { background: rgba(34, 102, 204, 0.07); }
.si-box-orange { background: rgba(230, 115, 0, 0.07); }

.si-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.si-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

.si-list { list-style: none; margin: 0; padding: 0; }
.si-list li { position: relative; padding: 4px 0 4px 18px; font-size: 9.5pt; }
.si-list li::before { content: "\2022"; position: absolute; left: 2px; color: var(--at-blue); font-weight: 700; }

.si-table { width: 100%; border-spacing: 0; box-shadow: none; }
.si-table th, .si-table td { padding: 8px 10px; font-size: 9.5pt; border-bottom: 1px solid var(--at-border-soft); background: transparent; }
.si-table th { width: 45%; text-align: left; color: var(--at-text-muted); font-weight: 600; }
.si-table tr:last-child th, .si-table tr:last-child td { border-bottom: none; }

.si-muted { color: var(--at-text-muted); font-size: 9.5pt; }

.si-substats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.si-substat { background: var(--at-panel-alt); border-radius: var(--at-radius-md); padding: 12px; text-align: center; }
.si-substat-label { display: block; font-size: 8pt; color: var(--at-text-muted); margin-bottom: 4px; }
.si-substat-value { display: block; font-family: var(--at-font-display); font-weight: 800; font-size: 12pt; color: var(--at-heading); }

.si-classes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.si-class {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	background: var(--at-panel-alt); border-radius: var(--at-radius-md); padding: 10px;
}
.si-class-name { font-size: 8.5pt; color: var(--at-text-muted); text-align: center; }
.si-class-count { font-family: var(--at-font-display); font-weight: 800; font-size: 12pt; color: var(--at-heading); }

@media (max-width: 900px) {
	.si-quickstats { grid-template-columns: repeat(2, 1fr); }
	.si-split { grid-template-columns: 1fr; }
	.si-row { grid-template-columns: 1fr; }
	.si-row-3 { grid-template-columns: 1fr; }
	.si-substats { grid-template-columns: 1fr; }
	.si-classes { grid-template-columns: repeat(2, 1fr); }
}
/* .si-split-even's boxes are simple enough (icon, one line, one button) to
   stay side-by-side well past .si-split's own 900px collapse point - only
   stack on genuine phone-width screens. */
@media (max-width: 560px) {
	.si-split-even { grid-template-columns: 1fr; }
}

/* =====================================================================
   DataTables reskin - the plugin ships its own plain default look;
   this brings its search box/length menu/pagination in line with the
   rest of the site instead of looking like an unstyled drop-in widget.
   ===================================================================== */
.dataTables_wrapper { font-family: var(--at-font-body); margin-top: 10px; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { font-size: 9.5pt; color: var(--at-text-muted); margin-bottom: 10px; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
	font-family: var(--at-font-body); padding: 6px 10px; margin-left: 6px;
	border: 1px solid var(--at-border); border-radius: var(--at-radius-sm); background: var(--at-panel);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 5px 11px; margin-left: 3px; border-radius: var(--at-radius-sm);
	border: 1px solid var(--at-border) !important; background: var(--at-panel) !important;
	color: var(--at-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--at-blue) !important; border-color: var(--at-blue-deep) !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .4; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: var(--at-panel-alt) !important; color: var(--at-heading) !important;
}
table.dataTable thead th { position: relative; padding-right: 22px !important; }
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
	position: absolute; right: 8px; opacity: .5; font-size: 8pt;
}
table.dataTable thead th.sorting:after { content: "\25B4\25BE"; }
table.dataTable thead th.sorting_asc:after { content: "\25B4"; opacity: 1; }
table.dataTable thead th.sorting_desc:after { content: "\25BE"; opacity: 1; }