:root {
	--bg: #f2f2f7;
	--surface: #ffffff;
	--ink: #000000;
	--muted: #8e8e93;
	--separator: rgba(60, 60, 67, 0.12);
	--accent: #007aff;
	--accent-press: #0066d6;
	--ok: #34c759;
	--danger: #ff3b30;
	--fill: rgba(120, 120, 128, 0.12);
	--radius: 0.875rem;
	--tap: 2.75rem;
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
	font-size: 100%;
}

html, body {
	margin: 0;
	min-height: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.375;
	font-weight: 400;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}

body {
	padding-bottom: calc(1.5rem + var(--safe-bottom));
}

h1, h2, h3, p, ul, ol, figure {
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
}

button, input, select, textarea {
	font: inherit;
	font-size: 1rem;
}

.app-bg { display: none; }

.glass {
	background: var(--surface);
	border: 0;
	box-shadow: none;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0;
	padding: 0.25rem 0.75rem;
	padding-top: calc(0.25rem + var(--safe-top));
	background: rgba(242, 242, 247, 0.86);
	backdrop-filter: blur(1.25rem) saturate(180%);
	-webkit-backdrop-filter: blur(1.25rem) saturate(180%);
	border-bottom: 0.5px solid var(--separator);
	border-radius: 0;
}

.topbar-title {
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: -0.02em;
}

.icon-btn {
	width: var(--tap);
	height: var(--tap);
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
}

.icon-btn.danger { color: var(--danger); }

.page {
	width: min(40rem, calc(100% - 2rem));
	margin: 1rem auto 0;
}

.page-head {
	padding: 0.25rem 0 0.5rem;
}

.page-head h1,
.auth-card h1,
.nav-head h2,
.card h2,
.empty-card h2 {
	margin: 0;
	font-size: 1rem;
	letter-spacing: -0.02em;
	line-height: 1.25;
	font-weight: 600;
}

.eyebrow {
	margin: 0 0 0.125rem;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
	font-weight: 400;
	color: var(--muted);
}

.muted {
	color: var(--muted);
	margin: 0.35rem 0 0;
	font-size: 1rem;
}

.stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.card, .empty-card, .auth-card {
	padding: 1rem;
	border-radius: var(--radius);
}

.kpi-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.kpi {
	padding: 1rem;
	border-radius: var(--radius);
}

.kpi-main { grid-column: 1 / -1; }

.kpi-label {
	margin: 0;
	color: var(--muted);
	font-size: 1rem;
	font-weight: 400;
}

.kpi-value {
	margin: 0.25rem 0 0;
	font-size: 1rem;
	letter-spacing: -0.02em;
	font-weight: 600;
}

.kpi-main .kpi-value {
	font-size: 1rem;
	font-weight: 600;
}

.positive { color: var(--ok); }

.btn {
	min-height: var(--tap);
	border: 0;
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--ink);
}

.btn-primary {
	background: var(--accent);
	color: #fff;
}

.btn-primary:active { background: var(--accent-press); }

.btn-ghost {
	background: var(--fill);
	color: var(--accent);
}

.btn-danger {
	background: rgba(255, 59, 48, 0.12);
	color: var(--danger);
}

.btn-block { width: 100%; }

.passkey-sep {
	text-align: center;
	margin: 0.25rem 0 0.5rem;
}

.chip-row, .pager {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
}

.pager {
	justify-content: space-between;
	padding: 0.75rem 1rem;
	border-radius: var(--radius);
}

.pager a {
	color: var(--accent);
	text-decoration: none;
	font-weight: 400;
	font-size: 1rem;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	font-size: 1rem;
	font-weight: 400;
	color: var(--muted);
}

.field input,
.field select,
.field textarea {
	min-height: var(--tap);
	border: 0;
	background: var(--fill);
	border-radius: 0.75rem;
	padding: 0.625rem 0.875rem;
	font-size: 1rem;
	color: var(--ink);
	font-weight: 400;
}

.field textarea {
	min-height: 6rem;
	resize: vertical;
}

.segmented {
	display: flex;
	padding: 0.125rem;
	border-radius: 0.5625rem;
	background: var(--fill);
	gap: 0.125rem;
}

.segmented.wrap { flex-wrap: wrap; }

.segmented label {
	flex: 1;
	min-height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.4375rem;
	font-size: 1rem;
	font-weight: 500;
	color: var(--ink);
	cursor: pointer;
	padding: 0.375rem 0.5rem;
	text-align: center;
}

.segmented label.is-on {
	background: var(--surface);
	box-shadow: 0 0.1875rem 0.5rem rgba(0, 0, 0, 0.08);
}

.segmented input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 40;
	padding: calc(0.75rem + var(--safe-top)) 0.75rem calc(0.75rem + var(--safe-bottom));
	background: rgba(0, 0, 0, 0.2);
}

.nav-panel {
	height: 100%;
	border-radius: 1.25rem;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	background: var(--bg);
}

.nav-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.nav-list {
	list-style: none;
	padding: 1rem 0 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border-radius: var(--radius);
	overflow: hidden;
}

.nav-list li + li {
	border-top: 0.5px solid var(--separator);
}

.nav-list a {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0 1rem;
	border-radius: 0;
	color: var(--ink);
	text-decoration: none;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
}

.nav-list a.is-active {
	background: transparent;
	color: var(--accent);
	font-weight: 600;
}

.nav-logout {
	margin-top: auto;
	color: var(--danger);
	text-decoration: none;
	font-weight: 400;
	font-size: 1rem;
	padding: 1rem 0.25rem;
}

.toast {
	padding: 0.75rem 1rem;
	border-radius: var(--radius);
	font-weight: 400;
	font-size: 1rem;
}

.toast-ok {
	color: #248a3d;
	background: rgba(52, 199, 89, 0.16);
}

.toast-err {
	color: var(--danger);
	background: rgba(255, 59, 48, 0.12);
}

.entity-list, .move-list, .split-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.entity-list {
	background: var(--surface);
	border-radius: var(--radius);
	overflow: hidden;
}

.entity-row, .move-list.standalone > li {
	display: flex;
	align-items: center;
	padding: 0 0.25rem 0 1rem;
	border-radius: 0;
	background: var(--surface);
}

.entity-list .entity-row + .entity-row {
	border-top: 0.5px solid var(--separator);
}

.move-list.standalone {
	gap: 0;
	background: var(--surface);
	border-radius: var(--radius);
	overflow: hidden;
}

.move-list.standalone > li + li {
	border-top: 0.5px solid var(--separator);
}

.entity-main, .move-link {
	flex: 1;
	color: inherit;
	text-decoration: none;
	min-height: var(--tap);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 1rem;
}

.split-list li, .move-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-bottom: 0.5px solid var(--separator);
	font-size: 1rem;
}

.split-list li:last-child,
.move-list:not(.standalone) li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.split-list li:first-child,
.move-list:not(.standalone) li:first-child {
	padding-top: 0;
}

.move-amount {
	font-weight: 500;
	white-space: nowrap;
	font-size: 1rem;
}

.move-amount.is-in { color: var(--ok); }
.move-amount.is-out { color: var(--danger); }

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

.pill {
	background: var(--fill);
	color: var(--muted);
	border-radius: 999px;
	padding: 0.125rem 0.5rem;
	font-size: 1rem;
	font-weight: 400;
}

.text-link {
	color: var(--accent);
	text-decoration: none;
	font-weight: 400;
	font-size: 1rem;
}

.inline-form { margin: 0; }

.auth-body {
	min-height: 100dvh;
	background: var(--bg);
}

.auth-wrap {
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.auth-card { width: min(24rem, 100%); }

.grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

.filter-group {
	border-radius: var(--radius);
	background: var(--fill);
	padding: 0.125rem 0.75rem;
}

.filter-group summary {
	min-height: var(--tap);
	display: flex;
	align-items: center;
	cursor: pointer;
	font-weight: 400;
	font-size: 1rem;
}

.check-grid {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0 0 0.75rem;
}

.check {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-height: 2.5rem;
	font-weight: 400;
	font-size: 1rem;
	color: var(--ink);
}

.chart-wrap { position: relative; }
.chart-wrap:has(.chart-empty) canvas { display: none; }

@media (min-width: 45rem) {
	.grid-2 { grid-template-columns: 1fr 1fr; }
}

body.nav-open { overflow: hidden; }