/* Fixel dashboard skeleton — minimal, dark, pixel-art friendly. */

:root {
	--bg: #0e0f12;
	--bg-2: #15171c;
	--bg-3: #1d2027;
	--border: #2a2e38;
	--text: #e7e9ee;
	--muted: #8a91a0;
	--accent: #7df9b7;
	--accent-2: #f97df9;
	--danger: #ff6b7a;
	--warn: #ffd166;
	--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

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

code, pre, .mono { font-family: var(--mono); }

.shell {
	max-width: 980px;
	margin: 0 auto;
	padding: 24px 20px 80px;
}

header.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--border);
	background: var(--bg-2);
}

header.topbar .brand {
	font-family: var(--mono);
	font-weight: 600;
	letter-spacing: 0.04em;
	font-size: 15px;
}

header.topbar .brand .pixel {
	display: inline-block;
	width: 12px;
	height: 12px;
	background: var(--accent);
	margin-right: 8px;
	vertical-align: middle;
	box-shadow: 6px 0 0 var(--accent-2), 0 6px 0 var(--accent-2), 6px 6px 0 var(--accent);
}

header.topbar .meta {
	display: flex;
	gap: 14px;
	align-items: center;
	color: var(--muted);
	font-size: 13px;
}

button, .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 6px;
	border: 1px solid var(--border);
	background: var(--bg-3);
	color: var(--text);
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: border-color 80ms, background 80ms;
}

button:hover, .btn:hover { border-color: var(--accent); }
button:disabled { opacity: 0.6; cursor: not-allowed; }

button.primary, .btn.primary {
	background: var(--accent);
	color: #08130d;
	border-color: var(--accent);
	font-weight: 600;
}
button.primary:hover, .btn.primary:hover { filter: brightness(1.06); }

button.danger, .btn.danger {
	color: var(--danger);
	border-color: var(--danger);
	background: transparent;
}

input[type=email], input[type=text], select {
	width: 100%;
	padding: 10px 12px;
	background: var(--bg-2);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 6px;
	font-family: inherit;
	font-size: 15px;
	outline: none;
}
input:focus, select:focus { border-color: var(--accent); }

.card {
	background: var(--bg-2);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
}

.card h2 {
	margin: 0 0 4px;
	font-size: 16px;
	letter-spacing: 0.02em;
}

.card .sub {
	color: var(--muted);
	font-size: 13px;
	margin-bottom: 16px;
}

.row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}

.kv {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 16px;
	font-family: var(--mono);
	font-size: 13px;
}

.kv .k { color: var(--muted); }
.kv .v { word-break: break-all; }

table { width: 100%; border-collapse: collapse; }
th, td {
	padding: 8px 6px;
	text-align: left;
	border-bottom: 1px solid var(--border);
	font-size: 13px;
	vertical-align: middle;
}
th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }

.tag {
	display: inline-block;
	font-family: var(--mono);
	font-size: 11px;
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--bg-3);
	border: 1px solid var(--border);
	color: var(--muted);
}
.tag.ok    { color: var(--accent); border-color: rgba(125, 249, 183, 0.4); }
.tag.warn  { color: var(--warn);   border-color: rgba(255, 209, 102, 0.4); }
.tag.bad   { color: var(--danger); border-color: rgba(255, 107, 122, 0.4); }

.signin-shell {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 20px;
}
.signin-shell .card {
	width: min(420px, 100%);
}

.muted { color: var(--muted); }
.error { color: var(--danger); }
.ok    { color: var(--accent); }

.empty {
	color: var(--muted);
	font-size: 14px;
	padding: 12px 0;
	font-style: italic;
}

.token-banner {
	border: 1px dashed var(--accent);
	background: rgba(125, 249, 183, 0.06);
	border-radius: 8px;
	padding: 14px;
	margin: 12px 0 0;
	font-family: var(--mono);
	font-size: 13px;
	word-break: break-all;
}
.token-banner .label {
	color: var(--accent);
	font-weight: 600;
	margin-bottom: 6px;
	letter-spacing: 0.04em;
	font-size: 11px;
	text-transform: uppercase;
}
.token-banner .copy {
	float: right;
	background: transparent;
	border: 1px solid var(--accent);
	color: var(--accent);
	padding: 2px 8px;
	font-size: 11px;
	cursor: pointer;
	border-radius: 4px;
}