/* Product roles are defined once in design-tokens.css and consumed here. */

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes float-1 {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	50% {
		transform: translate(80px, -60px) scale(1.2);
	}
}

@keyframes float-2 {
	0%,
	100% {
		transform: translate(0, 0) scale(1);
	}
	50% {
		transform: translate(-80px, 60px) scale(0.85);
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-body);
	background: var(--canvas);
	color: var(--ink);
	font-size: var(--text-md);
	line-height: 1.5;
	position: relative;
	min-height: 100vh;
	overflow-x: hidden;
}

/* Contenedor de gradientes dinámicos del fondo */
.mesh-gradient-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -2;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(
			circle at 84% 8%,
			rgba(220, 229, 255, 0.85) 0%,
			transparent 32%
		),
		linear-gradient(180deg, #faf8ff 0%, #fbfcff 58%, #f1f3ff 100%);
}

.mesh-sphere {
	position: absolute;
	border-radius: 50%;
	filter: blur(150px);
	opacity: 0.22;
}

.sphere-1 {
	top: -10%;
	right: 10%;
	width: 500px;
	height: 500px;
	background: radial-gradient(
		circle,
		rgba(0, 74, 198, 0.22) 0%,
		transparent 76%
	);
	animation: float-1 25s ease-in-out infinite;
}

.sphere-2 {
	bottom: -15%;
	left: -5%;
	width: 600px;
	height: 600px;
	background: radial-gradient(
		circle,
		rgba(120, 149, 221, 0.2) 0%,
		transparent 78%
	);
	animation: float-2 30s ease-in-out infinite;
}

.sphere-3 {
	top: 40%;
	left: 35%;
	width: 350px;
	height: 350px;
	background: radial-gradient(
		circle,
		rgba(229, 234, 255, 0.8) 0%,
		transparent 78%
	);
	opacity: 0.35;
}

/* Grano/Ruido premium de fondo */
.mesh-grain {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: none;
	z-index: 1;
}

.shell {
	width: min(1200px, calc(100% - 32px));
	margin: 40px auto;
	animation: fadeInUp 0.8s var(--ease-out-expo) both;
}

.hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	margin-bottom: var(--space-5);
}

.app-header {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: none;
	backdrop-filter: blur(18px);
}

.app-header-inner {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
	align-items: center;
	width: min(1280px, calc(100% - 64px));
	min-height: 76px;
	margin: 0 auto;
}

.app-navigation {
	display: flex;
	align-self: stretch;
	gap: 34px;
}

.app-navigation-link {
	position: relative;
	min-height: 0;
	padding: 0 2px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--ink-muted);
	font-weight: 650;
}

.app-navigation-link:hover {
	background: transparent;
	box-shadow: none;
	color: var(--primary);
	transform: none;
}

.app-navigation-link::after {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--primary);
	content: "";
	opacity: 0;
	transform: scaleX(0.45);
	transition:
		opacity 180ms ease,
		transform 180ms ease;
}

.app-navigation-link.view-switch-option-active,
.app-navigation-link.view-switch-option-active:hover {
	background: transparent;
	color: var(--primary);
	box-shadow: none;
}

.app-navigation-link.view-switch-option-active::after {
	opacity: 1;
	transform: scaleX(1);
}

.app-account {
	display: flex;
	justify-content: flex-end;
	min-width: 0;
	position: relative;
}

.profile {
	display: flex;
	align-items: center;
	gap: 10px;
}

.account-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	display: grid;
	gap: 4px;
	width: min(280px, calc(100vw - 32px));
	padding: var(--space-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--surface-raised);
	box-shadow: var(--shadow-panel);
	z-index: 40;
}

.account-menu[hidden] {
	display: none;
}

.account-menu button,
.account-menu a {
	justify-content: flex-start;
	min-height: 38px;
	background: transparent;
	color: var(--ink);
	box-shadow: none;
}

.account-menu button:hover,
.account-menu a:hover {
	background: var(--accent-soft);
	box-shadow: none;
}

.account-menu-status {
	margin: var(--space-2) var(--space-2) 0;
	color: var(--ink-muted);
	font-size: var(--text-xs);
	line-height: 1.4;
}

.account-menu-progress {
	padding: var(--space-2);
}

.profile-photo-fallback {
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--surface-subtle);
	color: var(--primary);
}

.product-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	color: var(--primary);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.product-brand-mark {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-control);
	background: var(--primary);
	color: #ffffff;
	font-size: 0.68rem;
	letter-spacing: 0.02em;
}

.hero-headline {
	display: grid;
	gap: var(--space-2);
}

.hero-kpis {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-3);
}

@media (max-width: 1024px) {
	.hero-kpis {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.hero-kpis {
		grid-template-columns: 1fr;
	}
}

.kp-card {
	--radius-outer: var(--radius-lg);
	--radius-inner: calc(var(--radius-lg) - 1px);
	display: grid;
	padding: 1px;
	border-radius: var(--radius-outer);
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.96) 0%,
		rgba(0, 74, 198, 0.12) 100%
	);
	box-shadow: var(--shadow-md);
	transition:
		background 200ms ease,
		box-shadow 200ms ease;
	animation: fadeInUp 0.7s var(--ease-out-expo) both;
}

.kp-card:nth-child(1) {
	animation-delay: 0.1s;
}
.kp-card:nth-child(2) {
	animation-delay: 0.18s;
}
.kp-card:nth-child(3) {
	animation-delay: 0.26s;
}
.kp-card:nth-child(4) {
	animation-delay: 0.34s;
}

.kp-card:hover {
	background: linear-gradient(
		135deg,
		rgba(0, 53, 148, 0.2) 0%,
		rgba(120, 149, 221, 0.12) 100%
	);
	box-shadow: var(--shadow-md), var(--shadow-glow);
}

.kp-card-inner {
	border-radius: var(--radius-inner);
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.94) 0%,
		#f1f3ff 100%
	);
	backdrop-filter: blur(12px);
	padding: 24px;
	height: 100%;
}

.metric-label {
	display: block;
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: var(--space-2);
}

.metric-value {
	display: block;
	font-family: var(--font-display);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	font-size: 1.65rem;
	color: var(--ink);
	margin-bottom: var(--space-1);
	letter-spacing: -0.02em;
}

.metric-detail {
	display: block;
	font-size: var(--text-sm);
	color: var(--ink-secondary);
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2rem, 5vw, 3.2rem);
	letter-spacing: -0.04em;
	line-height: 1.05;
	margin-bottom: var(--space-2);
	background: linear-gradient(135deg, var(--ink) 18%, var(--primary) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

h2 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1.35rem;
	margin-bottom: var(--space-1);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--ink);
}

h3 {
	font-family: var(--font-body);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.subtitle {
	color: var(--ink-secondary);
	max-width: 760px;
	margin-bottom: 0;
	font-size: 1rem;
	line-height: 1.6;
}

.panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-md);
	margin-bottom: var(--space-5);
	transition:
		border-color 200ms ease,
		box-shadow 200ms ease;
}

.product-panel {
	border-color: var(--line-strong);
}

.section-kicker {
	display: inline-flex;
	margin-bottom: var(--space-1);
	color: var(--ink-muted);
	font-size: var(--text-xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.panel-header {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) auto;
	align-items: start;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}

.panel-header p {
	color: var(--ink-muted);
	margin-bottom: 0;
}

.profile,
.summary,
.status-box,
.progress-card {
	background: var(--accent-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: var(--space-4) 18px;
	font-size: var(--text-sm);
}

.summary,
.status-box {
	font-weight: 700;
}

.summary {
	display: grid;
	gap: 2px;
	min-width: 250px;
}

.summary span,
.table-summary span {
	color: var(--ink-muted);
	font-size: var(--text-xs);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.summary strong,
.table-summary strong {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 3vw, 2rem);
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.summary small,
.table-summary small,
.table-feedback {
	color: var(--ink-muted);
	font-size: var(--text-sm);
}

.profile {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	position: static;
	max-width: min(280px, calc(100vw - 32px));
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--shadow-card);
	backdrop-filter: blur(14px);
}

.profile-photo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.profile-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.profile-name {
	font-weight: 700;
	color: var(--ink);
	font-size: var(--text-sm);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.profile-email {
	font-size: 0.82rem;
	color: var(--ink-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

button,
.button {
	appearance: none;
	border: 0;
	border-radius: var(--radius-control);
	background: var(--accent);
	color: #ffffff;
	padding: 0 var(--space-4);
	min-height: 44px;
	font: inherit;
	font-size: var(--text-sm);
	line-height: 1;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	white-space: nowrap;
	box-shadow: var(--shadow-sm);
	transition:
		background 200ms var(--ease-out-expo),
		transform 150ms var(--ease-spring),
		box-shadow 200ms var(--ease-out-expo);
}

button:hover,
.button:hover {
	background: var(--accent-hover);
	box-shadow: var(--shadow-card), var(--shadow-glow);
}

button:active,
.button:active {
	transform: scale(0.96);
}

button:disabled,
.button[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
	box-shadow: none;
}

button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

.button-row,
.view-switch-options {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	justify-content: flex-end;
}

.button-row {
	align-items: end;
}

.month-picker {
	display: grid;
	gap: 4px;
	align-items: center;
	color: var(--ink-muted);
	font-size: var(--text-xs);
	font-weight: 800;
	text-transform: uppercase;
}

.month-picker select {
	min-height: 44px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface-raised);
	color: var(--ink);
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 700;
	padding: 0 var(--space-3);
	text-transform: none;
}

.period-controls {
	display: flex;
	gap: var(--space-2);
	align-items: end;
	flex: 0 0 auto;
}

.period-controls .month-picker {
	min-width: 170px;
}

.period-sync-button {
	min-height: 44px;
	padding: 0 var(--space-3);
	white-space: nowrap;
}

#newExpenseButton {
	align-self: end;
	background: var(--accent);
	border: 1px solid var(--accent);
	color: #ffffff;
	box-shadow: none;
}

#newExpenseButton:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: #ffffff;
	box-shadow: var(--shadow-sm);
}

.view-switch {
	display: grid;
	gap: 4px;
	align-items: center;
	color: var(--ink-muted);
	font-size: var(--text-xs);
	font-weight: 800;
	text-transform: uppercase;
}

.view-switch-options {
	gap: 0;
	padding: 3px;
	border: 1px solid var(--line);
	border-radius: var(--radius-control);
	background: var(--surface-subtle);
}

.view-switch-option {
	min-height: 38px;
	border: 0;
	border-radius: calc(var(--radius-control) - 3px);
	background: transparent;
	color: var(--ink-secondary);
	padding: 0 var(--space-3);
	font-size: var(--text-sm);
	font-weight: 600;
	transition:
		background 150ms ease,
		color 150ms ease;
}

.view-switch-option:hover {
	background: var(--accent-soft);
	color: var(--ink);
}

.view-switch-option-active,
.view-switch-option-active:hover {
	background: var(--accent);
	color: #ffffff;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

button.secondary {
	background: var(--surface);
	border: 1px solid var(--line-strong);
	color: var(--ink);
	box-shadow: none;
}

button.secondary:hover {
	background: #ffffff;
	border-color: var(--accent-line);
	color: var(--ink);
	box-shadow: var(--shadow-sm);
}

button.danger {
	background: var(--danger-soft);
	border: 1px solid rgba(180, 35, 24, 0.2);
	color: var(--danger);
	box-shadow: none;
}

button.danger:hover {
	background: var(--danger);
	color: #ffffff;
	box-shadow: 0 8px 18px rgba(180, 35, 24, 0.18);
}

.progress-card {
	margin-top: var(--space-3);
}

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

.progress-copy strong {
	font-size: var(--text-sm);
}

.progress-copy span {
	font-weight: 500;
	color: var(--ink-muted);
}

.progress-bar {
	height: 8px;
	border-radius: 999px;
	background: #dfe5f3;
	overflow: hidden;
}

.progress-fill {
	width: 8%;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		var(--primary) 0%,
		var(--primary-container) 100%
	);
	transition: width 220ms ease;
}

label {
	color: var(--ink-muted);
	font-size: var(--text-sm);
	font-weight: 700;
}

input,
select {
	display: block;
	width: 100%;
	margin-top: var(--space-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-control);
	padding: 0 12px;
	min-height: 44px;
	font: inherit;
	font-size: var(--text-sm);
	color: var(--ink);
	background: var(--surface-raised);
	transition:
		border-color 150ms var(--ease-out-expo),
		box-shadow 150ms var(--ease-out-expo),
		background 150ms var(--ease-out-expo);
}

input:focus,
select:focus {
	border-color: var(--accent);
	box-shadow: var(--shadow-glow);
	background: #ffffff;
}

.dashboard {
	display: grid;
	gap: var(--space-5);
}

#refreshButton {
	align-self: end;
	min-height: 44px;
}

.dashboard[hidden],
.transactions-table-wrap[hidden] {
	display: none;
}

.metric-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-3);
}

.dashboard-lead {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	align-items: stretch;
}

.primary-money-card,
.lead-answer-card {
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--surface);
	padding: clamp(20px, 3vw, 30px);
	box-shadow: var(--shadow-md);
}

.primary-money-card {
	position: relative;
	overflow: hidden;
	min-height: 220px;
	display: grid;
	align-content: end;
	border-left: 4px solid var(--primary);
	background:
		linear-gradient(135deg, #ffffff 0%, #f1f3ff 100%), var(--surface-raised);
}

.primary-money-card span,
.lead-answer-card span {
	color: var(--accent);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.primary-money-card strong {
	display: block;
	max-width: 100%;
	margin: var(--space-3) 0;
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 5.2vw, 4rem);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.045em;
	line-height: 0.9;
	overflow-wrap: anywhere;
}

.primary-money-card p {
	max-width: 560px;
	margin: 0;
	color: var(--ink-secondary);
	font-size: 1rem;
}

.lead-answer-stack {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
	align-content: stretch;
}

.lead-answer-card {
	display: grid;
	gap: var(--space-2);
	padding: 18px 20px;
	box-shadow: var(--shadow-sm);
	border-top: 3px solid var(--accent-line);
}

.lead-answer-card strong {
	overflow: hidden;
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 1.8vw, 1.35rem);
	line-height: 1.05;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lead-answer-card small {
	color: var(--ink-muted);
	font-size: var(--text-sm);
	line-height: 1.4;
}

.support-metrics {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
}

.analysis-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	align-items: start;
}

.metric-card,
.insight-card,
.chart-card,
.breakdown-card,
.category-distribution-card,
.counterparty-spend-card,
.budget-card,
.budget-toggle-card,
.month-story-card {
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
	background: var(--surface);
	padding: var(--space-4);
	transition:
		border-color 160ms ease,
		box-shadow 160ms ease;
}

.month-story-card {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	grid-template-areas: "story list";
	gap: var(--space-4);
	align-items: stretch;
	background: var(--surface-subtle);
	box-shadow: none;
}

.month-story-header {
	grid-area: story;
	display: grid;
	align-content: start;
	gap: var(--space-2);
}

.month-story-header span,
.next-action-card span {
	color: var(--accent);
	font-size: var(--text-xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.month-story-header h3 {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2.5vw, 2rem);
	letter-spacing: -0.04em;
}

.month-story-header p,
.next-action-card p {
	margin: 0;
	color: var(--ink-secondary);
	font-size: var(--text-sm);
	line-height: 1.5;
}

.month-story-list {
	grid-area: list;
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.month-story-list li {
	position: relative;
	padding-left: 20px;
	color: var(--ink);
	font-size: var(--text-sm);
	line-height: 1.45;
}

.month-story-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--accent);
	box-shadow: 0 0 0 4px var(--accent-soft);
}

.next-action-card {
	grid-area: action;
	display: grid;
	align-content: start;
	gap: var(--space-2);
	border: 1px solid var(--accent-line);
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.76);
	padding: var(--space-4);
}

.dashboard-lead .next-action-card {
	grid-area: auto;
}

.next-action-card strong {
	font-size: 1.05rem;
	letter-spacing: -0.02em;
}

.review-now-button {
	justify-self: start;
	margin-top: var(--space-2);
	border: 1px solid var(--accent);
	box-shadow: none;
}

.review-now-button:hover {
	border-color: var(--accent-hover);
	box-shadow: var(--shadow-sm);
}

.budget-toggle-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-4);
	align-items: center;
	background:
		linear-gradient(90deg, rgba(0, 53, 148, 0.08), transparent 42%),
		var(--surface-subtle);
}

.budget-toggle-card-expanded {
	align-items: start;
}

.budget-expansion {
	grid-column: 1 / -1;
	overflow: hidden;
	animation: budget-expand 260ms var(--ease-out-expo) both;
}

@keyframes budget-expand {
	from {
		opacity: 0;
		max-height: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		max-height: 900px;
		transform: translateY(0);
	}
}

.budget-toggle-card strong {
	display: block;
	margin-bottom: 4px;
	font-family: var(--font-display);
	font-size: var(--text-base);
}

.budget-toggle-card p {
	margin: 0;
	color: var(--ink-muted);
	font-size: var(--text-sm);
	line-height: 1.45;
}

.switch-control {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	box-sizing: border-box;
	flex: 0 0 auto;
	width: 58px;
	height: 34px;
	min-height: 34px;
	border: 1px solid var(--line-strong);
	border-radius: 999px;
	background: #dfe5f3;
	padding: 3px;
	transition:
		background 150ms ease,
		border-color 150ms ease;
}

.switch-control:hover {
	background: #d5ddee;
}

.switch-control[aria-checked="true"] {
	border-color: var(--accent-line);
	background: var(--accent);
}

.switch-control span {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 4px 10px rgba(30, 52, 100, 0.18);
	transition: transform 160ms ease;
}

.switch-control[aria-checked="true"] span {
	transform: translateX(24px);
}

.budget-card {
	display: grid;
	grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1.1fr);
	gap: var(--space-4);
	align-items: start;
	padding: var(--space-4) 0 0;
	border: 0;
	border-top: 1px solid var(--line);
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	transition: none;

	/* Override shared card treatment: this content belongs to the switch card. */
	background: transparent;
}

.budget-header,
.budget-results {
	grid-column: 1 / -1;
}

.budget-header h3 {
	margin-bottom: var(--space-1);
}

.budget-header p {
	margin: 0;
	color: var(--ink-muted);
	font-size: var(--text-sm);
	line-height: 1.45;
}

.budget-form {
	display: grid;
	gap: var(--space-3);
}

.budget-field {
	display: grid;
	gap: var(--space-2);
	color: var(--ink-muted);
	font-size: var(--text-xs);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.budget-field input,
.budget-field select {
	font-size: var(--text-base);
	font-weight: 800;
	letter-spacing: -0.02em;
}

.income-detection,
.income-suggestion,
.income-chooser,
.income-candidate-list {
	display: grid;
	gap: var(--space-3);
}

.budget-check {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	color: var(--ink);
	font-size: var(--text-sm);
	font-weight: 800;
}

.budget-check input {
	width: 18px;
	height: 18px;
}

.income-suggestion {
	border: 1px solid var(--accent-line);
	border-radius: var(--radius-sm);
	background: var(--accent-soft);
	padding: var(--space-3);
}

.income-suggestion p,
.income-suggestion small {
	margin: 0;
	color: var(--ink-muted);
	font-size: var(--text-sm);
	line-height: 1.45;
}

.income-candidate-option {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	align-items: center;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface-raised);
	padding: var(--space-3);
}

.income-candidate-option > div {
	display: grid;
	gap: var(--space-1);
}

.income-candidate-option strong {
	color: var(--ink);
	font-size: var(--text-lg);
}

.income-candidate-option-active {
	border-color: var(--accent-line);
	background: var(--accent-soft);
}

.income-actions {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.budget-results {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
}

.budget-result {
	display: grid;
	align-content: start;
	gap: var(--space-2);
	min-height: 118px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface);
	padding: var(--space-3);
}

.budget-result span {
	color: var(--ink-muted);
	font-size: var(--text-xs);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.budget-result strong {
	font-size: clamp(1.2rem, 2vw, 1.65rem);
	letter-spacing: -0.04em;
	line-height: 1;
}

.budget-result small {
	color: var(--ink-muted);
	font-size: var(--text-xs);
	line-height: 1.35;
}

.metric-card {
	min-height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.metric-card span,
.insight-card span {
	color: var(--ink-muted);
	font-size: var(--text-xs);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.metric-card strong {
	font-family: var(--font-display);
	font-size: clamp(1.45rem, 3vw, 2rem);
	line-height: 1;
	letter-spacing: -0.04em;
}

.metric-card small,
.insight-card small {
	color: var(--ink-muted);
	font-size: var(--text-sm);
}

.chart-card {
	display: grid;
	gap: var(--space-4);
	background: var(--surface);
}

.chart-header {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	align-items: baseline;
}

.chart-header h3 {
	margin-bottom: 0;
}

.chart-header span {
	color: var(--ink-muted);
	font-size: var(--text-sm);
	font-weight: 700;
}

.chart-tabs {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	padding-bottom: 2px;
}

.chart-tab {
	min-height: 38px;
	padding: 0 var(--space-3);
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--line);
	color: var(--ink-secondary);
	font-size: var(--text-xs);
}

.chart-tab:hover {
	background: var(--accent-soft);
	color: var(--accent);
}

.chart-tab[aria-pressed="true"] {
	background: var(--accent);
	border-color: var(--accent);
	color: #ffffff;
}

.chart-body {
	display: grid;
	grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) minmax(180px, 240px);
	gap: var(--space-4);
	align-items: stretch;
}

.chart-detail,
.chart-summary {
	display: grid;
	align-content: start;
	gap: var(--space-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: rgba(255, 255, 255, 0.76);
	padding: var(--space-3);
}

.chart-detail {
	max-height: 400px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.chart-detail h4,
.chart-summary h4 {
	margin: 0 0 var(--space-1);
	color: var(--ink-muted);
	font-size: var(--text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.chart-detail p {
	margin: 0;
	color: var(--ink-muted);
	font-size: var(--text-sm);
	line-height: 1.45;
}

.chart-detail-total {
	color: var(--accent);
	font-size: 1.35rem;
	line-height: 1.15;
}

.chart-detail-date {
	margin-top: var(--space-2);
	color: var(--ink-muted);
	font-size: var(--text-xs);
	font-weight: 800;
	text-transform: capitalize;
}

.chart-detail-list {
	display: grid;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.chart-detail-list li {
	border-top: 1px solid var(--line);
	padding-top: var(--space-2);
	font-size: var(--text-sm);
}

.chart-detail-item {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	align-items: start;
	width: 100%;
	min-height: auto;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: transparent;
	color: inherit;
	padding: 8px;
	text-align: left;
	white-space: normal;
}

.chart-detail-item:hover {
	border-color: var(--accent-line);
	background: var(--accent-soft);
}

.chart-detail-item:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

.chart-detail-item > span {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.chart-detail-item > span strong {
	overflow: hidden;
	color: var(--ink);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chart-detail-list small {
	color: var(--ink-muted);
}

.chart-detail-item > strong {
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.weekly-chart {
	display: flex;
	justify-content: center;
	gap: 10px;
	align-items: end;
	min-height: 230px;
	padding-top: var(--space-2);
}

.chart-summary-row {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	align-items: baseline;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	padding: 9px 10px;
	color: var(--ink-muted);
	font-size: var(--text-sm);
}

.chart-summary-row strong {
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.chart-summary-row-active {
	border-color: var(--accent-line);
	background: var(--accent);
	color: #ffffff;
}

.chart-summary-row-active strong {
	color: #ffffff;
}

.weekly-bar {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: var(--space-2);
	min-height: 230px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: transparent;
	color: inherit;
	padding: 8px 6px;
	text-align: center;
	cursor: pointer;
	transition:
		border-color 140ms ease,
		background 140ms ease,
		box-shadow 140ms ease;
}

.weekly-bar:hover {
	border-color: var(--accent-line);
	background: rgba(255, 255, 255, 0.62);
}

.weekly-bar:disabled {
	cursor: not-allowed;
}

.weekly-bar:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 4px;
}

.weekly-bar-selected,
.weekly-bar-selected:hover {
	border-color: var(--accent);
	background: var(--accent-soft);
	box-shadow: inset 0 0 0 1px rgba(0, 53, 148, 0.14);
}

.weekly-bar-selected .weekly-track {
	box-shadow: inset 0 0 0 1px var(--accent-line);
}

.weekly-bar-selected .weekly-value,
.weekly-bar-selected strong {
	color: var(--accent);
}

.weekly-value {
	color: var(--ink-muted);
	font-size: var(--text-xs);
	font-weight: 700;
	min-height: 1.1rem;
}

.weekly-track {
	display: flex;
	align-items: end;
	justify-content: center;
	justify-self: center;
	width: 40px;
	height: 160px;
	border: 1px solid var(--line);
	border-radius: 10px 10px 5px 5px;
	background: rgba(255, 255, 255, 0.78);
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(30, 52, 100, 0.05);
}

.weekly-fill {
	display: block;
	align-self: flex-end;
	width: 100%;
	border-radius: 8px 8px 3px 3px;
	background: linear-gradient(
		180deg,
		var(--primary-container) 0%,
		var(--primary) 100%
	);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
	transition: height 180ms ease;
}

.weekly-track-empty {
	background: repeating-linear-gradient(
		-45deg,
		#edf0fa,
		#edf0fa 6px,
		#f8f9ff 6px,
		#f8f9ff 12px
	);
	box-shadow: inset 0 0 0 1px rgba(30, 52, 100, 0.06);
}

.weekly-bar strong {
	color: var(--ink-muted);
	font-size: var(--text-xs);
	text-transform: capitalize;
}

.weekly-bar small {
	color: var(--ink-muted);
	font-size: 0.68rem;
	line-height: 1.1;
	min-height: 1.5rem;
}

.dashboard-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-3);
}

.insight-card {
	display: grid;
	gap: var(--space-2);
}

.insight-card strong {
	font-size: 1rem;
	line-height: 1.2;
}

.counterparty-spend-card {
	display: grid;
	gap: var(--space-3);
}

.counterparty-spend-card h3 {
	margin: 0;
}

.counterparty-spend-card p {
	margin: 0;
	color: var(--ink-muted);
	font-size: var(--text-sm);
}

.counterparty-spend-count {
	color: var(--ink-muted);
	font-size: var(--text-xs);
	font-weight: 700;
}

.counterparty-spend-list {
	display: grid;
	gap: var(--space-2);
}

.counterparty-spend-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
	gap: var(--space-3);
	align-items: center;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: rgb(255 255 255 / 0.65);
}

.counterparty-spend-row strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.counterparty-spend-row small {
	color: var(--ink-muted);
	font-size: var(--text-xs);
}

.counterparty-actions {
	display: grid;
	gap: var(--space-2);
}

.counterparty-current-category {
	color: var(--ink-muted);
	font-size: var(--text-xs);
	font-weight: 700;
	line-height: 1.35;
}

.counterparty-category-label {
	display: grid;
	gap: 6px;
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--ink-muted);
}

.counterparty-category-select {
	margin-top: 0;
	min-height: 36px;
}

.counterparty-detail-button {
	min-height: 36px;
}

.counterparty-spend-empty {
	color: var(--ink-muted);
}

.counterparty-detail-list {
	display: grid;
	gap: var(--space-2);
	max-height: 420px;
	overflow-y: auto;
	padding-right: var(--space-1);
}

.counterparty-detail-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-3);
	align-items: center;
	width: 100%;
	text-align: left;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface-raised);
	color: var(--ink);
	padding: 8px 12px;
}

.counterparty-detail-item:hover {
	background: var(--accent-soft);
}

.counterparty-detail-main {
	color: var(--ink-muted);
	font-size: var(--text-xs);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.counterparty-detail-amount {
	font-size: var(--text-sm);
	line-height: 1.2;
	font-weight: 800;
	white-space: nowrap;
}

.breakdown-card h3 {
	margin-bottom: var(--space-4);
}

.breakdown-row {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.breakdown-row > div:first-child {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	font-size: var(--text-sm);
}

.breakdown-track {
	height: 10px;
	border-radius: 999px;
	background: var(--accent-soft);
	overflow: hidden;
}

.breakdown-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--accent);
}

.category-distribution-card {
	display: grid;
	gap: var(--space-3);
	background: rgba(255, 255, 255, 0.84);
}

.category-distribution-insight,
.category-savings-hint {
	box-shadow: none;
}

.category-distribution-card h3 {
	margin: 0;
}

.category-distribution-card p {
	margin: 0;
	color: var(--ink-muted);
	font-size: var(--text-sm);
}

.category-distribution-body {
	display: grid;
	gap: var(--space-4);
	justify-items: center;
}

.category-donut-wrap {
	display: grid;
	place-items: center;
}

.category-donut {
	position: relative;
	display: grid;
	place-items: center;
	width: 232px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--category-donut-gradient, var(--accent-soft));
}

.category-donut::after {
	content: "";
	position: absolute;
	inset: 42px;
	border-radius: 50%;
	background: var(--surface);
	box-shadow: inset 0 0 0 1px var(--line);
}

.category-donut-center {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 2px;
	text-align: center;
}

.category-donut-center span {
	color: var(--ink-muted);
	font-size: var(--text-xs);
	font-weight: 800;
	text-transform: uppercase;
}

.category-donut-center strong {
	max-width: 130px;
	overflow: hidden;
	color: var(--ink);
	font-size: 1rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.category-distribution-legend {
	display: grid;
	gap: 6px;
	width: min(100%, 640px);
	max-height: 340px;
	overflow-y: auto;
}

.category-legend-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--space-2);
	align-items: center;
	width: 100%;
	min-width: 0;
	min-height: 0;
	padding: 6px 0;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	box-shadow: none;
	text-align: left;
}

.category-legend-item:hover {
	background: var(--accent-soft);
	box-shadow: none;
}

.category-legend-item:last-child {
	border-bottom: 0;
}

.category-legend-marker {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--category-color, var(--accent));
}

.category-legend-item strong {
	overflow: hidden;
	font-size: var(--text-sm);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.category-legend-item small {
	color: var(--ink-muted);
	font-size: var(--text-xs);
	text-align: right;
	white-space: nowrap;
}

.category-distribution-insight,
.category-savings-hint {
	margin: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface-raised);
	color: var(--ink);
	font-size: var(--text-sm);
	padding: var(--space-3);
}

.category-savings-hint {
	border-color: var(--accent-line);
	background: var(--accent-soft);
	color: var(--accent);
	font-weight: 800;
}

.category-distribution-empty {
	color: var(--ink-muted);
}

/* Category detail capsule */
.category-detail-panel {
	display: grid;
	gap: var(--space-3);
	width: min(100%, 640px);
	animation: detail-fade-in 0.25s ease;
}

@keyframes detail-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.category-detail-header {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--space-2);
	align-items: center;
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--line);
}

.category-detail-header .category-legend-marker {
	width: 12px;
	height: 12px;
}

.category-detail-header strong {
	font-size: var(--text-sm);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.category-detail-header small {
	color: var(--ink-muted);
	font-size: var(--text-xs);
	text-align: right;
	white-space: nowrap;
}

.category-detail-merchants {
	display: grid;
	gap: 2px;
	max-height: 400px;
	overflow-y: auto;
}

.category-detail-merchant {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--space-2);
	align-items: baseline;
	padding: 6px 0;
	border-bottom: 1px solid var(--line);
}

.category-detail-merchant:last-child {
	border-bottom: 0;
}

.category-detail-merchant strong {
	overflow: hidden;
	font-size: var(--text-sm);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.category-detail-merchant small {
	color: var(--ink-muted);
	font-size: var(--text-xs);
	white-space: nowrap;
}

.category-detail-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	padding-top: var(--space-1);
}

.category-detail-back {
	min-height: 34px;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink-secondary);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 0 14px;
	text-align: center;
	box-shadow: none;
	transition:
		background 0.2s ease,
		color 0.2s ease,
		border-color 0.2s ease;
}

.category-detail-back:hover {
	background: var(--accent-soft);
	border-color: var(--accent-line);
	color: var(--accent);
	box-shadow: none;
}

.transactions-table-wrap {
	--detail-row-height: 4.25rem;
	--detail-visible-rows: 8;
	--detail-head-height: 3.5rem;
	--detail-viewport-max: 38rem;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-card);
}

.table-summary {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: var(--space-3);
	align-items: baseline;
	padding: var(--space-4);
	border-bottom: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.58);
}

.table-category-filters {
	display: grid;
	grid-template-columns: minmax(160px, 0.28fr) 1fr;
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-4);
	border-bottom: 1px solid var(--line);
	background:
		linear-gradient(90deg, rgba(0, 53, 148, 0.08), transparent 42%),
		rgba(255, 255, 255, 0.5);
}

.table-category-filter-intro {
	display: grid;
	gap: 3px;
}

.table-category-filter-intro strong {
	color: var(--ink);
	font-size: var(--text-sm);
	font-weight: 900;
}

.table-category-filter-intro span {
	color: var(--ink-muted);
	font-size: var(--text-xs);
	font-weight: 650;
	line-height: 1.35;
}

.table-category-filter-field {
	display: grid;
	gap: 6px;
	justify-self: end;
	width: min(100%, 380px);
	color: var(--ink-muted);
	font-size: var(--text-xs);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.table-category-filter-field select {
	min-height: 46px;
	margin-top: 0;
	background: var(--surface);
	color: var(--ink);
	font-size: var(--text-sm);
	font-weight: 750;
	letter-spacing: normal;
	text-transform: none;
}

.bulk-action-bar {
	display: flex;
	align-items: end;
	gap: var(--space-3);
	padding: var(--space-4);
	border-bottom: 1px solid var(--line);
	background: linear-gradient(
		135deg,
		rgba(0, 53, 148, 0.1),
		rgba(241, 243, 255, 0.9)
	);
}

.bulk-action-bar[hidden],
.table-feedback[hidden] {
	display: none;
}

.bulk-selection-copy {
	display: grid;
	gap: 3px;
	margin-right: auto;
	min-width: min(100%, 260px);
}

.bulk-selection-copy strong {
	font-size: var(--text-sm);
	color: var(--ink);
}

.bulk-selection-copy span {
	color: var(--ink-muted);
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: 1.35;
}

.bulk-category-field {
	display: grid;
	gap: 4px;
	min-width: 220px;
	color: var(--ink-muted);
	font-size: var(--text-xs);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.bulk-category-field select {
	min-height: 38px;
	font-size: var(--text-sm);
	letter-spacing: normal;
	text-transform: none;
}

.bulk-action-bar button {
	min-height: 38px;
	padding-inline: var(--space-3);
}

.bulk-counterparty-button {
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.table-feedback {
	padding: 0 var(--space-4) var(--space-4);
	border-bottom: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.58);
}

.transactions-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: transparent;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.transactions-table th,
.transactions-table td {
	border-bottom: 1px solid var(--line);
	padding: 16px 18px;
	text-align: left;
	vertical-align: middle;
}

.transactions-table th.selection-column,
.transactions-table td[data-field="select"] {
	width: 48px;
	padding-right: 8px;
	text-align: center;
}

.transactions-table input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--accent);
	cursor: pointer;
}

.transactions-table th {
	position: sticky;
	top: 0;
	z-index: 1;
	color: var(--ink-muted);
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.72);
}

.sort-button {
	min-height: auto;
	padding: 0;
	background: transparent;
	color: inherit;
	font-size: inherit;
	font-weight: 700;
	letter-spacing: inherit;
	text-transform: inherit;
	box-shadow: none;
}

.sort-button:hover {
	background: transparent;
	color: var(--ink);
	box-shadow: none;
}

.transactions-table th.sort-active {
	color: var(--accent);
	font-weight: 800;
}

.transactions-table tr:last-child td {
	border-bottom: 0;
}

.transactions-table tbody tr {
	border-left: 3px solid transparent;
	transition:
		background 200ms var(--ease-spring),
		transform 200ms var(--ease-spring),
		border-left-color 200ms var(--ease-spring);
}

.transactions-table tbody tr:hover {
	background: #f8f9ff;
	transform: none;
	border-left-color: var(--accent);
}

.transactions-table tbody tr.is-selected {
	background: rgba(0, 53, 148, 0.09);
	border-left-color: var(--accent);
	box-shadow: inset 0 0 0 1px rgba(0, 53, 148, 0.12);
}

.transactions-table td[data-field="date"] {
	color: var(--ink-muted);
	font-size: var(--text-sm);
	font-variant-numeric: tabular-nums;
}

.transactions-table td[data-field="amount"] {
	font-family: var(--font-display);
	font-size: 1.08rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.transactions-table td[data-field="amount"].is-outflow {
	color: var(--danger);
}

.transactions-table td[data-field="amount"].is-inflow {
	color: var(--success);
}

.transactions-table td[data-field="counterparty"] {
	max-width: 360px;
	font-weight: 800;
}

.counterparty-cell {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

.counterparty-name {
	overflow: hidden;
	font-size: 1rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.counterparty-select-chip {
	min-height: 28px;
	border: 1px solid var(--accent-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	box-shadow: none;
	color: var(--accent);
	font-size: 0.7rem;
	font-weight: 800;
	padding: 0 9px;
	white-space: nowrap;
}

.counterparty-select-chip:hover {
	background: var(--accent-soft);
	box-shadow: 0 0 0 3px rgba(0, 53, 148, 0.08);
	color: var(--accent-hover);
}

.transactions-table td[data-field="category"] {
	white-space: nowrap;
}

.transactions-table td:last-child {
	text-align: right;
}

.transactions-table td:last-child button {
	min-height: 34px;
	padding-inline: var(--space-3);
	background: transparent;
	color: var(--ink-secondary);
	box-shadow: none;
}

.transactions-table td:last-child button:hover {
	background: var(--accent-soft);
	color: var(--accent);
	box-shadow: none;
}

.category-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--category-bg, rgba(255, 255, 255, 0.72));
	color: var(--category-color, var(--ink-secondary));
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	border: 1px solid var(--category-border, var(--line));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.category-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--category-color, var(--accent));
}

.category-badge-empty {
	border-style: dashed;
	background: rgba(255, 255, 255, 0.58);
	color: var(--ink-muted);
}

.empty {
	display: grid;
	gap: var(--space-3);
	justify-items: start;
	color: var(--ink-muted);
	padding: var(--space-5);
	border: 1px dashed var(--line);
	border-radius: var(--radius-md);
	background: var(--surface-subtle);
}

.empty strong {
	color: var(--ink);
	font-size: 1rem;
}

.badge {
	display: inline-flex;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	padding: 6px 10px;
	font-weight: 800;
	font-size: var(--text-xs);
	white-space: nowrap;
}

dialog.modal {
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	padding: 0;
	max-width: min(560px, calc(100vw - 32px));
	width: 100%;
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(20px);
	box-shadow: var(--shadow-xl), var(--shadow-glow);
}

dialog.modal::backdrop {
	background: rgba(19, 27, 46, 0.38);
	backdrop-filter: blur(8px);
}

dialog.modal[open] {
	animation: modal-in 240ms var(--ease-spring);
}

@keyframes modal-in {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(12px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes fade-up {
	from {
		opacity: 0;
		transform: translateY(12px);
		filter: blur(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

.modal-inner {
	padding: var(--space-5);
}

.modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	min-height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--line);
	color: var(--ink-secondary);
	font-size: 1rem;
	padding: 0;
	box-shadow: none;
	transition:
		background 150ms ease,
		color 150ms ease,
		transform 150ms ease;
}

.modal-close:hover {
	background: #ffffff;
	color: var(--ink);
	transform: scale(1.05);
	box-shadow: var(--shadow-sm);
}

.modal-title {
	margin: 0 48px var(--space-5) 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
}

.modal-back {
	min-height: 34px;
	margin-bottom: var(--space-3);
	padding: 0 var(--space-3);
}

.modal-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}

.modal-grid-full {
	grid-column: 1 / -1;
}

.modal-status {
	color: var(--ink-muted);
	font-size: var(--text-sm);
	margin: var(--space-3) 0 0;
	min-height: 1.4em;
}

.terms-copy {
	display: grid;
	gap: var(--space-3);
	color: var(--ink);
	font-size: var(--text-sm);
	line-height: 1.55;
}

.terms-copy p {
	margin: 0;
}

.terms-check {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
	margin-top: var(--space-4);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.72);
	padding: var(--space-3);
	color: var(--ink);
	font-size: var(--text-sm);
	line-height: 1.45;
}

.terms-check input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--accent);
	flex: 0 0 auto;
}

.modal-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--space-5);
	gap: var(--space-3);
}

.settings-section {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.settings-section h4 {
	margin: 0;
}

.category-settings-list {
	display: grid;
	gap: var(--space-2);
}

.category-settings-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: var(--space-3);
	align-items: center;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: rgba(255, 255, 255, 0.72);
	padding: var(--space-3);
}

.category-settings-row small {
	color: var(--ink-muted);
}

.category-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: var(--space-3);
	align-items: end;
}

.profile[role="button"] {
	cursor: pointer;
}

.profile[role="button"]:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 1ms !important;
	}

	.shell,
	.kp-card,
	dialog.modal[open],
	.sphere-1,
	.sphere-2 {
		animation: none !important;
	}

	.transactions-table tbody tr:hover,
	button:active,
	.button:active,
	.modal-close:hover {
		transform: none;
	}
}

@media (max-width: 800px) {
	.shell {
		width: min(100% - 24px, 1180px);
		margin: 24px auto;
	}

	.hero,
	.panel-header {
		grid-template-columns: 1fr;
		display: grid;
	}

	.hero-kpis {
		grid-template-columns: repeat(2, 1fr);
	}

	.category-donut-wrap > div {
		width: 200px !important;
		height: 200px !important;
	}

	.panel {
		padding: 18px;
	}

	.button-row {
		justify-content: stretch;
	}

	.button-row > *,
	.view-switch,
	.view-switch-options > * {
		flex: 1;
	}

	.view-switch,
	.view-switch-options {
		width: 100%;
	}

	.period-controls {
		width: 100%;
	}

	.period-controls .month-picker {
		flex: 1;
		min-width: 0;
	}

	.period-sync-button {
		flex: 0 0 auto;
	}

	.metric-grid,
	.support-metrics,
	.lead-answer-stack,
	.analysis-grid,
	.dashboard-lead,
	.dashboard-grid,
	.budget-card,
	.budget-results,
	.counterparty-spend-row,
	.month-story-card {
		grid-template-columns: 1fr;
	}

	.profile {
		position: static;
		width: min(100% - 24px, 1180px);
		max-width: none;
		margin: -8px auto 24px;
	}

	.primary-money-card {
		min-height: 240px;
	}

	.month-story-card {
		grid-template-areas:
			"story"
			"list";
	}

	.budget-toggle-card {
		align-items: stretch;
		grid-template-columns: 1fr;
	}

	.switch-control {
		align-self: flex-start;
	}

	.chart-header,
	.table-category-filters,
	.table-summary {
		grid-template-columns: 1fr;
		display: grid;
	}

	.table-category-filter-field {
		justify-self: stretch;
		width: 100%;
	}

	.bulk-action-bar {
		align-items: stretch;
		flex-direction: column;
	}

	.bulk-selection-copy {
		margin-right: 0;
	}

	.bulk-category-field {
		min-width: 0;
	}

	.chart-body {
		grid-template-columns: 1fr;
	}

	.weekly-chart {
		gap: var(--space-2);
		overflow-x: auto;
		padding-bottom: var(--space-2);
	}

	.weekly-value {
		writing-mode: vertical-rl;
		justify-self: center;
	}

	.metric-card {
		min-height: 126px;
	}

	.category-settings-row,
	.category-form {
		grid-template-columns: 1fr;
	}

	.category-donut {
		width: 180px;
	}

	.category-donut::after {
		inset: 34px;
	}

	.category-legend-item {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.category-legend-item small {
		grid-column: 2;
		text-align: left;
	}

	.category-detail-header {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.category-detail-header small {
		grid-column: 2;
	}

	.modal-grid {
		grid-template-columns: 1fr;
	}

	.modal-actions {
		align-items: stretch;
		flex-direction: column-reverse;
	}

	.modal-actions button {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.shell {
		width: calc(100% - 16px);
		margin-top: 16px;
	}

	.panel,
	.modal-inner {
		padding: 16px;
	}

	.primary-money-card,
	.lead-answer-card,
	.metric-card,
	.insight-card,
	.chart-card,
	.breakdown-card,
	.category-distribution-card,
	.counterparty-spend-card,
	.budget-card,
	.budget-toggle-card,
	.month-story-card {
		min-width: 0;
	}

	.chart-header {
		align-items: start;
	}

	.chart-tabs {
		max-width: calc(100vw - 50px);
	}

	.profile {
		width: calc(100% - 16px);
		margin-bottom: 16px;
	}

	.period-controls {
		align-items: stretch;
		flex-direction: column;
	}

	.period-sync-button {
		width: 100%;
	}

	.hero-kpis {
		grid-template-columns: 1fr;
	}

	.kp-card {
		border-radius: 20px;
	}

	.kp-card-inner {
		border-radius: 17px;
		padding: 20px;
	}
}

/* Unified app finish: one calm canvas with restrained financial surfaces. */
.mesh-gradient-container {
	background: var(--canvas);
}

.mesh-sphere,
.mesh-grain {
	display: none;
}

.shell {
	width: min(1280px, calc(100% - 64px));
	margin: 0 auto;
	padding: 40px 0 56px;
	animation-duration: 0.45s;
}

.hero {
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 44px;
	min-height: 184px;
	margin: 0;
	padding: 0 0 32px;
}

.product-brand {
	min-height: 48px;
	color: var(--ink);
	font-size: 1rem;
	text-decoration: none;
}

.product-brand-mark {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--primary);
	font-size: 24px;
	font-variation-settings:
		"FILL" 1,
		"wght" 400,
		"GRAD" 0,
		"opsz" 24;
}

.hero-context {
	display: grid;
	gap: 10px;
	padding-top: 4px;
}

.hero-context .section-kicker {
	color: var(--primary);
	letter-spacing: 0.14em;
}

h1 {
	max-width: 760px;
	margin-bottom: 10px;
	background: none;
	color: var(--ink);
	font-size: clamp(2.35rem, 4vw, 3.75rem);
	font-weight: 600;
	letter-spacing: -0.055em;
	-webkit-text-fill-color: currentColor;
}

h2 {
	font-size: clamp(1.5rem, 2vw, 2rem);
}
h3 {
	font-size: 1.125rem;
}
.subtitle {
	max-width: 820px;
	color: var(--ink-muted);
	font-size: 1.05rem;
}

.panel {
	padding: clamp(24px, 3vw, 40px);
	box-shadow: var(--shadow-card);
}

.detail-table-controls {
	position: relative;
	z-index: 2;
	background: var(--surface);
}

.detail-table-viewport {
	position: relative;
	max-height: clamp(28rem, 72vh, var(--detail-viewport-max));
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

.detail-table-viewport .transactions-table {
	border-radius: 0;
	overflow: visible;
}

.detail-table-viewport .transactions-table thead {
	position: sticky;
	top: 0;
	z-index: 3;
}

.detail-table-viewport .transactions-table th {
	top: 0;
	z-index: 3;
	background: var(--surface-subtle);
}

.detail-table-viewport:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--focus) 30%, transparent);
	outline-offset: -3px;
}

.product-panel {
	position: relative;
	border-color: var(--line);
	background: var(--surface);
}

.product-panel::before {
	content: none;
}

.panel-header {
	grid-template-columns: minmax(280px, 0.75fr) minmax(540px, 1.25fr);
	align-items: end;
	gap: 32px;
	margin-bottom: 32px;
}

.period-action-header {
	grid-template-columns: minmax(260px, 0.7fr) minmax(560px, 1.3fr);
	align-items: end;
	gap: 24px;
	margin-bottom: 28px;
}

.period-heading {
	display: grid;
	gap: 6px;
}

.period-action-header .section-kicker {
	margin: 0;
	color: var(--primary);
}

.period-action-header h1 {
	font-size: clamp(1.5rem, 2vw, 2rem);
	margin: 0;
	background: none;
	color: var(--ink);
	font-weight: 650;
	letter-spacing: -0.04em;
	-webkit-text-fill-color: currentColor;
}

.period-action-header .subtitle {
	max-width: 520px;
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
}

.panel-header p {
	max-width: 560px;
	font-size: 0.95rem;
	line-height: 1.65;
}
.button-row {
	gap: 10px;
}

button,
.button,
input,
select,
.month-picker select {
	min-height: 48px;
	border-radius: 12px;
}

button,
.button {
	padding-inline: 18px;
	box-shadow: none;
}
button:hover,
.button:hover {
	box-shadow: 0 8px 20px rgba(0, 53, 148, 0.14);
}

.view-switch-options {
	padding: 4px;
	border-radius: 12px;
	background: var(--surface-subtle);
}
.view-switch-option {
	min-height: 40px;
	border-radius: var(--radius-control);
}
.period-controls .month-picker {
	min-width: 190px;
}

.period-controls {
	flex-wrap: wrap;
}

.period-controls .cycle-reopen {
	min-height: 44px;
}

.dashboard {
	gap: 24px;
}
.dashboard-lead {
	grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
	gap: 16px;
}

.lead-answer-stack {
	grid-template-columns: 1fr;
}
.primary-money-card {
	min-height: 250px;
	border: 1px solid var(--anchor-border);
	border-radius: var(--radius-featured);
	background:
		radial-gradient(circle at 88% 12%, rgba(40, 120, 229, 0.28), transparent 38%),
		linear-gradient(
			145deg,
			var(--anchor-background) 0%,
			var(--anchor-background-raised) 100%
		);
	box-shadow: 0 18px 42px rgba(19, 27, 46, 0.2);
	color: var(--anchor-text);
}

.primary-money-card span {
	color: var(--anchor-accent);
}
.primary-money-card p {
	color: var(--anchor-text-secondary);
}
.primary-money-card strong {
	color: var(--anchor-text);
	font-size: clamp(2.8rem, 5.5vw, 4.8rem);
}

.lead-answer-stack,
.support-metrics {
	gap: 16px;
}
.lead-answer-card,
.metric-card {
	min-height: 150px;
	border-top: 0;
	border-radius: 16px;
	padding: 22px;
	box-shadow: none;
}
.lead-answer-card strong {
	font-size: clamp(1.2rem, 1.8vw, 1.55rem);
}

.metric-card,
.insight-card,
.chart-card,
.breakdown-card,
.category-distribution-card,
.counterparty-spend-card,
.budget-card,
.budget-toggle-card,
.month-story-card {
	border-radius: 16px;
	padding: 24px;
}

.analysis-grid {
	grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.72fr);
	gap: 20px;
}
.chart-card,
.category-distribution-card,
.budget-toggle-card {
	box-shadow: none;
}
.chart-header {
	align-items: center;
}
.chart-tabs {
	gap: 8px;
}
.chart-tab {
	min-height: 44px;
	border-radius: 12px;
	font-size: 0.8rem;
}
.chart-body {
	grid-template-columns: minmax(210px, 250px) minmax(330px, 1fr) minmax(
			190px,
			230px
		);
}
.chart-detail,
.chart-summary {
	border-radius: 12px;
	background: var(--surface-subtle);
}

.budget-toggle-card {
	background: var(--surface);
	border-color: var(--line);
}
.budget-card {
	grid-template-columns: minmax(280px, 0.85fr) minmax(340px, 1.15fr);
}
.budget-result {
	min-height: 132px;
	border-radius: 12px;
	padding: 16px;
}
.switch-control {
	min-height: 36px;
}

.category-distribution-body {
	grid-template-columns: minmax(230px, 0.75fr) minmax(260px, 1.25fr);
	align-items: center;
}
.category-distribution-legend {
	width: 100%;
}
.counterparty-spend-row {
	border-radius: 12px;
	padding: 14px 16px;
}

.month-story-card {
	padding: 28px;
}
.dashboard-grid {
	gap: 16px;
}
.breakdown-track {
	height: 8px;
	background: var(--surface-subtle);
}

.setup-panel {
	margin-top: 32px;
	background: var(--surface-subtle);
	box-shadow: none;
	opacity: 1;
}
.setup-panel .panel-header {
	margin-bottom: 20px;
}
.setup-panel h2 {
	font-size: 1.35rem;
}
.status-box,
.progress-card {
	border-radius: 12px;
	padding: 18px 20px;
}

.profile {
	position: static;
	max-width: 300px;
	min-height: 52px;
	border: 0;
	border-radius: 0;
	padding: 4px 0;
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
}

#profile {
	border: 1px solid transparent;
	border-radius: var(--radius-card);
	padding: 6px 10px;
	background: transparent;
	color: var(--ink);
	box-shadow: none;
	transform: none;
	transition:
		background 160ms ease,
		border-color 160ms ease;
}

#profile:hover {
	border-color: var(--accent-line);
	background: var(--accent-soft);
	color: var(--ink);
	box-shadow: none;
	transform: none;
}

#profile:active {
	background: var(--surface-pressed);
	transform: none;
}

#profile:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	background: var(--accent-soft);
	color: var(--ink);
	box-shadow: none;
}
.profile-photo {
	width: 42px;
	height: 42px;
}
.profile-photo-fallback {
	border: 1px solid var(--accent-line);
	font-size: 22px;
}

.transactions-table-wrap {
	border-radius: 16px;
	box-shadow: none;
}
.table-summary,
.table-category-filters,
.bulk-action-bar {
	padding: 20px 24px;
}
.transactions-table th,
.transactions-table td {
	padding: 18px 20px;
}
.transactions-table th {
	background: var(--surface-subtle);
}
.transactions-table tbody tr:hover {
	background: #f7f8fa;
}
.transactions-table td:last-child button,
.counterparty-detail-button,
.counterparty-category-select,
.bulk-action-bar button {
	min-height: 44px;
}
.counterparty-select-chip {
	min-height: 36px;
}

.empty {
	min-height: 180px;
	align-content: center;
	justify-items: center;
	border-radius: 16px;
	padding: 32px;
	text-align: center;
}

.empty-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

dialog.modal {
	max-width: min(640px, calc(100vw - 32px));
	border-radius: 20px;
	box-shadow: var(--shadow-xl);
}
.modal-inner {
	padding: 32px;
}
.modal-title {
	font-size: 1.65rem;
	font-weight: 700;
}
.modal-close {
	width: 44px;
	height: 44px;
	min-height: 44px;
}
.terms-check,
.category-settings-row,
.counterparty-detail-item {
	border-radius: 12px;
	background: var(--surface-subtle);
}

@media (max-width: 1120px) {
	.app-header-inner {
		width: min(100% - 48px, 1280px);
	}
	.shell {
		width: min(100% - 48px, 1280px);
	}
	.hero {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.panel-header,
	.dashboard-lead {
		grid-template-columns: 1fr;
		align-items: start;
	}
	.button-row {
		justify-content: flex-start;
	}
	.analysis-grid {
		grid-template-columns: 1fr;
	}
	.chart-body {
		grid-template-columns: minmax(180px, 220px) minmax(300px, 1fr);
	}
	.chart-summary {
		grid-column: 1 / -1;
		grid-template-columns: repeat(3, 1fr);
	}
	.profile {
		width: auto;
		margin: 0;
	}
}

@media (max-width: 800px) {
	.transactions-table-wrap {
		--detail-visible-rows: 5;
		--detail-viewport-max: 26rem;
	}

	.detail-table-viewport {
		max-height: clamp(20rem, 58vh, var(--detail-viewport-max));
	}

	.app-header-inner {
		grid-template-columns: 1fr auto;
		width: calc(100% - 24px);
		min-height: 68px;
	}
	.app-navigation {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-content: center;
		min-height: 48px;
	}
	.app-navigation-link {
		min-height: 48px;
	}
	.app-account .profile-info {
		display: none;
	}
	.demo-account > span:first-child {
		display: none;
	}
	.shell {
		width: min(100% - 24px, 1280px);
		padding-top: 24px;
	}
	.hero {
		min-height: 0;
		padding-bottom: 24px;
	}
	.product-brand {
		font-size: 0.95rem;
	}
	.panel {
		padding: 20px;
	}
	.panel-header {
		gap: 20px;
		margin-bottom: 24px;
	}
	.button-row > * {
		flex: 1 1 150px;
	}
	.category-distribution-body,
	.chart-body,
	.budget-card {
		grid-template-columns: 1fr;
	}
	.chart-summary {
		grid-column: auto;
		grid-template-columns: 1fr;
	}
	.profile {
		width: auto;
	}
	.transactions-table {
		min-width: 780px;
	}
	.modal-inner {
		padding: 24px;
	}
}

@media (max-width: 480px) {
	.app-header-inner {
		width: calc(100% - 16px);
	}
	.app-header .product-brand > span:last-child {
		max-width: 128px;
		line-height: 1.1;
	}
	.shell {
		width: calc(100% - 16px);
		padding-top: 16px;
	}
	h1 {
		font-size: 2.15rem;
	}
	.subtitle {
		font-size: 0.95rem;
	}
	.panel {
		padding: 16px;
		border-radius: var(--radius-featured);
	}
	.product-panel::before {
		border-radius: var(--radius-featured) var(--radius-featured) 0 0;
	}
	.button-row {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
	}
	.button-row > *,
	.button-row button,
	.button-row .button {
		width: 100%;
	}
	.period-controls {
		flex-direction: column;
	}
	.empty-actions {
		display: grid;
		width: 100%;
	}
	.empty-actions button {
		width: 100%;
	}
	.primary-money-card {
		min-height: 210px;
		padding: 22px;
	}
	.primary-money-card strong {
		font-size: clamp(2.25rem, 13vw, 3.2rem);
	}
	.metric-card,
	.insight-card,
	.chart-card,
	.breakdown-card,
	.category-distribution-card,
	.counterparty-spend-card,
	.budget-toggle-card,
	.month-story-card {
		padding: 18px;
	}
	.profile {
		width: auto;
	}
	dialog.modal {
		max-width: calc(100vw - 16px);
	}
	.modal-inner {
		padding: 20px 16px;
	}
}

.app-brand-group {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.demo-mode-badge {
	flex: 0 0 auto;
	padding: 5px 9px;
	border-radius: 999px;
	background: #ea580c;
	color: #ffffff;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.profile-photo-demo {
	border: 3px solid transparent;
	background:
		linear-gradient(#ffffff, #ffffff) padding-box,
		conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0)
		border-box;
	color: var(--ink);
	font-size: 1rem;
	font-weight: 800;
}

.demo-auth-modal-inner {
	text-align: center;
}
.demo-auth-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--warning-soft);
	color: #c2410c;
}
.demo-auth-modal-inner .modal-title {
	margin-right: 0;
	margin-bottom: 12px;
}
.demo-auth-description {
	max-width: 470px;
	margin: 0 auto;
	color: var(--ink-muted);
}
.demo-auth-actions {
	justify-content: center;
}

.cycle-reopen {
	min-height: 36px;
	padding: 0 12px;
}
dialog.modal.cycle-modal {
	max-width: min(500px, calc(100vw - 32px));
	max-height: calc(100dvh - 24px);
	overflow-y: auto;
}
.cycle-modal .modal-inner {
	padding: 20px 24px;
}
.cycle-modal .modal-title {
	margin: 2px 0 6px;
}
.cycle-modal [data-wizard-heading][tabindex="-1"]:focus {
	outline: none;
}
.cycle-description {
	margin: 0 0 10px;
	color: var(--ink-muted);
	font-size: var(--text-sm);
}
.cycle-range-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 10px;
}
.cycle-range-summary div {
	min-width: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-control);
	background: var(--surface-subtle);
	padding: 8px 10px;
}
.cycle-range-summary dt {
	color: var(--ink-muted);
	font-size: var(--text-xs);
	font-weight: 800;
	text-transform: uppercase;
}
.cycle-range-summary dd {
	margin: 2px 0 0;
	font-size: var(--text-sm);
	font-weight: 800;
}
.cycle-fields {
	margin-top: 10px;
}
.cycle-fields small {
	display: block;
	margin-top: 6px;
	color: var(--ink-muted);
	font-weight: 500;
}
.optional-label {
	color: var(--ink-muted);
	font-weight: 500;
}
.cycle-error {
	min-height: 1.25em;
	margin: 6px 0 0;
}
.cycle-modal .modal-actions {
	margin-top: 12px;
}
.cycle-modal [hidden],
#reopenFinancialCycle[hidden],
.month-picker[hidden] {
	display: none !important;
}
.cycle-calendar {
	margin: 0;
}
.cycle-calendar-help {
	margin: 6px 0 0;
	color: var(--ink-muted);
	font-size: var(--text-xs);
	line-height: 1.35;
}
.cycle-calendar-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.cycle-calendar-days {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
	text-align: center;
}
.cycle-calendar-days > span {
	color: var(--ink-muted);
	font-size: 0.75rem;
}
.cycle-calendar button {
	min-height: 32px;
	padding: 2px;
	background: transparent;
	color: var(--ink);
	box-shadow: none;
}
.cycle-calendar .cycle-day.is-future:not([aria-pressed="true"]) {
	color: var(--ink-muted);
	font-weight: 400;
}
.cycle-calendar .cycle-day[aria-pressed="true"] {
	background: var(--accent-soft);
	color: var(--accent);
}
.cycle-calendar .cycle-day[aria-current="date"] {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
	font-weight: 800;
}
.cycle-calendar button:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.app-brand-group {
		gap: 7px;
	}
	.demo-mode-badge {
		padding: 4px 7px;
		font-size: 0.62rem;
	}
}