/* ============================================================
   crdledger — "Register" design system
   Clarity, Deference, Depth, Consistency. The numbers are the
   content; everything here exists only to organize them.
   No decorative blur, no gradients, no unsafe-inline — every
   rule here is addressed by class, never by inline style.
   ============================================================ */

:root {
	/* ---- type scale (system font stack — no network fetch, no FOUT,
	   and it's the correct HIG choice: San Francisco on Apple devices,
	   Roboto/Segoe on everything else, all native and instant) ---- */
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

	--text-large-title: 700 34px/40px var(--font-body);
	--text-title-1: 700 28px/34px var(--font-body);
	--text-title-2: 600 20px/26px var(--font-body);
	--text-headline: 600 17px/22px var(--font-body);
	--text-body: 400 17px/24px var(--font-body);
	--text-callout: 500 15px/20px var(--font-body);
	--text-subheadline: 400 14px/18px var(--font-body);
	--text-footnote: 400 13px/16px var(--font-body);
	--text-caption: 600 11px/13px var(--font-body);
	--amount-large: 600 28px/32px var(--font-mono);
	--amount-body: 600 17px/20px var(--font-mono);
	--amount-headline: 700 40px/44px var(--font-mono);

	/* ---- 8pt grid, 4pt sub-unit ---- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;

	/* ---- radius: tightened, one philosophy (controls, not blobs) ---- */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-full: 999px;

	/* ---- motion: every value here is tied to a named moment in the
	   motion table — nothing decorative, nothing over 300ms ---- */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--motion-press: 100ms;
	--motion-swap: 150ms;
	--motion-confirm: 250ms;
	--motion-shake: 300ms;

	/* ---- elevation: shadows only appear at "floating" level ---- */
	--shadow-floating: 0 4px 16px rgba(0, 0, 0, 0.24);

	/* ---- safe-area (PWA / notch devices) ---- */
	--sat: env(safe-area-inset-top, 0px);
	--sab: env(safe-area-inset-bottom, 0px);
	--sal: env(safe-area-inset-left, 0px);
	--sar: env(safe-area-inset-right, 0px);

	/* ============================================================
	   Color roles — DARK is the default (matches primary usage
	   context: phones, often at night, OLED). Light overrides below
	   via prefers-color-scheme. Both are first-class; neither is
	   "real" with the other bolted on.
	   ============================================================ */
	color-scheme: dark;
	--background: #0B1220;
	--surface: #151F36;
	--surface-elevated: #1A2540;
	--border: #263149;
	--text-primary: #F8FAFC;
	--text-secondary: #94A3B8;
	--text-tertiary: #64748B;
	--positive: #10B981;
	--attention: #F59E0B;
	--danger: #EF4444;
	--positive-tint: rgba(16, 185, 129, 0.14);
	--attention-tint: rgba(245, 158, 11, 0.14);
	--danger-tint: rgba(239, 68, 68, 0.12);
	--shadow-floating: 0 4px 16px rgba(0, 0, 0, 0.24);
}

@media (prefers-color-scheme: light) {
	:root {
		color-scheme: light;
		--background: #F8FAFC;
		--surface: #FFFFFF;
		--surface-elevated: #F1F5F9;
		--border: #E2E8F0;
		--text-primary: #0B1220;
		--text-secondary: #475569;
		--text-tertiary: #94A3B8;
		--positive: #059669;
		--attention: #B45309;
		--danger: #DC2626;
		--positive-tint: rgba(5, 150, 105, 0.10);
		--attention-tint: rgba(180, 83, 9, 0.10);
		--danger-tint: rgba(220, 38, 38, 0.08);
		--shadow-floating: 0 4px 16px rgba(15, 23, 42, 0.08);
	}
}

/* ============================= reset ============================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font: var(--text-body);
	color: var(--text-primary);
	background: var(--background);
	min-height: 100vh;
	min-height: 100dvh;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
h1 { font: var(--text-title-1); }
a { color: inherit; text-decoration: none; }
button, input, select { font-family: inherit; }
::selection { background: var(--attention-tint); }

:focus-visible {
	outline: 2px solid var(--attention);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

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

/* ============================= type utilities ============================= */

.text-large-title { font: var(--text-large-title); }
.text-title-1 { font: var(--text-title-1); }
.text-title-2 { font: var(--text-title-2); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.text-headline { font: var(--text-headline); }
.text-callout { font: var(--text-callout); }
.text-subheadline { font: var(--text-subheadline); color: var(--text-secondary); }
.text-footnote { font: var(--text-footnote); color: var(--text-secondary); }
.text-caption { font: var(--text-caption); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
.amount-large { font: var(--amount-large); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.amount-body { font: var(--amount-body); font-variant-numeric: tabular-nums; }

/* ============================= elevation ============================= */

.surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.surface-elevated { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-floating); }

/* ============================= icons ============================= */
/* The single most important rule in this file: every icon partial in
   logo.html ships explicit width/height="24" attributes so an SVG can
   never fall back to the browser's 300x150 default. These classes are a
   second line of defense for per-context sizing, not the only defense. */

svg { display: block; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }

/* ============================= app shell ============================= */

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

.app-main {
	flex: 1;
	min-width: 0;
	padding: var(--space-5) var(--space-4) calc(96px + var(--sab));
	max-width: 640px;
	margin: 0 auto;
	width: 100%;
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: calc(var(--space-3) + var(--sat)) var(--space-4) var(--space-3);
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--surface-elevated);
	box-shadow: var(--shadow-floating);
}

.topbar-brand { display: flex; align-items: center; gap: var(--space-2); font: var(--text-headline); }

.avatar {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	overflow: hidden;
	border: 1px solid var(--border);
	flex-shrink: 0;
	background: var(--surface);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-secondary);
}

.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 96px; height: 96px; }
.avatar.lg svg { width: 40px; height: 40px; }

.avatar-uploading { position: relative; }
.profile-avatar-block { margin-bottom: var(--space-4); }
.avatar-uploading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(11, 18, 32, 0.5);
	border-radius: var(--radius-full);
}

/* ============================= sidebar (desktop) ============================= */

.sidebar {
	width: 240px;
	flex-shrink: 0;
	display: none;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-5) var(--space-3);
	position: sticky;
	top: 0;
	height: 100vh;
	background: var(--surface);
	border-right: 1px solid var(--border);
}

.sidebar-brand { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-5); font: var(--text-headline); }
.sidebar-brand small { display: block; font: var(--text-footnote); color: var(--text-tertiary); }

.nav-link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3);
	min-height: 44px;
	border-radius: var(--radius-sm);
	color: var(--text-secondary);
	font: var(--text-callout);
	transition: background var(--motion-swap) var(--ease-out), color var(--motion-swap) var(--ease-out);
}

.nav-link:hover { background: var(--surface-elevated); color: var(--text-primary); }

.nav-link.active {
	background: var(--attention-tint);
	color: var(--attention);
	font-weight: 600;
}

.sidebar-spacer { flex: 1; }

.nav-logout {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	width: 100%;
	min-height: 44px;
	padding: var(--space-3);
	margin: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-secondary);
	font: var(--text-callout);
	cursor: pointer;
	text-align: left;
}

.nav-logout:hover { background: var(--danger-tint); color: var(--danger); border-color: var(--danger); }

.form-reset { margin: 0; }
.tab-logout-form { flex: 1; margin: 0; display: flex; }
.tab-link-full { width: 100%; background: transparent; border: none; }

/* ============================= bottom tab bar (mobile) ============================= */

.tabbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 30;
	display: flex;
	justify-content: space-around;
	padding: var(--space-2) calc(var(--space-1) + var(--sar)) calc(var(--space-2) + var(--sab)) calc(var(--space-1) + var(--sal));
	background: var(--surface-elevated);
	border-top: 1px solid var(--border);
	box-shadow: var(--shadow-floating);
}

.tab-link {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	min-height: 44px;
	padding: var(--space-1);
	color: var(--text-tertiary);
	font: var(--text-caption);
	text-transform: none;
	letter-spacing: normal;
	border-radius: var(--radius-sm);
	background: transparent;
	border: none;
	transition: color var(--motion-swap) var(--ease-out), transform var(--motion-press) var(--ease-out);
}

.tab-link:active { transform: scale(0.97); }
.tab-link.active { color: var(--attention); }
.tab-fab { flex: 1; display: flex; margin: 0; position: relative; }
.tab-fab-circle {
	width: 44px;
	height: 44px;
	margin: -18px auto 0;
	border-radius: var(--radius-full);
	background: var(--attention);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--background);
	box-shadow: var(--shadow-floating);
}
.tab-fab-summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.tab-fab-summary::-webkit-details-marker { display: none; }
.tab-fab-summary::marker { content: ""; }
.tab-fab-menu {
	position: absolute;
	bottom: calc(100% + var(--space-2));
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-2);
	box-shadow: var(--shadow-floating);
	white-space: nowrap;
	z-index: 40;
}
.tab-fab-option {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	color: var(--text-primary);
	border-radius: var(--radius-sm);
	font: var(--text-footnote);
	font-weight: 600;
}
.tab-fab-option:hover, .tab-fab-option:active { background: var(--surface-elevated); }
.tab-fab-option svg { width: 18px; height: 18px; }

/* ============================= page headers ============================= */

.page-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.page-title { margin-bottom: var(--space-5); }

/* ============================= balance cards ============================= */

.balance-summary { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-5); }
.balance-summary.two-col { grid-template-columns: 1fr; }

.balance-card {
	display: block;
	padding: var(--space-4);
	transition: border-color var(--motion-swap) var(--ease-out);
}

.balance-card:hover { border-color: var(--text-tertiary); }

.balance-card .label { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--text-secondary); font: var(--text-footnote); }
.balance-card .label svg { width: 20px; height: 20px; }

.balance-card.receivable .amount-large { color: var(--positive); }
.balance-card.owed .amount-large { color: var(--attention); }

.balance-card .sub-value { font: var(--text-body); color: var(--text-secondary); }
.empty-hint { font: var(--text-footnote); color: var(--text-secondary); margin-bottom: var(--space-5); }

/* ============================= net position headline ============================= */
/* The one number the eye should land on first — everything else on the
   dashboard is proven secondary by being visibly smaller and lower. */

.net-position { margin-bottom: var(--space-5); }
.net-position .text-caption { margin-bottom: var(--space-2); }

.net-position-row { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.net-position-amount { font: var(--amount-headline); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.net-position-amount.is-positive { color: var(--positive); }
.net-position-amount.is-attention { color: var(--attention); }
.net-position-caption { font: var(--text-footnote); color: var(--text-secondary); margin-top: var(--space-1); }

.sparkline { width: 72px; height: 26px; flex-shrink: 0; margin-bottom: var(--space-1); }
.sparkline polyline { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sparkline.is-positive polyline { stroke: var(--positive); }
.sparkline.is-attention polyline { stroke: var(--attention); }
.sparkline.is-flat polyline { stroke: var(--text-tertiary); }

/* ============================= net-by-counterparty bar charts ============================= */
/* "Who owes me most / who do I owe most" — a horizontal bar per named
   person, real name and amount as text (never color alone), matching
   the category research that bar charts beat legends for named
   comparisons. Hand-rolled inline SVG, no charting library. */

.net-bar-section { margin-bottom: var(--space-5); }
.net-bar-section .text-title-2 { margin-bottom: var(--space-3); }

.net-bar-list { display: flex; flex-direction: column; gap: var(--space-3); }
.net-bar-row-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-1); font: var(--text-subheadline); }
.net-bar-row-label .name { color: var(--text-primary); font-weight: 500; }

.net-bar { display: block; width: 100%; height: 8px; }
.net-bar rect.track { fill: var(--surface-elevated); }
.net-bar rect.value.is-positive { fill: var(--positive); }
.net-bar rect.value.is-attention { fill: var(--attention); }

/* ============================= skeleton / loading ============================= */

.skeleton { background: var(--surface-elevated); border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.skeleton::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.12), transparent);
	animation: shimmer 1.2s infinite;
}
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ============================= forms ============================= */

.card { padding: var(--space-4); }
form.stack { display: flex; flex-direction: column; gap: var(--space-4); }
label { display: flex; flex-direction: column; gap: var(--space-2); font: var(--text-footnote); color: var(--text-secondary); }

input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="file"] {
	font: var(--text-body);
	padding: var(--space-3);
	min-height: 44px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	width: 100%;
	background: var(--surface);
	color: var(--text-primary);
	transition: border-color var(--motion-swap) var(--ease-out);
}

input::placeholder { color: var(--text-tertiary); }
input:focus { border-color: var(--attention); outline: none; }
input.field-error { border-color: var(--danger); }
input[type="file"] { padding: var(--space-2); font: var(--text-footnote); }

.field-hint { font: var(--text-footnote); }
.field-hint.is-error { color: var(--danger); }

button, .btn {
	font: var(--text-callout);
	padding: var(--space-3) var(--space-4);
	min-height: 44px;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	text-decoration: none;
	transition: transform var(--motion-press) var(--ease-out), filter var(--motion-swap) var(--ease-out);
	-webkit-tap-highlight-color: transparent;
}

button:active, .btn:active { transform: scale(0.97); }
button:disabled, .btn:disabled { opacity: 0.6; cursor: default; transform: none; }

.btn-primary { background: var(--attention); color: var(--background); font-weight: 600; }
.btn-primary:hover { filter: brightness(1.06); }

.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-primary); width: auto; }
.btn-ghost:hover { background: var(--surface-elevated); }

.btn-sm { width: auto; padding: var(--space-2) var(--space-3); min-height: 36px; font: var(--text-footnote); font-weight: 600; }
.btn-max { max-width: 320px; }

.btn-row { display: flex; gap: var(--space-2); align-items: stretch; }
.btn-row input { flex: 1; }
.btn-row .btn { width: auto; }

/* ============================= alerts / states ============================= */

.banner {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	font: var(--text-footnote);
	margin-bottom: var(--space-4);
}
.banner svg { width: 18px; height: 18px; flex-shrink: 0; }
.banner.is-error { color: var(--danger); background: var(--danger-tint); border: 1px solid var(--danger); }
.banner.is-success { color: var(--positive); background: var(--positive-tint); border: 1px solid var(--positive); }
.banner a { text-decoration: underline; color: inherit; }

.error { color: var(--danger); background: var(--danger-tint); border: 1px solid var(--danger); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font: var(--text-footnote); margin-bottom: var(--space-4); }

.empty-state { text-align: center; padding: var(--space-7) var(--space-4); color: var(--text-secondary); }
.empty-state svg { width: 40px; height: 40px; color: var(--text-tertiary); margin: 0 auto var(--space-3); }
.empty-state p { font: var(--text-body); margin: 0; }

/* ============================= transaction list ============================= */

.tx-list { display: flex; flex-direction: column; gap: var(--space-3); }
.tx-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); transition: opacity var(--motion-confirm) var(--ease-out), transform var(--motion-confirm) var(--ease-out); }
.tx-row.htmx-swapping { opacity: 0; }

.tx-row .tx-avatar {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-full);
	background: var(--surface-elevated);
	display: flex;
	align-items: center;
	justify-content: center;
	font: var(--text-callout);
	font-weight: 600;
	color: var(--text-secondary);
	flex-shrink: 0;
}

.tx-main { flex: 1; min-width: 0; }
.tx-name { font: var(--text-headline); }
.tx-desc { font: var(--text-footnote); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tx-end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); flex-shrink: 0; }
.tx-amount { text-align: right; }

.status-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font: var(--text-caption);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-full);
}

.status-pill.pending { color: var(--text-secondary); background: var(--surface-elevated); }
.status-pill.paid { color: var(--positive); background: var(--positive-tint); }
.status-pill.rejected { color: var(--attention); background: var(--attention-tint); }
.status-pill svg { width: 12px; height: 12px; }

.tx-meta-row { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); flex-wrap: wrap; }
.tx-meta-row .text-footnote { margin: 0; }

.tx-receipt-link { display: inline-flex; align-items: center; gap: 4px; font: var(--text-footnote); color: var(--text-secondary); }
.tx-receipt-link svg { width: 14px; height: 14px; }
.tx-receipt-link:hover { color: var(--text-primary); }

.tx-actions { flex-shrink: 0; display: flex; gap: var(--space-2); align-items: center; }
.tx-end .btn svg { width: 14px; height: 14px; }
.tx-actions input[type="date"] { width: auto; min-height: 36px; padding: var(--space-2); font: var(--text-footnote); }
.tx-error { color: var(--danger); font: var(--text-footnote); margin-top: var(--space-1); }

.search-form { margin-bottom: var(--space-4); }

/* ============================= auth pages ============================= */

.auth-page {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: calc(var(--space-6) + var(--sat)) var(--space-4) calc(var(--space-6) + var(--sab));
}

.auth-header { text-align: center; margin-bottom: var(--space-6); }
.auth-header h1 { margin: var(--space-3) 0 var(--space-1); }
.auth-header p { color: var(--text-secondary); font: var(--text-body); }
.auth-form { width: 100%; max-width: 360px; }
.auth-footer { text-align: center; color: var(--text-secondary); font: var(--text-body); margin-top: var(--space-4); }

/* ============================= toast ============================= */

.toast-stack {
	position: fixed;
	top: calc(var(--space-3) + var(--sat));
	left: 50%;
	transform: translateX(-50%);
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	width: min(360px, calc(100vw - 32px));
}

.toast {
	padding: var(--space-3) var(--space-4);
	font: var(--text-footnote);
	background: var(--surface-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-floating);
	animation: toast-in var(--motion-swap) var(--ease-out);
	transition: opacity var(--motion-swap) ease;
}
.toast.is-leaving { opacity: 0; }

@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================= htmx indicators ============================= */

.htmx-indicator { opacity: 0; width: 0; height: 0; overflow: hidden; transition: opacity var(--motion-swap) ease; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; width: 14px; height: 14px; display: inline-block; }

.spinner {
	border: 2px solid var(--border);
	border-top-color: currentColor;
	border-radius: var(--radius-full);
	animation: spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.4s; } }
@keyframes spin { to { transform: rotate(360deg); } }

#tx-list-wrap.htmx-request { opacity: 0.6; transition: opacity var(--motion-swap) ease; }

/* ============================= responsive: desktop vs mobile ============================= */

.only-desktop { display: none; }

@media (min-width: 900px) {
	.only-mobile { display: none !important; }
	.only-desktop { display: flex !important; }

	.app-shell { flex-direction: row; }

	.sidebar { display: flex; }
	.app-main { padding: var(--space-7) var(--space-6); max-width: 640px; }
	.topbar { display: none; }

	.balance-summary.two-col { grid-template-columns: 1fr 1fr; }

	.tx-row { padding: var(--space-4); }

	form.stack, .auth-form { max-width: 420px; }
}

@media (max-width: 899px) {
	.tx-desc { max-width: 65vw; }

	/* The mark-paid / accept-reject form doesn't fit next to the name and
	   description at phone widths — force it onto its own full-width row
	   below the transaction info instead of squeezing the text column
	   down to nothing. */
	.tx-row { flex-wrap: wrap; }
	.tx-end { flex-basis: 100%; margin-top: var(--space-2); }
	.tx-actions { flex-wrap: wrap; justify-content: flex-end; width: 100%; }
	.tx-actions input[type="number"] { flex: 1; min-width: 70px; }
	.tx-actions input[type="date"] { flex: 1; min-width: 120px; }
}

.status-pill.partial {
	background: #fef3c7;
	color: #92400e;
}

.list-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-bottom: var(--space-4);
}

.list-header .page-title {
	margin-bottom: 0;
}

.list-header .search-form {
	margin-bottom: 0;
	min-width: 220px;
}

@media (max-width: 480px) {
	.list-header .search-form {
		flex-basis: 100%;
	}
}


/* ============================= payment date dialog ============================= */
.payment-dialog {
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--text-primary);
	width: min(420px, calc(100vw - 32px));
	max-width: none;
}
.payment-dialog::backdrop {
	background: rgba(0, 0, 0, 0.62);
	backdrop-filter: blur(3px);
}
.payment-dialog-card {
	display: grid;
	gap: var(--space-4);
	padding: var(--space-5);
	background: var(--surface-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-floating);
}
.payment-dialog-card h2 { margin: var(--space-1) 0; }
.payment-dialog-card .text-footnote { margin: 0; color: var(--text-secondary); }
.payment-dialog-card label { font: var(--text-footnote); color: var(--text-secondary); }
.payment-dialog-card input[type="date"] {
	width: 100%;
	min-height: 48px;
	font: var(--text-body);
	color: var(--text-primary);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: var(--space-3);
	color-scheme: light dark;
}
.payment-dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-2);
}
@media (max-width: 480px) {
	.payment-dialog { width: calc(100vw - 24px); }
	.payment-dialog-card { padding: var(--space-4); }
	.payment-dialog-actions .btn { flex: 1; }
}


/* ============================= profile identity ============================= */
.profile-identity {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4);
	margin-bottom: var(--space-5);
}
.profile-identity-copy { min-width: 0; }
.profile-display-name {
	font: var(--text-title-2);
	color: var(--text-primary);
	text-transform: none;
	letter-spacing: normal;
	overflow-wrap: anywhere;
}
.profile-username {
	margin-top: var(--space-1);
	font: var(--text-headline);
	color: var(--attention);
	overflow-wrap: anywhere;
}
.profile-identity .text-footnote { margin-top: var(--space-2); }
@media (max-width: 480px) {
	.profile-identity { align-items: flex-start; }
	.profile-identity .avatar.lg { width: 72px; height: 72px; }
}

.profile-edit-toggle { width: 100%; margin-bottom: var(--space-4); }
.profile-edit-panel { padding: var(--space-4); display: grid; gap: var(--space-5); }
.profile-edit-panel[hidden] { display: none; }
.profile-edit-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.profile-edit-heading h2 { margin-top: var(--space-1); font: var(--text-headline); }
.profile-edit-form { padding-top: var(--space-4); border-top: 1px solid var(--border); }
.profile-photo-picker input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.profile-photo-control { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.profile-photo-control .text-footnote { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .profile-photo-control { align-items: flex-start; flex-direction: column; } }

.account-type-picker, .seller-plan-picker { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.account-type-picker legend, .seller-plan-picker legend { font: var(--text-callout); margin-bottom: var(--space-2); }
.account-type-picker label, .plan-card { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-elevated); cursor: pointer; }
.account-type-picker label > span, .plan-card > span { display: grid; gap: var(--space-1); }
.seller-plan-picker { padding-top: var(--space-2); }
.plan-card strong { font: var(--text-headline); }

.seller-activation { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); padding:var(--space-4); margin-bottom:var(--space-5); }
.seller-activation > div { display:grid; gap:var(--space-1); }
.seller-activation form { flex:0 0 auto; }
@media (max-width: 560px) { .seller-activation { align-items:stretch; flex-direction:column; } .seller-activation .btn { width:100%; } }