/* ── Variables ───────────────────────────────────────────────────────────── */
:root {
	color-scheme: light dark;

	--clr-bg:              light-dark(#f2f3f6, #10121c);
	--clr-surface:         light-dark(#ffffff, #191c2a);
	--clr-surface-alt:     light-dark(#f7f8fa, #212538);
	--clr-border:          light-dark(#d8dce8, #2c3050);
	--clr-text:            light-dark(#1c1e2b, #dde0f0);
	--clr-text-muted:      light-dark(#6b7280, #8890b0);
	--clr-link:            light-dark(#2e60c8, #7aacff);
	--clr-link-hover:      light-dark(#1e48a0, #a6c8ff);

	--clr-header-bg:       light-dark(#14172a, #0a0c14);
	--clr-header-text:     light-dark(#e6e9f4, #dde0f0);
	--clr-header-link:     light-dark(#b8c0d8, #9098b8);
	--clr-header-link-hover: light-dark(#ffffff, #dde0f0);

	--clr-danger:          light-dark(#b03328, #e07070);
	--clr-danger-bg:       light-dark(#fdf2f1, #2a1212);
	--clr-danger-border:   light-dark(#f5c4bf, #6a2020);
	--clr-warning:         light-dark(#b85c10, #f0a040);
	--clr-warning-bg:      light-dark(#fef7ec, #221608);
	--clr-warning-border:  light-dark(#f5c88a, #604010);
	--clr-success:         light-dark(#1e7e44, #60c87a);
	--clr-success-bg:      light-dark(#f0faf4, #0e2018);
	--clr-success-border:  light-dark(#a3d9b4, #20583a);

	--clr-badge-pending:   light-dark(#c07810, #f0a030);
	--clr-badge-pending-bg: light-dark(#fff4d6, #2a1e04);
	--clr-badge-detected:  light-dark(#a82020, #e07070);
	--clr-badge-detected-bg: light-dark(#ffe8e8, #2a0808);
	--clr-badge-mod-author-bg: light-dark(#2e60c8, #1e4a9e);

	--clr-notification:    light-dark(#c0392b, #e07070);

	--radius:    4px;
	--radius-lg: 8px;
	--shadow-sm: 0 1px 3px light-dark(rgba(0,0,0,.08), rgba(0,0,0,.35));
	--shadow-md: 0 2px 8px light-dark(rgba(0,0,0,.12), rgba(0,0,0,.5));

	--content-width: 1000px;
	--header-height: 48px;
}

/* ── Forced colour-scheme overrides (set via JS / localStorage) ───────────── */
html.force-dark  { color-scheme: dark; }
html.force-light { color-scheme: light; }

/* ── Reset & base ────────────────────────────────────────────────────────── */
:where(:not(ul):not(ol)), *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }

html { background: var(--clr-bg); }

body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	background: transparent;
	isolation: isolate;
	color: var(--clr-text);
	min-height: 100vh;
}

#hex-bg {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: -1;
	pointer-events: none;
	display: block;
}

a {
	color: var(--clr-link);
	text-decoration: none;
}
a:hover {
	color: var(--clr-link-hover);
	text-decoration: underline;
}

h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; }
h2 { font-size: 1.2rem; font-weight: 600; margin: 1.25rem 0 0.6rem; }
h3 { font-size: 1rem;   font-weight: 600; margin: 1rem 0 0.5rem; }

p { margin: 0.5rem 0; }

hr {
	border: none;
	border-top: 1px solid var(--clr-border);
	margin: 1rem 0;
}

code {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 0.875em;
	background: var(--clr-surface-alt);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	padding: 0.1em 0.35em;
	color: var(--clr-text);
}

blockquote {
	border-left: 3px solid var(--clr-border);
	padding-left: 0.75rem;
	color: var(--clr-text-muted);
	margin: 0.5rem 0;
}

[hidden] {
	display: none !important;
}

/* ── Form elements ───────────────────────────────────────────────────────── */
input[type=text],
input[type=url],
input[type=search],
input[type=file],
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	color: var(--clr-text);
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	padding: 0.35rem 0.6rem;
	outline: none;
	transition: border-color 0.15s;
}
input[type=text]:focus,
input[type=url]:focus,
input[type=search]:focus,
select:focus,
textarea:focus {
	border-color: var(--clr-link);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--clr-link) 20%, transparent);
}
input[type=file] { padding: 0.25rem; }

textarea {
	resize: vertical;
	width: 100%;
}

label {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	cursor: pointer;
}

button {
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	background: var(--clr-surface-alt);
	color: var(--clr-text);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	padding: 0.35rem 0.8rem;
	transition: background 0.15s, border-color 0.15s;
}
button:hover {
	background: var(--clr-border);
}
button[type=submit]:not(.destructive-action):not(.positive-action):not(.tag-remove-btn):not(.moderation-toggle):not(.no-button-background) {
	background: var(--clr-link);
	color: #fff;
	border-color: var(--clr-link);
}
button[type=submit]:not(.destructive-action):not(.positive-action):not(.tag-remove-btn):not(.moderation-toggle):not(.no-button-background):hover {
	background: var(--clr-link-hover);
	border-color: var(--clr-link-hover);
}

button.destructive-action {
	color: var(--clr-danger);
	border-color: var(--clr-danger-border);
}
button.destructive-action:hover {
	background: var(--clr-danger-bg);
}

button.positive-action {
	color: var(--clr-success);
	border-color: var(--clr-success-border);
}
button.positive-action:hover {
	background: var(--clr-success-bg);
}

/* ── Site header ─────────────────────────────────────────────────────────── */
/* ── Full-width toggle ───────────────────────────────────────────────────── */
/* In normal flex flow (after the flex:1 nav) so it can never overlap nav links */
.wide-toggle {
	display: none;
	flex-shrink: 0;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.15);
	color: var(--clr-header-link);
	padding: 0.25rem 0.5rem;
	border-radius: var(--radius);
	cursor: pointer;
	line-height: 0;
}
.wide-toggle:hover {
	background: rgba(255,255,255,0.1);
	color: var(--clr-header-link-hover);
	border-color: rgba(255,255,255,0.3);
}
@media (min-width: 1200px) {
	.wide-toggle { display: flex; align-items: center; }
}

#site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--header-height);
	background: var(--clr-header-bg);
	color: var(--clr-header-text);
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 0 1.5rem;
	box-shadow: var(--shadow-md);
}

#site-header .site-logo {
	flex-shrink: 0;
	height: 100%;
	display: flex;
	align-items: center;
	gap: .5em;
}
.site-logo-text {
	font-size: 1.1rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.02em;
	text-decoration: none;
}
#site-header .site-logo:hover, #site-header .site-logo:hover a { color: #fff; text-decoration: none; opacity: 0.85; }

.site-logo img {
	max-height: 80%;
}
.site-logo-img {
	display: contents;
}

#site-header .site-nav {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex-wrap: wrap;
	flex: 1;
	margin-top: calc(var(--header-height) - 2.5em);
	font-size: 0.9rem;
}

#site-header .site-nav a {
	color: var(--clr-header-link);
	white-space: nowrap;
	padding: 0.25rem 0.55rem;
	border-radius: var(--radius);
	transition: background 0.12s, color 0.12s;
}
#site-header .site-nav > * {
	margin-top: calc(2.5em - var(--header-height));
}
#site-header .site-nav a:hover {
	color: var(--clr-header-link-hover);
	background: rgba(255, 255, 255, 0.08);
	text-decoration: none;
}
#site-header .site-nav .topbar-discord-link { display: flex; align-items: center; gap: 0.35em; }
.topbar-discord-icon { width: 1em; height: 1em; vertical-align: middle; opacity: 0.8; filter: brightness(0) invert(1); }
#site-header .site-nav .topbar-discord-link:hover .topbar-discord-icon { opacity: 1; }

/* Tools hover submenu */
#site-header .nav-dropdown { position: relative; display: inline-flex; align-items: center; }
#site-header .nav-dropdown-toggle {
	color: var(--clr-header-link);
	font-size: 1em;
	white-space: nowrap;
	padding: 0.25rem 0.55rem;
	border: none;
	background: none;
	border-radius: var(--radius);
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	transition: background 0.12s, color 0.12s;
	line-height: inherit;
}
#site-header .nav-dropdown-toggle:hover,
#site-header .nav-dropdown:focus-within .nav-dropdown-toggle {
	color: var(--clr-header-link-hover);
	background: rgba(255, 255, 255, 0.08);
	border: none;
}
.nav-dropdown-caret { opacity: 0.7; transition: transform 0.12s; }
#site-header .nav-dropdown:hover .nav-dropdown-caret,
#site-header .nav-dropdown:focus-within .nav-dropdown-caret { transform: rotate(180deg); }
#site-header .nav-dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 12rem;
	flex-direction: column;
	gap: 0.1rem;
	background: var(--clr-header-bg);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	padding: 0.3rem;
	z-index: 200;
}
#site-header .nav-dropdown:hover .nav-dropdown-menu,
#site-header .nav-dropdown:focus-within .nav-dropdown-menu { display: flex; }

/* On the collapsed mobile menu there's no hover — flatten the Tools items into the column. */
@media (max-width: 900px) {
	#site-header .nav-dropdown { display: contents; }
	#site-header .nav-dropdown-toggle { display: none; }
	#site-header .nav-dropdown-menu,
	#site-header .nav-dropdown:hover .nav-dropdown-menu,
	#site-header .nav-dropdown:focus-within .nav-dropdown-menu { display: contents; }
}

#site-header .user-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	color: var(--clr-header-text);
	font-size: 0.9rem;
	white-space: nowrap;
}

.user-avatar {
	border-radius: 50%;
	vertical-align: middle;
	width: 28px;
	height: 28px;
}

#site-header form {
	display: inline;
}
#site-header button {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.2);
	color: var(--clr-header-link);
	font-size: 0.85rem;
	padding: 0.2rem 0.6rem;
}
#site-header button:hover {
	background: rgba(255,255,255,0.1);
	color: var(--clr-header-link-hover);
	border-color: rgba(255,255,255,0.35);
}

.notification-count {
	background: var(--clr-notification);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	border-radius: 3px;
	padding: 0 0.3em;
	margin-left: 0.2em;
	height: inherit;
	align-items: center;
	margin-top: -6px;
}

/* ── Page layout ─────────────────────────────────────────────────────────── */
main {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 1.5rem 1.25rem 3rem;
}
main:has(.site-slogan) {
	padding-top: 0;
}
html.full-width main {
	max-width: none;
}

main > nav {
	margin-bottom: 1rem;
	font-size: 0.9rem;
	color: var(--clr-text-muted);
}
main > nav a {
	color: var(--clr-text-muted);
}
main > nav a:hover { color: var(--clr-link); }

.site-slogan {
	text-align: center;
	font-size: 0.85rem;
	color: #707070;
	transform: translateY(.3em);
	font-style: italic;
}

/* Login page */
main.page-centered {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - var(--header-height));
	padding-top: 0;
	gap: 1rem;
	text-align: center;
}

.login-prompt { color: var(--clr-text-muted); margin-bottom: 0.5rem; }

.login-btn {
	display: inline-block;
	background: #5865f2; /* Discord brand */
	color: #fff !important;
	font-weight: 600;
	padding: 0.65rem 1.5rem;
	border-radius: var(--radius-lg);
	text-decoration: none !important;
	font-size: 1rem;
	transition: opacity 0.15s;
}
.login-btn:hover { opacity: 0.88; }

.error {
	color: var(--clr-danger);
	background: var(--clr-danger-bg);
	border: 1px solid var(--clr-danger-border);
	border-radius: var(--radius);
	padding: 0.5rem 0.75rem;
}
.success-message {
	color: var(--clr-success);
	background: var(--clr-success-bg);
	border: 1px solid var(--clr-success-border);
	border-radius: var(--radius);
	padding: 0.5rem 0.75rem;
}

/* ── Status badges ───────────────────────────────────────────────────────── */
.status-badge {
	display: inline-block;
	font-size: 0.75em;
	font-weight: 600;
	padding: 0.1em 0.45em;
	border-radius: var(--radius);
	vertical-align: middle;
	line-height: 1.5;
}
.status-badge--vt-pending {
	background: var(--clr-badge-pending-bg);
	color: var(--clr-badge-pending);
	border: 1px solid var(--clr-badge-pending);
}
.status-badge--vt-detected {
	background: var(--clr-badge-detected-bg);
	color: var(--clr-badge-detected);
	border: 1px solid var(--clr-badge-detected);
}
.status-badge--vt-clean {
	background: var(--clr-success-bg);
	color: var(--clr-success);
	border: 1px solid var(--clr-success-border);
}
/* Badges that link to the VirusTotal report keep badge colors, not link colors */
a.status-badge {
	text-decoration: none;
}
a.status-badge:hover {
	text-decoration: underline;
}
/* Moderator VT-verdict override button, inline with the badges */
.vt-override-form {
	display: inline-block;
	vertical-align: middle;
}
.vt-override-form button {
	font-size: 0.7em;
	padding: 0.1em 0.45em;
}

.mod-author-badge {
	display: inline-block;
	background: var(--clr-badge-mod-author-bg);
	color: #fff;
	font-size: 0.72em;
	font-weight: 700;
	padding: 0.1em 0.45em;
	border-radius: var(--radius);
	vertical-align: middle;
}

/* ── Mod search bar (index) ──────────────────────────────────────────────── */
.mod-search-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: .5rem 0;
}

.mod-search-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	flex: 1;
	padding: 0.6rem 0.9rem;
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}
.mod-search-form input[type=search] { flex: 1; min-width: 140px; }

.sort-bar {
	display: flex; align-items: center; gap: 0.5rem;
	margin-bottom: 0.5rem; font-size: 0.875rem;
	background: var(--clr-bg); padding: 0.4rem 0.6rem; border-radius: var(--radius-lg);
}
.sort-bar-label { color: var(--clr-text-muted); }
.sort-bar-pagination {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-left: auto;
	white-space: nowrap;
}
.sort-bar-pagination .mod-pagination-info { white-space: nowrap; }
.sort-bar-pagination .mod-page-numbers { display: flex; align-items: center; gap: 0.25rem; }
.sort-bar-option {
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius);
	border: 1px solid transparent;
	color: var(--clr-text-muted);
	text-decoration: none;
}
.sort-bar-option:hover { color: var(--clr-text); border-color: var(--clr-border); }
.sort-bar-option.active {
	color: var(--clr-link); border-color: color-mix(in srgb, var(--clr-link) 40%, var(--clr-border));
	font-weight: 600;
}

.rank-select { position: relative; }
.rank-select-trigger {
	display: inline-flex; align-items: center; gap: 0.3rem;
	padding: 0.35rem 0.6rem; cursor: pointer;
	background: var(--clr-surface); border: 1px solid var(--clr-border);
	border-radius: var(--radius); font-size: inherit; white-space: nowrap;
	font-family: inherit; color: var(--clr-text); outline: none;
	transition: border-color 0.15s;
}
.rank-select-trigger:hover,
.rank-select.open .rank-select-trigger { border-color: var(--clr-link); box-shadow: 0 0 0 2px color-mix(in srgb, var(--clr-link) 20%, transparent); }
.rank-select-dropdown {
	display: none; position: absolute; top: calc(100% + 4px); left: 0;
	min-width: 100%; background: var(--clr-surface); border: 1px solid var(--clr-border);
	border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 10; overflow: hidden;
}
.rank-select.open .rank-select-dropdown { display: block; }
.rank-select-option {
	display: flex; align-items: center; gap: 0.4rem;
	padding: 0.35rem 0.65rem; cursor: pointer; font-size: 0.875rem; white-space: nowrap;
}
.rank-select-option:hover { background: var(--clr-surface-alt, color-mix(in srgb, var(--clr-surface) 85%, var(--clr-border))); }
.rank-select-option.selected { font-weight: 600; }

.submit-mod-btn {
	font-weight: 600;
	font-size: 0.9rem;
	white-space: nowrap;
	text-decoration: none;
	display: flex;
	align-items: center;
	border: 3px solid #8303FB;
	border-radius: 0.6em;
	color: #8303FB;
	background: #DBB4FF;
}
.submit-mod-btn:hover {
	text-decoration: none;
	filter: brightness(150%);
	color: #8303FB;
}
.submit-mod-btn-text {
	padding: 0.7em;
}
.submit-mod-btn-icon {
	height: 3em;
	margin-left: .5em;
	stroke: #8303FB;
	stroke-width: 6;
}

.category-tabs {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--clr-border);
	background: var(--clr-bg);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	padding: 0.15rem 0.6rem 0;
	margin-bottom: 0.5rem;
}
.category-tab {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	padding: 0.3rem 0.1rem 0.35rem;
	color: var(--clr-text-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-size: 0.95rem;
}
.category-tab:hover { color: var(--clr-text); text-decoration: none; }
.category-tab.active {
	color: var(--clr-text);
	font-weight: 600;
	border-bottom-color: var(--clr-link);
}
.category-count { font-size: 0.78em; opacity: 0.75; font-variant-numeric: tabular-nums; }
.tabs-filters {
	margin-left: auto;
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	flex-wrap: wrap;
	font-size: 0.85rem;
	color: var(--clr-text-muted);
	padding-bottom: 0.35rem;
	min-width: 0;
}
.tabs-filters strong { color: var(--clr-text); }
.tag-filter-joiner { margin: 0 0.25rem; font-style: italic; }

/* ── Tag overlay ─────────────────────────────────────────────────────────── */
.tag-overlay {
	border: 1px solid color-mix(in srgb, var(--clr-border) 60%, transparent);
	border-radius: 12px;
	padding: 0;
	width: min(480px, 92vw);
	max-height: min(560px, 85vh);
	flex-direction: column;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);
	background: var(--clr-surface);
	color: var(--clr-text);
	/* <dialog> default positioning is already centered; reinforce it */
	margin: auto;
}
.tag-overlay[open] { display: flex; }
.tag-overlay::backdrop {
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(2px);
}
.tag-overlay-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem 0.85rem;
	border-bottom: 1px solid var(--clr-border);
	flex-shrink: 0;
}
.tag-overlay-title { font-weight: 600; font-size: 1rem; }
.tag-overlay-mode {
	display: flex;
	gap: 0.15rem;
	background: var(--clr-bg);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	padding: 0.2rem;
}
.tag-overlay-mode label {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.55rem;
	border-radius: calc(var(--radius) - 1px);
	font-size: 0.8rem;
	cursor: pointer;
	color: var(--clr-text-muted);
	transition: background 0.1s, color 0.1s;
}
.tag-overlay-mode label:has(input:checked) {
	background: var(--clr-surface);
	color: var(--clr-text);
	box-shadow: var(--shadow-sm);
}
.tag-overlay-mode input[type=radio] { display: none; }
.tag-overlay-search {
	margin: 0.85rem 1.25rem 0.5rem;
	padding: 0.45rem 0.75rem;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	background: var(--clr-bg);
	color: var(--clr-text);
	font-size: 0.875rem;
	width: calc(100% - 2.5rem);
	box-sizing: border-box;
	flex-shrink: 0;
}
.tag-overlay-search:focus { outline: none; border-color: var(--clr-link); box-shadow: 0 0 0 2px color-mix(in srgb, var(--clr-link) 20%, transparent); }
.tag-overlay-list {
	overflow-y: auto;
	flex: 1;
	padding: 0.5rem 1.25rem 0.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-content: flex-start;
}
.tag-overlay-item {
	display: contents;
}
.tag-overlay-item input[type=checkbox] { display: none; }
.tag-overlay-item input[type=checkbox]:checked + .tag {
	background: var(--clr-link);
	color: #fff;
	border-color: var(--clr-link);
}
/* Tri-state items (index page tag filter) */
.tag-overlay-item[data-state] { cursor: pointer; }
.tag-overlay-item[data-state="included"] .tag {
	background: var(--clr-link);
	color: #fff;
	border-color: var(--clr-link);
}
.tag-overlay-item[data-state="excluded"] .tag {
	background: color-mix(in srgb, var(--clr-danger) 10%, var(--clr-surface-alt));
	color: var(--clr-danger);
	border-color: color-mix(in srgb, var(--clr-danger) 35%, var(--clr-border));
	text-decoration: line-through;
}
/* Hover in the tag overlay: tint rather than full active colour so unchecked/checked stay distinct */
.tag-overlay-list .tag:hover {
	background: color-mix(in srgb, var(--clr-link) 14%, var(--clr-surface-alt));
	color: var(--clr-link);
	border-color: color-mix(in srgb, var(--clr-link) 40%, var(--clr-border));
}
.tag-overlay-list .tag-overlay-item[data-state="included"] .tag:hover {
	background: color-mix(in srgb, var(--clr-link) 82%, #000);
	border-color: color-mix(in srgb, var(--clr-link) 82%, #000);
	color: #fff;
}
.tag-overlay-list .tag-overlay-item[data-state="excluded"] .tag:hover {
	background: color-mix(in srgb, var(--clr-danger) 20%, var(--clr-surface-alt));
	border-color: color-mix(in srgb, var(--clr-danger) 55%, var(--clr-border));
	color: var(--clr-danger);
}
.tag-overlay-list .tag-overlay-item:has(input:checked) .tag:hover {
	background: color-mix(in srgb, var(--clr-link) 82%, #000);
	border-color: color-mix(in srgb, var(--clr-link) 82%, #000);
	color: #fff;
}
.tag-overlay-list .tag-overlay-item--protected .tag { cursor: default; }
.tag-overlay-list .tag-overlay-item--protected .tag:hover {
	background: var(--clr-surface-alt);
	color: var(--clr-text-muted);
	border-color: var(--clr-border);
}
.excluded-tag-label { text-decoration: line-through; color: var(--clr-danger); }
.mod-tag-request-section {
	padding: 0.5rem 1.25rem 0.75rem;
}
.tag-overlay-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.25rem;
	border-top: 1px solid var(--clr-border);
	flex-shrink: 0;
	background: var(--clr-surface-alt);
	border-radius: 0 0 12px 12px;
}

/* ── Mod grid ────────────────────────────────────────────────────────────── */
.mod-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
}

.mod-pagination {
	display: flex;
	gap: 1rem;
	margin: 1.25rem 0;
}
.mod-pagination-info {
	color: var(--clr-text-muted);
	font-size: 0.9rem;
	flex-grow: 1;
	align-self: center;
}
.mod-pagination-perpage {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--clr-text-muted);
	font-size: 0.9rem;
	flex-grow: 1;
}
.mod-pagination-pages {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
}
.mod-page-numbers {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
.mod-pagination-link,
.mod-page-number {
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	background: var(--clr-surface);
	text-decoration: none;
	color: var(--clr-text);
}
.mod-page-number {
	padding: 0.35rem 0.7rem;
}
.mod-pagination-link:hover,
.mod-page-number:hover {
	border-color: color-mix(in srgb, var(--clr-link) 40%, var(--clr-border));
}
.mod-page-number.active {
	color: var(--clr-link);
	border-color: color-mix(in srgb, var(--clr-link) 40%, var(--clr-border));
	font-weight: 600;
}
.mod-page-ellipsis {
	color: var(--clr-text-muted);
	padding: 0 0.15rem;
}

@media (max-width: 640px) {
	.mod-pagination {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}
	.mod-pagination-info,
	.mod-pagination-perpage,
	.mod-pagination-pages {
		justify-self: center;
	}
}

.mod-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.15s, border-color 0.15s;
}
.mod-card:hover {
	box-shadow: var(--shadow-md);
	border-color: color-mix(in srgb, var(--clr-link) 40%, var(--clr-border));
}

.mod-card-image-link {
	display: block;
	line-height: 0;
}
.mod-card-thumbnail {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	display: block;
}

/* Stretched-link: the mod name <a> covers the full card behind the content */
.mod-card-name a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
}
/* Tags and author link sit above the stretched link */
.mod-card .tag,
.mod-card-author a { position: relative; z-index: 1; }

.mod-card-overlay-badge {
	position: absolute;
	top: 0.4rem;
	left: 0.4rem;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.15em 0.5em;
	border-radius: var(--radius);
	pointer-events: none;
}
.mod-card-overlay-badge--detected {
	background: var(--clr-badge-detected-bg);
	color: var(--clr-badge-detected);
	border: 1px solid var(--clr-badge-detected);
}
.mod-card-overlay-badge--pending {
	background: var(--clr-badge-pending-bg);
	color: var(--clr-badge-pending);
	border: 1px solid var(--clr-badge-pending);
}
.mod-card-overlay-badge--hidden {
	background: var(--clr-surface-alt);
	color: var(--clr-text-muted);
	border: 1px solid var(--clr-border);
}
.mod-card-overlay-badge--deprecated {
	background: var(--clr-warning-bg);
	color: var(--clr-warning);
	border: 1px solid var(--clr-warning-border);
}

.mod-card-stats {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	padding: 0.45rem 0.75rem;
	background: var(--clr-surface-alt);
	border-bottom: 1px solid var(--clr-border);
	font-size: 0.82rem;
	color: var(--clr-text-muted);
}

.mod-card-stat {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
}
.mod-card-stat--stars { color: #c9920a; }
.mod-card-stat--downloads { color: var(--clr-text-muted); }

.mod-card-stat--stars,
.mod-stat--stars { color: light-dark(currentColor, #e8b030); }
.star-btn .star-icon { color: light-dark(currentColor, var(--clr-text-muted)); }
.star-btn:hover .star-icon,
.star-btn--starred .star-icon { color: light-dark(currentColor, #e8b030); }

.mod-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.75rem;
}

.mod-card-heading {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.mod-card-name {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
}
.mod-card-name a {
	color: var(--clr-text);
	text-decoration: none;
	word-break: break-word;
}
.mod-card-name a:hover { color: var(--clr-link); }

.mod-card-author {
	font-size: 0.78rem;
	color: var(--clr-text-muted);
}

.mod-card-description {
	font-size: 0.82rem;
	color: var(--clr-text-muted);
	line-height: 1.45;
	margin: 0;
}

.tag-list { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.tag {
	display: inline-block;
	font-size: 0.78rem;
	padding: 0.1em 0.5em;
	border-radius: 999px;
	background: var(--clr-surface-alt);
	color: var(--clr-text-muted);
	border: 1px solid var(--clr-border);
	text-decoration: none;
	transition: background 0.12s, color 0.12s;
}
.tag:hover {
	background: var(--clr-link);
	color: #fff;
	border-color: var(--clr-link);
	text-decoration: none;
}
.tag--install-location {
	background: color-mix(in srgb, var(--clr-link) 12%, var(--clr-surface-alt));
	border-color: color-mix(in srgb, var(--clr-link) 35%, var(--clr-border));
	color: var(--clr-link);
	cursor: help;
}
.tag--install-location:hover {
	background: color-mix(in srgb, var(--clr-link) 20%, var(--clr-surface-alt));
	color: var(--clr-link);
	border-color: color-mix(in srgb, var(--clr-link) 50%, var(--clr-border));
}

/* ── Mod page nav ────────────────────────────────────────────────────────── */
.mod-page-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.mod-install-help-btn {
	font-size: 0.85rem;
	background: var(--clr-link);
	color: #fff;
	border-color: var(--clr-link);
	padding: 0.3rem 0.75rem;
}
.mod-install-help-btn:hover {
	background: var(--clr-link-hover);
	border-color: var(--clr-link-hover);
}

/* ── Install dialog ──────────────────────────────────────────────────────── */
.install-dialog { max-width: 520px; width: 90vw; }
.install-dialog-body { padding: .5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.install-step { display: flex; gap: 0.85rem; align-items: flex-start; }
.install-step-num {
	flex-shrink: 0;
	width: 1.75rem; height: 1.75rem;
	border-radius: 50%;
	background: var(--clr-link);
	color: #fff;
	font-weight: 700; font-size: 0.9rem;
	display: flex; align-items: center; justify-content: center;
	margin-top: 0.1rem;
}
.install-step-content { flex: 1; min-width: 0; }
.install-step-content p { margin: 0.3rem 0; font-size: 0.9rem; }
.install-note { color: var(--clr-text-muted); font-size: 0.83rem !important; }

/* ── Mod hero (mod page top section) ─────────────────────────────────────── */
.mod-hero {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	margin: 1rem 0 1.25rem;
	padding: 1.25rem;
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}
.mod-icon-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.mod-hero .mod-icon {
	border-radius: var(--radius-lg);
	width: 112px;
	height: 112px;
	object-fit: cover;
}
.mod-donate-btn {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 0.8rem;
	padding: 0.25rem 0.5rem;
	border-radius: var(--radius);
	background: var(--clr-surface-alt);
	border: 1px solid var(--clr-border);
	color: var(--clr-text);
	text-decoration: none;
	white-space: nowrap;
}
.mod-donate-btn:hover { border-color: var(--clr-link); color: var(--clr-link); text-decoration: none; }
.mod-hero .mod-meta-block { flex: 1; min-width: 0; position: relative; }
.mod-hero h1 { margin-bottom: 0.25rem; padding-right: 2rem; }
.mod-title-row {
	display: flex;
	flex-wrap: wrap;
	/* baseline, not center: pills anchored to the name's text line read as level;
	   centering against the tall h1 line box makes them look a couple px high */
	align-items: baseline;
	gap: 0.5rem 0.6rem;
	padding-right: 2.25rem;
}
.mod-title-row h1 { margin-bottom: 0; padding-right: 0; overflow-wrap: anywhere; }
/* Chip and scan badge share exact metrics so they sit pixel-aligned on one line */
.mod-title-row .status-badge,
.mod-version-chip {
	display: inline-flex;
	align-items: center;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.4;
	padding: 0.15em 0.55em;
	border-radius: var(--radius);
}
.mod-version-chip {
	color: var(--clr-text-muted);
	background: var(--clr-surface-alt);
	border: 1px solid var(--clr-border);
}

.mod-byline {
	color: var(--clr-text-muted);
	font-size: 0.9rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0.25rem 0 0.75rem;
}
.mod-stat {
	display: inline-flex;
	align-items: baseline;
	gap: 0.2rem;
}
.mod-stat--stars { color: #c9920a; }
.star-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-size: inherit;
	color: var(--clr-text-muted);
	line-height: 1;
}
.star-btn .star-icon { color: var(--clr-text-muted); transition: color 0.12s; }
.star-btn:hover .star-icon, .star-btn--starred .star-icon { color: #c9920a; }

/* ── Cogwheel action menu ─────────────────────────────────────────────────── */
.mod-cog-menu {
	position: absolute;
	top: 0;
	right: 0;
}
.mod-cog-menu > summary {
	list-style: none;
	cursor: pointer;
	width: 1.75rem;
	height: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius);
	color: var(--clr-text-muted);
	font-size: 1.1rem;
	user-select: none;
}
.mod-cog-menu > summary::-webkit-details-marker { display: none; }
.mod-cog-menu > summary:hover { background: var(--clr-bg); color: var(--clr-text); }
.mod-cog-panel {
	position: absolute;
	top: calc(100% + 2px);
	right: 0;
	min-width: 180px;
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	padding: 0.3rem;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}
.mod-cog-panel a,
.mod-cog-panel > form > button,
.mod-cog-panel > button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	padding: 0.35rem 0.65rem;
	border-radius: var(--radius);
	font-size: 0.875rem;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--clr-text);
	text-decoration: none;
}
.mod-cog-panel a:hover,
.mod-cog-panel > form > button:hover,
.mod-cog-panel > button:hover { background: var(--clr-bg); text-decoration: none; }
.mod-cog-panel .destructive-action { color: var(--clr-danger, #c0392b); }
.mod-cog-panel .destructive-action:hover { background: var(--clr-bg); }
.mod-cog-panel .positive-action { color: var(--clr-success, #27ae60); }
.mod-cog-panel hr { border: none; border-top: 1px solid var(--clr-border); margin: 0.25rem 0; }
.mod-cog-panel .report-inline-form {
	display: flex;
	gap: 0.3rem;
	padding: 0.25rem 0.65rem 0.35rem;
}
.mod-cog-panel .report-inline-form input[type=text] { flex: 1; min-width: 0; font-size: 0.8rem; }
.mod-cog-panel .report-inline-form button { width: auto; padding: 0.2rem 0.5rem; }

.mod-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	align-items: center;
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--clr-border);
}
a.mod-download-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.9rem;
	background: var(--clr-link);
	color: #fff;
	border: 1px solid var(--clr-link);
	border-radius: var(--radius);
	font-weight: 600;
	text-decoration: none;
}
a.mod-download-btn:hover {
	background: var(--clr-link-hover);
	border-color: var(--clr-link-hover);
	color: #fff;
	text-decoration: none;
}
.mod-dep-copy-btn { font-size: 0.85rem; }
.mod-action-links {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-left: auto;
	font-size: 0.9rem;
	color: var(--clr-text-muted);
}

.mod-hidden-notice {
	background: var(--clr-warning-bg);
	border: 1px solid var(--clr-warning-border);
	color: var(--clr-warning);
	border-radius: var(--radius);
	padding: 0.65rem 0.9rem;
	margin: 0.75rem 0;
	font-size: 0.9rem;
}
.mod-deprecated-notice {
	background: var(--clr-warning-bg);
	border: 1px solid var(--clr-warning-border);
	color: var(--clr-warning);
	border-radius: var(--radius);
	padding: 0.65rem 0.9rem;
	margin: 0.75rem 0;
	font-size: 0.9rem;
}
.mod-deletion-notice {
	background: var(--clr-danger-bg);
	border: 1px solid var(--clr-danger-border);
	color: var(--clr-danger);
	border-radius: var(--radius);
	padding: 0.65rem 0.9rem;
	margin: 0.75rem 0;
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* ── Dependency list ─────────────────────────────────────────────────────── */
.dependency-list {
	margin: 0.75rem 0;
	padding: 0.75rem 1rem;
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
}
.dependency-list strong { display: block; margin-bottom: 0.4rem; }
.dependency-list ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding-left: 0.5rem;
}
.dependency-list li::before {
	content: "→ ";
	color: var(--clr-text-muted);
}
.incompatibility-list {
	background: var(--clr-warning-bg);
	border-color: var(--clr-warning-border);
}
.incompatibility-list summary {
	cursor: pointer;
}
.incompatibility-list summary strong {
	display: inline;
	margin-bottom: 0;
}
.incompatibility-list li::before {
	content: "⚠ ";
	color: var(--clr-warning);
}

/* ── Community tag voting ────────────────────────────────────────────────── */
.tag-vote-form { display: inline; }
.tag--suggested {
	opacity: 0.75;
	border-style: dashed;
	cursor: pointer;
}
.tag--voted {
	opacity: 1;
	outline: 1px solid currentColor;
}
.tag--suggest-btn {
	cursor: pointer;
	background: none;
	border-style: dashed;
	color: var(--clr-text-muted);
}

/* ── Community screenshots ───────────────────────────────────────────────── */
.user-images-heading { margin: 0 0 0.4rem; font-size: 1rem; }
.user-images-empty { margin: 0.25rem 0; font-size: 0.9rem; color: var(--clr-text-muted); }
.user-images-pending { margin-top: 0.5rem; }
.user-images-pending summary { cursor: pointer; font-size: 0.9rem; color: var(--clr-text-muted); }
.gallery-item--pending { opacity: 0.85; }
.user-image-review-actions {
	position: absolute;
	bottom: 4px;
	right: 4px;
	display: flex;
	gap: 4px;
}
.user-image-review-actions button {
	font-size: 0.8rem;
	padding: 0.1rem 0.45rem;
	cursor: pointer;
}

/* ── Image gallery ───────────────────────────────────────────────────────── */
.mod-image-gallery-section {
	margin: 0.75rem 0;
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: 0.75rem 1rem;
	box-shadow: var(--shadow-sm);
}
.mod-image-gallery {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0;
	scroll-snap-type: x mandatory;
	padding-bottom: 7px;
}
.gallery-item {
	position: relative;
	flex-shrink: 0;
	height: 150px;
	scroll-snap-align: start;
}
.gallery-item.dragging { opacity: 0.4; }
.gallery-thumb {
	max-height: 150px;
	max-width: 260px;
	object-fit: contain;
	cursor: pointer;
	border-radius: var(--radius-sm);
	display: block;
}
.gallery-delete-btn {
	position: absolute;
	top: 3px;
	right: 3px;
	background: rgba(0,0,0,.65);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.gallery-item:hover .gallery-delete-btn { display: flex; }
.gallery-upload-btn {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	border: 1px dashed var(--clr-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-size: 0.85rem;
	color: var(--clr-text-muted);
}
.gallery-upload-btn:hover { border-color: var(--clr-link); color: var(--clr-link); }

/* Lightbox */
#lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.88);
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: center;
}
#lightbox.open { display: flex; }
#lightbox img {
	max-width: calc(100vw - 20px);
	max-height: calc(100vh - 20px);
	object-fit: contain;
	border-radius: var(--radius-sm);
}
#lightbox-close {
	position: absolute;
	top: 10px;
	right: 16px;
	background: none;
	border: none;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}
#lightbox-prev, #lightbox-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #fff;
	font-size: 4rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 0.5rem;
	opacity: 0.7;
}
#lightbox-prev:hover, #lightbox-next:hover { opacity: 1; }
#lightbox-prev { left: 0; }
#lightbox-next { right: 0; }

/* ── Tag section (mod page) ──────────────────────────────────────────────── */
.tag-section {
	margin: 0.75rem 0;
	padding: 0.75rem 1rem;
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
}
.tag-section > strong { display: block; margin-bottom: 0.5rem; }
.tag-section .tag-list { display: inline; }

.tag-with-remove {
	display: inline-flex;
	align-items: center;
	gap: 0;
}

.tag-remove-btn {
	background: none;
	border: none;
	color: var(--clr-text-muted);
	padding: 0 0.2em;
	font-size: 0.85em;
	cursor: pointer;
	line-height: 1;
	border-radius: 0 999px 999px 0;
}
.tag-remove-btn:hover { color: var(--clr-danger); background: none; }

.tag-add-form {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.5rem;
}
.tag-request-area {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
	flex-wrap: wrap;
}
.tag-request-hint { font-size: 0.82rem; color: var(--clr-text-muted); }

.pending-tag-requests {
	margin-top: 0.75rem;
	font-size: 0.88rem;
}

/* ── Mod readme ──────────────────────────────────────────────────────────── */
.mod-readme-wrap { position: relative; }
.mod-readme-edit-btn {
	position: absolute;
	top: 0.6rem;
	right: 0.75rem;
	color: var(--clr-text-muted);
	display: flex;
	align-items: center;
	z-index: 1;
}
.mod-readme-edit-btn:hover { color: var(--clr-text); }
.mod-readme {
	margin: 1rem 0;
	padding: 1.25rem;
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	overflow-x: auto;
}
.mod-readme h1:first-child {
	margin-top: 0;
}
.mod-readme h1, .mod-readme h2, .mod-readme h3,
.mod-readme h4, .mod-readme h5, .mod-readme h6 {
	margin: 1.2em 0 0.5em;
}
.mod-readme h1 { font-size: 1.4rem; border-bottom: 1px solid var(--clr-border); padding-bottom: 0.3em; }
.mod-readme h2 { font-size: 1.15rem; border-bottom: 1px solid var(--clr-border); padding-bottom: 0.2em; }
.mod-readme p  { margin: 0.7em 0; }
.mod-readme ul, .mod-readme ol { padding-left: 1.5rem; margin: 0.5em 0; }
.mod-readme pre {
	background: var(--clr-surface-alt);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	padding: 0.75rem 1rem;
	overflow-x: auto;
	margin: 0.75em 0;
}
.mod-readme pre code {
	background: none;
	border: none;
	padding: 0;
	font-size: 0.875rem;
}
.mod-readme img { max-width: 100%; height: auto; }
.mod-readme table {
	border-collapse: collapse;
	width: 100%;
	margin: 0.75em 0;
}
.mod-readme table th,
.mod-readme table td {
	border: 1px solid var(--clr-border);
	padding: 0.35rem 0.6rem;
}
.mod-readme blockquote {
	border-left: 3px solid var(--clr-border);
	padding-left: 0.75rem;
	margin-left: 0;
	color: var(--clr-text-muted);
}

/* ── Thread list (mod page) ──────────────────────────────────────────────── */
.thread-list {
	width: 100%;
	border-collapse: collapse;
	background: var(--clr-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	margin: 0.5rem 0;
}
.thread-list th {
	text-align: left;
	padding: 0.5rem 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--clr-text-muted);
	background: var(--clr-surface-alt);
	border-bottom: 1px solid var(--clr-border);
}
.thread-list td {
	padding: 0.55rem 0.75rem;
	border-bottom: 1px solid var(--clr-border);
	vertical-align: middle;
}
.thread-list tr:last-child td { border-bottom: none; }
.thread-list tr:hover td { background: var(--clr-surface-alt); }

.thread-new-form {
	padding: 1rem;
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	margin-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.thread-new-form input[type=text] { width: 100%; }

/* ── Thread posts ────────────────────────────────────────────────────────── */
.thread-opening-post,
.thread-post {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	margin: 0.6rem 0;
	overflow: hidden;
}

.thread-opening-post .post-header {
	padding: 0.65rem 1rem;
	background: var(--clr-surface-alt);
	border-bottom: 1px solid var(--clr-border);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.post-author { font-weight: 600; }
.post-timestamp { font-size: 0.82rem; color: var(--clr-text-muted); }
.post-edited-label { font-size: 0.82rem; color: var(--clr-text-muted); font-style: italic; }
.post-visibility-label { font-size: 0.82rem; color: var(--clr-text-muted); font-style: italic; }

.post-controls {
	margin-left: auto;
	display: flex;
	gap: 0.35rem;
	align-items: center;
	flex-wrap: wrap;
}
.post-controls button,
.post-controls input[type=text] {
	font-size: 0.82rem;
	padding: 0.2rem 0.5rem;
}

.thread-opening-post .post-body,
.thread-post .post-body {
	padding: 0.9rem 1rem;
	word-break: break-word;
	line-height: 1.6;
}
.thread-opening-post .post-body > *:first-child,
.thread-post .post-body > *:first-child { margin-top: 0; }
.thread-opening-post .post-body > *:last-child,
.thread-post .post-body > *:last-child { margin-bottom: 0; }
.post-body p { margin: 0.5em 0; }
.post-body ul, .post-body ol { padding-left: 1.5em; margin: 0.4em 0; }
.post-body code { font-family: monospace; font-size: 0.9em; background: color-mix(in srgb, var(--clr-border) 50%, transparent); padding: 0.1em 0.3em; border-radius: 3px; }
.post-body pre { background: color-mix(in srgb, var(--clr-border) 50%, transparent); padding: 0.75em 1em; border-radius: var(--radius); overflow-x: auto; margin: 0.5em 0; }
.post-body pre code { background: none; padding: 0; }
.post-body blockquote { border-left: 3px solid var(--clr-border); margin: 0.5em 0; padding: 0.1em 0.75em; color: var(--clr-text-muted); }
.post-body a { color: var(--clr-link); }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 { margin: 0.75em 0 0.25em; font-size: 1em; font-weight: 600; }

/* Reply posts use <details> */
.thread-post > summary {
	list-style: none;
	cursor: pointer;
	padding: 0.65rem 1rem;
	background: var(--clr-surface-alt);
	border-bottom: 1px solid transparent;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	user-select: none;
}
.thread-post > summary::-webkit-details-marker { display: none; }
.thread-post[open] > summary { border-bottom-color: var(--clr-border); }


.thread-post--hidden-by-author { border-color: var(--clr-border); }
.thread-post--hidden-by-author > summary { color: var(--clr-text-muted); }

.thread-post--moderator-deleted {
	border-color: var(--clr-danger-border);
	border-left: 3px solid var(--clr-danger);
}
.thread-post--moderator-deleted > summary { color: var(--clr-danger); }

.thread-post--self-deleted {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	padding: 0.5rem 1rem;
	color: var(--clr-text-muted);
	font-size: 0.9rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* ── Thread status badges ─────────────────────────────────────────────────── */
.thread-status-badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.15em 0.55em;
	border-radius: 999px;
	vertical-align: middle;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.thread-status-badge--acknowledged {
	background: color-mix(in srgb, #3b82f6 15%, transparent);
	color: #3b82f6;
	border: 1px solid color-mix(in srgb, #3b82f6 35%, transparent);
}
.thread-status-badge--done {
	background: var(--clr-success-bg);
	color: var(--clr-success);
	border: 1px solid var(--clr-success-border);
}
.thread-status-badge--wont-do {
	background: var(--clr-surface-alt);
	color: var(--clr-text-muted);
	border: 1px solid var(--clr-border);
}
.thread-opening-post--resolved { opacity: 0.75; }
.thread-list-cell--resolved a,
.thread-list-cell--resolved { color: var(--clr-text-muted); }

.post-edit-form {
	padding: 0 1rem 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.post-edit-form .edit-form-actions { display: flex; gap: 0.4rem; }
.post-edit-form textarea { min-height: 100px; }

.thread-reply-form {
	padding: 1rem;
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* ── Report cards ────────────────────────────────────────────────────────── */
.report-card {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: 0.9rem 1rem;
	margin: 0.65rem 0;
	box-shadow: var(--shadow-sm);
}
.report-card--mod-report {
	border-color: var(--clr-warning-border);
	border-left: 3px solid var(--clr-warning);
}
.report-card--post-report .reported-content {
	background: var(--clr-surface-alt);
	border-left: 3px solid var(--clr-border);
	padding: 0.5rem 0.75rem;
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: 0.9rem;
	white-space: pre-wrap;
	word-break: break-word;
	color: var(--clr-text);
	margin: 0.5rem 0;
}
.report-subject { font-size: 0.95rem; margin-bottom: 0.25rem; }
.report-meta { font-size: 0.82rem; color: var(--clr-text-muted); margin-bottom: 0.4rem; }
.report-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.5rem; }

/* ── User list (moderation) ──────────────────────────────────────────────── */
.user-search-form {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 1rem;
}

.user-list {
	width: 100%;
	border-collapse: collapse;
	background: var(--clr-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}
.user-list th {
	text-align: left;
	padding: 0.5rem 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--clr-text-muted);
	background: var(--clr-surface-alt);
	border-bottom: 1px solid var(--clr-border);
}
.user-list td {
	padding: 0.55rem 0.75rem;
	border-bottom: 1px solid var(--clr-border);
	vertical-align: middle;
}
.user-list tr:last-child td { border-bottom: none; }
.user-list tr:hover td { background: var(--clr-surface-alt); }

.user-ban-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}
.user-ban-form label { font-size: 0.82rem; }
.user-ban-form button { font-size: 0.82rem; padding: 0.2rem 0.5rem; }

/* ── User posts (moderation) ─────────────────────────────────────────────── */
.user-profile-header {
	padding: 1rem;
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	margin-bottom: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: flex-start;
}
.user-profile-info { flex: 1; min-width: 160px; }
.user-profile-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}
.user-profile-actions form { display: contents; }

.user-teams-section {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	padding: 0.5rem 1rem;
	margin: 0.75rem 0;
}
/* Profile-page "Send message": card the expanded form (inbox embeds already sit on cards) */
main > .mod-send-message .contact-form {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: 1rem;
}

.user-post-search { display: flex; gap: 0.5rem; align-items: center; margin: 0.75rem 0; }

.post-list-item {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	padding: 0.75rem 1rem;
	margin: 0.5rem 0;
}
.post-list-item .post-context { font-size: 0.9rem; margin-bottom: 0.25rem; }
.post-list-item .post-meta { font-size: 0.82rem; color: var(--clr-text-muted); margin-bottom: 0.4rem; }

/* ── Tag requests (moderation) ───────────────────────────────────────────── */
.tag-admin-panel {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: 1rem;
	margin-bottom: 1.5rem;
}
.tag-admin-panel .add-tag-form {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 0.75rem;
}
.tag-manage-list td {
	vertical-align: center;
	padding-right: .5em;
}
.existing-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.5rem;
}

.tag-request-queue { margin-top: 1rem; }
.tag-request-list {
	width: 100%;
	border-collapse: collapse;
	background: var(--clr-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}
.tag-request-list th {
	text-align: left;
	padding: 0.5rem 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--clr-text-muted);
	background: var(--clr-surface-alt);
	border-bottom: 1px solid var(--clr-border);
}
.tag-request-list td {
	padding: 0.55rem 0.75rem;
	border-bottom: 1px solid var(--clr-border);
	vertical-align: middle;
}
.tag-request-list tr:last-child td { border-bottom: none; }

.tag-request-actions { display: flex; gap: 0.4rem; align-items: center; }

/* ── Contact pages ───────────────────────────────────────────────────────── */
.contact-form { display: flex; flex-direction: column; gap: 0.75rem; }
/* Standalone contact page: card the form (mod-page embeds already sit on a surface) */
main > .contact-form {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: 1.25rem 1.5rem;
	box-shadow: var(--shadow-sm);
}
.contact-form label { flex-direction: column; align-items: flex-start; gap: 0.25rem; width: 100%; }
.contact-form input[type=text],
.contact-form select { width: 100%; }

.mod-send-message { margin: 1rem 0; }
.mod-send-message > summary { cursor: pointer; font-weight: 600; margin-bottom: 0.5rem; }
.mod-send-message .contact-form { margin-top: 0.5rem; }

.contact-message {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: 0.9rem 1rem;
	margin: 0.6rem 0;
	box-shadow: var(--shadow-sm);
}
.contact-message--unread { border-color: var(--clr-link); }
.contact-message--unread .contact-message-subject { font-weight: 700; }
.contact-message--handled {
	border-color: var(--clr-border);
}
.unread-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--clr-link);
	display: inline-block;
	flex-shrink: 0;
}

.inbox-tabs {
	display: flex;
	gap: 0.25rem;
	border-bottom: 1px solid var(--clr-border);
	margin: 1rem 0 0.75rem;
}
.inbox-tabs a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.9rem;
	font-weight: 600;
	color: var(--clr-text-muted);
	text-decoration: none;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: var(--radius) var(--radius) 0 0;
}
.inbox-tabs a.active {
	color: inherit;
	background: var(--clr-surface);
	border-color: var(--clr-border);
	margin-bottom: -1px;
}

.inbox-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0.75rem 0 1rem;
}
.inbox-filters { display: flex; gap: 0.3rem; }
.inbox-filters a {
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	font-size: 0.85rem;
	color: var(--clr-text-muted);
	text-decoration: none;
	border: 1px solid var(--clr-border);
	background: var(--clr-bg);
}
.inbox-filters a.active {
	background: var(--clr-link);
	border-color: var(--clr-link);
	color: #fff;
}
.inbox-bulk-actions { display: flex; gap: 0.5rem; margin-left: auto; }
.inbox-count { font-size: 0.85rem; color: var(--clr-text-muted); background: var(--clr-bg); }
.inbox-section-heading {
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--clr-text-muted);
	margin: 1.25rem 0 0.4rem;
}
.inbox-msg-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }

/* Conversation cards */
.contact-message-snippet {
	flex-basis: 100%;
	font-size: 0.85rem;
	color: var(--clr-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
details[open] > summary .contact-message-snippet { display: none; }
.conv-count {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--clr-text-muted);
	background: var(--clr-surface-alt);
	border: 1px solid var(--clr-border);
	border-radius: 999px;
	padding: 0 0.45em;
}
.conv-msgs {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0.5rem 0;
}
.conv-msg {
	background: var(--clr-surface-alt);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: 0.55rem 0.8rem;
}
/* Replies step in slightly, with a reply arrow before the sender name */
.conv-msg--reply { margin-left: 1.25rem; }
.conv-msg--reply .conv-msg-meta::before {
	content: "↳";
	color: var(--clr-text-muted);
	font-weight: 600;
}

/* Long conversations: middle messages collapse behind a native <details> */
.conv-older { margin-left: 1.25rem; }
.conv-older > summary {
	cursor: pointer;
	width: fit-content;
	font-size: 0.82rem;
	color: var(--clr-text-muted);
	border: 1px dashed var(--clr-border);
	border-radius: 999px;
	padding: 0.2rem 0.85rem;
	list-style: none;
}
.conv-older > summary::-webkit-details-marker { display: none; }
.conv-older > summary:hover { color: var(--clr-link); border-color: var(--clr-link); }
.conv-older[open] > summary { margin-bottom: 0.5rem; }
.conv-older[open] > summary::after { content: " — hide"; }
.conv-older-list { display: flex; flex-direction: column; gap: 0.5rem; }
.conv-older-list .conv-msg--reply { margin-left: 0; }
.conv-msg--own {
	border-left: 3px solid var(--clr-link);
}
.conv-msg--own .conv-msg-sender { color: var(--clr-link); }
.conv-msg-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.82rem;
	color: var(--clr-text-muted);
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--clr-border);
}
.conv-msg-meta strong { color: var(--clr-text); }
.conv-msg .contact-message-body { margin: 0.45rem 0 0.15rem; }
.conv-handle-form { display: inline; margin-left: 0.3rem; }
.conv-handle-form button { font-size: 0.78rem; padding: 0.1rem 0.5rem; }

/* Outbox read receipts */
.outbox-receipt {
	font-size: 0.78rem;
	color: var(--clr-text-muted);
	border: 1px solid var(--clr-border);
	border-radius: 999px;
	padding: 0 0.5em;
	white-space: nowrap;
}
.outbox-receipt--read {
	color: var(--clr-success);
	border-color: var(--clr-success-border);
	background: var(--clr-success-bg);
}
.contact-message-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; cursor: pointer; list-style: none; }
.contact-message-header::-webkit-details-marker { display: none; }
.contact-message-subject { font-weight: 600; }
.contact-message-meta { font-size: 0.82rem; color: var(--clr-text-muted); }
.contact-message-body { white-space: pre-wrap; word-break: break-word; font-size: 0.92rem; margin: 0.5rem 0; }
.contact-handled-notice { font-size: 0.82rem; color: var(--clr-text-muted); }

.message-route-badge {
	display: inline-block;
	background: #6f42c1;
	color: #fff;
	font-size: 0.75em;
	font-weight: 600;
	padding: 0.1em 0.45em;
	border-radius: var(--radius);
}

/* ── Audit log ───────────────────────────────────────────────────────────── */
.audit-log {
	width: 100%;
	border-collapse: collapse;
	background: var(--clr-surface);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}
.audit-log th {
	text-align: left;
	padding: 0.5rem 0.75rem;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--clr-text-muted);
	background: var(--clr-surface-alt);
	border-bottom: 1px solid var(--clr-border);
}
.audit-log td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--clr-border);
	vertical-align: middle;
	font-size: 0.88rem;
}
.audit-log .audit-timestamp { white-space: nowrap; color: var(--clr-text-muted); }
.audit-log .audit-details { word-break: break-word; }
.audit-log tr:last-child td { border-bottom: none; }
.audit-log tr:hover td { background: var(--clr-surface-alt); }

.pagination-nav { display: flex; gap: 1rem; margin-top: 1rem; }

/* ── Versions page ───────────────────────────────────────────────────────── */
.version-entry {
	margin: 1rem 0;
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: 1rem 1.25rem;
	box-shadow: var(--shadow-sm);
}
/* Changelog nested in a version card: alt surface so it stays distinct */
.version-entry .mod-readme { background: var(--clr-surface-alt); }
.version-heading {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	flex-wrap: wrap;
}
.version-heading .version-date { font-size: 0.8rem; color: var(--clr-text-muted); font-weight: 400; }
.version-heading .version-download { font-size: 0.85rem; }
.version-heading .version-download-count { font-size: 0.8rem; color: var(--clr-text-muted); }
.version-heading .version-size { font-size: 0.8rem; color: var(--clr-text-muted); }
.version-deps { font-size: 0.88rem; color: var(--clr-text-muted); margin: 0.3rem 0; }
.version-deps a { color: var(--clr-link); }

/* ── Submit page ─────────────────────────────────────────────────────────── */
.upload-instructions {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	font-size: 0.9rem;
	color: var(--clr-text-muted);
}
.upload-form { display: flex; flex-direction: column; gap: 1rem; }
.upload-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 200px;
	border: 2px dashed var(--clr-border);
	border-radius: var(--radius-lg);
	background: var(--clr-surface);
	color: var(--clr-text-muted);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
	padding: 2rem;
	text-align: center;
}
.upload-dropzone:hover, .upload-dropzone.drag-over {
	border-color: var(--clr-link);
	background: color-mix(in srgb, var(--clr-link) 6%, var(--clr-surface));
	color: var(--clr-text);
}
.upload-dropzone-primary { font-size: 1.05rem; font-weight: 500; }
.upload-dropzone-hint { font-size: 0.82rem; }

.mod-desc-tags { margin-top: 0.75rem; }

/* ── Source URL dialog ───────────────────────────────────────────────────── */
.source-url-dialog-body { padding: 1rem 1.25rem 0.75rem; }
.source-url-dialog-form input[type=url] { width: 100%; box-sizing: border-box; }
.source-url-hint { font-size: 0.8rem; color: var(--clr-text-muted); margin-top: 0.5rem; }

/* ── Edit README ─────────────────────────────────────────────────────────── */
.readme-edit-form { display: flex; flex-direction: column; gap: 0.75rem; }
.readme-editor { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.875rem; min-height: 500px; }
.readme-edit-actions { display: flex; gap: 0.5rem; align-items: center; }

/* ── Batch-dismiss panel ─────────────────────────────────────────────────── */
.batch-dismiss-panel {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
}
.batch-dismiss-form { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }

/* ── Points page ─────────────────────────────────────────────────────────── */
.points-criteria-table,
.points-ranks-table {
	border-collapse: collapse;
	margin-top: 0.5rem;
	margin-bottom: 1.5rem;
	width: 100%;
}
.points-criteria-table th,
.points-criteria-table td,
.points-ranks-table th,
.points-ranks-table td {
	text-align: left;
	padding: 0.45rem 0.75rem;
	border-bottom: 1px solid var(--clr-border);
	vertical-align: middle;
}
.points-criteria-table th,
.points-ranks-table th { font-weight: 600; color: var(--clr-text-muted); font-size: 0.85rem; }
.rank-table-icon { width: 1.4em; height: 1.4em; vertical-align: middle; }

.rank-icons-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.75rem;
	margin-bottom: 1.5rem;
}
.rank-icon-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 0.75rem;
	min-width: 80px;
	text-align: center;
}
.rank-icon-card--active {
	background: color-mix(in srgb, var(--clr-link) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--clr-link) 35%, transparent);
	border-radius: var(--radius-lg);
}
.rank-icon-card-img { width: 48px; height: 48px; }
.rank-icon-card strong { font-size: 0.85rem; }
.rank-icon-card span { font-size: 0.78rem; color: var(--clr-text-muted); }

.rank-progress-bar-wrap {
	margin-top: 0.5rem;
	height: 8px;
	background: var(--clr-border);
	border-radius: 999px;
	max-width: 400px;
	overflow: hidden;
}
.rank-progress-bar {
	height: 100%;
	background: var(--clr-link);
	border-radius: 999px;
	transition: width 0.3s ease;
}

/* ── Author rank icon ────────────────────────────────────────────────────── */
.author-rank-icon {
	width: 1.3em;
	height: 1.3em;
	vertical-align: middle;
	margin-left: 0.3em;
}

/* ── User points badge ───────────────────────────────────────────────────── */
.user-points {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--clr-header-link);
	background: linear-gradient(
		to right,
		rgba(255,255,255,0.18) var(--rank-progress, 0%),
		rgba(255,255,255,0.06) var(--rank-progress, 0%)
	);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 999px;
	padding: 0.1rem 0.55rem;
	white-space: nowrap;
	text-decoration: none;
}
.user-points:hover { color: var(--clr-header-link-hover); text-decoration: none; }

/* ── Topbar user → my mods ───────────────────────────────────────────────── */
.user-mods-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: inherit;
	text-decoration: none;
}
.user-mods-link:hover { color: var(--clr-header-link-hover); text-decoration: none; }
.user-mods-link:hover .user-name { text-decoration: underline; }

/* ── Settings cogwheel ───────────────────────────────────────────────────── */
.settings-link {
	display: inline-flex;
	align-items: center;
	color: var(--clr-header-link);
	opacity: 0.7;
	transition: opacity 0.15s;
	text-decoration: none;
	vertical-align: middle;
}
.settings-link:hover { opacity: 1; color: var(--clr-header-link-hover); }

/* ── Notices ─────────────────────────────────────────────────────────────── */
.notice {
	border-radius: var(--radius);
	padding: 0.75rem 1rem;
	margin: 0 0 1rem;
	font-size: 0.9rem;
	line-height: 1.5;
}
.notice-warning {
	background: var(--clr-warning-bg);
	border: 1px solid var(--clr-warning-border);
	color: var(--clr-warning);
}
.notice-info {
	background: var(--clr-surface-alt);
	border: 1px solid var(--clr-border);
	color: var(--clr-text-muted);
}
.notice-success {
	background: var(--clr-success-bg);
	border: 1px solid var(--clr-success-border);
	color: var(--clr-success);
}

/* ── Page cards (settings & team pages) ──────────────────────────────────── */
.page-card {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1rem;
	box-shadow: var(--shadow-sm);
}
.page-card h2 {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 0.9rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--clr-border);
	color: var(--clr-text);
}
.page-card.page-card--danger {
	border-color: var(--clr-danger-border);
	background: var(--clr-danger-bg);
}
.page-card.page-card--danger h2 { border-color: var(--clr-danger-border); color: var(--clr-danger); }

/* ── Teams list (settings page) ──────────────────────────────────────────── */
.teams-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
	padding: 0;
}
.teams-list a {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	background: var(--clr-surface-alt);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--clr-text);
	text-decoration: none;
	transition: border-color 0.12s, background 0.12s;
}
.teams-list a:hover { border-color: var(--clr-link); color: var(--clr-link); background: color-mix(in srgb, var(--clr-link) 6%, var(--clr-surface)); }

/* ── Team page member list ───────────────────────────────────────────────── */
.teams-member-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
	padding: 0;
}
.teams-member-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.75rem;
	background: var(--clr-surface-alt);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	font-size: 0.9rem;
}
.teams-member-item span,
.teams-member-item a { font-weight: 500; }
.team-master-badge {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background: color-mix(in srgb, var(--clr-link) 12%, transparent);
	color: var(--clr-link);
	border-radius: var(--radius);
	padding: 0.1rem 0.45rem;
}
.teams-member-item form { margin-left: auto; }
.teams-member-item form + form { margin-left: 0; }
.team-donation-link { margin-bottom: 0.5rem; font-size: 0.9rem; }

/* ── Settings page ───────────────────────────────────────────────────────── */
.settings-form {
	display: grid;
	grid-template-columns: max-content 1fr;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-top: 0.75rem;
}
.settings-form label { font-weight: 500; white-space: nowrap; display: inline; }
.settings-form input { max-width: 200px; }
.settings-form label small { font-weight: 400; color: var(--clr-text-muted); display: block; }
.settings-form input[type="hidden"] { display: none; }
.settings-form .settings-form-actions {
	grid-column: 2;
	margin-top: 0.25rem;
}
.inline-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem 0.6rem;
	margin-top: 0.75rem;
}
.inline-form label { font-weight: 500; }
.inline-form input[type="hidden"] { display: none; }
.simple-form { margin-top: 0.75rem; }
.simple-form label { display: block; font-weight: 500; margin-bottom: 0.3rem; }
.simple-form input { display: block; margin-bottom: 0.5rem; }
.simple-form p { margin: 0.4rem 0 0.6rem; font-size: 0.85rem; color: var(--clr-text-muted); }
.simple-form input[type="hidden"] { display: none; }
.notification-prefs label { display: block; margin-bottom: 0.35rem; }
.notif-table { border-collapse: collapse; margin-top: 0.25rem; }
.notif-table th { font-weight: 600; padding: 0.2rem 0.75rem 0.4rem; text-align: center; }
.notif-table th:first-child { text-align: left; }
.notif-table td { padding: 0.25rem 0.75rem; vertical-align: middle; }
.notif-table td:not(:first-child) { text-align: center; }

/* ── Upload password field ───────────────────────────────────────────────── */
.upload-password-label { display: block; font-weight: 500; margin-top: 1rem; margin-bottom: 0.25rem; }
.upload-password-input { width: 100%; max-width: 320px; }
.upload-fun-question label { display: block; font-weight: 500; margin-bottom: 0.25rem; font-style: italic; }
.upload-fun-question input { width: 100%; }
.upload-fun-question input::placeholder { font-size: 0.8rem; }

/* ── Submit page tabs ────────────────────────────────────────────────────── */
.submit-tabs {
	display: flex;
	gap: 0.35rem;
	margin: 0.75rem 0 1rem;
	border-bottom: 1px solid var(--clr-border);
}
.submit-tab {
	padding: 0.45rem 1rem;
	background: none;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: var(--radius) var(--radius) 0 0;
	color: var(--clr-text-muted);
	cursor: pointer;
	font-size: 0.95rem;
	margin-bottom: -1px;
}
.submit-tab--active {
	background: var(--clr-surface);
	border-color: var(--clr-border);
	color: inherit;
	font-weight: 600;
}
/* Solid card behind both submit forms so the animated background stays behind
   the content instead of seeping through the form. */
.submit-tab-panel {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: 1.25rem 1.5rem;
	box-shadow: var(--shadow-sm);
}
.submit-tab-panel .upload-instructions { background: var(--clr-surface-alt); }

/* ── Package builder ─────────────────────────────────────────────────────── */
.upload-form .builder-hint {
	font-size: 0.8rem;
	color: var(--clr-text-muted);
	/*margin-top: -0.75rem;*/
}
.dep-picker { margin-top: -0.5rem; }
.dep-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.4rem;
}
.dep-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.55rem;
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	font-size: 0.85rem;
	font-family: monospace;
}
.dep-chip-remove {
	background: none;
	border: none;
	color: var(--clr-text-muted);
	cursor: pointer;
	padding: 0 0.15rem;
	font-size: 1rem;
	line-height: 1;
}
.dep-chip-remove:hover { color: var(--clr-danger, #e05555); }
.dep-search-wrap { position: relative; max-width: 420px; }
.dep-search-wrap input { width: 100%; }
.dep-search-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 20;
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.dep-search-result {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	width: 100%;
	padding: 0.4rem 0.6rem;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font-family: monospace;
	font-size: 0.85rem;
}
.dep-search-result:hover { background: var(--clr-bg); }
.dep-search-result-version { color: var(--clr-text-muted); font-size: 0.8rem; }

.builder-label-optional { font-weight: normal; font-size: 0.85em; color: var(--clr-text-muted); }
.extra-dropzone { min-height: 90px; }
.extra-files-list { display: flex; flex-direction: column; gap: 0.4rem; }
.extra-file-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
	align-items: center;
	gap: 0.5rem;
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-sm);
	padding: 0.35rem 0.6rem;
}
.extra-file-name { font-size: 0.85rem; color: var(--clr-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extra-file-row input[type=text] { font-size: 0.85rem; }
.extra-file-remove {
	background: none; border: none; cursor: pointer;
	color: var(--clr-text-muted); font-size: 1rem; padding: 0 0.1rem;
	line-height: 1; flex-shrink: 0;
}
.extra-file-remove:hover { color: var(--clr-danger, #e05555); }

/* ── Legal page ──────────────────────────────────────────────────────────── */
.legal-section { border: 1px solid var(--clr-border); border-radius: var(--radius-lg); margin-bottom: 1rem; overflow: hidden; }
.legal-summary {
	display: flex; align-items: baseline; gap: 0.75rem;
	padding: 0.85rem 1.1rem; cursor: pointer;
	font-size: 1.05rem; font-weight: 600;
	background: var(--clr-surface); list-style: none;
	user-select: none;
}
.legal-summary::-webkit-details-marker { display: none; }
.legal-summary::before { content: '▶'; font-size: 0.7em; color: var(--clr-text-muted); transition: transform 0.15s; flex-shrink: 0; }
.legal-section[open] > .legal-summary::before { transform: rotate(90deg); }
.legal-summary:hover { background: var(--clr-surface-alt); }
.legal-date { font-size: 0.8rem; font-weight: 400; color: var(--clr-text-muted); }
.legal-body { padding: 0.75rem 0 0.25rem; }
.legal-body .page-card { margin: 0 0.75rem 0.75rem; }
.legal-body .page-card h2 { font-size: 1rem; margin-bottom: 0.5rem; }
.legal-n { color: var(--clr-text-muted); font-weight: 400; font-size: 0.85em; margin-right: 0.3em; }
.legal-note { font-size: 0.875rem; color: var(--clr-text-muted); }
.page-card--highlight { border-left: 3px solid var(--clr-link); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 0.5rem 0; }
.legal-table th, .legal-table td { text-align: left; padding: 0.5rem 0.65rem; border: 1px solid var(--clr-border); vertical-align: top; }
.legal-table th { color: var(--clr-text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; background: var(--clr-surface-alt); }

/* ── Download graphs ─────────────────────────────────────────────────────── */
.dl-chart-wrap { position: relative; margin-bottom: 0.75rem; }
.dl-chart { display: block; width: 100%; height: auto; }
.dl-tip {
	display: none; position: absolute; pointer-events: none;
	background: var(--clr-surface); border: 1px solid var(--clr-border);
	border-radius: var(--radius); padding: 0.45rem 0.7rem;
	box-shadow: var(--shadow-md); font-size: 0.82rem; z-index: 10;
	min-width: 130px;
}
.dl-tip-date { font-weight: 600; margin-bottom: 0.25rem; }
.dl-tip-row { display: flex; align-items: center; gap: 0.35rem; }
.dl-tip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dl-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-bottom: 0.75rem; }
.dl-legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; }
.dl-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dl-remove { color: var(--clr-text-muted); text-decoration: none; font-size: 1rem; line-height: 1; }
.dl-remove:hover { color: var(--clr-danger); }
.dl-compare-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.dl-add-form { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.dl-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.6rem; font-size: 0.875rem; }
.dl-suggestions-label { color: var(--clr-text-muted); }
.dl-suggestion { background: var(--clr-surface-alt); border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 0.2rem 0.5rem; text-decoration: none; }
.dl-suggestion:hover { border-color: var(--clr-link); }
.dl-empty { color: var(--clr-text-muted); margin: 1.5rem 0; }
.dl-range-bar { display: flex; gap: 2px; margin-bottom: 0.5rem; }
.dl-range-btn { padding: 0.2rem 0.55rem; font-size: 0.8rem; border: 1px solid var(--clr-border); border-radius: var(--radius); text-decoration: none; color: var(--clr-text-muted); background: var(--clr-surface); }
.dl-range-btn:hover { border-color: var(--clr-link); color: var(--clr-text); }
.dl-range-btn.active { background: var(--clr-link); border-color: var(--clr-link); color: #fff; font-weight: 600; }
.dl-range-sep { width: 1px; background: var(--clr-border); margin: 2px 4px; align-self: stretch; display: inline-block; }

/* ── Formatting page ─────────────────────────────────────────────────────── */
.fmt-ref-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
	margin: 1.25rem 0 2rem;
}
.fmt-ref-card {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	padding: 0.9rem 1rem;
}
.fmt-ref-card h3 { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.fmt-ref-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.fmt-ref-table td { padding: 0.2rem 0.4rem 0.2rem 0; vertical-align: middle; }
.fmt-ref-table td:first-child { white-space: nowrap; padding-right: 1rem; }
.fmt-ref-pre { margin: 0; font-size: 0.8rem; white-space: pre; overflow-x: auto; }
.fmt-layout-toggle {
	font-size: 0.78rem;
	padding: 0.2rem 0.55rem;
	vertical-align: middle;
	margin-left: 0.6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
}
.fmt-playground {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	min-height: 400px;
}
.fmt-playground--stacked {
	grid-template-columns: 1fr;
}
.fmt-playground--stacked .fmt-pane:first-child { order: 2; }
.fmt-playground--stacked .fmt-pane:last-child  { order: 1; }
@media (max-width: 640px) { .fmt-playground { grid-template-columns: 1fr; } }
.fmt-pane { display: flex; flex-direction: column; }
.fmt-pane-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--clr-text-muted); margin-bottom: 0.4rem; }
.fmt-scheme-toggle { display: inline-flex; gap: 0.2rem; }
.fmt-scheme-btn {
	padding: 0.05rem 0.4rem;
	font-size: 0.9rem;
	line-height: 1.4;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	background: var(--clr-surface);
	color: var(--clr-text-muted);
	cursor: pointer;
}
.fmt-scheme-btn:hover { border-color: color-mix(in srgb, var(--clr-link) 40%, var(--clr-border)); }
.fmt-scheme-btn.active { border-color: var(--clr-link); color: var(--clr-link); }
.fmt-textarea {
	flex: 1;
	min-height: 360px;
	padding: 0.75rem;
	font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
	font-size: 0.875rem;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	background: var(--clr-surface);
	color: var(--clr-text);
	resize: vertical;
}
.fmt-textarea:focus { outline: none; border-color: var(--clr-link); }
.fmt-textarea--dragover { border-color: var(--clr-link); background: color-mix(in srgb, var(--clr-link) 6%, var(--clr-surface)); }
.fmt-preview {
	flex: 1;
	min-height: 360px;
	padding: 0.75rem 1rem;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	background: var(--clr-surface);
	overflow-y: auto;
}
/* Force a color-scheme on just the preview subtree, independent of the site-wide theme —
   color-scheme is inherited, so light-dark() in every descendant re-resolves against it. Base
   text color needs an explicit re-declaration here since color is otherwise inherited as an
   already-resolved value from <body> rather than recomputed against the overridden scheme. */
.fmt-preview--light,
.fmt-preview--dark {
	color: var(--clr-text);
}
.fmt-preview--light { color-scheme: light; }
.fmt-preview--dark  { color-scheme: dark; }

/* ── Mobile navigation ───────────────────────────────────────────────────── */
.nav-toggle {
	display: none;
	position: relative;
	flex-shrink: 0;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.2);
	color: var(--clr-header-link);
	padding: 0.3rem 0.45rem;
	border-radius: var(--radius);
	line-height: 0;
}
.nav-toggle:hover {
	background: rgba(255,255,255,0.1);
	color: var(--clr-header-link-hover);
	border-color: rgba(255,255,255,0.35);
}
.nav-toggle.has-notifications::after {
	content: '';
	position: absolute;
	top: -4px;
	right: -4px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--clr-notification);
	border: 1px solid var(--clr-header-bg);
}

@media (max-width: 900px) {
	#site-header {
		gap: 0.6rem;
		padding: 0 0.75rem;
	}
	.nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	#site-header .site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0.15rem;
		background: var(--clr-header-bg);
		padding: 0.5rem 0.75rem 0.9rem;
		border-top: 1px solid rgba(255,255,255,0.08);
		box-shadow: var(--shadow-md);
		max-height: calc(100vh - var(--header-height));
		max-height: calc(100dvh - var(--header-height));
		overflow-y: auto;
	}
	#site-header.nav-open .site-nav { display: flex; }
	#site-header .site-nav a {
		font-size: 1rem;
		padding: 0.6rem 0.75rem;
	}
	#site-header .site-nav > * {
		margin: 0;
	}
	#site-header .user-info { gap: 0.45rem; }
}

@media (max-width: 620px) {
	#site-header .user-info .user-name { display: none; }
}
@media (max-width: 420px) {
	#site-header .site-logo-text { display: none; }
	#site-header .user-points { display: none; }
}

/* ── Small screens ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	main { padding: 1rem 0.75rem 2.5rem; }

	h1 {
		font-size: 1.35rem;
		overflow-wrap: anywhere;
	}

	/* 16px inputs prevent iOS zoom-on-focus */
	input[type=text],
	input[type=url],
	input[type=search],
	input[type=file],
	select,
	textarea { font-size: 16px; }

	/* clamp inputs with inline widths (e.g. width:20rem) to the viewport */
	input[type=text],
	input[type=url],
	input[type=search] { max-width: 100%; }

	/* wide tables scroll inside their own box instead of stretching the page */
	.thread-list,
	.user-list,
	.audit-log,
	.tag-request-list,
	.notif-table,
	.points-criteria-table,
	.points-ranks-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* mod hero stacks vertically */
	.mod-hero {
		flex-direction: column;
		align-items: stretch;
		gap: 0.9rem;
		padding: 1rem;
	}
	.mod-icon-wrap {
		flex-direction: row;
		align-items: center;
		gap: 0.75rem;
	}
	.mod-hero .mod-icon {
		width: 84px;
		height: 84px;
	}
	.mod-donate-btn { width: auto; }
	.mod-title-row { gap: 0.35rem 0.5rem; }
	/* action links drop to their own left-aligned line under the buttons */
	.mod-action-links {
		margin-left: 0;
		flex-basis: 100%;
	}

	/* search / filter bar stacks */
	.mod-search-bar {
		flex-direction: column;
		align-items: stretch;
	}
	.mod-search-form { padding: 0.6rem 0.75rem; }
	.mod-search-form input[type=search] { flex-basis: 100%; }
	.submit-mod-btn { text-align: center; }

	.sort-bar {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.sort-bar-label,
	.sort-bar-option { white-space: nowrap; }

	/* active-filter summary drops below the tabs, left-aligned */
	.tabs-filters {
		margin-left: 0;
		flex-basis: 100%;
	}

	/* settings form collapses to one column */
	.settings-form { grid-template-columns: 1fr; }
	.settings-form label { white-space: normal; }
	.settings-form input { max-width: 100%; }
	.settings-form .settings-form-actions { grid-column: 1; }

	/* post controls drop below the author line instead of squeezing right */
	.post-controls {
		margin-left: 0;
		width: 100%;
	}

	.mod-readme { padding: 0.9rem; }
	.readme-editor { min-height: 320px; }

	.upload-dropzone {
		min-height: 150px;
		padding: 1.25rem;
	}

	.tag-overlay {
		width: 96vw;
		max-height: 85vh;
		max-height: 85dvh;
	}

	#lightbox-prev, #lightbox-next {
		font-size: 2.6rem;
		padding: 0 0.75rem;
	}
}

@media (max-width: 640px) {
	.mod-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 0.75rem;
	}
	.mod-card-body { padding: 0.6rem; }
	.mod-card-stats {
		padding: 0.4rem 0.6rem;
		gap: 0.6rem;
	}
}

/* ── Touch devices ───────────────────────────────────────────────────────── */
@media (pointer: coarse) {
	button:not(.tag-remove-btn):not(.star-btn):not(.no-button-background):not(.gallery-delete-btn):not(.source-url-edit-btn) {
		min-height: 40px;
	}
	.mod-cog-menu > summary {
		width: 2.25rem;
		height: 2.25rem;
	}
	/* no hover on touch — keep gallery delete buttons visible */
	.gallery-item .gallery-delete-btn { display: flex; }
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq-controls { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.faq-list { display: flex; flex-direction: column; gap: 0.5rem; }
.faq-item {
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.faq-question {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.9rem 1.25rem;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
	content: '';
	display: inline-block;
	margin-left: auto;
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid var(--clr-text-muted);
	border-bottom: 2px solid var(--clr-text-muted);
	transform: rotate(45deg);
	transition: transform 0.15s;
	flex-shrink: 0;
}
.faq-item[open] > .faq-question::after { transform: rotate(-135deg); }
.faq-item[open] > .faq-question { border-bottom: 1px solid var(--clr-border); }
.faq-anchor {
	font-weight: 400;
	font-size: 0.85em;
	color: var(--clr-text-muted);
	text-decoration: none;
	flex-shrink: 0;
}
.faq-anchor:hover { color: var(--clr-link); }
.faq-answer { padding: 1rem 1.25rem; }
.faq-answer p { margin: 0 0 0.75rem; line-height: 1.65; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ── API tokens ───────────────────────────────────────────────────────────── */
.api-token-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.api-token-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; background: var(--clr-surface-alt); border: 1px solid var(--clr-border); border-radius: var(--radius); }
.api-token-name { font-weight: 500; flex: 1; }
.api-token-meta { font-size: 0.8rem; color: var(--clr-text-muted); }

.api-token-reveal-dialog { max-width: 36rem; }
.api-token-box { display: flex; align-items: center; gap: 0.5rem; background: var(--clr-surface-alt); border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 0.6rem 0.75rem; }
.api-token-value { font-family: monospace; font-size: 0.82rem; flex: 1; overflow-x: auto; white-space: nowrap; word-break: break-all; user-select: all; }
.api-token-copy-btn { flex-shrink: 0; }

/* ── Code block action buttons ────────────────────────────────────────────── */
.code-block-wrap { position: relative; margin: 0.75em 0; }
.mod-readme pre, .post-body pre { margin: 0; }
.code-actions {
	position: absolute;
	top: 0.35rem;
	right: 0.35rem;
	display: flex;
	gap: 0.2rem;
	opacity: 0;
	transition: opacity 0.15s;
	z-index: 1;
}
.code-block-wrap:hover .code-actions { opacity: 1; }
.code-action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	color: var(--clr-text-muted);
	cursor: pointer;
	transition: color 0.1s, background 0.1s;
}
.code-action-btn:hover { color: var(--clr-text); background: color-mix(in srgb, var(--clr-border) 40%, var(--clr-surface)); }
.code-action-btn svg { width: 0.85rem; height: 0.85rem; pointer-events: none; }

/* ── Colour-scheme toggle (settings page) ────────────────────────────────── */
.scheme-toggle { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.scheme-btn {
	display: flex; align-items: center; gap: 0.45rem;
	padding: 0.35rem 0.85rem;
	background: var(--clr-surface-alt);
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	color: var(--clr-text-muted);
	cursor: pointer;
	font-size: 0.875rem;
	transition: color 0.1s, border-color 0.1s, background 0.1s;
}
.scheme-btn:hover { color: var(--clr-text); border-color: var(--clr-link); }
.scheme-btn--active {
	color: var(--clr-link);
	border-color: var(--clr-link);
	background: color-mix(in srgb, var(--clr-link) 10%, var(--clr-surface));
}
.scheme-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ── Obfuscation options / page ──────────────────────────────────────────── */
.obf-options {
	border: 1px solid var(--clr-border);
	border-radius: var(--radius);
	padding: 0.9rem 1rem;
	margin: 0.5rem 0 1rem;
	background: var(--clr-surface-alt);
}
.obf-options h4 {
	margin-top: 1em;
}
.obf-options > label { display: block; font-weight: 600; margin: 0.75rem 0 0.35rem; }
.obf-options > label:first-of-type { margin-top: 0; }
.obf-protections { display: flex; flex-direction: column; gap: 0.3rem; }
.obf-check { display: flex; align-items: center; gap: 0.45rem; font-weight: 400; cursor: pointer; }
.obf-check input { flex-shrink: 0; }
.obf-keep {
	display: flex; flex-direction: column; gap: 0.25rem;
	max-height: 15rem; overflow-y: auto;
	border: 1px solid var(--clr-border); border-radius: var(--radius);
	padding: 0.5rem 0.6rem; background: var(--clr-surface);
}
.obf-keep-ns { font-weight: 600; }
.obf-keep-empty { margin: 0; }
.obf-keep-add { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.obf-keep-add input { flex: 1; }
.obf-file-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.obf-file-status { font-size: 0.85rem; color: var(--clr-text-muted); }
.obf-file-status--warn { color: var(--clr-warning); }
.obf-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.obf-status { font-size: 0.9rem; }
.obf-status--busy { color: var(--clr-text-muted); }
.obf-status--ok { color: var(--clr-success); }
.obf-status--err { color: var(--clr-danger); }
.obf-stash { margin-bottom: 1rem; }
.obf-stash-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.obf-stash-item { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.5rem 0.6rem; border: 1px solid var(--clr-border); border-radius: var(--radius); background: var(--clr-surface); }
.obf-stash-name { font-weight: 600; }
.obf-stash-hash { font-size: 0.8rem; color: var(--clr-text-muted); word-break: break-all; }
.obf-stash-date { font-size: 0.85rem; color: var(--clr-text-muted); }
.obf-stash-del { margin-left: auto; }
.version-download--unobf { background: var(--clr-warning-bg); color: var(--clr-warning); border: 1px solid var(--clr-warning-border); }
.mod-hidden-banner {
	background: var(--clr-danger-bg);
	border: 1px solid var(--clr-danger-border);
	color: var(--clr-danger);
	border-radius: var(--radius);
	padding: 0.8rem 1rem;
	margin-bottom: 1rem;
	line-height: 1.5;
}
.mod-hidden-banner a { color: var(--clr-danger); text-decoration: underline; }
.obf-crproj-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; }
.obf-crproj-warnings { margin-top: 0.6rem; border-radius: var(--radius); padding: 0.6rem 0.8rem; font-size: 0.9rem; }
.obf-crproj-warnings ul { margin: 0.35rem 0 0; padding-left: 1.2rem; }
.obf-crproj-ok { background: var(--clr-success-bg); border: 1px solid var(--clr-success-border); color: var(--clr-success); }
.obf-crproj-warn { background: var(--clr-warning-bg); border: 1px solid var(--clr-warning-border); color: var(--clr-warning); }
.obf-section { border: 1px solid var(--clr-border); border-radius: var(--radius); padding: 0.75rem 0.85rem; margin-bottom: 0.6rem; background: var(--clr-surface); }
.obf-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.obf-section-names-label { display: block; font-size: 0.85rem; color: var(--clr-text-muted); margin: 0 0 0.2rem; font-weight: 400; }
.obf-section-names { width: 100%; margin-bottom: 0.5rem; }
.obf-section-preset { display: inline-flex; gap: 0.4rem; align-items: center; margin-bottom: 0.5rem; font-weight: 600; }
.obf-prot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.3rem 0.9rem; margin-bottom: 0.4rem; }
.obf-prot-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; font-weight: 400; }
.obf-prot-name { color: var(--clr-text-muted); font-size: 0.9rem; }
.obf-prot-row select { padding: 0.15rem 0.4rem; }
#obf-add-section { margin: 0.2rem 0 0.6rem; }
.obf-compress-row { margin-top: 0.5rem; }
.obf-impact { margin: 0.35rem 0 0.5rem; }
.obf-impact > summary { cursor: pointer; color: var(--clr-text-muted); font-size: 0.85rem; }
.obf-impact-toggle { font-size: 0.78rem; padding: 0.1rem 0.5rem; margin: 0.35rem 0 0.25rem; }
.obf-impact-body { margin: 0.2rem 0 0; padding-left: 1.2rem; font-size: 0.85rem; max-height: 12rem; overflow-y: auto; }
.obf-impact-body--full { max-height: none; overflow-y: visible; }
.obf-impact-body li { word-break: break-all; }
.obf-impact-none { color: var(--clr-text-muted); list-style: none; margin-left: -0.8rem; }

/* ── Bulk upload ─────────────────────────────────────────────────────────── */
.bulk-files-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0; }
.bulk-file-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.4rem 0.6rem; border: 1px solid var(--clr-border); border-radius: var(--radius); background: var(--clr-surface); }
.bulk-file-name { font-weight: 600; flex: 1; min-width: 8rem; word-break: break-all; }
.bulk-install { flex-shrink: 0; }
.bulk-file-status { font-size: 0.85rem; color: var(--clr-text-muted); min-width: 7rem; }
.bulk-file-status--busy, .bulk-file-status--wait { color: var(--clr-link); }
.bulk-file-status--ok { color: var(--clr-success); }
.bulk-file-status--err { color: var(--clr-danger); }
.bulk-progress { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0; flex-wrap: wrap; }
.bulk-progress progress { width: 16rem; max-width: 100%; height: 0.9rem; }
.bulk-progress-status { font-size: 0.9rem; color: var(--clr-text); }