/* JetBrains Mono — self-hosted (latin, weights 400/500/600/700) */
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/static/fonts/jbmono-400.woff2") format("woff2");
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/static/fonts/jbmono-500.woff2") format("woff2");
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/static/fonts/jbmono-600.woff2") format("woff2");
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/static/fonts/jbmono-700.woff2") format("woff2");
}

/* ============================================================
   SEELE / MAGI — identity provider UI
   Mobile-first. Dark. Monospace. Cyan.
   ------------------------------------------------------------
   1.  tokens
   2.  reset + base
   3.  typography
   4.  layout: auth pages
   5.  layout: panel (sidebar + content)
   6.  surfaces: card
   7.  forms: fields, inputs, selects, checkboxes
   8.  buttons
   9.  feedback: error / success / info
   10. data: kv, methods, tables, stats
   11. accents: badges, tags, phrase boxes, code
   12. utilities
   13. CRT layer
   14. responsive: >= 768px (desktop uplift)
   15. mobile table fallback
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root {
	/* surfaces — cool dark, each step ~4% lighter */
	--bg: #0a0e12;
	--bg-deep: #070a0d;
	--surface: #0f151c;
	--surface-2: #141c25;
	--surface-3: #1a232e;

	/* lines — borders carry the structure, not shadows */
	--border: #1e2933;
	--border-strong: #2c3a48;
	--border-faint: #161f28;

	/* ink */
	--text: #dbe4ec;
	--text-strong: #f2f7fb;
	--muted: #7d8c9b;
	--faint: #4c5a68;

	/* accent — light cyan */
	--accent: #7fe7ff;
	--accent-hover: #a9f0ff;
	--accent-press: #5ed4f0;
	--accent-ink: #04141c; /* text that sits ON accent */
	--accent-soft: rgba(127, 231, 255, 0.09);
	--accent-line: rgba(127, 231, 255, 0.32);
	--accent-glow: rgba(127, 231, 255, 0.18);

	/* status */
	--danger: #ff6b5e;
	--danger-dim: #b8453b;
	--danger-soft: rgba(255, 107, 94, 0.09);
	--success: #6ee7a8;
	--success-soft: rgba(110, 231, 168, 0.09);
	--warn: #ffc857;

	/* brand-adjacent */
	--discord: #5865f2;
	--discord-hover: #6d78f5;

	/* type */
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
		Consolas, "Liberation Mono", monospace;

	/* spacing scale */
	--s1: 0.25rem;
	--s2: 0.5rem;
	--s3: 0.75rem;
	--s4: 1rem;
	--s5: 1.5rem;
	--s6: 2rem;
	--s7: 3rem;

	/* radii — soft enough to read modern, tight enough to read terminal */
	--r-sm: 2px;
	--r-md: 3px;
	--r-lg: 4px;

	/* metrics */
	--sidebar-w: 240px;
	--content-max: 960px;
	--auth-max: 400px;
	--tap: 2.75rem;

	/* motion */
	--t-fast: 120ms ease;
	--t: 160ms ease;

	color-scheme: dark;
}

/* ------------------------------------------------------------
   2. RESET + BASE
   ------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	background: var(--bg);
	-webkit-text-size-adjust: 100%;
	scrollbar-color: var(--border-strong) transparent;
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--bg);
	color: var(--text);
	font-family: var(--mono);
	font-size: 0.9375rem;
	line-height: 1.6;
	font-variant-ligatures: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
	overflow-wrap: break-word;
}

/* one faint cyan wash from the top — depth without shadows */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(
			90rem 45rem at 50% -20rem,
			rgba(127, 231, 255, 0.05),
			transparent 65%
		),
		linear-gradient(180deg, transparent 60%, var(--bg-deep) 100%);
}

::selection {
	background: var(--accent);
	color: var(--accent-ink);
}

/* scrollbars */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: var(--border-strong);
	border-radius: 999px;
	border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
	background: var(--faint);
}

/* global focus ring — inputs opt out below in favour of border + glow */
:where(a, button, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------ */
h1,
h2,
h3,
h4 {
	color: var(--text-strong);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

h1 {
	font-size: 1.25rem;
	margin-bottom: var(--s5);
}

h2 {
	font-size: 1.0625rem;
	margin-bottom: var(--s4);
}

h3 {
	font-size: 0.875rem;
	margin: var(--s5) 0 var(--s3);
	color: var(--muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

h3::before {
	content: "// ";
	color: var(--accent);
	opacity: 0.55;
}

p {
	margin-bottom: var(--s3);
}
p:last-child {
	margin-bottom: 0;
}

b,
strong {
	color: var(--text-strong);
	font-weight: 600;
}

a {
	color: var(--accent);
	text-decoration: none;
	text-underline-offset: 3px;
	transition: color var(--t-fast);
}
a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

ul {
	list-style: none;
}

/* ------------------------------------------------------------
   4. LAYOUT — AUTH PAGES (centered card)
   ------------------------------------------------------------ */
.auth-page {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: var(--s5) var(--s4);
}

.auth-card {
	width: 100%;
	max-width: var(--auth-max);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: var(--s6) var(--s5);
	/* hairline of accent along the top edge */
	background-image: linear-gradient(var(--accent-line), var(--accent-line));
	background-size: 100% 1px;
	background-position: 0 0;
	background-repeat: no-repeat;
}

.auth-card h1 {
	font-size: 1.375rem;
	letter-spacing: 0.06em;
	text-align: center;
	color: var(--text-strong);
	margin-bottom: var(--s5);
	text-shadow: 0 0 22px var(--accent-glow);
}

/* subtitle under the wordmark (e.g. "Sign in to your account") */
.auth-sub {
	text-align: center;
	color: var(--muted);
	font-size: 0.8125rem;
	margin: -1rem 0 var(--s5);
}

.auth-card form {
	margin: 0;
}

.auth-card .row {
	justify-content: center;
	gap: var(--s4);
	font-size: 0.8125rem;
	/* breathing room below the Discord button — it was crowding the links */
	margin-top: var(--s5);
	padding-top: var(--s4);
	border-top: 1px solid var(--border-faint);
	width: 100%;
}

/* ------------------------------------------------------------
   5. LAYOUT — PANEL (sidebar + content)
   ------------------------------------------------------------ */
.panel-layout {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

/* --- mobile first: sidebar is a sticky top bar --- */
.sidebar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	background: rgba(10, 14, 18, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
}

/* scroll affordance: fade edges hint that the tab bar scrolls */
.sidebar-nav {
	position: relative;
}
.sidebar-nav::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	bottom: 0;
	width: 2.5rem;
	background: linear-gradient(
		to right,
		rgba(10, 14, 18, 0),
		rgba(10, 14, 18, 0.92)
	);
	pointer-events: none;
}
@media (min-width: 768px) {
	.sidebar-nav::after {
		display: none;
	}
}

.sidebar-nav {
	display: flex;
	flex-direction: row;
	gap: var(--s1);
	padding: var(--s2) var(--s3);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar {
	display: none;
}

.sidebar-nav a {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	white-space: nowrap;
	padding: var(--s2) var(--s3);
	min-height: 2.25rem;
	font-size: 0.8125rem;
	color: var(--muted);
	border-radius: var(--r-md);
	text-decoration: none;
	transition: color var(--t-fast), background-color var(--t-fast);
}

.sidebar-nav a:hover {
	color: var(--text);
	background: rgba(255, 255, 255, 0.035);
	text-decoration: none;
}

.sidebar-nav a.active {
	color: var(--accent);
	background: var(--accent-soft);
}

/* active marker: underline on mobile, left rail on desktop */
.sidebar-nav a.active::before {
	content: "";
	position: absolute;
	left: var(--s3);
	right: var(--s3);
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent);
	box-shadow: 0 0 10px var(--accent-glow);
}

/* secondary nav (Admin / Home / Sign out) rides above the tabs on mobile */
.sidebar-secondary {
	order: -1;
	justify-content: flex-end;
	gap: var(--s2);
	padding: var(--s2) var(--s3);
	border-bottom: 1px solid var(--border-faint);
}

.sidebar-secondary a {
	font-size: 0.75rem;
	color: var(--faint);
	min-height: 2rem;
	padding: var(--s1) var(--s2);
}
.sidebar-secondary a:hover {
	color: var(--text);
}
.sidebar-secondary a[href="/logout"]:hover {
	color: var(--danger);
	background: var(--danger-soft);
}

.panel-content {
	flex: 1;
	min-width: 0;
	width: 100%;
	max-width: var(--content-max);
	margin: 0 auto;
	padding: var(--s5) var(--s4) var(--s7);
}

/* ------------------------------------------------------------
   6. SURFACES — CARD
   ------------------------------------------------------------ */
.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: var(--s5) var(--s4);
	margin-bottom: var(--s5);
}
.card:last-child {
	margin-bottom: 0;
}
.card > :first-child {
	margin-top: 0;
}
.card > :last-child {
	margin-bottom: 0;
}

/* standalone interstitials: / and /logout render <main class="card"> */
main.card {
	position: relative;
	z-index: 1;
	max-width: 420px;
	margin: 20vh auto var(--s6);
	text-align: center;
	color: var(--muted);
}
main.card h1 {
	margin-bottom: 0;
	font-size: 1.0625rem;
	letter-spacing: 0.05em;
	color: var(--accent);
}

/* ------------------------------------------------------------
   7. FORMS
   ------------------------------------------------------------ */

/* .field is used two ways: as a wrapper <div>, and directly on controls */
.field {
	margin-bottom: var(--s4);
}

label {
	display: block;
	font-size: 0.75rem;
	color: var(--muted);
	letter-spacing: 0.04em;
	margin-bottom: var(--s2);
	text-transform: uppercase;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="tel"],
input:not([type]),
select,
textarea {
	width: 100%;
	min-width: 0;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	color: var(--text);
	font-family: inherit;
	font-size: 1rem; /* 16px: stops iOS zoom-on-focus */
	line-height: 1.4;
	padding: 0.65rem 0.75rem;
	min-height: var(--tap);
	outline: none;
	transition: border-color var(--t-fast), box-shadow var(--t-fast),
		background-color var(--t-fast);
}

input::placeholder,
textarea::placeholder {
	color: var(--faint);
	opacity: 1;
}

input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
	border-color: var(--border-strong);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--accent);
	background: var(--surface-3);
	box-shadow: 0 0 0 3px var(--accent-glow);
}

input:disabled,
select:disabled,
textarea:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

input:user-invalid {
	border-color: var(--danger-dim);
}

/* kill the browser's yellow autofill slab */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--text);
	-webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
	caret-color: var(--text);
	transition: background-color 9999s ease-out;
}

/* controls carrying .field sit in flex rows/stacks — gap owns the spacing */
input.field,
select.field,
textarea.field {
	margin-bottom: 0;
}

select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.25rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237fe7ff' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	cursor: pointer;
}
select option {
	background: var(--surface-2);
	color: var(--text);
}

input[type="checkbox"],
input[type="radio"] {
	width: 1rem;
	height: 1rem;
	min-height: 0;
	flex: 0 0 auto;
	accent-color: var(--accent);
	cursor: pointer;
}

.field-error {
	display: block;
	color: var(--danger);
	font-size: 0.75rem;
	margin-top: var(--s2);
}

/* vertical form stack */
.stack {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s3);
	margin-top: var(--s4);
}
.stack > h3 {
	margin: 0;
}
.stack > label {
	margin-bottom: 0;
}

/* inline checkbox row */
.check {
	display: flex;
	gap: var(--s2);
	align-items: center;
	font-size: 0.8125rem;
	color: var(--text);
	text-transform: none;
	letter-spacing: 0;
	margin-bottom: 0;
	cursor: pointer;
}

/* ------------------------------------------------------------
   8. BUTTONS
   ------------------------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	background: var(--accent);
	border: 1px solid var(--accent);
	border-radius: var(--r-md);
	color: var(--accent-ink);
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 0 1.25rem;
	min-height: var(--tap);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--t-fast), border-color var(--t-fast),
		color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.btn:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--accent-ink);
	text-decoration: none;
	box-shadow: 0 0 20px -6px var(--accent-glow);
}
.btn:active {
	background: var(--accent-press);
	transform: translateY(1px);
	box-shadow: none;
}
.btn:disabled,
.btn[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

/* secondary — outlined */
.btn-secondary {
	background: transparent;
	border-color: var(--border-strong);
	color: var(--text);
}
.btn-secondary:hover {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent);
	box-shadow: none;
}
.btn-secondary:active {
	background: var(--surface-3);
}

/* discord — keeps brand colour */
.btn-discord {
	background: var(--discord);
	border-color: var(--discord);
	color: #fff;
}
.btn-discord:hover {
	background: var(--discord-hover);
	border-color: var(--discord-hover);
	color: #fff;
	box-shadow: 0 0 20px -6px rgba(88, 101, 242, 0.5);
}
.btn-discord:active {
	background: #4752c4;
}
/* full-bleed where it's a primary auth option, inline elsewhere */
.auth-card .btn,
.auth-card form .btn,
.stack > .btn {
	display: flex;
	width: 100%;
}
.auth-card > .btn-discord,
.stack > .btn-discord {
	display: flex;
	width: 100%;
}

/* small — quiet inline action (Revoke / Rotate / Unlock / +Add) */
.btn-small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	color: var(--muted);
	font-family: inherit;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1;
	padding: 0.5rem 0.7rem;
	min-height: 2rem;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: border-color var(--t-fast), color var(--t-fast),
		background-color var(--t-fast);
}
.btn-small:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: var(--accent-soft);
	text-decoration: none;
}
.btn-small:active {
	background: var(--surface-3);
}
.btn-small:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* destructive — the only place red lives */
.btn-danger {
	border-color: var(--danger-dim);
	color: var(--danger);
	background: transparent;
}
.btn-danger:hover {
	border-color: var(--danger);
	color: var(--danger);
	background: var(--danger-soft);
	box-shadow: none;
}
.btn-danger:active {
	background: rgba(255, 107, 94, 0.16);
}

/* bare <form> wrappers around a single button add no layout of their own */
.row > form,
td > form {
	margin: 0;
}

/* ------------------------------------------------------------
   9. FEEDBACK
   ------------------------------------------------------------ */
.error,
.success,
.info {
	border: 1px solid var(--border);
	border-left-width: 2px;
	border-radius: var(--r-md);
	font-size: 0.8125rem;
	line-height: 1.5;
	padding: var(--s3) var(--s4);
	margin-bottom: var(--s4);
}

.error {
	border-color: var(--danger-dim);
	border-left-color: var(--danger);
	background: var(--danger-soft);
	color: var(--danger);
}

.success {
	border-color: rgba(110, 231, 168, 0.35);
	border-left-color: var(--success);
	background: var(--success-soft);
	color: var(--success);
}

.info {
	border-left-color: var(--accent);
	background: var(--surface-2);
	color: var(--muted);
}

/* ------------------------------------------------------------
   10. DATA DISPLAY
   ------------------------------------------------------------ */

/* --- key/value grid: stacked on mobile, two columns on desktop --- */
.kv {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: var(--s4) 0;
}
.kv > * {
	min-width: 0;
	overflow-wrap: anywhere;
}
.kv > .muted {
	margin-top: var(--s3);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--faint);
}
.kv > .muted:first-child {
	margin-top: 0;
}

/* --- methods list --- */
.methods {
	margin: var(--s4) 0;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	overflow: hidden;
}
.methods li {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	justify-content: space-between;
	align-items: baseline;
	padding: var(--s3) var(--s4);
	border-bottom: 1px solid var(--border-faint);
	background: var(--surface-2);
}
.methods li:last-child {
	border-bottom: none;
}

/* --- stats --- */
.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: var(--s3);
	margin: var(--s4) 0;
}
.stat {
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	background: var(--surface-2);
	padding: var(--s3) var(--s4);
	transition: border-color var(--t-fast);
}
.stat:hover {
	border-color: var(--border-strong);
}
.stat b {
	display: block;
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}
.stat .muted {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* --- tables --- */
.table-wrap {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	margin: var(--s4) 0;
	border: 1px solid var(--border);
	border-radius: var(--r-md);
}
.table-wrap table {
	margin: 0;
	min-width: 100%;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--s4) 0;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

th,
td {
	text-align: left;
	padding: var(--s3);
	border-bottom: 1px solid var(--border-faint);
	vertical-align: middle;
}

th {
	background: var(--surface);
	color: var(--faint);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	white-space: nowrap;
	border-bottom-color: var(--border);
}

tbody tr {
	transition: background-color var(--t-fast);
}
tbody tr:hover td {
	background: rgba(127, 231, 255, 0.035);
}
tbody tr:last-child td {
	border-bottom: none;
}

td .row {
	gap: var(--s2);
}

/* ------------------------------------------------------------
   11. ACCENTS
   ------------------------------------------------------------ */
code {
	font-family: inherit;
	font-size: 0.9em;
	color: var(--accent);
	background: rgba(127, 231, 255, 0.07);
	border: 1px solid rgba(127, 231, 255, 0.14);
	border-radius: var(--r-sm);
	padding: 0.1em 0.4em;
	overflow-wrap: anywhere;
}

/* phrase box — challenge phrase, fresh API key, rotated client secret */
.phrase-box {
	border: 1px solid var(--accent-line);
	border-radius: var(--r-md);
	background: var(--accent-soft);
	padding: var(--s4);
	margin: var(--s4) 0;
	font-size: 0.8125rem;
}

.phrase {
	display: block;
	font-size: 0.9375rem;
	color: var(--accent);
	background: var(--bg-deep);
	border: 1px dashed var(--accent-line);
	border-radius: var(--r-sm);
	padding: var(--s3) var(--s4);
	text-align: center;
	letter-spacing: 0.04em;
	user-select: all;
	-webkit-user-select: all;
	margin: var(--s3) 0;
	overflow-wrap: anywhere;
}

/* badge / tags */
.badge,
.ok-tag,
.error-tag {
	display: inline-block;
	padding: 0.15em 0.5em;
	border: 1px solid;
	border-radius: 999px;
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
	vertical-align: middle;
}

.badge {
	margin-left: var(--s2);
	border-color: var(--accent-line);
	background: var(--accent-soft);
	color: var(--accent);
}

.ok-tag {
	border-color: rgba(110, 231, 168, 0.35);
	background: var(--success-soft);
	color: var(--success);
}

.error-tag {
	border-color: rgba(255, 107, 94, 0.35);
	background: var(--danger-soft);
	color: var(--danger);
}

/* divider with centered label */
.divider {
	display: flex;
	align-items: center;
	margin: var(--s5) 0;
	color: var(--faint);
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}
.divider::before,
.divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--border);
}
.divider::before {
	margin-right: var(--s3);
}
.divider::after {
	margin-left: var(--s3);
}

/* ------------------------------------------------------------
   12. UTILITIES
   ------------------------------------------------------------ */
.row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3);
	align-items: center;
}
.row.wrap {
	flex-wrap: wrap;
}

/* form rows stack on small screens so inputs get full width */
form.row {
	flex-direction: column;
	align-items: stretch;
	margin: var(--s4) 0;
}
form.row > .btn,
form.row > .btn-small {
	width: 100%;
}

.muted {
	color: var(--muted);
	font-size: 0.8125rem;
}
a.muted {
	color: var(--muted);
}
a.muted:hover {
	color: var(--accent);
}

.faint {
	color: var(--faint);
}

.text-right {
	text-align: right;
}

/* ------------------------------------------------------------
   13. CRT LAYER — barely there
   ------------------------------------------------------------ */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9999;
	opacity: 0.025;
	background: repeating-linear-gradient(
		to bottom,
		rgba(127, 231, 255, 1) 0px,
		rgba(127, 231, 255, 1) 1px,
		transparent 1px,
		transparent 3px
	);
}

/* ------------------------------------------------------------
   14. DESKTOP — >= 768px
   ------------------------------------------------------------ */
@media (min-width: 768px) {
	h1 {
		font-size: 1.375rem;
	}

	/* --- panel becomes sidebar + content --- */
	.panel-layout {
		flex-direction: row;
	}

	.sidebar {
		position: sticky;
		top: 0;
		width: var(--sidebar-w);
		flex: 0 0 var(--sidebar-w);
		height: 100vh;
		height: 100dvh;
		padding: var(--s5) 0;
		background: var(--surface);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-bottom: none;
		border-right: 1px solid var(--border);
		overflow-y: auto;
	}

	.sidebar-nav {
		flex: 1;
		flex-direction: column;
		gap: 2px;
		padding: 0 var(--s3);
		overflow-x: visible;
	}

	.sidebar-nav a {
		display: block;
		min-height: 0;
		padding: 0.5rem var(--s3) 0.5rem 0.9rem;
		font-size: 0.8125rem;
	}

	.sidebar-nav a.active::before {
		left: 0;
		right: auto;
		top: 50%;
		bottom: auto;
		width: 2px;
		height: 1.1em;
		transform: translateY(-50%);
	}

	.sidebar-secondary {
		order: 0;
		flex: 0 0 auto;
		flex-direction: column;
		justify-content: flex-start;
		margin-top: auto;
		padding: var(--s4) var(--s3) 0;
		border-bottom: none;
		border-top: 1px solid var(--border);
	}

	.sidebar-secondary a {
		padding: 0.4rem var(--s3) 0.4rem 0.9rem;
	}

	.panel-content {
		padding: var(--s6) var(--s7) var(--s7);
	}

	/* --- roomier surfaces --- */
	.card {
		padding: var(--s5);
	}

	.auth-card {
		padding: var(--s6);
	}

	/* --- two-column key/value --- */
	.kv {
		grid-template-columns: 9rem 1fr;
		gap: var(--s2) var(--s5);
		align-items: baseline;
	}
	.kv > .muted {
		margin-top: 0;
	}

	/* --- controls return to a compact scale --- */
	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="number"],
	input[type="url"],
	input[type="search"],
	input[type="tel"],
	input:not([type]),
	select,
	textarea {
		font-size: 0.875rem;
		min-height: 2.5rem;
	}

	.btn {
		min-height: 2.5rem;
	}

	/* --- rows go horizontal again --- */
	form.row {
		flex-direction: row;
		align-items: center;
	}
	form.row > .btn,
	form.row > .btn-small {
		width: auto;
	}
	.row > input.field,
	.row > textarea.field {
		flex: 1 1 14rem;
		width: auto;
	}
	.row > select.field {
		flex: 0 1 8rem;
		width: auto;
	}

	.stack .btn,
	.stack .btn-small {
		align-self: flex-start;
	}
}

/* ------------------------------------------------------------
   15. MOBILE TABLE FALLBACK — < 768px
   Wrapping a table in .table-wrap is the better fix; this keeps
   bare <table> elements scrollable until the markup catches up.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
	table {
		display: block;
		width: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}
	.table-wrap table {
		display: table;
		overflow: visible;
		white-space: normal;
	}
	.stats {
		grid-template-columns: repeat(2, 1fr);
	}
	.stat b {
		font-size: 1.375rem;
	}
	.stack > .btn {
		width: 100%;
		align-self: stretch;
	}
}