:root {
	--surface-1: #fcfcfb;
	--page: #f9f9f7;
	--text-primary: #0b0b0b;
	--text-secondary: #52514e;
	--text-muted: #898781;
	--gridline: #e1e0d9;
	--baseline: #c3c2b7;
	--border: rgba(11, 11, 11, 0.1);
	--series-1: #2a78d6; /* blue — current value */
	--series-1-light: #9ec5f4; /* before/lighter shade */
	--good: #0ca30c;
	--critical: #d03b3b;
	--warning: #eda100;
}

@media (prefers-color-scheme: dark) {
	:root {
		--surface-1: #1a1a19;
		--page: #0d0d0d;
		--text-primary: #ffffff;
		--text-secondary: #c3c2b7;
		--text-muted: #898781;
		--gridline: #2c2c2a;
		--baseline: #383835;
		--border: rgba(255, 255, 255, 0.1);
		--series-1: #3987e5;
		--series-1-light: #184f95;
		--good: #0ca30c;
		--critical: #e66767;
		--warning: #c98500;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family:
		system-ui,
		-apple-system,
		'Segoe UI',
		sans-serif;
	background: var(--page);
	color: var(--text-primary);
}

.hidden {
	display: none !important;
}

button {
	font-family: inherit;
	cursor: pointer;
}

input,
select {
	font-family: inherit;
	font-size: 0.95rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--surface-1);
	color: var(--text-primary);
}

.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
	border-radius: 6px;
	padding: 0.45rem 0.9rem;
	font-size: 0.9rem;
	border: 1px solid transparent;
}

.btn-primary {
	background: var(--series-1);
	color: white;
	border: none;
}

.btn-secondary {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-primary);
}

.btn-ghost {
	background: transparent;
	border: none;
	color: var(--text-secondary);
}

.btn-danger {
	background: transparent;
	border: 1px solid var(--critical);
	color: var(--critical);
}

.icon-btn {
	background: transparent;
	border: none;
	color: var(--text-muted);
	font-size: 0.85rem;
	padding: 0.2rem 0.4rem;
}

/* Login */
.overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--page);
	z-index: 10;
}

.login-card {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	width: 280px;
	padding: 2rem;
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: 10px;
}

.login-card h1 {
	font-size: 1.2rem;
	margin: 0 0 0.5rem;
}

.error-text {
	color: var(--critical);
	font-size: 0.85rem;
	margin: 0;
}

/* App shell */
.app-header {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 0.9rem 1.5rem;
	background: var(--surface-1);
	border-bottom: 1px solid var(--border);
}

.app-header h1 {
	font-size: 1.05rem;
	margin: 0;
	white-space: nowrap;
}

.tabs {
	display: flex;
	gap: 0.3rem;
	flex: 1;
}

.tab-btn {
	background: transparent;
	border: none;
	padding: 0.5rem 0.9rem;
	border-radius: 6px;
	color: var(--text-secondary);
	font-size: 0.9rem;
}

.tab-btn.active {
	background: var(--page);
	color: var(--text-primary);
	font-weight: 600;
}

main {
	max-width: 980px;
	margin: 0 auto;
	padding: 1.5rem;
}

/* Tables can grow wider than the viewport (e.g. one column per axis) —
   let them scroll within their own card instead of widening the page. */
.card {
	overflow-x: auto;
}

@media (max-width: 640px) {
	.app-header {
		flex-wrap: wrap;
		row-gap: 0.5rem;
		padding: 0.75rem 1rem;
	}

	.app-header h1 {
		font-size: 0.95rem;
	}

	.tabs {
		order: 3;
		flex: 1 1 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.tabs::-webkit-scrollbar {
		display: none;
	}

	.tab-btn {
		flex: 0 0 auto;
		white-space: nowrap;
		min-height: 44px;
	}

	main {
		padding: 1rem 0.75rem;
	}

	.panel-toolbar {
		flex-wrap: wrap;
		gap: 0.6rem;
	}

	.stat-row {
		flex-wrap: wrap;
		gap: 1rem;
	}

	.card {
		padding: 0.9rem 1rem;
	}

	.icon-btn {
		min-height: 44px;
		min-width: 44px;
	}
}

.tab-panel {
	display: none;
}

.tab-panel.active {
	display: block;
}

.panel-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

h2 {
	font-size: 1.15rem;
}

.card {
	background: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 1.1rem 1.3rem;
	margin-bottom: 1.2rem;
}

.stat-row {
	display: flex;
	gap: 2rem;
	margin-bottom: 1rem;
}

.stat-tile .stat-label {
	font-size: 0.8rem;
	color: var(--text-muted);
}

.stat-tile .stat-value {
	font-size: 1.6rem;
	font-weight: 600;
}

/* Axis meter rows */
.axis-row {
	margin-bottom: 0.9rem;
}

.axis-row-head {
	display: flex;
	justify-content: space-between;
	font-size: 0.85rem;
	margin-bottom: 0.25rem;
}

.axis-row-head .axis-name {
	font-weight: 600;
	color: var(--text-primary);
}

.axis-row-head .axis-numbers {
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
}

.meter-track {
	position: relative;
	height: 10px;
	background: var(--gridline);
	border-radius: 5px;
	overflow: visible;
}

.meter-fill {
	position: absolute;
	inset: 0 auto 0 0;
	height: 100%;
	border-radius: 5px;
	background: var(--series-1);
}

.meter-fill.before {
	background: var(--series-1-light);
}

.meter-target-tick {
	position: absolute;
	top: -3px;
	width: 2px;
	height: 16px;
	background: var(--text-primary);
	border-radius: 1px;
}

.axis-deficit {
	font-size: 0.78rem;
	margin-top: 0.15rem;
}

.axis-deficit.over {
	color: var(--good);
}

.axis-deficit.under {
	color: var(--text-muted);
}

.legend {
	display: flex;
	gap: 1.2rem;
	font-size: 0.78rem;
	color: var(--text-secondary);
	margin-bottom: 0.8rem;
}

.legend-swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	margin-right: 0.35rem;
	vertical-align: middle;
}

/* Tables */
table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
}

th,
td {
	text-align: left;
	padding: 0.5rem 0.6rem;
	border-bottom: 1px solid var(--gridline);
}

th {
	color: var(--text-muted);
	font-weight: 600;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

td.num,
th.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

tfoot td {
	border-bottom: none;
	border-top: 1px solid var(--baseline);
	font-weight: 600;
}

.account-block {
	margin-bottom: 1rem;
}

.account-block-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.account-block-head h3 {
	font-size: 1rem;
	margin: 0;
}

.account-type-badge {
	font-size: 0.72rem;
	text-transform: uppercase;
	color: var(--text-muted);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.05rem 0.4rem;
	margin-left: 0.4rem;
}

.inline-form {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}

.inline-form input[type='text'],
.inline-form input[type='number'] {
	width: 110px;
}

.field-group {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin-bottom: 0.8rem;
}

.field-group label {
	font-size: 0.8rem;
	color: var(--text-secondary);
}

.weight-matrix input {
	width: 70px;
}

.warning-banner {
	background: color-mix(in srgb, var(--warning) 15%, var(--surface-1));
	border: 1px solid var(--warning);
	color: var(--text-primary);
	border-radius: 6px;
	padding: 0.6rem 0.9rem;
	font-size: 0.85rem;
	margin-bottom: 1rem;
}

.empty-state {
	color: var(--text-muted);
	font-size: 0.88rem;
	padding: 1rem 0;
}

/* Modal */
.modal-overlay {
	background: rgba(0, 0, 0, 0.4);
	z-index: 20;
}

.modal-card {
	position: relative;
	background: var(--surface-1);
	border-radius: 10px;
	padding: 1.5rem;
	width: 340px;
	max-width: 90vw;
	border: 1px solid var(--border);
}

.modal-close {
	position: absolute;
	top: 0.6rem;
	right: 0.7rem;
	background: transparent;
	border: none;
	font-size: 1.3rem;
	color: var(--text-muted);
}