:root {
	color-scheme: dark;
	--bg:            #0b0f14;
	--bg-raised:     #121821;
	--border:        #232c38;
	--text:          #e6edf3;
	--text-dim:      #8b98a5;
	--accent:        #4dabf7;
	--accent-dim:    #2b6cb0;
	--danger:        #f87171;
	--success:       #4ade80;
	--warning:       #fbbf24;
	--font-sans:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono:     ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--space-1:       0.25rem;
	--space-2:       0.5rem;
	--space-3:       0.75rem;
	--space-4:       1rem;
	--radius:        6px;
}

@media (prefers-color-scheme: light) {
	:root {
		color-scheme: light;
		--bg:         #f7f8fa;
		--bg-raised:  #ffffff;
		--border:     #dde3ea;
		--text:       #1a2028;
		--text-dim:   #5a6675;
		--accent-dim: #a8d1fb;
	}
}

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.5;
}

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

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

a:hover {
	text-decoration: underline;
}

button, input, select {
	font: inherit;
	color: inherit;
}

button {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--space-2) var(--space-3);
	cursor: pointer;
}

button:hover {
	border-color: var(--accent);
}

.app-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.top-nav {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--border);
	background: var(--bg-raised);
}

.top-nav .brand {
	font-weight: 600;
	letter-spacing: 0.02em;
}

.top-nav nav {
	display: flex;
	gap: var(--space-3);
}

.top-nav .spacer {
	flex: 1;
}

.connection-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	background: var(--danger);
}

.connection-dot.connected {
	background: var(--success);
}

main.content {
	flex: 1;
	padding: var(--space-4);
}

.banner {
	border-radius: var(--radius);
	padding: var(--space-3);
	margin-bottom: var(--space-3);
	border: 1px solid var(--border);
}

.banner.error {
	border-color: var(--danger);
	color: var(--danger);
}

.banner.loading {
	color: var(--text-dim);
}

.banner-warning {
	border-color: var(--warning);
	color: var(--warning);
	background: color-mix(in srgb, var(--warning) 12%, transparent);
}

/* Badges */

.badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	border: 1px solid transparent;
}

.badge-success {
	background: color-mix(in srgb, var(--success) 18%, transparent);
	color: var(--success);
	border-color: color-mix(in srgb, var(--success) 40%, transparent);
}

.badge-danger {
	background: color-mix(in srgb, var(--danger) 18%, transparent);
	color: var(--danger);
	border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.badge-warning {
	background: color-mix(in srgb, var(--warning) 18%, transparent);
	color: var(--warning);
	border-color: color-mix(in srgb, var(--warning) 40%, transparent);
}

.badge-info {
	background: color-mix(in srgb, var(--accent) 18%, transparent);
	color: var(--accent);
	border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.badge-neutral {
	background: color-mix(in srgb, var(--text-dim) 18%, transparent);
	color: var(--text-dim);
	border-color: var(--border);
}

/* Data tables */

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.data-table th {
	text-align: left;
	color: var(--text-dim);
	font-weight: 500;
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--border);
}

.data-table td {
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}

.data-table tr.error td {
	background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.data-table tr.clickable {
	cursor: pointer;
}

.data-table tr.clickable:hover td {
	background: var(--bg-raised);
}

/* Forms */

.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-bottom: var(--space-3);
}

.form-field label {
	font-size: 12px;
	color: var(--text-dim);
}

.form-field input,
.form-field select,
.form-field textarea {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--space-2);
}

.form-field-error {
	color: var(--danger);
	font-size: 12px;
}

/* Pagination */

.pagination {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

.pagination-range {
	color: var(--text-dim);
	font-size: 12px;
}

/* Confirm button */

button.danger {
	border-color: var(--danger);
	color: var(--danger);
}

.confirm-group {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

/* Empty state */

.empty-state {
	color: var(--text-dim);
	text-align: center;
	padding: var(--space-4);
	border: 1px dashed var(--border);
	border-radius: var(--radius);
}

/* Key display */

.key-display {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

/* Live inspector (endpoint detail) */

.live-inspector {
	margin-bottom: var(--space-4);
}

.live-controls {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.live-feed {
	max-height: 400px;
	overflow-y: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.live-feed-row {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--border);
	font-family: var(--font-mono);
	font-size: 12px;
}

.live-feed-row.error {
	background: color-mix(in srgb, var(--danger) 8%, transparent);
}

/* Capture history (endpoint detail) */

.debug-capture-controls {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.capture-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.capture-detail {
	margin-top: var(--space-3);
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-raised);
}

/* Stats sparklines */

.stats-chart {
	color: var(--accent);
}

.stats-chart .axis-label {
	fill: var(--text-dim);
	font-size: 9px;
	font-family: var(--font-sans);
}

.stats-chart .bar {
	fill: var(--accent);
}

.stats-chart .bar.error {
	fill: var(--danger);
}

/* Usage bars (account page) */

.usage-bar {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	height: 8px;
	overflow: hidden;
	margin: var(--space-1) 0 var(--space-3);
}

.usage-bar-fill {
	background: var(--accent);
	height: 100%;
}

.usage-bar-fill.over {
	background: var(--danger);
}