@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
	--bg: #FBF7F3;
	--bg-card: #FFFFFF;
	--bg-soft: #F3EEE7;
	--bg-hover: #EFE8DD;

	--ink: #2A2438;
	--ink-soft: #5C5470;
	--ink-mute: #9089A0;

	--mint: #4FB99F;
	--mint-soft: #E0F2EC;
	--coral: #F26B5E;
	--coral-soft: #FCE3DF;
	--gold: #E8B14B;
	--gold-soft: #FBEFD3;
	--lilac: #8C7AC6;
	--lilac-soft: #ECE6F8;

	--border: #E5DCCE;
	--border-strong: #CFC2AC;

	--shadow-sm: 0 1px 2px rgba(42, 36, 56, 0.05), 0 2px 6px rgba(42, 36, 56, 0.04);
	--shadow-md: 0 4px 14px rgba(42, 36, 56, 0.08);

	--radius: 12px;
	--radius-sm: 8px;
	--radius-lg: 18px;

	--font-display: 'Fraunces', Georgia, serif;
	--font-body: 'DM Sans', system-ui, sans-serif;
}

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

html { font-size: 14px; -webkit-font-smoothing: antialiased; }

body {
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--bg);
	line-height: 1.4;
	min-height: 100vh;
	background-image:
		radial-gradient(circle at 15% 8%, rgba(140, 122, 198, 0.07), transparent 40%),
		radial-gradient(circle at 85% 92%, rgba(79, 185, 159, 0.08), transparent 45%);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.4px; color: var(--ink); }
h1 { font-size: 1.8rem; font-weight: 700; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.92rem; font-family: var(--font-body); font-weight: 700; }

a { color: var(--lilac); text-decoration: none; }
a:hover { color: #6B58A8; }

/* layout */
.app {
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 20px 60px;
}

.brand {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 22px;
	flex-wrap: wrap;
	gap: 8px;
}

.brand h1 {
	font-size: 2rem;
	font-weight: 700;
}

.brand h1 .accent { color: var(--mint); font-style: italic; }

.brand .tagline {
	font-family: var(--font-display);
	font-style: italic;
	color: var(--ink-mute);
	font-size: 0.95rem;
}

/* tabs */
.tabs {
	display: flex;
	gap: 4px;
	background: var(--bg-card);
	padding: 6px;
	border-radius: 999px;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border);
	margin-bottom: 22px;
	width: fit-content;
}

.tab {
	padding: 9px 22px;
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--ink-soft);
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.18s;
	background: none;
	border: none;
	font-family: var(--font-body);
}

.tab:hover { color: var(--ink); }
.tab.active { background: var(--ink); color: #fff; box-shadow: 0 2px 8px rgba(42, 36, 56, 0.18); }

.panel { display: none; animation: slideUp 0.25s ease; }
.panel.active { display: block; }

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

/* cards */
.card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px 20px;
	box-shadow: var(--shadow-sm);
	margin-bottom: 16px;
}

.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px dashed var(--border);
}

.card-header h2, .card-header h3 { margin: 0; }

/* kpi */
.kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin-bottom: 22px;
}

.kpi {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px 20px;
	box-shadow: var(--shadow-sm);
	position: relative;
	overflow: hidden;
}

.kpi::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--mint);
}

.kpi.coral::before { background: var(--coral); }
.kpi.gold::before { background: var(--gold); }
.kpi.lilac::before { background: var(--lilac); }

.kpi .label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--ink-mute);
	margin-bottom: 6px;
}

.kpi .value {
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -1px;
}

.kpi .sub {
	font-size: 0.78rem;
	color: var(--ink-soft);
	margin-top: 4px;
}

/* tables */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }

table { width: 100%; border-collapse: collapse; }

thead th {
	background: var(--bg-soft);
	color: var(--ink-soft);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var(--border-strong);
}

tbody td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--border);
	font-size: 0.88rem;
	vertical-align: middle;
}

tbody tr:nth-child(even) td { background: rgba(243, 238, 231, 0.4); }
tbody tr:hover td { background: var(--bg-hover); }

td.amount { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; }
td.income { color: var(--mint); }
td.expense { color: var(--coral); }

/* forms */
.form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	align-items: end;
}

.field { display: flex; flex-direction: column; gap: 4px; }

label {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
	height: 38px;
	padding: 0 12px;
	background: var(--bg-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 0.92rem;
	transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--lilac);
	box-shadow: 0 0 0 3px var(--lilac-soft);
}

textarea { height: auto; min-height: 60px; padding: 8px 12px; resize: vertical; }

/* buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 18px;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: all 0.15s;
	height: 38px;
}

.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #1A1426; transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-mint { background: var(--mint); color: #fff; }
.btn-mint:hover { background: #3DA48B; }

.btn-ghost { background: transparent; color: var(--ink-soft); padding: 6px 10px; }
.btn-ghost:hover { color: var(--coral); background: var(--coral-soft); }

.btn-sm { height: 30px; padding: 0 12px; font-size: 0.78rem; }

/* badges */
.pill {
	display: inline-block;
	padding: 3px 10px;
	font-size: 0.7rem;
	font-weight: 700;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.pill-mint { background: var(--mint-soft); color: #2D8068; }
.pill-coral { background: var(--coral-soft); color: #B8392E; }
.pill-gold { background: var(--gold-soft); color: #8C6212; }
.pill-lilac { background: var(--lilac-soft); color: #5E4A9A; }
.pill-mute { background: var(--bg-soft); color: var(--ink-mute); }

/* bill row helpers */
.due-soon { color: var(--coral); font-weight: 600; }
.due-ok { color: var(--ink-soft); }

.empty {
	text-align: center;
	padding: 36px 18px;
	color: var(--ink-mute);
	font-style: italic;
}

.flash {
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	margin-bottom: 14px;
	font-size: 0.88rem;
	font-weight: 500;
}
.flash-success { background: var(--mint-soft); color: #2D8068; }
.flash-error { background: var(--coral-soft); color: #B8392E; }

@media (max-width: 640px) {
	.brand h1 { font-size: 1.5rem; }
	.tabs { width: 100%; overflow-x: auto; }
	.kpi-grid { grid-template-columns: 1fr 1fr; }
	.kpi .value { font-size: 1.5rem; }
}