:root {
	/* Quiet forge palette — deep obsidian with subtle warm undertones,
	   single ember accent. Restrained, weighty, polished. */
	--void: #07060A;
	--smoke: #100E12;
	--steel: #161318;
	--steel-2: #1C181E;
	--ridge: #2A2429;
	--ridge-2: #3A3338;
	--bone: #ECE7DA;
	--bone-2: #B0AAA0;
	--bone-3: #79736B;
	--bone-4: #494440;
	--rust: #C03A1A;     /* deep ember — muted, glowing-coal feel */
	--rust-2: #D14826;
	--rust-3: #E85628;
	--rad: #97B23D;
	--warn: #D8AA3A;
	--err: #E66464;
	--line: rgba(236, 231, 218, 0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
	background: var(--void);
	color: var(--bone);
	font-family: 'Manrope', system-ui, sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}
a { color: var(--rust-3); text-decoration: none; }
a:hover { color: var(--rust-2); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.auth-shell {
	display: flex;
	min-height: 100vh;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}
.auth-card {
	width: 100%;
	max-width: 420px;
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-radius: 4px;
	padding: 36px 32px 32px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
/* (auth-brand defined further down with logo support) */
.auth-title {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-bottom: 6px;
}
.auth-sub {
	font-size: 14px;
	color: var(--bone-3);
	margin-bottom: 26px;
}
.field { margin-bottom: 16px; }
.field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bone-3);
	margin-bottom: 8px;
}
.field input {
	width: 100%;
	background: var(--smoke);
	border: 1px solid var(--ridge);
	border-radius: 3px;
	padding: 11px 14px;
	color: var(--bone);
	transition: border-color 0.15s;
}
.field input:focus {
	outline: 0;
	border-color: var(--rust);
}
.field-hint {
	font-size: 12px;
	color: var(--bone-3);
	margin-top: 6px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 3px;
	font-size: 14px;
	font-weight: 600;
	transition: background 0.15s, border-color 0.15s, transform 0.08s, opacity 0.15s;
	border: 1px solid transparent;
	white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn-primary {
	background: var(--rust);
	color: var(--bone);
	border-color: rgba(255, 107, 53, 0.32);
}
.btn-primary:hover:not([disabled]) { background: var(--rust-2); }
.btn-ghost {
	background: transparent;
	color: var(--bone);
	border-color: var(--ridge);
}
.btn-ghost:hover:not([disabled]) { background: var(--smoke); border-color: var(--ridge-2); }
.btn-danger {
	background: transparent;
	color: var(--err);
	border-color: rgba(248, 113, 113, 0.32);
}
.btn-danger:hover:not([disabled]) {
	background: rgba(248, 113, 113, 0.08);
}
.btn-block { width: 100%; }
.btn-lg { padding: 13px 22px; font-size: 15px; }

.alert {
	padding: 10px 14px;
	border-radius: 3px;
	font-size: 13.5px;
	margin-bottom: 16px;
	border: 1px solid transparent;
}
.alert-err {
	background: rgba(248, 113, 113, 0.08);
	color: var(--err);
	border-color: rgba(248, 113, 113, 0.32);
}
.alert-ok {
	background: rgba(157, 190, 61, 0.08);
	color: var(--rad);
	border-color: rgba(157, 190, 61, 0.32);
}

.auth-foot {
	margin-top: 18px;
	font-size: 13px;
	color: var(--bone-3);
	text-align: center;
}

/* ============= PANEL ============= */
.panel-shell {
	display: flex;
	min-height: 100vh;
}
.panel-side {
	width: 196px;
	background: var(--smoke);
	border-right: 1px solid var(--ridge);
	padding: 20px 14px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.panel-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 4px;
}
.panel-brand img, .auth-brand img {
	background: transparent;
	mix-blend-mode: lighten;
	flex: 0 0 auto;
}
.panel-brand img {
	width: 24px;
	height: 24px;
}
.panel-brand .brand-text {
	font-family: 'Anton', sans-serif;
	font-size: 18px;
	color: var(--bone);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: 1;
}

.auth-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.auth-brand img {
	width: 30px;
	height: 30px;
}
.auth-brand .brand-text {
	font-family: 'Anton', sans-serif;
	font-size: 22px;
	color: var(--bone);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	line-height: 1;
}
.panel-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.panel-nav a {
	color: var(--bone-2);
	font-size: 13.5px;
	padding: 8px 10px;
	border-radius: 3px;
	transition: background 0.12s, color 0.12s;
}
.panel-nav a:hover { background: var(--steel); color: var(--bone); }
.panel-nav a.on { background: var(--steel); color: var(--rust-3); }

.panel-side-foot {
	margin-top: auto;
	padding: 12px 10px;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
	color: var(--bone-3);
}
.panel-side-foot .email {
	color: var(--bone);
	font-weight: 600;
	display: block;
	margin-bottom: 6px;
	word-break: break-all;
}
.panel-side-foot button {
	color: var(--bone-3);
	font-size: 12px;
	padding: 2px 0;
}
.panel-side-foot button:hover { color: var(--err); }

.panel-main {
	flex: 1;
	padding: 24px 28px 48px;
	overflow-x: auto;
	max-width: 1100px;
}
.panel-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 18px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}
.panel-head h1 {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: 4px;
}
.panel-head .sub {
	color: var(--bone-3);
	font-size: 14px;
}

.bulk-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-radius: 3px;
	margin-bottom: 14px;
	transition: border-color 0.15s, background 0.15s;
	flex-wrap: wrap;
}
.bulk-bar.has-selection {
	border-color: var(--rust);
	background: rgba(193, 61, 23, 0.06);
}
.bulk-count {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	color: var(--bone-3);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-right: 6px;
}
.bulk-bar.has-selection .bulk-count { color: var(--bone); }
.bulk-bar .spacer { flex: 1; }
.bulk-bar .btn {
	padding: 7px 14px;
	font-size: 13px;
}

.server-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-radius: 3px;
	overflow: hidden;
}
.server-table th, .server-table td {
	padding: 13px 16px;
	font-size: 13.5px;
	text-align: left;
	border-bottom: 1px solid var(--line);
}
.server-table th {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bone-3);
	font-weight: 600;
	background: var(--steel-2);
}
.server-table tr:last-child td { border-bottom: 0; }
.server-table .col-check { width: 36px; padding-right: 0; }
.server-table .col-status { width: 110px; }
.server-table .col-actions { width: 220px; text-align: right; }
.server-table .name {
	font-weight: 600;
	color: var(--bone);
}
.server-table .meta {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11.5px;
	color: var(--bone-3);
	margin-top: 2px;
}

input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border: 1px solid var(--ridge-2);
	border-radius: 2px;
	background: var(--smoke);
	cursor: pointer;
	display: inline-grid;
	place-content: center;
	transition: background 0.12s, border-color 0.12s;
}
input[type="checkbox"]:hover { border-color: var(--bone-3); }
input[type="checkbox"]:checked {
	background: var(--rust);
	border-color: var(--rust);
}
input[type="checkbox"]:checked::before {
	content: '';
	width: 9px;
	height: 9px;
	background: var(--bone);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 4px 9px;
	border-radius: 2px;
	border: 1px solid;
}
.status-pill::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
}
.status-pill.running { color: var(--rad); border-color: rgba(157, 190, 61, 0.32); background: rgba(157, 190, 61, 0.06); }
.status-pill.running::before { background: var(--rad); }
.status-pill.stopped { color: var(--bone-3); border-color: var(--ridge); background: var(--smoke); }
.status-pill.stopped::before { background: var(--bone-4); }
.status-pill.starting, .status-pill.stopping, .status-pill.wiping { color: var(--warn); border-color: rgba(224, 178, 62, 0.32); background: rgba(224, 178, 62, 0.06); }
.status-pill.starting::before, .status-pill.stopping::before, .status-pill.wiping::before { background: var(--warn); }
.status-pill.error { color: var(--err); border-color: rgba(248, 113, 113, 0.32); background: rgba(248, 113, 113, 0.06); }
.status-pill.error::before { background: var(--err); }

.row-actions {
	display: inline-flex;
	gap: 6px;
	justify-content: flex-end;
}
.row-actions button {
	font-size: 12px;
	padding: 5px 10px;
	border: 1px solid var(--ridge);
	border-radius: 2px;
	color: var(--bone-2);
	background: var(--smoke);
	transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.row-actions button:hover { border-color: var(--rust); color: var(--bone); }
.row-actions button.danger:hover { border-color: var(--err); color: var(--err); }

.empty {
	padding: 60px 30px;
	text-align: center;
	background: var(--steel);
	border: 1px dashed var(--ridge);
	border-radius: 3px;
	color: var(--bone-3);
}
.empty h3 {
	color: var(--bone);
	font-size: 18px;
	margin-bottom: 8px;
}

/* First-time empty state — shows a faded example so users see what success looks like */
.empty-first {
	padding: 0;
	background: transparent;
	border: 0;
	text-align: left;
}
.empty-first-hero {
	text-align: center;
	padding: 30px 24px 36px;
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-radius: 3px;
	margin-bottom: 18px;
}
.empty-first-hero h3 {
	font-family: 'Anton', sans-serif;
	font-size: 28px;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--bone);
	margin-bottom: 8px;
}
.empty-first-hero p {
	color: var(--bone-3);
	font-size: 14.5px;
	max-width: 480px;
	margin: 0 auto 18px;
	line-height: 1.55;
}
.empty-first-preview-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bone-4);
	margin-bottom: 8px;
	text-align: center;
}
.empty-first-table {
	opacity: 0.42;
	pointer-events: none;
	filter: blur(0.3px);
	border: 1px dashed var(--ridge);
	border-radius: 3px;
	overflow: hidden;
}

/* Skeleton loaders — replace spinners during initial loads */
.skeleton-block {
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-radius: 3px;
	overflow: hidden;
}
.skel-row {
	display: grid;
	grid-template-columns: 36px 1fr 110px 100px 110px 200px;
	gap: 16px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	align-items: center;
}
.skel-row:last-child { border-bottom: 0; }
.skel-row.head { background: var(--steel-2); padding: 13px 16px; }
.skel-bar {
	height: 11px;
	background: var(--ridge);
	border-radius: 2px;
	position: relative;
	overflow: hidden;
}
.skel-bar.short { width: 60%; }
.skel-bar.tall { height: 14px; }
.skel-bar::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(236, 231, 218, 0.06) 50%,
		transparent 100%);
	animation: skelShimmer 1.4s linear infinite;
}
@keyframes skelShimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}
@media (max-width: 880px) {
	.skel-row { grid-template-columns: 32px 1fr 80px 80px; }
	.skel-row > .skel-bar:nth-child(5),
	.skel-row > .skel-bar:nth-child(6) { display: none; }
}

/* Card skeleton for server detail */
.skel-card {
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-radius: 3px;
	padding: 18px 22px;
	margin-bottom: 12px;
}
.skel-card .skel-bar { margin-bottom: 10px; }
.skel-card .skel-bar:last-child { margin-bottom: 0; }

/* Modal */
.modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100;
}
.modal-backdrop.open { display: flex; }
.modal {
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-radius: 4px;
	padding: 28px;
	max-width: 460px;
	width: 100%;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.modal h3 {
	font-size: 18px;
	margin-bottom: 6px;
}
.modal p {
	color: var(--bone-2);
	font-size: 14px;
	margin-bottom: 18px;
}
.modal .modal-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

@media (max-width: 720px) {
	.panel-shell { flex-direction: column; }
	.panel-side { width: 100%; flex-direction: row; align-items: center; padding: 14px 16px; gap: 16px; overflow-x: auto; }
	.panel-nav { flex-direction: row; }
	.panel-side-foot { margin-top: 0; padding: 0; border: 0; }
	.panel-main { padding: 20px; }
	.server-table .col-actions { display: none; }
	.server-table .meta { display: block; }
}

/* ============= WIZARD (casual, Rust-dude friendly) ============= */
.wizard-overlay {
	position: fixed;
	inset: 0;
	background: var(--void);
	display: none;
	z-index: 200;
	overflow-y: auto;
}
.wizard-overlay.open { display: block; }

.wizard-frame {
	max-width: 680px;
	margin: 0 auto;
	padding: 32px 28px 80px;
}

.wizard-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 56px;
}
.wizard-step-count {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	color: var(--bone-3);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
}
.wizard-close {
	color: var(--bone-3);
	font-size: 14px;
	padding: 6px 14px;
	border-radius: 3px;
	border: 1px solid var(--ridge);
}
.wizard-close:hover { color: var(--bone); border-color: var(--ridge-2); }

.wizard-step {
	display: none;
	animation: wizardIn 0.18s cubic-bezier(0.2, 0, 0, 1);
}
.wizard-step.active { display: block; }

@keyframes wizardIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.wizard-h {
	font-size: clamp(28px, 4vw, 38px);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--bone);
	margin-bottom: 12px;
	line-height: 1.1;
}
.wizard-sub {
	font-size: 16px;
	color: var(--bone-2);
	margin-bottom: 36px;
	line-height: 1.55;
	max-width: 580px;
}

.wizard-input {
	width: 100%;
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-radius: 4px;
	padding: 18px 20px;
	font-size: 20px;
	font-weight: 500;
	color: var(--bone);
	transition: border-color 0.12s;
	margin-bottom: 36px;
}
.wizard-input:focus {
	outline: 0;
	border-color: var(--rust);
}
.wizard-input::placeholder { color: var(--bone-4); }

.wizard-choices {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 32px;
}

.choice.big {
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-radius: 4px;
	padding: 22px 24px;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s;
	display: flex;
	align-items: center;
	gap: 22px;
}
.choice.big:hover {
	border-color: var(--ridge-2);
	background: var(--steel-2);
}
.choice.big.selected {
	border-color: var(--rust);
	background: rgba(193, 61, 23, 0.05);
}
.choice.big .big-icon {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	display: grid;
	place-content: center;
	background: var(--smoke);
	border-radius: 4px;
	color: var(--rust-3);
	font-family: 'Anton', sans-serif;
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}
.choice.big.selected .big-icon {
	background: var(--rust);
	color: var(--bone);
}
.choice.big .body { flex: 1; min-width: 0; }
.choice.big .title {
	font-size: 17px;
	font-weight: 700;
	color: var(--bone);
	margin-bottom: 4px;
	letter-spacing: -0.01em;
}
.choice.big .desc {
	font-size: 14px;
	color: var(--bone-2);
	line-height: 1.5;
}

.wizard-trust {
	font-size: 13px;
	color: var(--bone-3);
	text-align: center;
	margin-bottom: 28px;
	padding: 12px;
	background: var(--smoke);
	border-radius: 3px;
	border: 1px solid var(--line);
}

.wizard-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-top: 8px;
}
.wizard-nav .btn-primary { min-width: 180px; }
.wizard-skip {
	color: var(--bone-3);
	font-size: 13.5px;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.wizard-skip:hover { color: var(--bone); }

@media (max-width: 580px) {
	.choice.big { padding: 18px 18px; gap: 16px; }
	.choice.big .big-icon { width: 52px; height: 52px; font-size: 20px; }
	.wizard-nav { flex-direction: column-reverse; }
	.wizard-nav .btn { width: 100%; }
}

/* Review step */
.review-list {
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 28px;
}
.review-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 18px;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}
.review-row:last-child { border-bottom: 0; }
.review-row .k {
	color: var(--bone-3);
	font-family: 'JetBrains Mono', monospace;
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.review-row .v {
	color: var(--bone);
	font-weight: 600;
	text-align: right;
}

/* Toast notifications */
.toast-stack {
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 300;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}
.toast {
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-left: 3px solid var(--rad);
	border-radius: 3px;
	padding: 12px 16px;
	min-width: 260px;
	max-width: 360px;
	color: var(--bone);
	font-size: 13.5px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
	pointer-events: auto;
	animation: toastIn 0.22s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.toast.toast-err { border-left-color: var(--err); }
.toast.toast-warn { border-left-color: var(--warn); }
.toast.toast-leaving { animation: toastOut 0.18s ease forwards; }

@keyframes toastIn {
	from { opacity: 0; transform: translateX(20px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
	from { opacity: 1; transform: translateX(0); }
	to { opacity: 0; transform: translateX(20px); }
}

/* Dragon spinner — ember-glow with orbiting particles */
.spinner {
	display: inline-block;
	position: relative;
	width: 18px;
	height: 18px;
	vertical-align: -4px;
	background: url('/logo.svg') center/contain no-repeat;
	mix-blend-mode: lighten;
	animation: dragonGlow 1.6s ease-in-out infinite;
}
.spinner::before,
.spinner::after {
	content: '';
	position: absolute;
	width: 3px;
	height: 3px;
	background: var(--rust-3);
	border-radius: 50%;
	box-shadow: 0 0 6px var(--rust-3), 0 0 12px var(--rust-2);
	top: 50%;
	left: 50%;
	animation: spinnerOrbit 1.3s linear infinite;
}
.spinner::after {
	animation-delay: -0.65s;
	opacity: 0.55;
	width: 2px;
	height: 2px;
}
@keyframes dragonGlow {
	0%, 100% { filter: drop-shadow(0 0 4px var(--rust-3)); opacity: 0.85; }
	50% { filter: drop-shadow(0 0 10px var(--rust-3)) drop-shadow(0 0 4px var(--rust-2)); opacity: 1; }
}
@keyframes spinnerOrbit {
	0%   { transform: translate(-50%, -50%) rotate(0deg) translateX(12px); }
	100% { transform: translate(-50%, -50%) rotate(360deg) translateX(12px); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Wizard — Hardware preset picker + calculator */
.hw-presets {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	margin-bottom: 28px;
}
@media (max-width: 580px) { .hw-presets { grid-template-columns: 1fr; } }
.hw-preset {
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-radius: 3px;
	padding: 14px 16px 16px;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s;
}
.hw-preset:hover {
	background: var(--steel-2);
	border-color: var(--ridge-2);
}
.hw-preset.on {
	border-color: var(--rust);
	background: rgba(193, 61, 23, 0.05);
}
.hw-preset-title {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--bone);
	margin-bottom: 3px;
}
.hw-preset.on .hw-preset-title { color: var(--rust-3); }
.hw-preset-meta {
	font-size: 11.5px;
	color: var(--bone-3);
	margin-bottom: 10px;
}
.hw-preset-stats {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--bone-2);
	letter-spacing: 0.03em;
}

.hw-customize {
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-radius: 3px;
	padding: 18px 22px;
	margin-bottom: 18px;
}
.hw-row { margin-bottom: 18px; }
.hw-row:last-child { margin-bottom: 0; }
.hw-row-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 10px;
}
.hw-row-label { font-size: 13.5px; font-weight: 600; color: var(--bone); }
.hw-row-val {
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
	font-weight: 600;
	color: var(--rust-3);
}
.hw-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 3px;
	background: var(--smoke);
	border-radius: 2px;
	outline: 0;
	border: 1px solid var(--ridge);
}
.hw-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px; height: 16px;
	background: var(--rust);
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--rust-2), 0 0 14px rgba(192, 58, 26, 0.55);
	cursor: pointer;
}
.hw-slider::-moz-range-thumb {
	width: 16px; height: 16px;
	background: var(--rust);
	border-radius: 50%;
	border: 0;
	box-shadow: 0 0 0 1px var(--rust-2), 0 0 14px rgba(192, 58, 26, 0.55);
	cursor: pointer;
}

.hw-result {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	padding: 18px 22px;
	background: linear-gradient(180deg, rgba(193, 61, 23, 0.04) 0%, var(--smoke) 100%);
	border: 1px solid rgba(193, 61, 23, 0.32);
	border-radius: 3px;
	margin-bottom: 26px;
}
.hw-result-info { flex: 1; min-width: 0; }
.hw-result-summary {
	font-size: 14px;
	color: var(--bone);
	font-weight: 600;
	margin-bottom: 4px;
}
.hw-result-trust {
	font-size: 12px;
	color: var(--bone-3);
}
.hw-result-price { flex: 0 0 auto; text-align: right; }
.hw-price-num {
	font-family: 'Anton', sans-serif;
	font-size: 42px;
	color: var(--rust-3);
	letter-spacing: 0.005em;
	line-height: 1;
	display: inline-block;
	transition: color 0.18s, transform 0.18s;
}
.hw-price-num.pulse {
	color: var(--bone);
	transform: scale(1.06);
}
.hw-price-unit {
	display: block;
	font-size: 11px;
	color: var(--bone-3);
	font-family: 'JetBrains Mono', monospace;
	margin-top: 2px;
	letter-spacing: 0.04em;
}

/* Wizard — Custom wipe schedule panel */
.wipe-custom-panel {
	background: var(--steel);
	border: 1px solid var(--rust);
	border-radius: 3px;
	padding: 18px 22px;
	margin-top: -14px;
	margin-bottom: 28px;
	animation: fadeIn 0.18s ease;
}
.wipe-custom-tabs {
	display: flex;
	gap: 4px;
	padding: 4px;
	background: var(--smoke);
	border: 1px solid var(--ridge);
	border-radius: 3px;
	margin-bottom: 18px;
}
.wipe-mode {
	flex: 1;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bone-3);
	border-radius: 2px;
	transition: background 0.12s, color 0.12s;
}
.wipe-mode:hover { color: var(--bone); }
.wipe-mode.on {
	background: var(--steel);
	color: var(--rust-3);
}
.wipe-custom-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}
.wipe-custom-row:last-child { margin-bottom: 0; }
.wipe-custom-row label {
	flex: 0 0 110px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bone);
}
.wipe-custom-row .select-input { flex: 0 1 200px; }
.wipe-custom-time {
	display: flex;
	align-items: center;
	gap: 8px;
}
.wipe-custom-time input.select-input { width: 70px; text-align: center; -moz-appearance: textfield; }
.wipe-custom-time input.select-input::-webkit-outer-spin-button,
.wipe-custom-time input.select-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wipe-custom-time span {
	font-family: 'JetBrains Mono', monospace;
	color: var(--bone-3);
	font-size: 13px;
}
.wipe-custom-time .select-input:not([type="number"]) { flex: 0 0 auto; width: auto; min-width: 90px; }
.wipe-custom-hint {
	font-size: 12.5px;
	color: var(--bone-3);
	margin-top: 12px;
	line-height: 1.55;
	font-style: italic;
}

/* Info icon for advisory tooltips on wipe options */
.info-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: 1px solid var(--ridge-2);
	border-radius: 50%;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	font-weight: 700;
	color: var(--bone-3);
	background: transparent;
	margin-left: 8px;
	transition: border-color 0.12s, color 0.12s;
	cursor: help;
	flex: 0 0 auto;
	text-decoration: none;
}
.info-link:hover { border-color: var(--rust); color: var(--rust-3); }
.wipe-option .title {
	display: flex;
	align-items: center;
}

/* Warning modal styled */
.modal.modal-warn h3 { color: var(--warn); }
.modal.modal-warn p strong { color: var(--bone); }

/* ============= SERVER DETAIL PAGE ============= */
.detail-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 18px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}
.detail-back {
	color: var(--bone-3);
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
	transition: color 0.15s;
}
.detail-back:hover { color: var(--bone); }
.detail-title {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--bone);
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.detail-meta {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	color: var(--bone-3);
}
.detail-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 4px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--ridge);
}
.tabs button {
	padding: 11px 14px;
	font-size: 13.5px;
	color: var(--bone-3);
	font-weight: 600;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.15s, border-color 0.15s;
	white-space: nowrap;
}
.tabs button:hover { color: var(--bone); }
.tabs button.on {
	color: var(--rust-3);
	border-bottom-color: var(--rust);
}

.tab-panel { display: none; }
.tab-panel.on { display: block; }

/* .card defined below (slimmer) */

.stat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--ridge);
	border: 1px solid var(--ridge);
	border-radius: 2px;
	overflow: hidden;
}
@media (max-width: 720px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat {
	background: var(--smoke);
	padding: 14px 16px;
}
.stat .k {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bone-3);
	font-weight: 600;
	margin-bottom: 6px;
}
.stat .v {
	font-family: 'JetBrains Mono', monospace;
	font-size: 17px;
	color: var(--bone);
	font-weight: 600;
	line-height: 1;
}
.stat .v.accent { color: var(--rust-3); }
.stat .v.rad { color: var(--rad); }

/* Control row — label sits tight next to its control, no awkward gap */
.rule {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px solid var(--line);
}
.rule:last-child { border-bottom: 0; }
@media (max-width: 720px) {
	.rule { flex-wrap: wrap; gap: 6px 14px; }
	.rule-label { flex: 0 0 100%; }
}
.rule-label {
	flex: 0 0 220px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bone);
	line-height: 1.35;
}
.rule-label .hint {
	display: block;
	font-size: 11.5px;
	color: var(--bone-3);
	font-weight: 400;
	margin-top: 2px;
}
.rule > .select-input,
.rule > input[type="text"],
.rule > input[type="email"],
.rule > input[type="number"],
.rule > input[type="url"],
.rule > input[type="password"],
.rule > textarea {
	flex: 0 1 320px;
	max-width: 360px;
}
.rule > .tag-row { flex: 1 1 auto; }
.rule > .toggle { flex: 0 0 auto; margin-left: 0; }
.rule > span:empty { display: none; }

/* Slim card padding — denser */
.card {
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-radius: 3px;
	padding: 16px 20px 18px;
	margin-bottom: 12px;
}
.card-h {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--bone);
	margin-bottom: 4px;
}
.card-sub {
	font-size: 13px;
	color: var(--bone-3);
	margin-bottom: 14px;
	line-height: 1.5;
}

/* Compact slider — max 180px, paired with inline number input */
.slider-row {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	justify-self: end;
}
.slider {
	-webkit-appearance: none;
	appearance: none;
	width: 160px;
	height: 3px;
	background: var(--smoke);
	border-radius: 2px;
	outline: 0;
	cursor: pointer;
	border: 1px solid var(--ridge);
}
.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 14px; height: 14px;
	background: var(--rust);
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	box-shadow: 0 0 0 1px var(--rust-2), 0 0 12px rgba(192, 58, 26, 0.4);
	transition: box-shadow 0.12s;
}
.slider:hover::-webkit-slider-thumb {
	box-shadow: 0 0 0 1px var(--rust-3), 0 0 18px rgba(232, 86, 40, 0.6);
}
.slider::-moz-range-thumb {
	width: 14px; height: 14px;
	background: var(--rust);
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	box-shadow: 0 0 0 1px var(--rust-2), 0 0 12px rgba(192, 58, 26, 0.4);
}

/* Number input paired with slider — type exact values */
.num-input {
	width: 64px;
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-radius: 2px;
	padding: 6px 8px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--bone);
	text-align: center;
	transition: border-color 0.12s;
	-moz-appearance: textfield;
}
.num-input:focus {
	outline: 0;
	border-color: var(--rust);
}
.num-input::-webkit-outer-spin-button, .num-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.num-unit {
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	color: var(--bone-3);
	min-width: 16px;
}

/* Legacy rule-val (display-only) — keep working but de-emphasized */
.rule-val {
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--rust-3);
	text-align: right;
	justify-self: end;
	min-width: 50px;
}

.toggle {
	position: relative;
	width: 44px;
	height: 24px;
	background: var(--ridge);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.18s;
	justify-self: end;
}
.toggle::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: var(--bone);
	border-radius: 50%;
	transition: left 0.18s;
}
.toggle.on { background: var(--rad); }
.toggle.on::after { left: 23px; }

.select-input {
	width: 100%;
	background: var(--smoke);
	border: 1px solid var(--ridge);
	border-radius: 3px;
	padding: 10px 14px;
	color: var(--bone);
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
}
.select-input:focus {
	outline: 0;
	border-color: var(--rust);
}

.save-bar {
	position: sticky;
	bottom: 16px;
	margin-top: 18px;
	background: var(--steel-2);
	border: 1px solid var(--rust);
	border-radius: 3px;
	padding: 12px 18px;
	display: none;
	align-items: center;
	gap: 14px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.save-bar.on { display: flex; }
.save-bar .msg {
	color: var(--bone);
	font-size: 14px;
	flex: 1;
}
.save-bar .actions { display: flex; gap: 8px; }

.console-pane {
	background: #060406;
	border: 1px solid var(--ridge);
	border-radius: 3px;
	padding: 14px 16px;
	height: 380px;
	overflow-y: auto;
	font-family: 'JetBrains Mono', monospace;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--bone-2);
}
.console-line { padding: 1px 0; }
.console-line .ts { color: var(--bone-4); margin-right: 8px; }
.console-line.info .msg { color: var(--bone-2); }
.console-line.warn .msg { color: var(--warn); }
.console-line.err .msg { color: var(--err); }

.danger-card {
	border-color: rgba(248, 113, 113, 0.32);
}
.danger-card .card-h { color: var(--err); }

.placeholder-block {
	padding: 30px 24px;
	text-align: center;
	color: var(--bone-3);
	border: 1px dashed var(--ridge);
	border-radius: 3px;
}
.placeholder-block h4 { color: var(--bone); margin-bottom: 8px; font-size: 15px; }

.server-table tbody tr {
	cursor: pointer;
	transition: background 0.12s;
}
.server-table tbody tr:hover { background: var(--steel-2); }
.server-table tbody tr.row-clicking { background: var(--steel-2); }
.server-table .col-check, .server-table .col-actions, .server-table .row-check, .server-table .row-actions { cursor: default; }
.server-table .row-actions button { cursor: pointer; }

/* ============= INLINE TIPS (no ugly ? buttons) ============= */
[data-tip] {
	position: relative;
	cursor: help;
	border-bottom: 1px dotted rgba(242, 237, 224, 0.28);
	transition: border-color 0.12s;
}
[data-tip]:hover, [data-tip]:focus-visible {
	border-bottom-color: var(--rust-3);
	outline: none;
}
.tip-bubble {
	position: fixed;
	z-index: 500;
	max-width: 320px;
	background: #15101A;
	border: 1px solid var(--ridge);
	border-radius: 4px;
	padding: 10px 14px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--bone-2);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.65);
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.12s, transform 0.12s;
}
.tip-bubble.show { opacity: 1; transform: translateY(0); }
.tip-bubble strong { color: var(--bone); font-weight: 600; }
.tip-bubble .tip-ex {
	display: block;
	margin-top: 6px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11.5px;
	color: var(--bone-3);
}

/* Schedule time pickers */
.time-pickers { display: flex; align-items: center; gap: 8px; }
.time-input { width: 70px; text-align: center; -moz-appearance: textfield; }
.time-input::-webkit-outer-spin-button, .time-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.time-sep { font-family: 'JetBrains Mono', monospace; color: var(--bone-3); font-size: 18px; }

.sched-summary {
	padding: 12px 14px;
	background: var(--smoke);
	border: 1px solid var(--line);
	border-left: 3px solid var(--rust);
	border-radius: 2px;
	color: var(--bone-2);
	font-size: 13.5px;
	margin-bottom: 18px;
}
.sched-summary strong { color: var(--bone); }

/* Tighter transitions globally */
.btn { transition: background 0.12s, border-color 0.12s, transform 0.06s, opacity 0.12s; }
.choice { transition: border-color 0.12s, background 0.12s, transform 0.06s; }
.tabs button { transition: color 0.12s, border-color 0.12s; }
.tab-panel { animation: fadeIn 0.16s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

/* Wipe modal — preset quick-picks + multi-select checkboxes */
.wipe-presets {
	display: flex;
	gap: 6px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.wipe-preset {
	flex: 1;
	min-width: 110px;
	padding: 8px 12px;
	background: var(--smoke);
	border: 1px solid var(--ridge);
	border-radius: 3px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bone-2);
	transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.wipe-preset:hover { color: var(--bone); border-color: var(--ridge-2); background: var(--steel); }
.wipe-preset.on {
	border-color: var(--rust);
	color: var(--rust-3);
	background: rgba(193, 61, 23, 0.06);
}

.wipe-checks {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 18px;
}
.wipe-check {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 11px 14px;
	background: var(--smoke);
	border: 1px solid var(--line);
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s;
}
.wipe-check:hover { background: var(--steel); border-color: var(--ridge); }
.wipe-check:has(input:checked) {
	background: rgba(193, 61, 23, 0.05);
	border-color: rgba(193, 61, 23, 0.3);
}
.wipe-check input[type="checkbox"] {
	margin-top: 2px;
	flex: 0 0 auto;
}
.wipe-check .info { flex: 1; min-width: 0; }
.wipe-check .title { font-size: 13.5px; font-weight: 600; color: var(--bone); margin-bottom: 2px; }
.wipe-check .desc { font-size: 12px; color: var(--bone-3); line-height: 1.45; }

/* (legacy .wipe-option still used? safe to keep for backward compat) */
.wipe-option {
	background: var(--smoke);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 12px 14px;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.12s, background 0.12s;
}
.wipe-option:hover { background: var(--steel); }
.wipe-option.selected {
	border-color: var(--err);
	background: rgba(248, 113, 113, 0.05);
}
.wipe-option .title {
	font-size: 14px;
	font-weight: 600;
	color: var(--bone);
	margin-bottom: 2px;
}
.wipe-option .desc {
	font-size: 12.5px;
	color: var(--bone-3);
	line-height: 1.45;
}

/* Optimistic transient state */
.row-pending { opacity: 0.6; transition: opacity 0.12s; }

/* ============= EXTENDED PANEL UI ============= */

.card-h-count {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--bone-3);
	background: var(--smoke);
	padding: 2px 8px;
	border-radius: 999px;
	margin-left: 8px;
	vertical-align: 2px;
	letter-spacing: 0.04em;
}

.empty-mini {
	padding: 22px;
	text-align: center;
	color: var(--bone-3);
	font-size: 13px;
	border: 1px dashed var(--ridge);
	border-radius: 3px;
}

/* Tag pills (server browser tags) */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	background: var(--smoke);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 13px;
	color: var(--bone-2);
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s, color 0.12s;
	user-select: none;
}
.tag-pill input { appearance: none; width: 0; height: 0; margin: 0; opacity: 0; position: absolute; }
.tag-pill:has(input:checked), .tag-pill.is-on {
	border-color: var(--rust);
	background: rgba(193, 61, 23, 0.08);
	color: var(--rust-3);
}

textarea.select-input { resize: vertical; min-height: 76px; font-family: inherit; line-height: 1.5; padding: 12px 14px; }

/* Player list */
.player-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.player-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--smoke);
	border: 1px solid var(--line);
	border-radius: 3px;
}
.player-avatar {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 4px;
	background: var(--ridge);
	display: grid;
	place-content: center;
	color: var(--bone);
	font-weight: 700;
	font-size: 13px;
	font-family: 'JetBrains Mono', monospace;
}
.player-info { flex: 1; min-width: 0; }
.player-name { font-size: 14px; font-weight: 600; color: var(--bone); }
.player-meta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--bone-3); margin-top: 2px; }
.player-actions { display: flex; gap: 6px; }
.player-actions button {
	font-size: 12px;
	padding: 5px 10px;
	border: 1px solid var(--ridge);
	background: transparent;
	color: var(--bone-2);
	border-radius: 3px;
	transition: border-color 0.12s, color 0.12s;
}
.player-actions button:hover { border-color: var(--rust); color: var(--bone); }
.player-actions button.danger:hover { border-color: var(--err); color: var(--err); }

.player-add-row {
	display: flex;
	gap: 8px;
	margin: 14px 0 6px;
}
.player-add-row .select-input { flex: 1; min-width: 0; }
.player-add-row .btn { flex: 0 0 auto; }
@media (max-width: 580px) { .player-add-row { flex-wrap: wrap; } .player-add-row .select-input { width: 100%; } }

.player-role {
	display: inline-block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 2px;
	margin-left: 8px;
}
.player-role.owner { color: var(--rust-3); background: rgba(193, 61, 23, 0.08); border: 1px solid rgba(193, 61, 23, 0.3); }
.player-role.mod { color: var(--rad); background: rgba(157, 190, 61, 0.08); border: 1px solid rgba(157, 190, 61, 0.3); }

/* Mod marketplace */
.mod-search {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}
.mod-search .select-input { flex: 1; min-width: 0; }
@media (max-width: 580px) { .mod-search { flex-direction: column; } .mod-search .select-input { max-width: none !important; } }

.mod-list { display: flex; flex-direction: column; gap: 6px; }
.mod-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: var(--smoke);
	border: 1px solid var(--line);
	border-radius: 3px;
	transition: border-color 0.12s, background 0.12s;
}
.mod-card:hover { background: var(--steel); }
.mod-card.installed { border-color: rgba(157, 190, 61, 0.3); background: rgba(157, 190, 61, 0.03); }
.mod-icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 4px;
	background: var(--ridge);
	display: grid;
	place-content: center;
	font-family: 'Anton', sans-serif;
	font-size: 18px;
	color: var(--rust-3);
}
.mod-card.installed .mod-icon { background: rgba(157, 190, 61, 0.12); color: var(--rad); }
.mod-info { flex: 1; min-width: 0; }
.mod-name { font-size: 14.5px; font-weight: 700; color: var(--bone); margin-bottom: 2px; }
.mod-meta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--bone-3); }
.mod-meta .compat { color: var(--rad); margin-left: 6px; }
.mod-compat-warn { color: var(--warn); }
.mod-desc { font-size: 13px; color: var(--bone-2); margin-top: 4px; line-height: 1.5; }
.mod-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.mod-btn {
	padding: 7px 14px;
	font-size: 12.5px;
	font-weight: 600;
	border-radius: 3px;
	background: var(--rust);
	color: var(--bone);
	border: 0;
	transition: background 0.12s;
}
.mod-btn:hover { background: var(--rust-2); }
.mod-btn.ghost {
	background: transparent;
	color: var(--bone-2);
	border: 1px solid var(--ridge);
}
.mod-btn.ghost:hover { border-color: var(--bone-3); color: var(--bone); }
.mod-btn.installed-tag {
	background: transparent;
	color: var(--rad);
	border: 1px solid rgba(157, 190, 61, 0.4);
	cursor: default;
}

/* Backups */
.backup-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.backup-hint { font-size: 12.5px; color: var(--bone-3); }

.backup-list { display: flex; flex-direction: column; gap: 6px; }
.backup-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	background: var(--smoke);
	border: 1px solid var(--line);
	border-radius: 3px;
}
.backup-icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 4px;
	background: var(--ridge);
	display: grid;
	place-content: center;
	color: var(--bone-3);
	font-size: 18px;
}
.backup-info { flex: 1; min-width: 0; }
.backup-when { font-size: 13.5px; font-weight: 600; color: var(--bone); }
.backup-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--bone-3); margin-top: 2px; }
.backup-meta .auto-tag { color: var(--rad); margin-left: 6px; }
.backup-actions-row { display: flex; gap: 6px; flex: 0 0 auto; }
.backup-actions-row button {
	font-size: 12px;
	padding: 5px 10px;
	border: 1px solid var(--ridge);
	background: transparent;
	color: var(--bone-2);
	border-radius: 3px;
	transition: border-color 0.12s, color 0.12s;
}
.backup-actions-row button:hover { border-color: var(--rust); color: var(--bone); }

/* File browser */
.file-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}
.file-path {
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	color: var(--bone-2);
	display: flex;
	align-items: center;
	gap: 0;
	flex-wrap: wrap;
}
.file-crumb {
	color: var(--bone-2);
	padding: 4px 8px;
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
}
.file-crumb:hover { background: var(--steel); color: var(--bone); }
.file-crumb-sep { color: var(--bone-4); padding: 0 2px; }
.file-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.file-list {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--ridge);
	border: 1px solid var(--ridge);
	border-radius: 3px;
	overflow: hidden;
}
.file-row {
	display: grid;
	grid-template-columns: 32px 1fr auto auto;
	gap: 12px;
	align-items: center;
	padding: 10px 14px;
	background: var(--smoke);
	font-size: 13.5px;
	cursor: pointer;
	transition: background 0.12s;
}
.file-row:hover { background: var(--steel); }
.file-icon { color: var(--bone-3); font-size: 16px; text-align: center; }
.file-row.folder .file-icon { color: var(--rust-3); }
.file-row.protected .file-icon { color: var(--warn); }
.file-name { color: var(--bone); font-weight: 500; }
.file-row.protected .file-name { color: var(--warn); }
.file-size, .file-modified { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--bone-3); }
.file-row.protected::after { content: 'don\'t touch'; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warn); }

/* Console terminal */
.console-pane {
	background: #060406;
	border: 1px solid var(--ridge);
	border-radius: 3px;
	padding: 14px 16px;
	height: 360px;
	overflow-y: auto;
	font-family: 'JetBrains Mono', monospace;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--bone-2);
	margin-bottom: 12px;
}
.console-line { padding: 1px 0; word-break: break-all; }
.console-line .ts { color: var(--bone-4); margin-right: 10px; user-select: none; }
.console-line.info .msg { color: var(--bone-2); }
.console-line.warn .msg { color: var(--warn); }
.console-line.err .msg { color: var(--err); }
.console-line.admin .msg { color: var(--rust-3); }
.console-line.chat .player { color: var(--rad); font-weight: 600; }
.console-line.you {
	color: var(--rust-3);
	border-left: 2px solid var(--rust);
	padding-left: 8px;
	margin-left: -10px;
}

.console-input-row {
	display: flex;
	align-items: center;
	gap: 0;
	background: #060406;
	border: 1px solid var(--ridge);
	border-radius: 3px;
	padding: 0 0 0 14px;
	margin-bottom: 12px;
}
.console-input-row:focus-within { border-color: var(--rust); }
.console-prompt {
	font-family: 'JetBrains Mono', monospace;
	color: var(--rust-3);
	margin-right: 8px;
	font-size: 14px;
}
.console-input {
	flex: 1;
	background: transparent;
	border: 0;
	color: var(--bone);
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	padding: 12px 0;
	outline: 0;
}
.console-input::placeholder { color: var(--bone-4); }
.console-input-row .btn { border-radius: 0; border: 0; border-left: 1px solid var(--ridge); padding: 12px 18px; }

.console-quick {
	font-size: 12.5px;
	color: var(--bone-3);
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}
.console-quick-btn {
	background: var(--smoke);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 5px 10px;
	font-size: 12px;
	font-family: 'JetBrains Mono', monospace;
	color: var(--bone-2);
	cursor: pointer;
	transition: border-color 0.12s, color 0.12s;
}
.console-quick-btn:hover { border-color: var(--rust); color: var(--bone); }

/* Logs */
.logs-toolbar { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.logs-filter {
	padding: 6px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--bone-3);
	background: transparent;
	border: 1px solid var(--ridge);
	border-radius: 999px;
	transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.logs-filter:hover { color: var(--bone); }
.logs-filter.on {
	color: var(--rust-3);
	border-color: var(--rust);
	background: rgba(193, 61, 23, 0.06);
}

.logs-list {
	background: var(--smoke);
	border: 1px solid var(--line);
	border-radius: 3px;
	overflow: hidden;
	max-height: 540px;
	overflow-y: auto;
}
.log-row {
	display: grid;
	grid-template-columns: 70px 90px 1fr;
	gap: 14px;
	padding: 8px 14px;
	font-size: 13px;
	border-bottom: 1px solid var(--line);
	align-items: baseline;
}
.log-row:last-child { border-bottom: 0; }
.log-time {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var(--bone-3);
}
.log-type {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 2px;
	text-align: center;
	white-space: nowrap;
}
.log-type.chat { color: var(--bone-2); background: var(--ridge); }
.log-type.connection { color: var(--rad); background: rgba(157, 190, 61, 0.08); }
.log-type.admin { color: var(--rust-3); background: rgba(193, 61, 23, 0.08); }
.log-type.kill { color: var(--warn); background: rgba(224, 178, 62, 0.08); }
.log-type.error { color: var(--err); background: rgba(248, 113, 113, 0.08); }
.log-msg { color: var(--bone); line-height: 1.5; }
.log-msg .player { color: var(--rad); font-weight: 600; }
.log-msg .target { color: var(--rust-3); font-weight: 600; }

/* ============= COMMAND PALETTE (Cmd+K) ============= */
.cmdk-overlay {
	position: fixed;
	inset: 0;
	background: rgba(8, 6, 10, 0.65);
	display: none;
	z-index: 400;
	padding-top: 12vh;
	animation: fadeIn 0.12s ease;
}
.cmdk-overlay.open { display: block; }
.cmdk {
	max-width: 560px;
	margin: 0 auto;
	background: var(--steel);
	border: 1px solid var(--ridge-2);
	border-radius: 6px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
	overflow: hidden;
}
.cmdk-input-row {
	display: flex;
	align-items: center;
	padding: 14px 18px;
	border-bottom: 1px solid var(--ridge);
	gap: 12px;
}
.cmdk-input-row svg { width: 18px; height: 18px; stroke: var(--bone-3); flex: 0 0 auto; }
.cmdk-input {
	flex: 1;
	background: transparent;
	border: 0;
	color: var(--bone);
	font-size: 16px;
	font-weight: 500;
	outline: 0;
	padding: 0;
}
.cmdk-input::placeholder { color: var(--bone-4); }
.cmdk-kbd {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	color: var(--bone-3);
	background: var(--smoke);
	border: 1px solid var(--ridge);
	border-radius: 3px;
	padding: 3px 6px;
	letter-spacing: 0.04em;
}
.cmdk-list {
	max-height: 50vh;
	overflow-y: auto;
	padding: 6px;
}
.cmdk-group-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bone-3);
	font-weight: 600;
	padding: 12px 14px 6px;
}
.cmdk-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	color: var(--bone);
	transition: background 0.08s;
}
.cmdk-item:hover, .cmdk-item.active { background: var(--steel-2); }
.cmdk-item.active { background: rgba(193, 61, 23, 0.08); color: var(--bone); }
.cmdk-icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 3px;
	background: var(--smoke);
	display: grid;
	place-content: center;
	color: var(--bone-3);
}
.cmdk-item.active .cmdk-icon { color: var(--rust-3); }
.cmdk-body { flex: 1; min-width: 0; }
.cmdk-title { font-weight: 600; }
.cmdk-sub { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--bone-3); margin-top: 1px; }
.cmdk-shortcut {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	color: var(--bone-3);
	letter-spacing: 0.04em;
}
.cmdk-empty {
	padding: 28px 18px;
	text-align: center;
	color: var(--bone-3);
	font-size: 13px;
}
.cmdk-foot {
	padding: 10px 18px;
	border-top: 1px solid var(--ridge);
	display: flex;
	gap: 14px;
	font-size: 11.5px;
	color: var(--bone-3);
	background: var(--smoke);
}
.cmdk-foot .hint { display: flex; align-items: center; gap: 6px; }

/* Inline-editable name */
.editable-name {
	cursor: text;
	padding: 2px 6px;
	margin: -2px -6px;
	border-radius: 3px;
	transition: background 0.12s, box-shadow 0.12s;
}
.editable-name:hover { background: var(--steel-2); }
.editable-name.editing {
	background: var(--smoke);
	box-shadow: 0 0 0 1px var(--rust);
}
.editable-name input {
	background: transparent;
	border: 0;
	outline: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	padding: 0;
	width: 100%;
	min-width: 200px;
}

/* Panel search */
.panel-search {
	position: relative;
	margin-bottom: 12px;
}
.panel-search input {
	width: 100%;
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-radius: 3px;
	padding: 10px 14px 10px 40px;
	color: var(--bone);
	font-size: 14px;
	transition: border-color 0.12s;
}
.panel-search input:focus { outline: 0; border-color: var(--rust); }
.panel-search input::placeholder { color: var(--bone-4); }
.panel-search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	stroke: var(--bone-3);
	pointer-events: none;
}
.panel-search-kbd {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	color: var(--bone-3);
	background: var(--smoke);
	border: 1px solid var(--ridge);
	border-radius: 3px;
	padding: 3px 7px;
	letter-spacing: 0.04em;
	pointer-events: none;
}

/* First-time onboarding banner */
.onboarding-banner {
	background: linear-gradient(135deg, var(--steel) 0%, var(--steel-2) 100%);
	border: 1px solid var(--ridge);
	border-left: 3px solid var(--rust);
	border-radius: 4px;
	padding: 20px 22px;
	margin-bottom: 22px;
	position: relative;
	animation: bannerIn 0.24s cubic-bezier(0.2, 0, 0, 1);
}
@keyframes bannerIn {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}
.onboarding-banner h2 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--bone);
	margin-bottom: 4px;
}
.onboarding-banner p {
	font-size: 13.5px;
	color: var(--bone-2);
	line-height: 1.55;
	margin-bottom: 14px;
	max-width: 640px;
}
.onboarding-tips {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 14px;
}
@media (max-width: 720px) { .onboarding-tips { grid-template-columns: 1fr; } }
.onboarding-tip {
	background: rgba(8, 6, 10, 0.4);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 12px 14px;
}
.onboarding-tip .step {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rust-3);
	font-weight: 600;
	margin-bottom: 4px;
}
.onboarding-tip .title {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--bone);
	margin-bottom: 2px;
}
.onboarding-tip .desc { font-size: 12px; color: var(--bone-3); line-height: 1.4; }
.onboarding-dismiss {
	position: absolute;
	top: 14px;
	right: 14px;
	color: var(--bone-3);
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 3px;
	background: transparent;
	transition: color 0.12s, background 0.12s;
}
.onboarding-dismiss:hover { color: var(--bone); background: var(--steel-2); }

/* ============= GAME RULES SUB-NAV ============= */
.rules-shell {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 22px;
	align-items: start;
}
@media (max-width: 880px) {
	.rules-shell { grid-template-columns: 1fr; gap: 14px; }
	.rules-side { position: static !important; }
}

.rules-side {
	position: sticky;
	top: 20px;
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-radius: 4px;
	padding: 10px 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.rules-side button {
	text-align: left;
	padding: 9px 12px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--bone-2);
	border-radius: 3px;
	transition: background 0.1s, color 0.1s;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.rules-side button:hover { background: var(--steel-2); color: var(--bone); }
.rules-side button.on {
	background: rgba(193, 61, 23, 0.08);
	color: var(--rust-3);
	font-weight: 600;
}
.rules-side button .count {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	color: var(--bone-4);
	letter-spacing: 0.04em;
}
.rules-side button.on .count { color: var(--rust-3); }

.rules-content { min-width: 0; }
.rules-section { display: none; animation: fadeIn 0.14s ease; }
.rules-section.on { display: block; }

.rules-section-head {
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}
.rules-section-head h3 {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin-bottom: 4px;
	color: var(--bone);
}
.rules-section-head p {
	font-size: 13.5px;
	color: var(--bone-3);
	line-height: 1.55;
	max-width: 600px;
}

.rules-group {
	background: var(--steel);
	border: 1px solid var(--ridge);
	border-radius: 4px;
	padding: 4px 22px 16px;
	margin-bottom: 14px;
}
.rules-group + .rules-group { margin-top: 14px; }
.rules-group-title {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bone-3);
	font-weight: 600;
	padding-top: 16px;
	padding-bottom: 12px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--line);
}

.rules-row-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 24px;
}
@media (max-width: 720px) { .rules-row-grid { grid-template-columns: 1fr; } }

/* When sub-nav active, hide the .card wrapper for game-rules pane */
.tab-panel[data-pane="gameplay"] > .card { padding: 0; border: 0; background: transparent; }

.event-toggles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
@media (max-width: 580px) { .event-toggles { grid-template-columns: 1fr; } }
.event-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	background: var(--smoke);
	border: 1px solid var(--line);
	border-radius: 3px;
}
.event-toggle .info { flex: 1; }
.event-toggle .title { font-size: 13.5px; font-weight: 600; color: var(--bone); }
.event-toggle .desc { font-size: 11.5px; color: var(--bone-3); margin-top: 2px; }

.team-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--smoke);
	border: 1px solid var(--line);
	border-radius: 3px;
}
.team-row + .team-row { margin-top: 4px; }
.team-avatar {
	width: 32px; height: 32px;
	border-radius: 4px;
	background: var(--ridge);
	display: grid;
	place-content: center;
	color: var(--bone);
	font-weight: 700;
	font-size: 13px;
	font-family: 'JetBrains Mono', monospace;
	flex: 0 0 auto;
}
.team-info { flex: 1; min-width: 0; }
.team-email { font-size: 14px; font-weight: 600; color: var(--bone); }
.team-status { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--bone-3); margin-top: 2px; }
.team-role-pill {
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 3px 9px;
	border-radius: 2px;
	border: 1px solid;
}
.team-role-pill.owner { color: var(--rust-3); background: rgba(193, 61, 23, 0.06); border-color: rgba(193, 61, 23, 0.32); }
.team-role-pill.admin { color: var(--bone); background: var(--ridge); border-color: var(--ridge-2); }
.team-role-pill.moderator { color: var(--rad); background: rgba(157, 190, 61, 0.06); border-color: rgba(157, 190, 61, 0.32); }
.team-role-pill.viewer { color: var(--bone-3); background: transparent; border-color: var(--ridge); }
.team-actions { display: flex; gap: 6px; }
.team-actions button {
	font-size: 12px;
	padding: 5px 10px;
	border: 1px solid var(--ridge);
	background: transparent;
	color: var(--bone-2);
	border-radius: 3px;
}
.team-actions button:hover { color: var(--bone); border-color: var(--rust); }
.team-actions button.danger:hover { color: var(--err); border-color: var(--err); }

/* Numeric value display next to sliders */
.rule .rule-val.changed { color: var(--rust-3); font-weight: 700; }

/* Help link inside sections */
.section-help {
	font-size: 12.5px;
	color: var(--bone-3);
	padding: 10px 14px;
	background: var(--smoke);
	border: 1px solid var(--line);
	border-radius: 3px;
	margin-bottom: 14px;
	line-height: 1.5;
}
.section-help strong { color: var(--bone); }

/* ============= MOBILE AUDIT FIXES ============= */
/* Tablet — sidebar collapses, content gets full width */
@media (max-width: 720px) {
	.panel-main {
		max-width: 100%;
		overflow-x: visible;
		padding: 18px 16px 48px;
	}
	.panel-side {
		padding: 12px 14px;
		gap: 12px;
		flex-wrap: wrap;
	}
	.panel-side-foot {
		flex: 1 1 auto;
		text-align: right;
		font-size: 11.5px;
	}
	.panel-side-foot .email {
		display: inline;
		font-size: 11.5px;
		margin-bottom: 0;
		margin-right: 8px;
	}
	.panel-nav { flex-wrap: wrap; gap: 4px; }
	.panel-nav a { padding: 6px 10px; font-size: 13px; }

	.save-bar { flex-wrap: wrap; padding: 12px 14px; }
	.save-bar .msg { flex: 1 1 100%; margin-bottom: 4px; font-size: 13px; }
	.save-bar .actions { width: 100%; }
	.save-bar .actions .btn { flex: 1; }

	.modal { padding: 22px 20px; }
	.modal h3 { font-size: 17px; }

	.detail-title { font-size: 22px; }
	.detail-actions { gap: 6px; }
	.detail-actions .btn { padding: 8px 12px; font-size: 13px; }

	.tabs button { padding: 10px 14px; font-size: 13px; }

	/* Wipe modal stays readable */
	.wipe-presets .wipe-preset { flex: 1 1 calc(33% - 4px); }
}

/* Phone — pack tighter */
@media (max-width: 480px) {
	.panel-main { padding: 14px 12px 40px; }
	.panel-head h1 { font-size: 22px; }
	.detail-title { font-size: 20px; gap: 8px; }
	.tabs button { padding: 9px 12px; font-size: 12.5px; }

	.card { padding: 14px 16px; }
	.card-h { font-size: 14px; }

	/* Make rule labels stack cleanly above their controls */
	.rule { padding: 10px 0; }
	.rule-label { font-size: 13px; }

	/* Landing header buttons shrink */
	header { padding: 18px 0; }
	.brand img { width: 30px; height: 30px; }
	.brand .b-text { font-size: 22px; }
	.header-inner { gap: 12px; }
	.nav { gap: 6px; }
	.nav .btn { padding: 8px 12px; font-size: 13px; }
	.nav .btn-ghost { padding: 8px 10px; }

	/* Tighten landing hero spacing */
	.hero-actions { flex-wrap: wrap; gap: 10px; }
	.hero-actions .btn { width: 100%; justify-content: center; }
	.hero-trust { font-size: 12px; }

	/* Calculator value scales with viewport */
	.calc-price .num { font-size: 48px; }
	.calc { padding: 22px 20px; }

	/* Modal stays in viewport with margin */
	.modal-backdrop { padding: 12px; }
	.modal { padding: 20px 18px; }
	.modal h3 { font-size: 16px; }
	.modal p { font-size: 13.5px; }
	.modal .modal-actions { flex-wrap: wrap; gap: 6px; }
	.modal .modal-actions .btn { flex: 1; }

	/* Wipe checkboxes denser */
	.wipe-presets .wipe-preset { flex: 1 1 100%; min-width: 0; }
	.wipe-check { padding: 10px 12px; }
	.wipe-check .title { font-size: 13px; }
	.wipe-check .desc { font-size: 11.5px; }

	/* Stat grid single column on tiny phones */
	.stat-grid { grid-template-columns: 1fr !important; }

	/* Cmd+K palette feels right on phones too */
	.cmdk-item { padding: 10px 12px; }

	/* Login/signup forms */
	.auth-card { padding: 24px 20px !important; }
}

/* Prevent input zoom on iOS — needs font-size >= 16px on text inputs */
@media (max-width: 720px) {
	.select-input,
	input[type="text"]:not(.wizard-input),
	input[type="email"]:not(.wizard-input),
	input[type="password"]:not(.wizard-input),
	input[type="number"]:not(.wizard-input),
	input[type="url"]:not(.wizard-input),
	input[type="search"]:not(.wizard-input),
	textarea, select {
		font-size: 16px;
	}
}

/* ============= ScalePack card on Mods tab ============= */
.scalepack-card {
	background:
		linear-gradient(180deg, rgba(192, 58, 26, 0.04), transparent 30%),
		var(--steel);
	border: 1px solid var(--ridge);
	border-left: 3px solid var(--rust);
}
.scalepack-card .card-h-tag {
	display: inline-block;
	margin-left: 10px;
	padding: 2px 8px;
	background: var(--rust);
	color: var(--bone);
	font-family: 'JetBrains Mono', monospace;
	font-size: 9.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 700;
	border-radius: 2px;
	vertical-align: 3px;
}
.scalepack-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 16px;
}
@media (max-width: 720px) { .scalepack-grid { grid-template-columns: 1fr; } }
.scalepack-item {
	background: var(--smoke);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 12px 14px;
	transition: border-color 0.15s;
}
.scalepack-item:hover { border-color: var(--ridge-2); }
.scalepack-name {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	font-weight: 700;
	color: var(--rust-3);
	letter-spacing: 0.01em;
	margin-bottom: 4px;
}
.scalepack-desc {
	font-size: 13px;
	color: var(--bone-2);
	line-height: 1.5;
}
.scalepack-foot {
	margin-top: 16px;
	font-size: 13px;
}
.scalepack-foot a {
	color: var(--rust-3);
	text-decoration: none;
}
.scalepack-foot a:hover { color: var(--rust-2); text-decoration: underline; text-underline-offset: 3px; }

/* ============== Billing tab ============== */
.bill-current { padding: 24px 24px 22px; }
.bill-now {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 28px;
	align-items: start;
}
.bill-plan-name {
	font-family: 'Anton', sans-serif;
	font-size: 26px;
	letter-spacing: 0.01em;
	color: var(--bone);
	line-height: 1;
	margin-bottom: 6px;
}
.bill-plan-line {
	font-size: 14px;
	color: var(--bone-2);
	margin-bottom: 8px;
}
.bill-plan-line .bill-mo { color: var(--bone-4); font-size: 12px; margin-left: 4px; }
.bill-plan-line .bill-sep { color: var(--bone-5, #45404a); margin: 0 8px; }
.bill-renew {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11.5px;
	color: var(--bone-3);
	letter-spacing: 0.02em;
}
.bill-now-r { text-align: right; }
.bill-total-label {
	font-size: 11px;
	color: var(--bone-4);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 4px;
}
.bill-total {
	font-family: 'Anton', sans-serif;
	font-size: 36px;
	color: var(--bone);
	line-height: 1;
}
.bill-total .bill-mo { font-size: 13px; color: var(--bone-4); margin-left: 4px; }
.bill-breakdown {
	margin-top: 8px;
	font-size: 11.5px;
	color: var(--bone-4);
	font-family: 'JetBrains Mono', monospace;
	letter-spacing: 0.02em;
}
.bill-breakdown .bb-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

/* Plan switcher */
.plan-switch {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
	margin-top: 6px;
}
.plan-opt {
	border: 1px solid var(--ridge, #2B2434);
	border-radius: 10px;
	padding: 16px 16px 14px;
	background: rgba(20, 17, 27, 0.55);
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s;
	position: relative;
}
.plan-opt:hover { border-color: var(--ridge-2, #3F3548); background: rgba(27, 22, 34, 0.7); }
.plan-opt.current {
	border-color: var(--bone-4);
	cursor: default;
}
.plan-opt.current:hover { background: rgba(20, 17, 27, 0.55); }
.plan-opt.selected {
	border-color: var(--rust-3, #d14826);
	background: rgba(209, 72, 38, 0.06);
}
.plan-opt-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 6px;
}
.plan-opt-name {
	font-family: 'Anton', sans-serif;
	font-size: 17px;
	letter-spacing: 0.015em;
	color: var(--bone);
}
.plan-opt-price {
	font-size: 14px;
	color: var(--bone-2);
}
.plan-opt-price strong { color: var(--bone); }
.plan-opt-spec {
	font-size: 12px;
	color: var(--bone-3);
	line-height: 1.4;
	margin-bottom: 8px;
}
.plan-opt-delta {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.02em;
	color: var(--bone-3);
}
.plan-opt-delta.up { color: var(--rust-3, #d14826); }
.plan-opt-delta.down { color: #6a9f5e; }
.plan-opt-delta.same { color: var(--bone-4); }
.plan-opt .current-tag {
	position: absolute;
	top: 10px;
	right: 12px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 9.5px;
	color: var(--bone-4);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.proration-preview {
	margin-top: 18px;
	padding: 16px 18px;
	background: rgba(15, 13, 18, 0.6);
	border: 1px solid var(--ridge, #2B2434);
	border-radius: 10px;
}
.proration-math {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	line-height: 1.75;
	color: var(--bone-2);
	margin-bottom: 14px;
	white-space: pre-wrap;
}
.proration-math .pm-h {
	color: var(--bone);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: 4px;
	display: block;
}
.proration-math .pm-due {
	color: var(--rust-3, #d14826);
	font-weight: 600;
}
.proration-math .pm-credit {
	color: #7cb56b;
	font-weight: 600;
}
.proration-cta {
	display: flex;
	gap: 10px;
}

/* Add-ons */
.addon-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.addon-row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 16px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--ridge, #2B2434);
}
.addon-row:last-child { border-bottom: 0; }
.addon-info { min-width: 0; }
.addon-name {
	font-size: 14px;
	color: var(--bone);
	font-weight: 500;
	margin-bottom: 3px;
}
.addon-desc {
	font-size: 12.5px;
	color: var(--bone-3);
	line-height: 1.45;
}
.addon-price {
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	color: var(--bone-2);
	white-space: nowrap;
}
.addon-price .ap-unit {
	font-size: 11px;
	color: var(--bone-4);
	margin-left: 2px;
}
.addon-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--ridge, #2B2434);
	gap: 18px;
	flex-wrap: wrap;
}
.addon-foot-l {
	font-size: 12.5px;
	color: var(--bone-2);
	font-family: 'JetBrains Mono', monospace;
	letter-spacing: 0.01em;
}
.addon-foot-r { display: flex; gap: 10px; }

@media (max-width: 720px) {
	.bill-now { grid-template-columns: 1fr; }
	.bill-now-r { text-align: left; }
	.plan-switch { grid-template-columns: 1fr; }
}

/* Signup TOS row */
.tos-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 18px;
	font-size: 13px;
	color: var(--bone-3, #807A70);
	line-height: 1.5;
	cursor: pointer;
}
.tos-row input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 2px;
	width: 16px;
	height: 16px;
	accent-color: var(--rust-3, #d14826);
	cursor: pointer;
}
.tos-row a { color: var(--ember-3, #e8a642); text-decoration: underline; text-underline-offset: 2px; }
.tos-row a:hover { color: var(--bone, #ECE7DA); }

/* ============ Plugin profiler ============ */
.profiler-head, .profiler-row {
	display: grid;
	grid-template-columns: minmax(140px, 1.6fr) 1.4fr 1fr 90px;
	gap: 14px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--ridge, #2B2434);
}
.profiler-head {
	font-size: 10.5px;
	color: var(--bone-4, #5C5760);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-family: 'JetBrains Mono', monospace;
	padding-top: 6px;
	padding-bottom: 6px;
}
.profiler-row:last-child { border-bottom: 0; }
.profiler-row:hover { background: rgba(20, 17, 27, 0.4); }

.pr-name {
	font-size: 13.5px;
	color: var(--bone, #ECE7DA);
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pr-name .pr-engine {
	font-family: 'JetBrains Mono', monospace;
	font-size: 9.5px;
	letter-spacing: 0.06em;
	color: var(--bone-4, #5C5760);
	text-transform: uppercase;
}

.pr-bar-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pr-bar {
	flex: 1;
	height: 6px;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 3px;
	overflow: hidden;
	position: relative;
}
.pr-bar > i {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #6a9f5e, #a5b86b);
	transition: width 0.6s ease;
}
.pr-bar.amber > i { background: linear-gradient(90deg, #c79b3b, #e8a642); }
.pr-bar.red > i { background: linear-gradient(90deg, #a23b1d, #d14826); }
.pr-val {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	color: var(--bone-2, #A8A39A);
	letter-spacing: 0.02em;
	min-width: 48px;
	text-align: right;
}

.pr-flag {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11.5px;
	letter-spacing: 0.02em;
	text-align: right;
	color: var(--bone-3, #807A70);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
}
.pr-flag.warn { color: var(--ember-3, #e8a642); }
.pr-flag.bad { color: var(--rust-3, #d14826); font-weight: 600; }

.profiler-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--ridge, #2B2434);
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--bone-4, #5C5760);
	flex-wrap: wrap;
	gap: 12px;
}
.profiler-legend { display: flex; gap: 14px; }
.profiler-legend span { display: inline-flex; align-items: center; gap: 6px; }
.prof-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	display: inline-block;
}
.prof-dot.warn { background: var(--ember-3, #e8a642); }
.prof-dot.bad { background: var(--rust-3, #d14826); }
.profiler-refresh::before {
	content: "●";
	color: #7cb56b;
	margin-right: 6px;
	font-size: 8px;
	vertical-align: middle;
	animation: profPulse 2s ease-in-out infinite;
}
@keyframes profPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

@media (max-width: 720px) {
	.profiler-head, .profiler-row { grid-template-columns: 1fr 1fr 70px; }
	.ph-flag, .pr-flag { display: none; }
}

/* ============ Event blocks (Game rules → Events) ============ */
.event-block {
	background: rgba(20, 17, 27, 0.45);
	border: 1px solid var(--ridge, #2B2434);
	border-radius: 8px;
	margin-bottom: 12px;
	overflow: hidden;
	transition: border-color 0.15s;
}
.event-block:hover { border-color: var(--ridge-2, #3F3548); }
.event-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 16px;
	gap: 16px;
	background: rgba(15, 13, 18, 0.5);
}
.event-h-l { flex: 1; min-width: 0; }
.event-h-name {
	font-size: 14.5px;
	color: var(--bone, #ECE7DA);
	font-weight: 600;
	margin-bottom: 3px;
	letter-spacing: -0.005em;
}
.event-h-desc {
	font-size: 12.5px;
	color: var(--bone-3, #807A70);
	line-height: 1.4;
}
.event-body {
	padding: 4px 16px 10px;
	border-top: 1px solid var(--ridge, #2B2434);
}
.event-body .rule {
	padding: 9px 0;
	border-bottom: none;
}
.event-body .rule:not(:last-child) {
	border-bottom: 1px solid rgba(43, 36, 52, 0.4);
}
/* Disabled state when the event toggle is off */
.event-block:has(.event-head .toggle:not(.on)) .event-body {
	opacity: 0.45;
	pointer-events: none;
	filter: saturate(0.5);
}

.scalepack-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 3px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bone-4, #5C5760);
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--ridge, #2B2434);
	vertical-align: middle;
}

/* ============ Billing custom RAM/slot extras ============ */
.bill-extras-summary {
	margin-top: 18px;
	padding: 14px 16px;
	background: rgba(15, 13, 18, 0.6);
	border: 1px solid var(--ridge, #2B2434);
	border-radius: 8px;
}
.bill-extras-math {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	line-height: 1.7;
	color: var(--bone-2, #A8A39A);
	margin-bottom: 12px;
	white-space: pre-wrap;
}
.bill-extras-math .bem-h {
	color: var(--bone, #ECE7DA);
	font-weight: 600;
	display: block;
	margin-bottom: 4px;
}
.bill-extras-math .bem-charge { color: var(--rust-3, #d14826); font-weight: 600; }
.bill-extras-math .bem-credit { color: #7cb56b; font-weight: 600; }
.bill-extras-cta { display: flex; gap: 10px; }

/* ============ Overview Quick Actions ============ */
.qa-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 12px;
}
.qa-btn {
	text-align: left;
	padding: 14px 16px;
	background: rgba(20, 17, 27, 0.55);
	border: 1px solid var(--ridge, #2B2434);
	border-radius: 8px;
	color: var(--bone-2, #A8A39A);
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s, transform 0.08s;
}
.qa-btn:hover {
	border-color: var(--rust-3, #d14826);
	background: rgba(27, 22, 34, 0.7);
}
.qa-btn:active { transform: translateY(1px); }
.qa-name {
	font-size: 14px;
	color: var(--bone, #ECE7DA);
	font-weight: 600;
	margin-bottom: 3px;
}
.qa-desc {
	font-size: 12.5px;
	color: var(--bone-3, #807A70);
	line-height: 1.4;
}
.qa-desc code {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11.5px;
	color: var(--ember-3, #e8a642);
}
@media (max-width: 720px) {
	.qa-grid { grid-template-columns: 1fr; }
}