:root {
	--bg: #06140d;
	--bg-2: #0a1d13;
	--panel: rgba(12, 30, 20, 0.86);
	--panel-2: rgba(17, 43, 28, 0.92);
	--panel-3: rgba(21, 58, 38, 0.88);
	--border: rgba(178, 255, 204, 0.13);
	--border-strong: rgba(179, 255, 204, 0.24);

	--text: #f2fff7;
	--muted: rgba(242, 255, 247, 0.64);
	--soft: rgba(242, 255, 247, 0.42);

	--green: #34f78d;
	--green-2: #12c96d;
	--green-soft: rgba(52, 247, 141, 0.18);

	--yellow: #ffd166;
	--yellow-soft: rgba(255, 209, 102, 0.16);

	--red: #ff5f6d;
	--red-soft: rgba(255, 95, 109, 0.17);

	--blue: #7dd3fc;
	--blue-soft: rgba(125, 211, 252, 0.15);

	--shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
	--shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.28);

	--radius-xl: 30px;
	--radius-lg: 24px;
	--radius-md: 18px;
	--radius-sm: 14px;

	--header-height: 86px;
	--dock-height: 82px;
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-top: env(safe-area-inset-top, 0px);
}

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

html {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--bg);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	touch-action: manipulation;
}

body {
	width: 100%;
	height: 100%;
	min-height: 100%;
	margin: 0;
	overflow: hidden;
	background:
		radial-gradient(circle at 20% -10%, rgba(52, 247, 141, 0.22), transparent 34%),
		radial-gradient(circle at 90% 8%, rgba(18, 201, 109, 0.15), transparent 32%),
		linear-gradient(160deg, #031009 0%, #06140d 44%, #0b2115 100%);
	color: var(--text);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
	overscroll-behavior: none;
	-webkit-user-select: none;
	user-select: none;
}

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

button {
	border: 0;
	color: inherit;
	cursor: pointer;
}

input,
select,
textarea {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 18px;
	background: rgba(1, 8, 5, 0.45);
	color: var(--text);
	outline: none;
	padding: 14px 15px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
	-webkit-user-select: text;
	user-select: text;
}

input:focus,
select:focus,
textarea:focus {
	border-color: rgba(52, 247, 141, 0.48);
	box-shadow:
		0 0 0 4px rgba(52, 247, 141, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

textarea {
	resize: none;
}

select {
	appearance: none;
	-webkit-appearance: none;
}

::placeholder {
	color: rgba(242, 255, 247, 0.32);
}

.app-shell {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100dvh;
	min-height: 100dvh;
	overflow: hidden;
	isolation: isolate;
}

.screen {
	position: absolute;
	inset: 0;
	display: none;
	overflow: hidden;
}

.screen.is-active {
	display: block;
}

.auth-screen {
	padding:
		calc(20px + var(--safe-top)) 18px calc(20px + var(--safe-bottom));
	place-items: center;
	background:
		radial-gradient(circle at 28% 18%, rgba(52, 247, 141, 0.24), transparent 32%),
		radial-gradient(circle at 78% 72%, rgba(18, 201, 109, 0.12), transparent 32%);
}

.auth-screen.is-active {
	display: grid;
}

.auth-bg-glow {
	position: absolute;
	width: 260px;
	height: 260px;
	border-radius: 999px;
	filter: blur(40px);
	opacity: 0.5;
	pointer-events: none;
}

.auth-bg-glow-one {
	top: -90px;
	left: -70px;
	background: rgba(52, 247, 141, 0.28);
}

.auth-bg-glow-two {
	right: -90px;
	bottom: 40px;
	background: rgba(18, 201, 109, 0.24);
}

.auth-card {
	position: relative;
	z-index: 2;
	width: min(430px, 100%);
	padding: 22px;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background:
		linear-gradient(180deg, rgba(16, 43, 28, 0.88), rgba(7, 20, 13, 0.92)),
		radial-gradient(circle at top left, rgba(52, 247, 141, 0.18), transparent 42%);
	box-shadow: var(--shadow);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
}

.brand-lockup {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 18px;
}

.brand-mark {
	width: 70px;
	height: 70px;
	border-radius: 24px;
	overflow: hidden;
	box-shadow:
		0 16px 38px rgba(0, 0, 0, 0.38),
		0 0 34px rgba(52, 247, 141, 0.18);
	background: rgba(0, 0, 0, 0.3);
	flex: 0 0 auto;
}

.brand-mark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.eyebrow {
	margin: 0 0 5px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--green);
}

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

.auth-card h1 {
	margin: 0;
	font-size: 1.45rem;
	line-height: 1.06;
	letter-spacing: -0.05em;
}

.auth-copy {
	margin: 0 0 18px;
	color: var(--muted);
	line-height: 1.45;
}

.auth-toggle {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px;
	padding: 6px;
	border: 1px solid var(--border);
	border-radius: 18px;
	background: rgba(0, 0, 0, 0.22);
	margin-bottom: 16px;
}

.auth-toggle-button {
	padding: 12px;
	border-radius: 14px;
	background: transparent;
	color: var(--muted);
	font-weight: 800;
}

.auth-toggle-button.is-active {
	background: linear-gradient(135deg, rgba(52, 247, 141, 0.26), rgba(18, 201, 109, 0.2));
	color: var(--text);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.auth-form {
	display: none;
	gap: 12px;
}

.auth-form.is-active {
	display: grid;
}

.field {
	display: grid;
	gap: 8px;
}

.field span {
	font-size: 0.78rem;
	font-weight: 800;
	color: var(--muted);
}

.form-message {
	min-height: 20px;
	margin: 13px 0 0;
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1.35;
}

.main-app {
	background:
		radial-gradient(circle at 20% -14%, rgba(52, 247, 141, 0.2), transparent 38%),
		radial-gradient(circle at 84% 20%, rgba(125, 211, 252, 0.08), transparent 30%),
		linear-gradient(180deg, #06140d 0%, #07170f 100%);
}

.main-app.is-active {
	display: grid;
	grid-template-rows: auto 1fr auto;
}

.app-header {
	height: calc(var(--header-height) + var(--safe-top));
	padding:
		calc(14px + var(--safe-top)) 18px 12px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 15px;
	border-bottom: 1px solid rgba(178, 255, 204, 0.07);
	background: linear-gradient(180deg, rgba(6, 20, 13, 0.96), rgba(6, 20, 13, 0.72));
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	z-index: 10;
}

.app-header h2 {
	margin: 0;
	font-size: 1.85rem;
	line-height: 1;
	letter-spacing: -0.07em;
}

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

.icon-button,
.avatar-button {
	width: 44px;
	height: 44px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid var(--border);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
	font-weight: 900;
}

.avatar-button {
	background: linear-gradient(135deg, rgba(52, 247, 141, 0.26), rgba(18, 201, 109, 0.12));
	color: var(--green);
}

.app-content {
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 16px 16px calc(var(--dock-height) + var(--safe-bottom) + 28px);
	scrollbar-width: none;
}

.app-content::-webkit-scrollbar {
	display: none;
}

.page {
	display: none;
	max-width: 760px;
	margin: 0 auto;
	animation: pageIn 160ms ease-out;
}

.page.is-active {
	display: block;
}

@keyframes pageIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-card,
.section-card {
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background:
		linear-gradient(180deg, rgba(17, 43, 28, 0.88), rgba(8, 23, 15, 0.9)),
		radial-gradient(circle at top left, rgba(52, 247, 141, 0.12), transparent 38%);
	box-shadow: var(--shadow-soft);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.hero-card {
	padding: 22px;
	margin-bottom: 14px;
	overflow: hidden;
	position: relative;
}

.hero-card::before {
	content: "";
	position: absolute;
	inset: auto -30px -70px auto;
	width: 160px;
	height: 160px;
	border-radius: 999px;
	background: rgba(52, 247, 141, 0.12);
	filter: blur(10px);
	pointer-events: none;
}

.hero-top {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: flex-start;
}

.hero-label {
	margin: 0 0 4px;
	color: var(--muted);
	font-weight: 800;
	font-size: 0.88rem;
}

#safeToSpendAmount {
	margin: 0;
	font-size: clamp(2.6rem, 13vw, 4.9rem);
	line-height: 0.92;
	letter-spacing: -0.1em;
}

.hero-message {
	position: relative;
	z-index: 1;
	margin: 16px 0;
	color: var(--muted);
	line-height: 1.42;
}

.hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 9px;
}

.mini-stat {
	padding: 12px;
	border: 1px solid rgba(178, 255, 204, 0.09);
	border-radius: 18px;
	background: rgba(0, 0, 0, 0.18);
	min-width: 0;
}

.mini-stat span {
	display: block;
	margin-bottom: 5px;
	color: var(--soft);
	font-size: 0.72rem;
	font-weight: 800;
}

.mini-stat strong {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.94rem;
}

.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.06);
	font-size: 0.78rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.status-pill span:first-child,
#statusDot {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: var(--blue);
	box-shadow: 0 0 16px var(--blue);
}

.status-green {
	color: var(--green);
	background: var(--green-soft);
	border-color: rgba(52, 247, 141, 0.26);
}

.status-green #statusDot {
	background: var(--green);
	box-shadow: 0 0 17px var(--green);
}

.status-yellow {
	color: var(--yellow);
	background: var(--yellow-soft);
	border-color: rgba(255, 209, 102, 0.28);
}

.status-yellow #statusDot {
	background: var(--yellow);
	box-shadow: 0 0 17px var(--yellow);
}

.status-red {
	color: var(--red);
	background: var(--red-soft);
	border-color: rgba(255, 95, 109, 0.28);
}

.status-red #statusDot {
	background: var(--red);
	box-shadow: 0 0 17px var(--red);
}

.status-info {
	color: var(--blue);
	background: var(--blue-soft);
	border-color: rgba(125, 211, 252, 0.2);
}

.quick-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 9px;
	margin-bottom: 14px;
}

.quick-action {
	min-height: 84px;
	padding: 12px 8px;
	border-radius: 22px;
	border: 1px solid var(--border);
	background:
		linear-gradient(180deg, rgba(17, 43, 28, 0.86), rgba(8, 23, 15, 0.86));
	box-shadow: var(--shadow-soft);
	display: grid;
	place-items: center;
	gap: 7px;
	color: var(--text);
	font-weight: 850;
	font-size: 0.78rem;
}

.quick-icon {
	width: 34px;
	height: 34px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	background: rgba(52, 247, 141, 0.14);
	border: 1px solid rgba(52, 247, 141, 0.16);
}

.section-card {
	padding: 17px;
	margin-bottom: 14px;
}

.section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
}

.section-heading h3 {
	margin: 0;
	font-size: 1.12rem;
	letter-spacing: -0.04em;
}

.primary-button,
.secondary-button,
.small-button {
	min-height: 44px;
	border-radius: 16px;
	padding: 0 15px;
	font-weight: 900;
	letter-spacing: -0.01em;
}

.primary-button {
	background: linear-gradient(135deg, var(--green), var(--green-2));
	color: #031009;
	box-shadow:
		0 14px 34px rgba(18, 201, 109, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.secondary-button {
	background: rgba(255, 255, 255, 0.07);
	color: var(--text);
	border: 1px solid var(--border);
}

.small-button {
	min-height: 36px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.07);
	color: var(--text);
	border: 1px solid var(--border);
	font-size: 0.8rem;
}

.compact-button {
	min-height: 38px;
	border-radius: 14px;
	padding: 0 13px;
	font-size: 0.82rem;
}

.full-button {
	width: 100%;
}

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

.button-row>button {
	flex: 1;
}

button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.segmented-control {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px;
	padding: 6px;
	border: 1px solid var(--border);
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.2);
	margin-bottom: 14px;
}

.segment-button {
	min-height: 44px;
	border-radius: 15px;
	background: transparent;
	color: var(--muted);
	font-weight: 900;
}

.segment-button.is-active {
	color: var(--text);
	background: linear-gradient(135deg, rgba(52, 247, 141, 0.22), rgba(18, 201, 109, 0.13));
	border: 1px solid rgba(52, 247, 141, 0.14);
}

.money-panel {
	display: none;
}

.money-panel.is-active {
	display: block;
}

.form-card {
	display: grid;
	gap: 13px;
}

.two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.item-list {
	display: grid;
	gap: 10px;
}

.empty-state {
	color: var(--soft);
	font-size: 0.92rem;
	line-height: 1.35;
}

.list-item {
	border: 1px solid rgba(178, 255, 204, 0.1);
	border-radius: 20px;
	padding: 13px;
	background: rgba(0, 0, 0, 0.18);
	display: grid;
	gap: 7px;
}

.list-item-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.list-item h4 {
	margin: 0;
	font-size: 0.98rem;
	letter-spacing: -0.03em;
}

.list-item p {
	margin: 0;
	color: var(--muted);
	font-size: 0.86rem;
	line-height: 1.35;
}

.amount-positive {
	color: var(--green);
}

.amount-negative {
	color: var(--red);
}

.amount-neutral {
	color: var(--muted);
}

.tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tag {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--muted);
	font-size: 0.72rem;
	font-weight: 800;
}

.forecast-list {
	display: grid;
	gap: 9px;
}

.forecast-row {
	display: grid;
	grid-template-columns: 86px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 11px;
	border: 1px solid rgba(178, 255, 204, 0.09);
	border-radius: 18px;
	background: rgba(0, 0, 0, 0.16);
}

.forecast-date {
	color: var(--soft);
	font-size: 0.78rem;
	font-weight: 800;
}

.forecast-info {
	min-width: 0;
}

.forecast-info strong {
	display: block;
	font-size: 0.9rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.forecast-info span {
	display: block;
	margin-top: 2px;
	color: var(--soft);
	font-size: 0.75rem;
}

.brief-box,
.profile-box,
.result-card {
	color: var(--muted);
	line-height: 1.42;
}

.result-card h3 {
	margin-bottom: 8px;
}

.ai-card {
	min-height: 360px;
	display: grid;
	grid-template-rows: auto 1fr auto;
}

.ai-conversation {
	min-height: 220px;
	max-height: 48dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-right: 2px;
	scrollbar-width: none;
}

.ai-conversation::-webkit-scrollbar {
	display: none;
}

.ai-message {
	max-width: 86%;
	padding: 12px 13px;
	border-radius: 18px;
	border: 1px solid rgba(178, 255, 204, 0.09);
	background: rgba(0, 0, 0, 0.2);
	line-height: 1.4;
}

.ai-message strong {
	display: block;
	margin-bottom: 4px;
	font-size: 0.78rem;
	color: var(--green);
}

.ai-message p {
	margin: 0;
	color: var(--muted);
	font-size: 0.9rem;
}

.user-message {
	align-self: flex-end;
	background: rgba(52, 247, 141, 0.14);
	border-color: rgba(52, 247, 141, 0.16);
}

.assistant-message {
	align-self: flex-start;
}

.ai-input-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 9px;
	margin-top: 14px;
}

.send-button {
	min-width: 70px;
}

.muted-text {
	color: var(--muted);
	line-height: 1.4;
	margin-bottom: 0;
}

.bottom-dock {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(9px + var(--safe-bottom));
	height: var(--dock-height);
	padding: 8px;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 6px;
	border: 1px solid rgba(178, 255, 204, 0.14);
	border-radius: 28px;
	background:
		linear-gradient(180deg, rgba(19, 42, 29, 0.86), rgba(4, 13, 8, 0.9));
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.52),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	z-index: 40;
}

.dock-button {
	border-radius: 21px;
	background: transparent;
	color: rgba(242, 255, 247, 0.5);
	display: grid;
	place-items: center;
	align-content: center;
	gap: 3px;
	font-weight: 900;
}

.dock-button span {
	font-size: 1.05rem;
	line-height: 1;
}

.dock-button small {
	font-size: 0.62rem;
	line-height: 1;
	font-weight: 900;
}

.dock-button.is-active {
	color: var(--text);
	background: rgba(52, 247, 141, 0.13);
	box-shadow: inset 0 0 0 1px rgba(52, 247, 141, 0.12);
}

.dock-center {
	background:
		linear-gradient(135deg, rgba(52, 247, 141, 0.92), rgba(18, 201, 109, 0.86));
	color: #031009;
	box-shadow: 0 10px 26px rgba(18, 201, 109, 0.22);
}

.dock-center.is-active {
	color: #031009;
	background:
		linear-gradient(135deg, rgba(52, 247, 141, 1), rgba(18, 201, 109, 0.92));
}

.toast {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: calc(var(--dock-height) + var(--safe-bottom) + 24px);
	min-height: 48px;
	padding: 13px 15px;
	border-radius: 18px;
	background: rgba(4, 13, 8, 0.92);
	border: 1px solid var(--border-strong);
	box-shadow: var(--shadow-soft);
	color: var(--text);
	font-weight: 800;
	line-height: 1.25;
	z-index: 80;
	transform: translateY(18px);
	opacity: 0;
	pointer-events: none;
	transition: 160ms ease;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.toast.is-visible {
	transform: translateY(0);
	opacity: 1;
}

.loading-overlay {
	position: fixed;
	inset: 0;
	display: none;
	place-items: center;
	background: rgba(0, 0, 0, 0.45);
	z-index: 100;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.loading-overlay.is-visible {
	display: grid;
}

.loading-card {
	width: min(260px, calc(100% - 40px));
	padding: 22px;
	border: 1px solid var(--border);
	border-radius: 24px;
	background: rgba(8, 23, 15, 0.94);
	box-shadow: var(--shadow);
	display: grid;
	place-items: center;
	gap: 13px;
}

.loading-card p {
	margin: 0;
	color: var(--muted);
	font-weight: 800;
}

.loading-spinner {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 3px solid rgba(52, 247, 141, 0.18);
	border-top-color: var(--green);
	animation: spin 700ms linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

@media (min-width: 820px) {
	.main-app.is-active {
		grid-template-rows: auto 1fr;
	}

	.app-header {
		padding-left: 28px;
		padding-right: 28px;
	}

	.app-content {
		padding: 24px 24px 110px;
	}

	.bottom-dock {
		left: 50%;
		right: auto;
		width: min(520px, calc(100% - 24px));
		transform: translateX(-50%);
	}

	.hero-card {
		padding: 28px;
	}

	.section-card {
		padding: 22px;
	}
}

@media (max-width: 430px) {
	:root {
		--header-height: 78px;
		--dock-height: 78px;
	}

	.app-content {
		padding-left: 13px;
		padding-right: 13px;
	}

	.app-header {
		padding-left: 15px;
		padding-right: 15px;
	}

	.quick-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 7px;
	}

	.quick-action {
		min-height: 76px;
		border-radius: 20px;
		font-size: 0.72rem;
		padding: 10px 5px;
	}

	.quick-icon {
		width: 31px;
		height: 31px;
		border-radius: 13px;
	}

	.hero-grid {
		gap: 7px;
	}

	.mini-stat {
		padding: 10px 8px;
		border-radius: 16px;
	}

	.mini-stat span {
		font-size: 0.66rem;
	}

	.mini-stat strong {
		font-size: 0.82rem;
	}

	.section-card {
		padding: 15px;
		border-radius: 26px;
	}

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

	.forecast-row {
		grid-template-columns: 1fr;
	}

	.bottom-dock {
		left: 10px;
		right: 10px;
		bottom: calc(8px + var(--safe-bottom));
		border-radius: 26px;
	}

	.dock-button {
		border-radius: 19px;
	}

	.dock-button small {
		font-size: 0.58rem;
	}
}

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

	.hero-top {
		display: grid;
	}

	.status-pill {
		width: fit-content;
	}

	#safeToSpendAmount {
		font-size: 2.5rem;
	}
}

/* ============================================================
   GREENLIGHT PRO CLEAN MOBILE SCROLL SYSTEM
   Body never scrolls. Only auth/app content scroll.
   Blocks iPhone rubber-band without making normal scroll glitchy.
   ============================================================ */

html,
body {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
	background: var(--bg);
}

body {
	touch-action: none;
}

.app-shell {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100dvh;
	min-height: 100dvh;
	overflow: hidden;
}

.screen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

.auth-screen {
	display: none;
	width: 100%;
	height: 100dvh;
	min-height: 100dvh;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: none;
	touch-action: pan-y;
	padding:
		calc(18px + var(--safe-top)) 18px calc(34px + var(--safe-bottom));
	place-items: initial;
}

.auth-screen.is-active {
	display: block !important;
}

.auth-card {
	width: min(430px, 100%);
	margin:
		max(14px, var(--safe-top)) auto calc(34px + var(--safe-bottom));
}

.main-app.is-active {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	width: 100%;
	height: 100dvh;
	min-height: 0;
	overflow: hidden;
}

.app-header {
	flex: 0 0 auto;
}

.app-content {
	height: 100%;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: none;
	touch-action: pan-y;
	padding-bottom: calc(var(--dock-height) + var(--safe-bottom) + 34px);
}

.ai-conversation {
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: none;
	touch-action: pan-y;
}

.page {
	min-height: auto;
	padding-bottom: 2px;
}

.bottom-dock {
	touch-action: manipulation;
}

button,
.dock-button,
.quick-action,
.primary-button,
.secondary-button,
.small-button,
.segment-button,
.auth-toggle-button,
.icon-button,
.avatar-button {
	touch-action: manipulation;
}

input,
textarea,
select {
	touch-action: manipulation;
	-webkit-user-select: text;
	user-select: text;
}

@supports (-webkit-touch-callout: none) {

	.app-shell,
	.auth-screen,
	.main-app.is-active {
		height: -webkit-fill-available;
		min-height: -webkit-fill-available;
	}
}
/* Settings: Set Cash Now spacing */
.cash-now-form {
display: flex;
flex-direction: column;
gap: 22px;
margin-top: 22px;
}

.cash-now-form .input-group {
margin-bottom: 0;
}

.cash-now-form .primary-button {
width: 100%;
margin-top: 4px;
}

#settingsPage #cashNowForm input {
margin-top: 10px;
}

/* Edit mode helpers */
.is-hidden {
display: none !important;
}

.edit-cancel-button {
margin-top: 12px;
}




/* v113 final card amount, button, and AI layout fix */
.list-item,
.list-item-top,
.list-item-top > div {
	max-width: 100%;
	min-width: 0;
}

.list-item {
	overflow: hidden;
}

.list-item h4,
.list-item p {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

#incomeList .list-item-top,
#expenseList .list-item-top,
#purchaseTestList .list-item-top,
#recurringRulesList .list-item-top,
#bankAccountsList .list-item-top,
#transactionsList .list-item-top {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) max-content !important;
	align-items: start !important;
	gap: 10px !important;
}

#incomeList .list-item-top > strong,
#expenseList .list-item-top > strong,
#purchaseTestList .list-item-top > strong,
#recurringRulesList .list-item-top > strong,
#bankAccountsList .list-item-top > strong,
#transactionsList .list-item-top > strong {
	justify-self: end !important;
	max-width: none !important;
	min-width: max-content !important;
	white-space: nowrap !important;
	overflow: visible !important;
	text-overflow: clip !important;
	text-align: right !important;
	font-size: clamp(0.98rem, 4.35vw, 1.18rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.045em !important;
	word-break: normal !important;
	overflow-wrap: normal !important;
}

#incomeList .button-row,
#expenseList .button-row,
#recurringRulesList .button-row {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 8px !important;
	max-width: 100% !important;
}

#purchaseTestList .button-row,
#bankAccountsList .button-row {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 8px !important;
	max-width: 100% !important;
}

#incomeList .button-row > button,
#expenseList .button-row > button,
#purchaseTestList .button-row > button,
#recurringRulesList .button-row > button,
#bankAccountsList .button-row > button {
	min-width: 0 !important;
	width: 100% !important;
	padding-left: 7px !important;
	padding-right: 7px !important;
	font-size: clamp(0.72rem, 3.35vw, 0.82rem) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

#transactionsList .tag-row,
#recurringRulesList .tag-row {
	max-width: 100%;
	overflow: hidden;
}

#transactionsList .tag,
#recurringRulesList .tag {
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

#aiInsightsList .list-item {
	padding: 14px !important;
	gap: 10px !important;
}

#aiInsightsList .list-item-top {
	display: block !important;
}

#aiInsightsList .list-item-top > div {
	width: 100% !important;
	max-width: 100% !important;
	overflow: visible !important;
}

#aiInsightsList .list-item h4 {
	font-size: 1rem !important;
	line-height: 1.15 !important;
	margin-bottom: 7px !important;
}

#aiInsightsList .list-item p {
	font-size: 0.86rem !important;
	line-height: 1.38 !important;
	white-space: normal !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	text-overflow: clip !important;
}

#aiInsightsList .tag-row {
	margin-top: 2px !important;
}

#aiInsightsList .button-row {
	margin-top: 4px !important;
}


/* v115 clean decision/result + cash-source polish */
#purchaseResultCard {
transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

#purchaseResultCard #purchaseResultTitle {
letter-spacing: -0.04em;
}

#purchaseResultCard.purchase-result-green {
border-color: rgba(52, 247, 141, 0.34);
background: linear-gradient(180deg, rgba(17, 43, 28, 0.9), rgba(8, 23, 15, 0.92));
}

#purchaseResultCard.purchase-result-green #purchaseResultTitle {
color: var(--green);
}

#purchaseResultCard.purchase-result-yellow {
border-color: rgba(255, 209, 102, 0.38);
background: linear-gradient(180deg, rgba(43, 35, 17, 0.82), rgba(8, 23, 15, 0.92));
}

#purchaseResultCard.purchase-result-yellow #purchaseResultTitle {
color: var(--yellow);
}

#purchaseResultCard.purchase-result-red {
border-color: rgba(255, 95, 109, 0.42);
background: linear-gradient(180deg, rgba(47, 18, 23, 0.82), rgba(8, 23, 15, 0.92));
}

#purchaseResultCard.purchase-result-red #purchaseResultTitle {
color: var(--red);
}

.cash-source-note {
margin: 10px 0 0;
padding: 11px 12px;
border: 1px solid rgba(178, 255, 204, 0.1);
border-radius: 16px;
background: rgba(0, 0, 0, 0.16);
font-size: 0.82rem;
line-height: 1.34;
}

.cash-source-note.is-plaid-controlled {
border-color: rgba(125, 211, 252, 0.18);
background: rgba(125, 211, 252, 0.08);
}