:root {
	--bg-top: #f3f8ff;
	--bg-bottom: #dce9ff;
	--card: #ffffff;
	--ink: #102446;
	--muted: #3d5f94;
	--muted-strong: #2e4f87;
	--accent: #1e59db;
	--accent-strong: #123f9f;
	--good: #2c9a8f;
	--danger: #305ad4;
	--line: #8fb2ec;
	--radius-sm: 10px;
	--radius-md: 12px;
	--radius-lg: 14px;
	--radius-xl: 16px;
	--radius-pill: 999px;
	--control-radius: var(--radius-sm);
	--panel-radius: var(--radius-md);
	--card-radius: var(--radius-lg);
	--control-min-height: 2.24rem;
	--control-padding-y: 0.42rem;
	--control-padding-x: 0.62rem;
	--btn-padding-y: 0.56rem;
	--btn-padding-x: 0.84rem;
	--btn-font-size: 1rem;
}
 
[data-theme="dark"] {
	--bg-top: #0c1426;
	--bg-bottom: #111c34;
	--card: #17223d;
	--ink: #e8efff;
	--muted: #b5c3e6;
	--muted-strong: #d2def8;
	--accent: #4f83ff;
	--accent-strong: #2f5ec4;
	--good: #79e3b3;
	--danger: #ff9ab2;
	--line: #3a5088;
}
 
* { box-sizing: border-box; }
 
html, body { max-width: 100%; overflow-x: hidden; }
 
body {
	margin: 0;
	min-height: 100vh;
	font-family: "Segoe UI", "Trebuchet MS", sans-serif;
	color: var(--ink);
	background: linear-gradient(150deg, var(--bg-top), var(--bg-bottom));
	overflow-x: clip;
}
 
.skip-link {
	position: absolute;
	left: 0.75rem;
	top: 0.55rem;
	padding: 0.5rem 0.8rem;
	border-radius: var(--control-radius);
	background: var(--accent);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	transform: translateY(-180%);
	z-index: 100;
}
.skip-link:focus-visible { transform: translateY(0); }
 
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
 
.hidden { display: none !important; }
.always-hidden { display: none !important; }
 
/* ── App shell ── */
.app-shell {
	width: min(1080px, 92vw);
	margin: 0 auto;
	padding: 3.6rem 0 3rem;
	position: relative;
}
 
/* ── Hero ── */
.hero {
	text-align: center;
	padding: 1rem;
	margin-bottom: 1.2rem;
	border-radius: var(--radius-xl);
	background: radial-gradient(circle at top right, #f3f8ff, #d8e6ff 72%);
	border: 1px solid #9fbaf0;
	box-shadow: 0 12px 28px rgba(22,61,132,.2);
}
[data-theme="dark"] .hero {
	background: radial-gradient(circle at top right, #1d2d55, #172544 72%);
	border-color: #425c98;
	box-shadow: 0 12px 28px rgba(0,0,0,.32);
}
 
.hero h1 { margin: 0 0 0.5rem; font-size: clamp(1.55rem, 2vw + 1rem, 2.2rem); }
.hero p { margin: 0; color: var(--muted-strong); }
 
.hero-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem;
	margin-bottom: 1rem;
	position: relative;
}
.version-badge {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
}
.hero-toolbar-group { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
 
.mobile-app-title {
	display: none;
	font-weight: 800;
	color: #1d3f86;
	letter-spacing: .01em;
	text-align: center;
}
[data-theme="dark"] .mobile-app-title { color: #d9e6ff; }
 
.version-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.32rem 0.7rem;
	border-radius: var(--radius-pill);
	background: #e6f0ff;
	border: 1px solid #b9cff6;
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--muted-strong);
}
[data-theme="dark"] .version-badge { background: #1a2b53; border-color: #4a65a5; }
 
/* ── Cards ── */
.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--card-radius);
	padding: 1rem;
	box-shadow: 0 8px 20px rgba(22,56,121,.1);
	animation: rise 320ms ease;
}
[data-theme="dark"] .card { background: #17223d; color: #e8efff; box-shadow: 0 10px 24px rgba(0,0,0,.3); }
 
.landing-grid .card, .summary-grid .card {
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.landing-grid .card:hover, .summary-grid .card:hover {
	transform: translateY(-3px);
	border-color: #9db8ea;
	box-shadow: 0 16px 30px rgba(26,62,132,.16);
}
 
/* ── Grid layouts ── */
.grid { display: grid; gap: 1rem; }
 
.landing-grid, .summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 1rem; }
 
.stats-grid { grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: 1rem; }
 
.budget-columns {
	grid-template-columns: repeat(2, minmax(0,1fr));
	grid-template-rows: auto auto;
	margin-top: 1rem;
}
.budget-column { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; }
.budget-column > .card { align-self: stretch; min-width: 0; }
 
.budget-stat-pair { grid-template-columns: repeat(2, minmax(0,1fr)); align-items: stretch; }
.budget-stat-pair > .stat { height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 0.3rem; text-align: left; }
.stat h3 { text-align: left; }
.stat p { text-align: left; margin-top: auto; }
 
.compact-controls {
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 1rem;
	align-items: end;
}
.compact-controls > div { display: grid; gap: 0.45rem; min-width: 0; }
 
.landing-controls { grid-template-columns: minmax(180px,260px); }
 
.forms-grid {
	display: flex;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	overflow-x: hidden;
	gap: 0.5rem;
	margin-top: 1rem;
}
.forms-grid > .card {
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
}
 
.lists-grid { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 1rem; }
 
.auth-grid {
	grid-template-columns: 1fr;
	margin-top: 1rem;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	justify-items: center;
}
.auth-grid > .card { max-width: 460px; width: 100%; margin-left: auto; margin-right: auto; }
 
.auth-action-bar {
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 1rem;
	align-items: center;
}
 
/* ── Budget controls ── */
.budget-controls {
	grid-template-columns: auto auto;
	justify-content: center;
	align-items: end;
	column-gap: 1.1rem;
}
.budget-controls > div { align-self: stretch; }
.budget-controls > div:not(.control-action) {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.budget-controls .period-control,
.budget-controls > div.currency-control {
	display: grid;
	align-content: start;
	gap: 0.45rem;
	justify-items: center;
	min-width: 0;
}
.budget-controls > div:not(.control-action) label {
	margin: 0;
	white-space: nowrap;
	font-size: 0.9rem;
}
.budget-controls .period-control > label,
.budget-controls .currency-control > label { white-space: normal; }
.budget-controls > div:not(.control-action) input,
.budget-controls > div:not(.control-action) select { width: auto; flex: 1 1 auto; min-width: 0; }
.budget-controls > div.currency-control > label { display: block; max-width: none; line-height: 1.2; }
.budget-controls > div.currency-control select {
	width: fit-content;
	max-width: 100%;
	flex: 0 0 auto;
	min-width: 0;
	min-height: 2.24rem;
	padding: 0.42rem 0.62rem;
	font-size: 1rem;
	line-height: 1.15;
	white-space: nowrap;
}
.budget-controls .control-action { grid-column: 1 / -1; display: flex; justify-content: center; }
.budget-controls .control-action .stack { display: flex; gap: 0.7rem; flex-wrap: nowrap; justify-content: center; }
.budget-controls .control-action .stack > button {
	flex: 0 1 auto;
	margin: 0;
	width: auto;
	white-space: normal;
	padding: var(--btn-padding-y) var(--btn-padding-x);
	font-size: var(--btn-font-size);
	line-height: 1.2;
	font-weight: 700;
}
.budget-controls .control-action .stack > button.btn-primary:hover,
.budget-controls .control-action .stack > button.btn-primary:focus-visible,
.debt-controls .control-action .stack > button.btn-primary:hover,
.debt-controls .control-action .stack > button.btn-primary:focus-visible {
	background: linear-gradient(125deg, #2f5fd0, #234eae);
	border-color: #1f4fbf;
	box-shadow: none;
}
[data-theme="dark"] .budget-controls .control-action .stack > button.btn-primary:hover,
[data-theme="dark"] .budget-controls .control-action .stack > button.btn-primary:focus-visible,
[data-theme="dark"] .debt-controls .control-action .stack > button.btn-primary:hover,
[data-theme="dark"] .debt-controls .control-action .stack > button.btn-primary:focus-visible {
	background: linear-gradient(125deg, #4f83ff, #355fbf);
	border-color: #7aa0ef;
	box-shadow: none;
}
.budget-controls .control-action .stack > button.btn-success,
.debt-controls .control-action .stack > button.btn-success {
	color: #fff;
	background: linear-gradient(125deg, #2daa56, #1e8a40);
	border-color: #1a7a38;
}
[data-theme="dark"] .budget-controls .control-action .stack > button.btn-success,
[data-theme="dark"] .debt-controls .control-action .stack > button.btn-success {
	background: linear-gradient(125deg, #3dcc6a, #2aaa52);
	border-color: #5cd980;
}
.budget-controls .control-action .stack > button.btn-success:hover,
.budget-controls .control-action .stack > button.btn-success:focus-visible,
.debt-controls .control-action .stack > button.btn-success:hover,
.debt-controls .control-action .stack > button.btn-success:focus-visible {
	background: linear-gradient(125deg, #34bb61, #24994a);
	border-color: #1e8a40;
	box-shadow: none;
}
 
.period-range-inputs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 0.45rem;
	max-width: 100%;
	width: fit-content;
}
.period-range-item { display: grid; gap: 0.3rem; min-width: 0; }
.period-range-inputs label { font-size: 0.94rem; font-weight: 600; margin: 0; }
.period-range-inputs .small-date-input {
	width: 9rem;
	max-width: min(40vw,9rem);
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.24rem;
	padding: 0.42rem 0.55rem;
	font-size: 1rem;
	line-height: 1.1;
	white-space: normal;
}
.budget-controls .period-range-inputs .small-date-input,
.budget-controls > div.currency-control select {
	height: 2.24rem;
	min-height: 2.24rem;
	padding-top: 0.38rem;
	padding-bottom: 0.38rem;
	font-size: 1rem;
	line-height: 1.1;
}
 
/* ── Control/action ── */
.control-action { display: flex; align-items: stretch; }
.compact-controls .control-action { align-self: end; }
.control-action .stack { width: 100%; }
.control-action .stack button { text-align: center; white-space: normal; }
 
/* ── Inputs / Selects / Buttons ── */
input, select, button {
	width: 100%;
	max-width: 100%;
	padding: var(--control-padding-y) var(--control-padding-x);
	border-radius: var(--control-radius);
	border: 1px solid #bdd0f1;
	font: inherit;
}
 
input[type="date"], input[type="month"] {
	width: 100%;
	inline-size: 100%;
	min-width: 0;
	min-inline-size: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
	margin-left: 0.2rem;
	padding: 0;
	transform: scale(.85);
}
 
[data-theme="dark"] input, [data-theme="dark"] select { background: #13213f; color: #e8efff; border-color: #44619f; }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.35); opacity: 1; }
[data-theme="dark"] input::placeholder { color: #9db0de; }
 
/* ── Password ── */
.password-wrapper { display: grid; grid-template-columns: 1fr; width: 100%; }
.password-wrapper input { grid-column: 1; grid-row: 1; width: 100%; min-width: 0; padding-right: 2.75rem; }
.password-wrapper button.password-visibility-toggle {
	grid-column: 1; grid-row: 1;
	justify-self: end; align-self: center;
	margin-right: 0.3rem; margin-top: 0;
	width: 2rem; height: 2rem;
	min-width: 0; max-width: none;
	padding: 0;
	border-radius: 999px; border: 0;
	background: transparent;
	color: #101010;
	font-size: 1rem; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center;
	z-index: 2; overflow: visible;
}
.password-wrapper button.password-visibility-toggle::after { display: none; }
[data-theme="dark"] .password-visibility-toggle { background: transparent; color: #ffffff; }
 
.password-strength-message { margin: -0.15rem 0 0.1rem; font-size: 0.88rem; color: var(--muted-strong); }
.password-strength-message.is-ok { color: var(--good); font-weight: 700; }
.password-strength-message.is-error { color: #c23153; font-weight: 700; }
[data-theme="dark"] .password-strength-message.is-error { color: #ff9ab2; }
 
/* ── Buttons (shared shimmer + interaction) ── */
.menu-panel a,
.menu-panel button,
.top-nav a,
.btn-link,
.btn,
.contact-btn-primary,
.contact-btn-accent,
button:not(.btn):not([class*="btn-"]) {
	position: relative; overflow: hidden; isolation: isolate;
}
.menu-panel a::after,
.menu-panel button::after,
.top-nav a::after,
.btn-link::after,
.btn::after,
.contact-btn-primary::after,
.contact-btn-accent::after,
button:not(.btn):not([class*="btn-"])::after {
	content: "";
	position: absolute;
	top: -40%; left: -85%;
	width: 60%; height: 180%;
	background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.52) 50%, transparent 80%);
	transform: rotate(14deg);
	transition: left 300ms ease;
	pointer-events: none;
	z-index: 0;
}
.menu-panel a:hover::after,
.menu-panel button:hover::after,
.top-nav a:hover::after,
.btn-link:hover::after,
.btn:hover::after,
.contact-btn-primary:hover::after,
.contact-btn-accent:hover::after,
button:not(.btn):not([class*="btn-"]):hover::after { left: 130%; }
 
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
 
/* ── Btn variants ── */
.btn { border-radius: var(--control-radius); }
.btn.btn-primary {
	color: #fff;
	background: linear-gradient(125deg, #2f5fd0, #234eae);
	border-color: #1f4fbf;
}
.btn.btn-primary:hover, .btn.btn-primary:focus-visible {
	color: #fff;
	background: linear-gradient(125deg, #3a69d8, #2b57b7);
	border-color: #2253bf;
	box-shadow: 0 10px 18px rgba(24,58,122,.24);
}
[data-theme="dark"] .btn.btn-primary { background: linear-gradient(125deg, #4f83ff, #355fbf); border-color: #7aa0ef; color: #fff; }
[data-theme="dark"] .btn.btn-primary:hover, [data-theme="dark"] .btn.btn-primary:focus-visible {
	background: linear-gradient(125deg, #5a8cff, #406acd); border-color: #8eb0f3; color: #fff;
}
.btn.btn-success {
	color: #fff;
	background: linear-gradient(125deg, #2daa56, #1e8a40);
	border-color: #1a7a38;
}
.btn.btn-success:hover, .btn.btn-success:focus-visible {
	color: #fff;
	background: linear-gradient(125deg, #34bb61, #24994a);
	border-color: #1e8a40;
	box-shadow: 0 10px 18px rgba(30,120,60,.24);
}
[data-theme="dark"] .btn.btn-success { background: linear-gradient(125deg, #3dcc6a, #2aaa52); border-color: #5cd980; color: #fff; }
[data-theme="dark"] .btn.btn-success:hover, [data-theme="dark"] .btn.btn-success:focus-visible {
	background: linear-gradient(125deg, #48d975, #33bb60); border-color: #70e090; color: #fff;
}

.btn.btn-outline-info { color: #143f90; background: #edf4ff; border-color: #84a9e8; }
.btn.btn-outline-info:hover, .btn.btn-outline-info:focus-visible { color: #0f3276; background: #dce9ff; border-color: #6790d8; }
[data-theme="dark"] .btn.btn-outline-info { color: #eef4ff; background: #2a4678; border-color: #7fa7f3; }
[data-theme="dark"] .btn.btn-outline-info:hover, [data-theme="dark"] .btn.btn-outline-info:focus-visible { color: #fff; background: #35558f; border-color: #9dbcf7; }
 
.btn.btn-danger { color: #fff; background: linear-gradient(125deg, #d44a5b, #a52e3e); border-color: #8b2532; }
.btn.btn-danger:hover, .btn.btn-danger:focus-visible {
	color: #fff; background: linear-gradient(125deg, #e05869, #b43748);
	border-color: #972a38; box-shadow: 0 10px 18px rgba(145,37,53,.28);
}
[data-theme="dark"] .btn.btn-danger { background: linear-gradient(125deg, #a8384b, #7b2637); border-color: #d48a99; color: #fff; }
[data-theme="dark"] .btn.btn-danger:hover, [data-theme="dark"] .btn.btn-danger:focus-visible {
	background: linear-gradient(125deg, #ba465a, #8b3042); border-color: #e09aaa; color: #fff;
}
 
/* ── Form actions ── */
.form-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px,1fr));
	gap: 0.85rem;
	align-items: stretch;
}
.form-actions > button { margin: 0; }
.form-actions .btn { font-weight: 700; text-shadow: none; }
.form-actions .btn.btn-outline-info { color: #143f90; background: #edf4ff; border-color: #84a9e8; }
.form-actions .btn.btn-outline-info:hover, .form-actions .btn.btn-outline-info:focus-visible { color: #0f3276; background: #dce9ff; border-color: #6790d8; }
[data-theme="dark"] .form-actions .btn.btn-outline-info { color: #eef4ff; background: #2a4678; border-color: #7fa7f3; }
[data-theme="dark"] .form-actions .btn.btn-outline-info:hover, [data-theme="dark"] .form-actions .btn.btn-outline-info:focus-visible { color: #fff; background: #35558f; border-color: #9dbcf7; }
[data-theme="dark"] .form-actions .btn.btn-danger { color: #fff; background: linear-gradient(125deg, #7f2f4a, #65243b); border-color: #cf8aa0; }
 
/* ── Auth action bar buttons ── */
.auth-action-bar button {
	margin-top: 0; color: #fff;
	background: linear-gradient(125deg, var(--accent), var(--accent-strong));
	border: 1px solid #1f4fbf;
	transition: transform .2s ease, filter .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.auth-action-bar button.guest-accent { border: 1px solid #1f7e74; }
.auth-action-bar button:hover, .auth-action-bar button:focus-visible {
	transform: translateY(-1px); filter: brightness(1.08) saturate(1.06);
	box-shadow: 0 10px 18px rgba(24,58,122,.2);
}
#guest-button.guest-accent, #login-form button[type="submit"] {
	background: linear-gradient(125deg, #2a9d8f, #269186);
	border: 1px solid #1f7e74;
}
 
/* ── Button secondary / special ── */
button.secondary {
	width: auto; padding-inline: 1rem;
	background: #4769c6; color: #fff; border: 1px solid #2f4fa7;
}
button.secondary:hover, button.secondary:focus-visible { filter: brightness(1.08); box-shadow: 0 10px 18px rgba(25,61,130,.24); }
[data-theme="dark"] button.secondary { background: #3a5fae; color: #fff; border-color: #7ea4f0; }
 
.inline-button { width: auto; margin: 0; padding: var(--btn-padding-y) var(--btn-padding-x); font-size: var(--btn-font-size); border-radius: var(--control-radius); }
.inline-button.danger { background: linear-gradient(125deg, #d44a5b, #a52e3e); border-color: #8b2532; color: #fff; }
 
.compact-save-button { width: auto; justify-self: start; padding: var(--btn-padding-y) var(--btn-padding-x); font-size: var(--btn-font-size); border-radius: var(--control-radius); }
 
.btn-link {
	display: inline-block; margin-top: 0.65rem;
	padding: 0.58rem 0.95rem;
	border-radius: var(--control-radius);
	text-decoration: none; font-weight: 700; color: #fff;
	background: linear-gradient(125deg, var(--accent), var(--accent-strong));
	transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.btn-link:hover, .btn-link:focus-visible { transform: translateY(-2px) scale(1.01); filter: brightness(1.09) saturate(1.08); box-shadow: 0 14px 26px rgba(24,58,122,.24); }
 
#summary-toggle-button, #forecast-toggle-button {
	padding: var(--btn-padding-y) var(--btn-padding-x);
	min-height: 2.32rem;
	font-size: var(--btn-font-size); line-height: 1.2; font-weight: 700;
	border-radius: var(--control-radius); border-width: 1px;
}
 
/* ── Help button ── */
.help-btn { display: inline-flex; align-items: center; }
.help-btn a,
.help-btn a:link,
.help-btn a:visited {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	white-space: nowrap;
	background: rgba(242,247,255,.96) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--panel-radius) !important;
	padding: 0.35rem 0.75rem !important;
	box-shadow: 0 10px 22px rgba(18,47,102,.178);
	backdrop-filter: blur(4px);
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	color: var(--muted-strong) !important;
	text-decoration: none !important;
}
.help-btn a:hover { background: #e6f0ff !important; border-color: #84a9e8 !important; color: var(--accent) !important; }
[data-theme="dark"] .help-btn a,
[data-theme="dark"] .help-btn a:link,
[data-theme="dark"] .help-btn a:visited { background: rgba(20,33,61,.95) !important; border-color: #4a65a5 !important; box-shadow: 0 10px 22px rgba(0,0,0,.3); color: #b5c3e6 !important; }
[data-theme="dark"] .help-btn a:hover { background: rgba(30,50,90,.95) !important; color: #e8efff !important; }

/* ── Language corner ── */
.language-corner {
	display: inline-flex; align-items: center;
	background: transparent;
	border: none;
	border-radius: var(--panel-radius);
	padding: 0;
}
[data-theme="dark"] .language-corner { background: rgba(20,33,61,.95); border-color: #4a65a5; box-shadow: 0 10px 22px rgba(0,0,0,.3); }
.language-corner select { width: auto; min-width: 0; flex: 0 0 auto; padding: 0.35rem 0.55rem; font-weight: 700; text-align: center; text-transform: uppercase; background: rgba(242,247,255,.96); border: 1px solid var(--line); border-radius: var(--panel-radius); }
[data-theme="dark"] .language-corner select { background: rgba(20,33,61,.95); color: #f1f5ff; border-color: #4a65a5; }
 
/* ── Theme switch ── */
.theme-switch-inline {
	display: inline-flex; align-items: center; gap: 0.3rem;
	padding: 0.2rem;
	border: 1px solid #9cbaf1; border-radius: var(--panel-radius);
	background: #edf4ff;
	box-shadow: 0 8px 18px rgba(26,63,132,.16);
	flex: 0 0 auto; white-space: nowrap;
}
[data-theme="dark"] .theme-switch-inline { background: #172b4e; border-color: #4a65a5; box-shadow: 0 10px 20px rgba(0,0,0,.28); }
 
.theme-switch-btn {
	width: auto; margin: 0;
	padding: 0.42rem 0.62rem; min-width: 64px;
	display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
	border-radius: var(--control-radius); border: 1px solid transparent;
	font-size: 0.8rem; font-weight: 700; color: #274d93; background: transparent; box-shadow: none;
}
.theme-switch-btn.is-active { color: #fff; background: linear-gradient(125deg, var(--accent), var(--accent-strong)); border-color: #1f4fbf; }
[data-theme="dark"] .theme-switch-btn { color: #eef4ff; background: #223960; border-color: #5f7fbe; }
[data-theme="dark"] .theme-switch-btn.is-active { color: #fff; background: linear-gradient(125deg, #507eea, #355fbf); border-color: #6f92dd; }
.theme-switch-btn-icon { font-size: .95rem; line-height: 1; color: inherit; }
#theme-light-button .theme-switch-btn-icon { color: #f4b400; }
[data-theme="dark"] #theme-light-button .theme-switch-btn-icon { color: #ffd24d; }
.theme-switch-btn-label { line-height: 1; }
 
/* ── Navigation ── */
.top-nav { display: flex; gap: 0.7rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.top-nav a {
	display: inline-block; padding: 0.58rem 0.95rem;
	border-radius: var(--control-radius);
	text-decoration: none; font-weight: 700; color: #fff;
	background: linear-gradient(125deg, var(--accent), var(--accent-strong));
	transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.top-nav a:hover, .top-nav a:focus-visible { transform: translateY(-2px) scale(1.01); filter: brightness(1.09) saturate(1.08); box-shadow: 0 14px 26px rgba(24,58,122,.24); }
 
.menu-wrap { position: relative; display: flex; justify-content: flex-end; margin-bottom: 0.8rem; }
.hero-menu-wrap { margin-bottom: 0; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; white-space: nowrap; }
 
/* ── Hamburger ── */
.menu-toggle {
	width: 48px; height: 42px;
	margin-top: 0; padding: 0.45rem 0.55rem;
	border: 1px solid #1f4fbf;
	background: linear-gradient(125deg, #2f5fd0, #234eae);
	box-shadow: 0 8px 18px rgba(22,56,121,.24);
	display: flex; align-items: center; justify-content: center;
	gap: 0.24rem; flex-direction: column; flex: 0 0 auto;
}
.menu-toggle:hover, .menu-toggle:focus-visible { filter: brightness(1.08); box-shadow: 0 12px 22px rgba(22,56,121,.28); }
.hamburger-line { width: 20px; height: 2px; border-radius: 99px; background: #fff; transition: transform 180ms ease, opacity 160ms ease; }
.menu-toggle.is-open .hamburger-line:nth-child(2) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-open .hamburger-line:nth-child(3) { opacity: 0; }
.menu-toggle.is-open .hamburger-line:nth-child(4) { transform: translateY(-6px) rotate(-45deg); }
 
/* ── Menu panel ── */
.menu-panel {
	position: absolute;
	top: calc(100% + 0.35rem); right: 0;
	min-width: 220px; padding: 0.45rem;
	border: 1px solid var(--line); border-radius: var(--panel-radius);
	background: #f6faff;
	box-shadow: 0 12px 26px rgba(20,52,112,.16);
	display: grid; gap: 0.4rem; z-index: 40;
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translateY(-8px) scale(.98);
	transform-origin: top right;
	transition: opacity 180ms ease, transform 200ms ease, visibility 180ms ease;
}
.menu-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
[data-theme="dark"] .menu-panel { background: #172542; border-color: #4a65a5; box-shadow: 0 14px 28px rgba(0,0,0,.38); }
 
.menu-panel a, .menu-panel button {
	width: 100%; margin: 0; text-align: left; text-decoration: none;
	color: #fff; padding: 0.55rem 0.7rem;
	border-radius: var(--control-radius);
	background: linear-gradient(125deg, var(--accent), var(--accent-strong));
	border: none; font-weight: 700; cursor: pointer;
}
.menu-panel a:hover, .menu-panel button:hover,
.menu-panel a:focus-visible, .menu-panel button:focus-visible {
	transform: translateY(-2px) scale(1.01); filter: brightness(1.09) saturate(1.08);
	box-shadow: 0 14px 26px rgba(24,58,122,.24);
}
.menu-panel a:focus-visible { outline: 2px solid #8cb2ef; outline-offset: 2px; }
.menu-panel .menu-logout { background: linear-gradient(125deg, #4769c6, #2f4fa7); }
.menu-panel .btn-info { background: linear-gradient(125deg, #138496, #0c6675); border-color: #0d7080; color: #fff; }
.menu-panel .btn-info:hover, .menu-panel .btn-info:focus-visible { background: linear-gradient(125deg, #1a9aaf, #107889); border-color: #0d7080; }
[data-theme="dark"] .menu-panel .btn-info { background: linear-gradient(125deg, #1ab8d4, #0d8fa8); border-color: #1ecde8; }
.menu-profile-options { display: flex; flex-direction: column; gap: 0.3rem; padding-left: 0.7rem; border-left: 3px solid rgba(255,255,255,0.3); }
.menu-panel .menu-divider { margin: 0.3rem 0 0.1rem; border: 0; border-top: 1px solid #d66883; opacity: 1; }
[data-theme="dark"] .menu-panel .menu-divider { border-top-color: #8f3f56; }
 
.menu-panel .menu-danger-action,
.menu-panel .menu-danger-action.btn,
.menu-panel .menu-danger-action.btn-danger {
	text-align: center; color: #fff;
	background: linear-gradient(125deg, #c63e5e, #972d48);
	border: 1px solid #e58aa0; font-weight: 800;
}
.menu-panel .menu-danger-action:hover, .menu-panel .menu-danger-action:focus-visible { filter: brightness(1.08); box-shadow: 0 12px 24px rgba(151,45,72,.3); }
[data-theme="dark"] .menu-panel .menu-danger-action,
[data-theme="dark"] .menu-panel .menu-danger-action.btn,
[data-theme="dark"] .menu-panel .menu-danger-action.btn-danger { background: linear-gradient(125deg, #9e324d, #7b263c); border-color: #c87a91; }
 
.menu-session-info {
	margin: 0; padding: 0.35rem 0.55rem;
	border-radius: var(--control-radius);
	font-size: 0.8rem; font-weight: 700; line-height: 1.2;
	color: #22477f; background: #e9f2ff; border: 1px solid #b5cdef; word-break: break-word;
}
[data-theme="dark"] .menu-session-info { color: #e6eeff; background: #22375f; border-color: #5775b4; }
 
/* ── Contact us ── */
#contact-us-button {
	width: auto; margin: 0; padding: 0.5rem 0.72rem;
	min-height: 2.32rem; border: 1px solid #1f7e74;
	background: linear-gradient(125deg, #2a9d8f, #269186);
	color: #fff; font-weight: 700; font-size: 0.9rem; line-height: 1.1; flex: 0 0 auto;
}
#contact-us-button:hover, #contact-us-button:focus-visible { filter: brightness(1.08); box-shadow: 0 10px 20px rgba(23,104,95,.24); }
 
/* ── Contact page ── */
.contact-page { max-width: min(760px,94vw); }
.contact-page .hero { text-align: left; }
.contact-frame { max-width: 720px; margin-left: auto; margin-right: auto; border-radius: var(--card-radius); border: 1px solid var(--line); padding: 1rem; box-shadow: 0 8px 20px rgba(22,56,121,.1); }
.contact-page .hero.contact-frame { background: var(--card); }
[data-theme="dark"] .contact-page .hero.contact-frame,
[data-theme="dark"] .contact-card.contact-frame { background: #17223d; color: #e8efff; box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.contact-quick-actions { display: flex; gap: 0.55rem; margin-top: 0.85rem; flex-wrap: wrap; }
.contact-quick-actions .btn, .contact-card button[type="submit"] { width: auto; }
.contact-card { max-width: 720px; margin: 0 auto; }
.contact-card textarea { width: 100%; resize: vertical; min-height: 7rem; }
.contact-btn-primary { margin-top: 0; color: #fff; background: linear-gradient(125deg, var(--accent), var(--accent-strong)); border: 1px solid #1f4fbf; font-weight: 700; border-radius: var(--control-radius); transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.contact-btn-accent { margin-top: 0; color: #fff; background: linear-gradient(125deg, #2a9d8f, #269186); border: 1px solid #1f7e74; font-weight: 700; border-radius: var(--control-radius); transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.contact-btn-primary:hover, .contact-btn-primary:focus-visible,
.contact-btn-accent:hover, .contact-btn-accent:focus-visible { color: #fff; transform: translateY(-1px); filter: brightness(1.08) saturate(1.06); box-shadow: 0 10px 18px rgba(24,58,122,.2); }
 
/* ── Stats ── */
.stat h3 { font-size: 0.92rem; color: var(--muted); margin-bottom: 0.6rem; }
.stat p { margin: 0; font-size: clamp(1.1rem, 1.2vw + 0.8rem, 1.5rem); font-weight: 800; }
 
.stat:has(#monthly-expense) { background: linear-gradient(155deg, #fff1f3, #ffe3e8 70%); border-color: #e69aae; box-shadow: 0 12px 24px rgba(150,33,66,.18); }
.stat:has(#monthly-expense) h3 { color: #aa1f47; font-weight: 700; }
.stat:has(#monthly-expense) #monthly-expense { color: #c63e5e; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
[data-theme="dark"] .stat:has(#monthly-expense) { background: linear-gradient(155deg, #3b1623, #2e111b 70%); border-color: #a54563; box-shadow: 0 12px 24px rgba(0,0,0,.28); }
[data-theme="dark"] .stat:has(#monthly-expense) h3 { color: #ffb0c4; }
[data-theme="dark"] .stat:has(#monthly-expense) #monthly-expense { color: #c63e5e; text-shadow: none; }
 
.stat:has(#monthly-income) { background: linear-gradient(155deg, #f0fbf5, #e3f7ed 70%); border-color: #8ecfb0; box-shadow: 0 12px 24px rgba(20,110,70,.18); }
.stat:has(#monthly-income) h3 { color: #1a7a4e; font-weight: 700; }
.stat:has(#monthly-income) #monthly-income { color: #1f8f62; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
[data-theme="dark"] .stat:has(#monthly-income) { background: linear-gradient(155deg, #0e2b1e, #091e15 70%); border-color: #2a7a54; box-shadow: 0 12px 24px rgba(0,0,0,.28); }
[data-theme="dark"] .stat:has(#monthly-income) h3 { color: #79e3b3; }
[data-theme="dark"] .stat:has(#monthly-income) #monthly-income { color: #79e3b3; text-shadow: none; }
 
#monthly-expense, #spent-to-date { color: #c63e5e; }
#spent-to-date, #month-end-left { color: #111; }
#month-end-left { text-shadow: none; }
h3[data-i18n="monthEndTitle"] { color: #111; }
h2[data-i18n="projectionTitle"] { color: #3f629a; }
#projection-text { color: #2a57b5; font-weight: 700; }
[data-theme="dark"] #spent-to-date,
[data-theme="dark"] #month-end-left { color: #e8efff; text-shadow: none; }
[data-theme="dark"] h3[data-i18n="monthEndTitle"],
[data-theme="dark"] h2[data-i18n="projectionTitle"] { color: #e8efff; }
[data-theme="dark"] #projection-text { color: #d3e3ff; }
[data-theme="dark"] .stat:has(#spent-to-date) h3,
[data-theme="dark"] .stat:has(#spent-to-date) #spent-to-date,
[data-theme="dark"] .stat:has(#month-end-left) h3,
[data-theme="dark"] .stat:has(#month-end-left) #month-end-left { color: #e8efff; }
 
/* ── Entry list ── */
.entry-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; max-height: 260px; overflow-y: auto; }
.entry-list li { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; align-items: center; border: 1px solid #d5e2f8; border-radius: var(--control-radius); padding: 0.6rem 0.65rem; background: #fdfefe; }
[data-theme="dark"] .entry-list li { border-color: #3d5487; background: #12203a; color: #e8efff; }
.entry-list li strong { text-transform: capitalize; }
.entry-list li.empty { display: block; color: var(--muted); text-align: center; }
[data-theme="dark"] .entry-list li.empty { color: var(--muted-strong); }
 
.entry-filters { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.7rem; align-items: center; margin-bottom: 0.7rem; }
.entry-filters label { margin: 0; font-size: 0.88rem; }
.entry-filters input { width: min(100%, 220px); padding: 0.56rem 0.66rem; min-height: 2.2rem; font-size: 0.9rem; }
 
.entry-note { margin-top: 0.15rem; font-size: 0.82rem; color: var(--muted); line-height: 1.35; word-break: break-word; }
[data-theme="dark"] .entry-note { color: #c5d4f8; }
 
.entry-repeat-badge { display: inline-block; padding: 0.14rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; color: #1a4ea9; background: #e8f0ff; border: 1px solid #95b3ea; }
[data-theme="dark"] .entry-repeat-badge { color: #ddebff; background: #1e335f; border-color: #5d7fbd; }
 
.entry-row { grid-template-columns: 1fr !important; gap: 0.35rem !important; }
.entry-main-row { display: flex; align-items: center; justify-content: space-between; gap: 0.55rem; min-width: 0; }
.entry-main-row-top { align-items: flex-start; }
.entry-heading { display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; flex-wrap: wrap; }
.entry-heading strong { font-size: 0.96rem; line-height: 1.2; }
.entry-date { font-size: 0.84rem; color: var(--muted); }
[data-theme="dark"] .entry-date { color: #c5d4f8; }
.entry-amount { font-weight: 800; font-size: 0.96rem; }
.entry-note-inline { font-weight: 500; font-size: 0.82rem; color: var(--muted); margin-left: 0.2rem; word-break: break-word; }
[data-theme="dark"] .entry-note-inline { color: #c5d4f8; }
 
.row-actions { display: flex; gap: 0.45rem; justify-content: flex-end; flex-wrap: nowrap; }
.row-actions-icons { align-items: center; }
 
.entry-repeat-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.entry-repeat-toggle { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--muted); margin: 0; white-space: nowrap; }
.entry-repeat-toggle input { width: 0.92rem; height: 0.92rem; }
[data-theme="dark"] .entry-repeat-toggle { color: #d3e0fb; }
 
/* ── Inline delete confirm ── */
.inline-delete-confirm {
	position: absolute; z-index: 95;
	width: min(260px, calc(100vw - 1.25rem));
	padding: 0.55rem; border-radius: 0.65rem;
	border: 1px solid #99b6ea; background: #fff;
	box-shadow: 0 10px 24px rgba(12,33,76,.22);
}
.inline-delete-confirm.is-mobile { position: fixed; left: 0.625rem; right: 0.625rem; bottom: 0.7rem; width: auto; max-width: none; z-index: 110; }
.inline-delete-confirm p { margin: 0; font-size: 0.82rem; line-height: 1.35; color: var(--ink); }
[data-theme="dark"] .inline-delete-confirm { background: #182745; border-color: #5677b3; box-shadow: 0 12px 26px rgba(0,0,0,.34); }
[data-theme="dark"] .inline-delete-confirm p { color: #e8efff; }
.inline-delete-confirm-actions { margin-top: 0.5rem; display: flex; gap: 0.4rem; }
.inline-delete-confirm-actions .btn { width: auto; padding: 0.32rem 0.58rem; font-size: 0.8rem; line-height: 1.2; }
 
/* ── Icon buttons ── */
.inline-icon-button {
	width: 1.9rem; height: 1.9rem;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 0.5rem; border: 1px solid #89a9e2;
	background: #edf4ff; color: #1f4d99; font-size: 1rem; font-weight: 700; line-height: 1;
}
.inline-icon-button.danger { color: #c62828; border-color: #e39a9a; background: #fff1f1; }
[data-theme="dark"] .inline-icon-button { background: #1f3765; border-color: #6187c8; color: #e6efff; }
[data-theme="dark"] .inline-icon-button.danger { background: #51242a; border-color: #ba7f88; color: #ffd7dc; }
 
/* ── Modal ── */
.modal-overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(16,30,56,.52); backdrop-filter: blur(2px); z-index: 90; }
.modal-overlay.hidden { display: none; }
[data-theme="dark"] .modal-overlay { background: rgba(5,13,27,.62); }
.modal-card { width: min(460px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: var(--card-radius); padding: 1rem; display: grid; gap: 0.85rem; box-shadow: 0 14px 28px rgba(16,39,88,.25); }
.modal-card h3 { margin: 0; font-size: 1.05rem; }
.modal-card p { margin: 0; color: var(--muted); }
[data-theme="dark"] .modal-card p { color: #c8d7fb; }
.modal-actions-split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.75rem; }
 
/* ── Inline check ── */
.inline-check { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; font-size: 0.9rem; color: var(--muted-strong); }
.inline-check input[type="checkbox"] { width: auto; max-width: none; margin: 0; accent-color: var(--accent); transform: scale(1.05); }
[data-theme="dark"] .inline-check { color: #e5efff; }
 
/* ── Misc ── */
h2, h3 { margin-top: 0; }
label { font-weight: 600; color: var(--muted-strong); font-size: 0.92rem; }
[data-theme="dark"] label { color: #e5efff; }
.stack { display: grid; gap: 0.55rem; }
.controls { margin-top: 0.9rem; }
.session-card { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.session-card.hidden { display: none; }
.session-card p { margin: 0; }

.today-notice-card { max-width: 22rem; width: 90vw; }
.today-notice-card h3 { margin-bottom: 0.8rem; font-size: 1.05rem; }
.today-notice-row { margin: 0.3rem 0; font-size: 0.95rem; }
.today-notice-row.income { color: #1a7a4e; }
.today-notice-row.expense { color: #c63e5e; }
[data-theme="dark"] .today-notice-row.income { color: #79e3b3; }
[data-theme="dark"] .today-notice-row.expense { color: #f47c97; }
.today-notice-dismiss-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; margin-top: 0.8rem; cursor: pointer; }


.auth-message { width: 100%; font-weight: 600; }
.auth-message.error { color: var(--danger); }
.auth-message.ok { color: var(--good); }
 
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #8cb2ef; outline-offset: 2px; }
 
/* ── Forecast rows ── */
.forecast-rows { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.75rem; }
.whatif-row { border: 1px solid #d5e2f8; border-radius: var(--control-radius); padding: 0.65rem 0.75rem; display: flex; align-items: flex-start; gap: 0.65rem; flex-wrap: wrap; justify-content: space-between; background: #fafcff; }
[data-theme="dark"] .whatif-row { border-color: #3d5487; background: #12203a; }
.whatif-row-display { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; flex: 1; min-width: 0; }
.whatif-row-fields { display: grid; grid-template-columns: minmax(90px,0.9fr) minmax(110px,1.2fr) minmax(110px,1.2fr) minmax(80px,0.8fr) minmax(110px,1fr); gap: 0.45rem; flex: 1; min-width: 0; }
.whatif-field { display: flex; flex-direction: column; gap: 0.12rem; }
.whatif-field label { font-size: 0.78rem; line-height: 1.15; margin: 0; color: var(--muted); }
.whatif-field input, .whatif-field select { min-height: 2rem; padding: 0.32rem 0.45rem; font-size: 0.86rem; line-height: 1.1; width: 100%; }
.whatif-row-actions { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; align-self: flex-start; }
.whatif-field-type select { font-weight: 700; }
.whatif-type-tag { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.whatif-type-tag.expense { color: #aa1f47; background: #ffe3e8; border: 1px solid #e69aae; }
.whatif-type-tag.income { color: #1a7a4e; background: #e3f7ed; border: 1px solid #8ecfb0; }
[data-theme="dark"] .whatif-type-tag.expense { color: #ffb0c4; background: #3b1623; border-color: #a54563; }
[data-theme="dark"] .whatif-type-tag.income { color: #79e3b3; background: #0e2b1e; border-color: #2a7a54; }
.whatif-amount { font-weight: 700; font-size: 0.92rem; }
.whatif-date { font-size: 0.85rem; color: var(--muted); }
[data-theme="dark"] .whatif-date { color: #c5d4f8; }
.whatif-note { font-size: 0.82rem; color: var(--muted); font-style: italic; }

/* ── Icon buttons ── */
.icon-btn { width: 2.5rem; height: 2.5rem; min-width: 2.5rem; padding: 0; font-size: 1.2rem; border-radius: var(--control-radius); display: inline-flex; align-items: center; justify-content: center; background: #edf4ff; border: 1px solid #84a9e8; color: #143f90; cursor: pointer; flex-shrink: 0; }
.icon-btn:hover, .icon-btn:focus-visible { background: #dce9ff; border-color: #6790d8; }
[data-theme="dark"] .icon-btn { background: #2a4678; border-color: #7fa7f3; color: #eef4ff; }
[data-theme="dark"] .icon-btn:hover, [data-theme="dark"] .icon-btn:focus-visible { background: #35558f; }
.icon-btn.danger { background: linear-gradient(125deg, #d44a5b, #a52e3e); border-color: #8b2532; color: #fff; font-size: 1.3rem; }
.icon-btn.danger:hover, .icon-btn.danger:focus-visible { background: linear-gradient(125deg, #e05869, #b43748); border-color: #972a38; }
[data-theme="dark"] .icon-btn.danger { background: linear-gradient(125deg, #a8384b, #7b2637); border-color: #d48a99; color: #fff; }
.icon-btn.close-btn { background: #f0f0f0; border-color: #999; color: #222; font-size: 1.15rem; font-weight: 800; }
.icon-btn.close-btn:hover { background: #e0e0e0; border-color: #666; }
[data-theme="dark"] .icon-btn.close-btn { background: #2a2a3a; border-color: #666; color: #ccc; }
.icon-btn.add-to-budget-btn { background: #eafaf1; border-color: #7dcea0; color: #1e8a40; }
.icon-btn.add-to-budget-btn:hover { background: #d5f5e3; border-color: #52be80; }
[data-theme="dark"] .icon-btn.add-to-budget-btn { background: #0e2b1e; border-color: #2a7a54; color: #79e3b3; }
.forecast-confirm-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; background: #fff3f5; border: 1px solid #f0b0bc; border-radius: var(--control-radius); font-size: 0.85rem; flex-wrap: wrap; margin-top: 0.3rem; }
[data-theme="dark"] .forecast-confirm-row { background: #2b1520; border-color: #7a3050; color: #ffd4e0; }
.icon-btn.confirm-edit { background: linear-gradient(125deg, #1b9d8f, #167f73); border-color: #1b7c71; color: #fff; }
.icon-btn.confirm-edit:hover, .icon-btn.confirm-edit:focus-visible { background: linear-gradient(125deg, #22aa9c, #1a8878); }
[data-theme="dark"] .icon-btn.confirm-edit { background: linear-gradient(125deg, #2f9f92, #217a70); border-color: #71d0c3; }
.icon-btn-divider { display: inline-block; width: 1px; height: 1.8rem; background: #c4d5f2; margin: 0 0.1rem; flex-shrink: 0; align-self: center; }
[data-theme="dark"] .icon-btn-divider { background: #3d5487; }

/* ── Saved plans section ── */
.saved-plans-section { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.85rem; padding: 0.7rem 0.85rem; border: 1px solid #c4d5f2; border-radius: var(--control-radius); background: #f5f8ff; }
[data-theme="dark"] .saved-plans-section { background: #111e38; border-color: #3a5282; }
.saved-plans-header { display: flex; flex-direction: column; gap: 0.45rem; }
.saved-plans-top-row { display: flex; align-items: stretch; gap: 0.45rem; flex-wrap: wrap; }
.saved-plans-top-row .saved-plans-dropdown { flex: 1 1 auto; min-width: 0; max-width: 16rem; }
.saved-plans-top-row .saved-plans-dropdown-trigger { width: 100%; display: flex; }
.saved-plans-top-row #forecast-load-scenario { flex: 0 0 auto; white-space: nowrap; align-self: stretch; }
.saved-plans-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center; width: 100%; }
.saved-plans-actions > button { width: 100%; }
/* Saved plans dropdown trigger */
.saved-plans-dropdown { position: relative; }
.saved-plans-dropdown-trigger { cursor: pointer; display: inline-flex; align-items: center; gap: 0.38rem; font-weight: 700; font-size: 0.92rem; color: var(--text); padding: 0.32rem 0.68rem; border-radius: var(--control-radius); border: 1px solid #c4d5f2; background: #fff; user-select: none; list-style: none; transition: background 0.15s, border-color 0.15s; }
.saved-plans-dropdown-trigger::-webkit-details-marker { display: none; }
.saved-plans-dropdown-trigger::marker { display: none; content: ""; }
.saved-plans-dropdown-trigger:hover { background: #edf4ff; border-color: #84a9e8; }
[data-theme="dark"] .saved-plans-dropdown-trigger { background: #17223d; border-color: #3f568d; color: #e8efff; }
[data-theme="dark"] .saved-plans-dropdown-trigger:hover { background: #1e3360; }
.saved-plans-dropdown-arrow { font-size: 0.78rem; line-height: 1; transition: transform 0.18s ease; display: inline-block; }
.saved-plans-dropdown[open] .saved-plans-dropdown-arrow { transform: rotate(180deg); }
.saved-plans-dropdown-content { position: absolute; top: calc(100% + 0.35rem); left: 0; z-index: 200; background: #fff; border: 1px solid #c4d5f2; border-radius: var(--control-radius); padding: 0.45rem 0.6rem; min-width: 210px; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.25rem; box-shadow: 0 4px 18px rgba(20,63,144,0.14); }
[data-theme="dark"] .saved-plans-dropdown-content { background: #17223d; border-color: #3f568d; box-shadow: 0 4px 18px rgba(0,0,0,0.35); }
.saved-plan-item { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; font-weight: 500; cursor: pointer; padding: 0.28rem 0.5rem; border-radius: var(--control-radius); border: 1px solid transparent; background: transparent; user-select: none; transition: background 0.15s, border-color 0.15s; width: 100%; }
.saved-plan-item:hover { background: #edf4ff; border-color: #84a9e8; }
[data-theme="dark"] .saved-plan-item { color: #e8efff; }
[data-theme="dark"] .saved-plan-item:hover { background: #1e3360; border-color: #5a7bc4; }
.saved-plan-item input[type="checkbox"] { width: 0.92rem; height: 0.92rem; cursor: pointer; accent-color: var(--accent); flex-shrink: 0; }
.forecast-scenario-empty { margin: 0; color: var(--muted); font-size: 0.88rem; }
[data-theme="dark"] .forecast-scenario-empty { color: #c8d7fb; }
/* Type select color coding */
.forecast-whatif-type.type-expense { color: #b7203d; font-weight: 700; }
.forecast-whatif-type.type-income { color: #1a7a4e; font-weight: 700; }
[data-theme="dark"] .forecast-whatif-type.type-expense { color: #ff8fab; }
[data-theme="dark"] .forecast-whatif-type.type-income { color: #6ee4ae; }
.whatif-plan-name { font-size: 0.8rem; font-weight: 700; color: #1a4ea9; background: #dce9ff; border-radius: 999px; padding: 0.1rem 0.5rem; white-space: nowrap; }
[data-theme="dark"] .whatif-plan-name { background: #1e3360; color: #aacbff; }

.forecast-results { border: 1px solid #c4d5f2; border-radius: var(--panel-radius); padding: 0.8rem 0.9rem; background: #eef4ff; display: grid; gap: 0.4rem; }
.forecast-results p { margin: 0; }
[data-theme="dark"] .forecast-results { border-color: #3f568d; background: #13213d; color: #e8efff; }
 
/* ── Chart section ── */
.chart-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; flex-wrap: wrap; }
.chart-header h2 { margin: 0; }
.chart-type-selector { display: flex; align-items: center; gap: 0.5rem; }
.chart-type-selector label { margin: 0; font-size: 0.9rem; white-space: nowrap; }
.chart-type-selector select { width: auto; min-width: 0; }
.chart-body { display: flex; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.chart-canvas-wrap { flex: 0 0 auto; width: min(320px, 100%); }
.chart-legend { flex: 1 1 180px; display: flex; flex-direction: column; gap: 0.45rem; max-height: 320px; overflow-y: auto; }
.chart-legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; }
.chart-legend-color { width: 14px; height: 14px; min-width: 14px; border-radius: 3px; }
.chart-legend-label { color: var(--ink); line-height: 1.3; }
[data-theme="dark"] .chart-legend-label { color: #e8efff; }

/* ── Footer ── */
.footer-content {
	width: min(1080px, 92vw);
	margin: 0 auto 1.2rem;
	text-align: center;
	padding: 0.9rem 1.25rem;
	border-radius: var(--radius-xl);
	background: radial-gradient(circle at top right, #eef5ff, #d7e6ff 72%);
	border: 1px solid #a7c1ee;
	box-shadow: 0 10px 24px rgba(22,56,121,.14);
}
[data-theme="dark"] .footer-content { background: radial-gradient(circle at top right, #1b2d57, #182746 72%); border-color: #425c98; box-shadow: 0 12px 28px rgba(0,0,0,.28); }
.footer-content p { margin: 0.2rem 0; color: var(--muted-strong); }
 
/* ── Animation ── */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
 
/* ── Media queries ── */
@media (max-width: 920px) {
	.landing-grid, .summary-grid, .auth-grid,
	.stats-grid, .budget-columns { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.compact-controls { grid-template-columns: repeat(3, minmax(0,1fr)); }
	.budget-controls { grid-template-columns: 1fr; }
	.lists-grid { grid-template-columns: 1fr 1fr; }
	.whatif-row-fields { grid-template-columns: repeat(2, minmax(0,1fr)); }
	#forecast-planner #add-whatif-row { white-space: normal; width: 100%; padding: 0.5rem 0.58rem; font-size: 0.86rem; line-height: 1.12; }
}
 
@media (max-width: 760px) {
	.budget-columns, .lists-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.compact-controls { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.compact-controls .control-action { grid-column: 1 / -1; }
	.budget-controls > div:not(.control-action) { display: grid; gap: 0.45rem; }
	.budget-controls > div:not(.control-action) input,
	.budget-controls > div:not(.control-action) select { width: 100%; }
	.budget-controls .control-action .stack { display: flex; grid-template-columns: none; justify-content: flex-start; flex-wrap: nowrap; }
	.budget-controls .period-control, .budget-controls > div.currency-control { justify-items: start; }
	.budget-stat-pair .stat p { font-size: clamp(0.92rem, 1.55vw + 0.45rem, 1.08rem); line-height: 1.08; }
}
 
@media (max-width: 560px) {
	.app-shell { width: 100%; max-width: none; padding-top: 1.25rem; padding-right: 0.5rem; padding-left: 0.5rem; }
	.footer-content { width: 100%; max-width: none; margin: 0 0 1.2rem; border-radius: var(--card-radius); padding: 0.8rem 1rem; }
	.language-corner { width: auto; justify-content: flex-start; }
	.language-corner select { width: auto; }
 
	.hero-toolbar {
		display: grid;
		grid-template-columns: minmax(0,1fr) auto;
		grid-template-areas: "language actions" "title version";
		align-items: stretch; gap: 0.5rem;
	}
	.language-corner { grid-area: language; min-width: 0; min-height: 0; height: auto; padding: 0.1rem 0.2rem; width: fit-content; }
	.language-corner select { height: auto; padding: 0.28rem 0.4rem; }
	.help-btn a { font-size: 0.78rem; padding: 0.25rem 0.55rem; }
	.hero-toolbar-group { display: contents; }
	.mobile-app-title { grid-area: title; display: block; font-size: 1rem; min-width: 0; padding-right: 0.25rem; }
	.version-badge { display: inline-flex; grid-area: version; justify-self: end; align-self: center; font-size: 0.78rem; padding: 0.26rem 0.55rem; position: static; transform: none; }
 
	.landing-grid, .summary-grid, .lists-grid, .auth-grid { grid-template-columns: 1fr; }
	.stats-grid { grid-template-columns: repeat(2, minmax(140px,1fr)); }
	.budget-stat-pair { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.budget-stat-pair .stat { padding: 0.85rem; }
	.budget-stat-pair .stat h3 { font-size: 0.8rem; line-height: 1.25; text-wrap: balance; }
	.budget-stat-pair .stat p { font-size: clamp(0.84rem, 1.85vw + 0.38rem, 0.98rem); line-height: 1.1; }
 
	.compact-controls { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 0.75rem; row-gap: 0.75rem; }
	.compact-controls .control-action { grid-column: 1 / -1; }
	.compact-controls > div:not(.control-action) input,
	.compact-controls > div:not(.control-action) select { width: 100%; min-width: 0; max-width: 100%; }
	.compact-controls .control-action .stack { display: flex; grid-template-columns: none; justify-content: flex-start; flex-wrap: nowrap; }
	.landing-controls { grid-template-columns: 1fr; }
 
	/* LOCKED: bevétel/kiadás oszlop mindig egymás mellett – soha ne változtasd! */
	.budget-columns { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.budget-column > .card, .forms-grid > .card { padding: 0.8rem; overflow: hidden; }
 
	.budget-controls { grid-template-columns: 1fr auto; align-items: start; row-gap: 0.55rem; column-gap: 0.5rem; }
	.budget-controls .period-control, .budget-controls .currency-control { min-width: 0; padding-top: 0; }
	.budget-controls .period-control { grid-column: 1; }
	.budget-controls > div.currency-control { grid-column: 2; align-content: start; justify-items: start; }
	.budget-controls > div.currency-control > label { display: block; font-size: 0.82rem; margin-bottom: 0.2rem; white-space: normal; }
	.budget-controls .period-range-inputs { max-width: none; gap: 0.4rem; }
	.budget-controls .period-range-inputs .small-date-input,
	.budget-controls > div.currency-control select {
		height: 2.08rem; min-height: 2.08rem;
		padding: 0.32rem 0.4rem; font-size: 0.9rem; line-height: 1.1;
	}
	.budget-controls .period-range-inputs .small-date-input { width: 8rem; max-width: min(38vw,8rem); }
	.budget-controls > div.currency-control select { width: 5.5rem; max-width: min(28vw,5.5rem); }
	.budget-controls .control-action { grid-column: 1 / -1; }
	.budget-controls .control-action .stack { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; justify-items: stretch; }
	.budget-controls .control-action .stack > button { font-size: 0.8rem; padding: 0.38rem 0.4rem; line-height: 1.2; white-space: normal; min-height: 2.2rem; width: 100%; }
	.budget-controls .control-action .stack > button:last-child { grid-column: 1 / -1; }

	input[type="date"], input[type="month"] { width: 80%; max-width: 80%; min-width: 0; }
	.budget-columns .stack input[type="date"],
	.budget-columns .stack input[type="month"] {
		width: 100%; min-width: 0; max-width: 100%;
	}
	.forms-grid .stack input[type="date"],
	.forms-grid .stack input[type="month"] {
		width: 100%; min-width: 0; max-width: 100%;
	}
	.forms-grid input[type="date"]::-webkit-calendar-picker-indicator,
	.forms-grid input[type="month"]::-webkit-calendar-picker-indicator {
		transform: scale(0.7);
		margin-left: 0;
	}
	.forms-grid input, .forms-grid select {
		font-size: 0.82rem;
		padding: 0.32rem 0.38rem;
	}
	.forms-grid label { font-size: 0.8rem; }
	.forms-grid .card { padding: 0.65rem 0.6rem; }
	#forecast-planner input[type="date"],
	#whatif-rows input[type="date"] {
		width: 80%; inline-size: 80%; min-width: 0; max-width: 80%;
		font-size: 0.86rem; padding-left: 0.44rem; padding-right: 0.44rem;
	}
	#forecast-planner input:not([type="date"]),
	#forecast-planner select,
	#forecast-planner button {
		font-size: 1rem;
		min-height: 2.5rem;
		padding: 0.5rem 0.6rem;
	}
	#forecast-planner label { font-size: 0.95rem; }
	#whatif-rows .whatif-row label { font-size: 0.85rem; }
	#whatif-rows .whatif-row input,
	#whatif-rows .whatif-row select {
		min-height: 2.4rem;
		font-size: 0.95rem;
		padding: 0.4rem 0.5rem;
	}
	.forecast-results p { font-size: 1rem; }
#income-date, #expense-date {
		width: 100%; max-width: 120px;
		inline-size: 100%; max-inline-size: 120px;
		min-inline-size: 0;
		font-size: 0.78rem;
		padding: 0.28rem 0.3rem;
	}
	.whatif-row-fields { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.saved-plans-actions { justify-content: flex-start; }
	.saved-plans-top-row { flex-wrap: wrap; }
	.saved-plans-top-row .saved-plans-dropdown { max-width: none; flex: 1 1 auto; }
	.saved-plans-top-row #add-whatif-row { flex: 0 0 100%; width: 100%; white-space: normal; font-size: 0.86rem; }
 
	.chart-body { flex-direction: column; align-items: stretch; }
	.chart-canvas-wrap { width: 100%; max-width: 100%; flex: 1 1 auto; }
	.chart-legend { max-height: none; flex-direction: row; flex-wrap: wrap; gap: 0.35rem 0.8rem; }

	.auth-action-bar { grid-template-columns: 1fr; }
 
	.entry-list li { grid-template-columns: 1fr; gap: 0.15rem; }
	.entry-filters { grid-template-columns: auto 1fr auto 1fr; gap: 0.25rem 0.4rem; align-items: center; }
	.entry-filters label { font-size: 0.78rem; }
	.entry-filters input[type="date"] {
		width: 80%; min-width: 0; max-width: 80%;
		min-height: 1.8rem; height: 1.8rem;
		padding: 0.2rem 0.28rem; font-size: 0.75rem; line-height: 1.05;
	}
	.entry-row { grid-template-columns: 1fr !important; }
	.row-actions { flex-direction: row; }
	.inline-icon-button { width: 2rem; height: 2rem; font-size: 1rem; }
	.inline-delete-confirm { width: min(300px, calc(100vw - 1rem)); }
	.inline-delete-confirm.is-mobile { left: 0.5rem; right: 0.5rem; bottom: 0.55rem; }
	.inline-delete-confirm-actions { gap: 0.45rem; }
	.inline-delete-confirm-actions .btn { flex: 1 1 50%; min-height: 2.3rem; font-size: 0.85rem; }
 
	.menu-wrap { justify-content: flex-start; }
	.hero-menu-wrap { grid-area: actions; justify-content: flex-end; align-items: stretch; min-width: 0; height: 42px; gap: 0.35rem; }
	.theme-switch-inline { height: 42px; padding: 0.2rem; border-radius: var(--panel-radius); }
	.menu-toggle { height: 42px; padding-top: 0; padding-bottom: 0; }
	.theme-switch-btn { min-width: 40px; height: 100%; padding: 0.35rem 0.48rem; gap: 0; }
	.theme-switch-btn-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
	.menu-panel { left: 0; right: auto; min-width: min(260px,90vw); }
 
	.contact-page { max-width: min(720px,96vw); }
	.contact-frame { padding: 0.9rem; }
	.contact-quick-actions { gap: 0.45rem; }
	.contact-quick-actions .btn, .contact-card button[type="submit"] { width: 100%; min-height: 2.25rem; }
}
 
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ── Debt Manager ── */
.debt-controls { grid-template-columns: auto 1fr; align-items: center; }
.debt-controls .control-action { grid-column: 1 / -1; display: flex; justify-content: center; }
.debt-controls .control-action .stack { display: flex; gap: 0.7rem; flex-wrap: nowrap; justify-content: center; }
.debt-controls .control-action .stack > button {
	flex: 0 1 auto;
	margin: 0;
	width: auto;
	white-space: normal;
	padding: var(--btn-padding-y) var(--btn-padding-x);
	font-size: var(--btn-font-size);
	line-height: 1.2;
	font-weight: 700;
}

.debt-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 1rem;
	margin-top: 1rem;
	align-items: start;
}

.debt-sidebar { display: grid; gap: 1rem; }

.debt-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.6rem;
}

.debt-row {
	border: 1px solid var(--line);
	border-radius: var(--control-radius);
	padding: 0.75rem;
	background: #fdfefe;
	display: grid;
	gap: 0.4rem;
}
[data-theme="dark"] .debt-row { background: #12203a; color: #e8efff; border-color: #3d5487; }

.debt-row-header {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.debt-name { font-size: 1rem; }
.debt-note { font-size: 0.82rem; color: var(--muted); }

.debt-progress-wrap {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.debt-progress-bar {
	flex: 1;
	height: 10px;
	background: var(--line);
	border-radius: var(--radius-pill);
	overflow: hidden;
}
.debt-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--accent), var(--good));
	border-radius: var(--radius-pill);
	transition: width 0.4s ease;
}
.debt-progress-pct {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--muted-strong);
	min-width: 2.8rem;
	text-align: right;
}

.debt-row-amounts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	font-size: 0.88rem;
	color: var(--muted);
}
.debt-row-amounts strong { color: var(--ink); }
[data-theme="dark"] .debt-row-amounts strong { color: #e8efff; }

.debt-empty {
	color: var(--muted);
	text-align: center;
	padding: 0.8rem 0;
}

.debt-inline-confirm {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 0.4rem;
	padding: 0.4rem 0.5rem;
	background: #fff3f5;
	border: 1px solid #f0b0bc;
	border-radius: var(--control-radius);
	font-size: 0.88rem;
}
[data-theme="dark"] .debt-inline-confirm { background: #2b1520; border-color: #7a3050; }

@media (max-width: 700px) {
	.debt-layout { grid-template-columns: 1fr; }
	.debt-controls { grid-template-columns: 1fr; }
	.debt-controls .control-action { grid-column: 1 / -1; }
	.debt-controls .currency-control { justify-items: start; }
	.debt-controls .currency-control select { width: 7.8rem; max-width: min(42vw,7.8rem); height: 2.08rem; min-height: 2.08rem; padding: 0.32rem 0.48rem; font-size: 0.9rem; line-height: 1.1; }
	.debt-controls .control-action .stack { gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
	.debt-controls .control-action .stack { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; justify-items: stretch; }
	.debt-controls .control-action .stack > button { font-size: 0.8rem; padding: 0.38rem 0.4rem; line-height: 1.2; white-space: normal; min-height: 2.2rem; width: 100%; }
	.debt-controls .control-action .stack > button:last-child { grid-column: 1 / -1; }
}