﻿<script>
export default {
	onLaunch() {
		console.log('Bill Helper Launch')
	}
}
</script>

<style lang="scss">
page {
	background: #f4ede3;
	color: #16202a;
	font-family: 'PingFang SC', 'HarmonyOS Sans SC', sans-serif;
	--bg-app: #f4ede3;
	--bg-accent: linear-gradient(135deg, #102a43 0%, #1f6f5f 100%);
	--surface-card: rgba(255, 255, 255, 0.9);
	--surface-strong: #ffffff;
	--surface-muted: rgba(255, 255, 255, 0.68);
	--text-primary: #16202a;
	--text-secondary: #617081;
	--text-muted: #91a0af;
	--line-soft: rgba(22, 32, 42, 0.08);
	--brand: #1f6f5f;
	--brand-soft: rgba(31, 111, 95, 0.14);
	--danger: #d25543;
	--danger-soft: rgba(210, 85, 67, 0.14);
	--warning: #c48a1f;
	--shadow-card: 0 18rpx 40rpx rgba(16, 42, 67, 0.08);
}

view,
text,
button,
input,
textarea,
scroll-view {
	box-sizing: border-box;
}

button {
	margin: 0;
	padding: 0;
	background: transparent;
	line-height: 1;
	border: 0;
}

button::after {
	border: 0;
}

.app-page {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
	min-height: 100vh;
	padding: 28rpx 28rpx 188rpx;
	background:
		radial-gradient(circle at top right, rgba(31, 111, 95, 0.16), transparent 32%),
		var(--bg-app);
	color: var(--text-primary);
}

.theme-dark {
	--bg-app: #0f1720;
	--bg-accent: linear-gradient(135deg, #09111a 0%, #1d4e46 100%);
	--surface-card: rgba(19, 29, 40, 0.92);
	--surface-strong: #162331;
	--surface-muted: rgba(24, 35, 49, 0.76);
	--text-primary: #eef5fb;
	--text-secondary: #9db0c2;
	--text-muted: #7c90a3;
	--line-soft: rgba(255, 255, 255, 0.08);
	--brand: #64c6a9;
	--brand-soft: rgba(100, 198, 169, 0.14);
	--danger: #ff8c78;
	--danger-soft: rgba(255, 140, 120, 0.14);
	--warning: #f2c56d;
	--shadow-card: 0 18rpx 48rpx rgba(0, 0, 0, 0.28);
}

.surface-card {
	background: var(--surface-card);
	border: 1rpx solid var(--line-soft);
	border-radius: 30rpx;
	box-shadow: var(--shadow-card);
	backdrop-filter: blur(12rpx);
}

.surface-strong {
	background: var(--surface-strong);
}

.section-title {
	font-size: 34rpx;
	font-weight: 600;
	color: var(--text-primary);
}

.section-subtitle {
	font-size: 24rpx;
	color: var(--text-secondary);
}

.pill-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 18rpx 24rpx;
	border-radius: 999rpx;
	background: var(--surface-muted);
	color: var(--text-secondary);
	font-size: 24rpx;
}

.pill-button.active {
	background: var(--brand);
	color: #ffffff;
}

.primary-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 22rpx 28rpx;
	border-radius: 24rpx;
	background: var(--bg-accent);
	color: #ffffff;
	font-size: 28rpx;
	font-weight: 600;
}

.ghost-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 26rpx;
	border-radius: 22rpx;
	background: var(--brand-soft);
	color: var(--brand);
	font-size: 26rpx;
	font-weight: 600;
}

.danger-button {
	background: var(--danger-soft);
	color: var(--danger);
}

.input-shell {
	display: flex;
	align-items: center;
	min-height: 86rpx;
	padding: 0 24rpx;
	border-radius: 24rpx;
	background: var(--surface-muted);
	border: 1rpx solid transparent;
}

.input-shell input,
.input-shell textarea {
	width: 100%;
	font-size: 28rpx;
	color: var(--text-primary);
}

.muted-text {
	color: var(--text-secondary);
}

.tiny-text {
	font-size: 22rpx;
	color: var(--text-muted);
}

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

.negative {
	color: var(--danger);
}
</style>


