:root {
	color-scheme: light;
	--bg-main: #f2f6f8;
	--bg-accent: #dceff1;
	--bg-highlight: #ebf7f4;
	--panel-bg: rgba(255, 255, 255, 0.9);
	--panel-bg-solid: #ffffff;
	--panel-border: #d6e4ea;
	--panel-glass: rgba(255, 255, 255, 0.84);
	--panel-glass-strong: rgba(255, 255, 255, 0.76);
	--text-main: #0f2430;
	--text-muted: #5d7280;
	--text-soft: #6f8692;
	--brand: #0f766e;
	--brand-strong: #115e59;
	--brand-contrast: #ffffff;
	--brand-outline: rgba(15, 118, 110, 0.25);
	--warn: #b42318;
	--warn-bg: #ffe5e1;
	--success: #155e50;
	--success-bg: #dbf0eb;
	--caution: #9a6700;
	--caution-bg: #fff1cc;
	--shadow: 0 16px 40px rgba(22, 50, 66, 0.08);
	--field-bg: #ffffff;
	--field-border: #bfd1da;
	--surface-soft: #f6fbfc;
	--surface-hover: #f8fcfd;
	--surface-raised: #fcfefe;
	--surface-secondary: #f5fbfc;
	--surface-subtle: #edf3f6;
	--table-border: #d8e6ec;
	--table-row-border: #e5edf1;
	--card-border-soft: #dce8ee;
	--dashed-border: #b7ccd6;
	--note-card-bg: linear-gradient(180deg, #f8fcfe, #f2f7f9);
	--sync-panel-border: #cfe0e7;
	--sync-panel-bg:
		radial-gradient(circle at top right, rgba(15, 118, 110, 0.1), transparent 36%),
		linear-gradient(180deg, rgba(248, 252, 254, 0.96), rgba(240, 247, 249, 0.96));
	--sync-badge-border: rgba(17, 94, 89, 0.16);
	--sync-card-border: rgba(183, 204, 214, 0.9);
	--sync-code-bg: rgba(15, 118, 110, 0.08);
	--sync-popover-shadow: 0 28px 60px rgba(12, 32, 44, 0.18);
	--icon-btn-bg: rgba(255, 255, 255, 0.88);
	--icon-btn-border: rgba(15, 118, 110, 0.18);
	--icon-btn-hover: rgba(255, 255, 255, 0.98);
	--icon-btn-icon: #115e59;
	--status-neutral: #90a1ab;
	--status-progress: #c38a13;
	--status-success: #1a7f64;
	--status-error: #d14332;
	--chart-actual-line: #0f766e;
	--chart-actual-fill: rgba(15, 118, 110, 0.12);
	--chart-forecast-line: #c2410c;
	--chart-forecast-fill: rgba(194, 65, 12, 0.16);
	--chart-grid: rgba(15, 36, 48, 0.1);
	--chart-text: #5d7280;
	--chart-tooltip-bg: rgba(255, 255, 255, 0.96);
	--chart-tooltip-border: rgba(15, 36, 48, 0.12);
	--chart-tooltip-text: #0f2430;
}

html[data-theme='dark'] {
	color-scheme: dark;
	--bg-main: #09131f;
	--bg-accent: #143043;
	--bg-highlight: #0c2331;
	--panel-bg: rgba(8, 18, 28, 0.82);
	--panel-bg-solid: #101b28;
	--panel-border: rgba(111, 154, 178, 0.22);
	--panel-glass: rgba(10, 23, 35, 0.88);
	--panel-glass-strong: rgba(11, 24, 37, 0.78);
	--text-main: #ecf5fb;
	--text-muted: #9db4c2;
	--text-soft: #84a0b0;
	--brand: #52c6b3;
	--brand-strong: #8ce7d4;
	--brand-contrast: #041217;
	--brand-outline: rgba(82, 198, 179, 0.32);
	--warn: #ff8a7a;
	--warn-bg: rgba(157, 56, 48, 0.26);
	--success: #89efcf;
	--success-bg: rgba(32, 120, 99, 0.28);
	--caution: #ffd37a;
	--caution-bg: rgba(156, 108, 24, 0.26);
	--shadow: 0 22px 56px rgba(0, 0, 0, 0.35);
	--field-bg: rgba(7, 21, 33, 0.84);
	--field-border: rgba(109, 145, 165, 0.34);
	--surface-soft: rgba(18, 34, 48, 0.86);
	--surface-hover: rgba(21, 42, 58, 0.95);
	--surface-raised: rgba(9, 24, 36, 0.92);
	--surface-secondary: rgba(16, 32, 46, 0.94);
	--surface-subtle: rgba(20, 40, 56, 0.92);
	--table-border: rgba(109, 145, 165, 0.22);
	--table-row-border: rgba(109, 145, 165, 0.16);
	--card-border-soft: rgba(115, 152, 175, 0.18);
	--dashed-border: rgba(104, 147, 168, 0.34);
	--note-card-bg: linear-gradient(180deg, rgba(10, 24, 36, 0.94), rgba(12, 29, 42, 0.96));
	--sync-panel-border: rgba(94, 157, 171, 0.22);
	--sync-panel-bg:
		radial-gradient(circle at top right, rgba(82, 198, 179, 0.18), transparent 40%),
		linear-gradient(180deg, rgba(9, 21, 34, 0.98), rgba(11, 27, 41, 0.96));
	--sync-badge-border: rgba(140, 231, 212, 0.22);
	--sync-card-border: rgba(98, 146, 167, 0.28);
	--sync-code-bg: rgba(82, 198, 179, 0.14);
	--sync-popover-shadow: 0 30px 64px rgba(0, 0, 0, 0.44);
	--icon-btn-bg: rgba(12, 26, 38, 0.84);
	--icon-btn-border: rgba(140, 231, 212, 0.18);
	--icon-btn-hover: rgba(18, 35, 50, 0.96);
	--icon-btn-icon: #d7fff7;
	--status-neutral: #7c95a5;
	--status-progress: #ffd37a;
	--status-success: #89efcf;
	--status-error: #ff8a7a;
	--chart-actual-line: #6ce1ce;
	--chart-actual-fill: rgba(82, 198, 179, 0.16);
	--chart-forecast-line: #ffb27c;
	--chart-forecast-fill: rgba(255, 178, 124, 0.2);
	--chart-grid: rgba(233, 245, 251, 0.12);
	--chart-text: #a8becb;
	--chart-tooltip-bg: rgba(7, 21, 33, 0.96);
	--chart-tooltip-border: rgba(140, 231, 212, 0.18);
	--chart-tooltip-text: #effafc;
}

html {
	background: var(--bg-main);
}

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

body {
	margin: 0;
	min-height: 100vh;
	font-family: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
	color: var(--text-main);
	background:
		radial-gradient(circle at 8% 8%, var(--bg-accent), transparent 38%),
		radial-gradient(circle at 92% 0%, var(--bg-highlight), transparent 28%), var(--bg-main);
	transition:
		background 0.28s ease,
		color 0.2s ease;
}

.app-shell {
	width: min(1480px, 96vw);
	margin: 0 auto 56px;
}

.panel {
	background: var(--panel-bg);
	border: 1px solid var(--panel-border);
	border-radius: 20px;
	box-shadow: var(--shadow);
	transition:
		background 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease;
}

.top-control-panel {
	padding: 28px;
	display: grid;
	gap: 22px;
	background: var(--panel-bg-solid);
}

.top-control-panel__intro {
	min-width: 0;
	display: grid;
	gap: 18px;
}

.top-control-panel__intro-head {
	min-width: 0;
	display: grid;
	gap: 6px;
}

.eyebrow {
	margin: 0 0 8px;
	color: var(--brand);
	font-family: 'Manrope', sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.top-control-panel h1 {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	line-height: 1.15;
}

.layout {
	display: grid;
	gap: 20px;
}

.settings-panel-top {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
}

.settings-utility-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.sync-utility {
	position: relative;
}

.panel h2 {
	margin: 0 0 12px;
	font-size: 1.15rem;
}

.panel h3 {
	margin: 0;
	font-size: 1rem;
}

.form-grid {
	display: grid;
	gap: 12px;
}

#settings-form {
	display: grid;
	gap: 10px;
}

#settings-form .form-actions,
#settings-form .form-error,
#settings-form .status-message {
	margin-top: 0;
}

.settings-main-row {
	display: grid;
	grid-template-columns: minmax(220px, 320px) auto;
	gap: 12px;
	align-items: end;
}

.settings-form__actions {
	margin-top: 0;
	justify-content: flex-start;
}

.form-grid.two {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.form-grid.three {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

label {
	display: grid;
	gap: 6px;
	font-size: 0.92rem;
	color: var(--text-muted);
}

input {
	width: 100%;
	border: 1px solid var(--field-border);
	border-radius: 12px;
	padding: 10px 12px;
	font: inherit;
	font-size: 0.96rem;
	background: var(--field-bg);
	color: var(--text-main);
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

select {
	width: 100%;
	border: 1px solid var(--field-border);
	border-radius: 12px;
	padding: 10px 12px;
	font: inherit;
	font-size: 0.96rem;
	background: var(--field-bg);
	color: var(--text-main);
	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

input:focus {
	outline: 2px solid var(--brand-outline);
	border-color: var(--brand);
}

select:focus {
	outline: 2px solid var(--brand-outline);
	border-color: var(--brand);
}

.form-actions {
	margin-top: 12px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.btn {
	border: 0;
	border-radius: 999px;
	font: inherit;
	padding: 9px 16px;
	cursor: pointer;
	transition:
		transform 0.15s ease,
		opacity 0.15s ease,
		background 0.2s ease;
}

.btn:disabled {
	cursor: not-allowed;
	opacity: 0.58;
	transform: none;
}

.btn:hover {
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
}

.btn-primary {
	color: var(--brand-contrast);
	background: linear-gradient(135deg, var(--brand), var(--brand-strong));
}

.btn-secondary {
	color: var(--text-main);
	background: var(--surface-subtle);
}

.btn-secondary:hover {
	background: var(--surface-hover);
}

.btn-danger {
	color: var(--brand-contrast);
	background: var(--warn);
}

.hidden {
	display: none !important;
}

.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;
}

.form-error {
	margin: 8px 0 0;
	color: var(--warn);
	min-height: 1.2em;
	font-size: 0.9rem;
}

.form-note {
	margin: 8px 0 0;
	color: var(--text-muted);
	font-size: 0.9rem;
}

.mobile-only-disclosure {
	display: none;
}

.compact-disclosure {
	margin-top: 10px;
	border: 1px solid var(--card-border-soft);
	border-radius: 14px;
	background: var(--surface-raised);
	overflow: hidden;
}

.compact-disclosure > summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 14px;
	cursor: pointer;
	font-family: 'Manrope', sans-serif;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--text-main);
}

.compact-disclosure > summary::-webkit-details-marker {
	display: none;
}

.compact-disclosure > summary::after {
	content: '＋';
	flex: 0 0 auto;
	font-size: 0.95rem;
	color: var(--text-muted);
}

.compact-disclosure[open] > summary::after {
	content: '－';
}

.compact-disclosure > p {
	margin: 0;
	padding: 0 14px 12px;
	color: var(--text-muted);
	font-size: 0.88rem;
	line-height: 1.55;
}

.compact-disclosure p code {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--sync-code-bg);
	color: var(--brand-strong);
	font-family: 'Manrope', monospace;
	font-size: 0.82rem;
}

.icon-btn {
	position: relative;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--icon-btn-border);
	border-radius: 16px;
	background: linear-gradient(180deg, var(--icon-btn-bg), var(--panel-bg));
	color: var(--icon-btn-icon);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 28px rgba(13, 35, 48, 0.08);
}

.icon-btn:hover {
	background: linear-gradient(180deg, var(--icon-btn-hover), var(--panel-bg-solid));
}

.icon-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--brand-outline);
}

.toolbar-icon {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}

.theme-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.icon-moon {
	display: none;
}

html[data-theme='dark'] .icon-sun {
	display: none;
}

html[data-theme='dark'] .icon-moon {
	display: inline-flex;
}

.theme-toggle-btn[data-theme='dark'] {
	color: var(--caution);
}

.sync-status-dot {
	position: absolute;
	top: 7px;
	right: 7px;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	border: 2px solid var(--panel-bg-solid);
	background: var(--status-neutral);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}

.sync-status-dot[data-sync-tone='progress'] {
	background: var(--status-progress);
}

.sync-status-dot[data-sync-tone='success'] {
	background: var(--status-success);
}

.sync-status-dot[data-sync-tone='error'] {
	background: var(--status-error);
}

.sync-status-dot.is-pulsing {
	animation: syncPulse 1.6s ease-in-out infinite;
}

@keyframes syncPulse {
	0%,
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(195, 138, 19, 0.24);
	}

	55% {
		transform: scale(1.08);
		box-shadow: 0 0 0 7px rgba(195, 138, 19, 0);
	}
}

.sync-popover {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	width: min(820px, calc(100vw - 40px));
	padding: 18px;
	border: 1px solid var(--sync-panel-border);
	border-radius: 24px;
	background: var(--sync-panel-bg);
	box-shadow: var(--sync-popover-shadow);
	z-index: 40;
}

.sync-popover::before {
	content: '';
	position: absolute;
	top: -9px;
	right: 16px;
	width: 18px;
	height: 18px;
	border-top: 1px solid var(--sync-panel-border);
	border-left: 1px solid var(--sync-panel-border);
	background: var(--panel-bg-solid);
	transform: rotate(45deg);
}

.settings-popover-header {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: flex-start;
}

.settings-popover-header h3 {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-size: 1.12rem;
}

.settings-popover-description {
	margin: 8px 0 0;
	color: var(--text-muted);
	font-size: 0.9rem;
	line-height: 1.55;
}

.settings-popover-grid {
	margin-top: 16px;
	display: grid;
	grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1.35fr);
	gap: 14px;
	align-items: start;
}

.settings-popover-card {
	border: 1px solid var(--sync-card-border);
	border-radius: 18px;
	background: var(--panel-glass);
	backdrop-filter: blur(8px);
	padding: 18px;
}

.settings-popover-card--backup {
	display: grid;
	align-content: start;
	gap: 12px;
}

.settings-popover-section-head {
	display: grid;
	gap: 6px;
}

.settings-popover-section-head .sync-eyebrow {
	margin: 0;
}

.settings-popover-section-head h4 {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-size: 1rem;
}

.settings-popover-note {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.9rem;
	line-height: 1.55;
}

.settings-popover-actions {
	margin-top: 0;
}

.settings-popover-card .status-message {
	margin-top: 0;
}

.sync-panel-header {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: flex-start;
}

.sync-eyebrow {
	margin: 0 0 6px;
	color: var(--brand);
	font-family: 'Manrope', sans-serif;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sync-panel-header h3 {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-size: 1.08rem;
}

.sync-badge {
	min-width: 160px;
	padding: 12px 14px;
	border: 1px solid var(--sync-badge-border);
	border-radius: 16px;
	background: var(--panel-glass-strong);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.sync-badge span {
	display: block;
	color: var(--text-muted);
	font-size: 0.82rem;
}

.sync-badge strong {
	display: block;
	margin-top: 4px;
	color: var(--brand-strong);
	font-family: 'Manrope', sans-serif;
	font-size: 1rem;
}

.sync-overview {
	margin-top: 16px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	align-items: start;
}

.sync-connection-card,
.sync-metric-card {
	border: 1px solid var(--sync-card-border);
	border-radius: 16px;
	background: var(--panel-glass);
	backdrop-filter: blur(8px);
}

.sync-connection-card {
	padding: 18px;
	display: grid;
	gap: 8px;
}

.sync-label {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sync-connection-card strong {
	display: block;
	font-family: 'Manrope', sans-serif;
	font-size: 1.22rem;
	line-height: 1.2;
}

.sync-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	align-items: start;
}

.sync-metric-card {
	padding: 16px;
}

.sync-metric-card p {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.84rem;
}

.sync-metric-card strong {
	display: block;
	margin-top: 10px;
	font-family: 'Manrope', sans-serif;
	font-size: 0.98rem;
	line-height: 1.35;
	color: var(--text-main);
}

.sync-actions {
	margin-top: 16px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.status-message {
	margin: 8px 0 0;
	min-height: 1.2em;
	font-size: 0.9rem;
}

.status-message.is-error {
	color: var(--warn);
}

.status-message.is-success {
	color: var(--success);
}

.status-message.is-info {
	color: var(--text-muted);
}

.summary-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
}

.summary-card {
	padding: 18px 20px;
}

.summary-card p {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.9rem;
}

.summary-card strong {
	margin-top: 8px;
	display: block;
	font-family: 'Manrope', sans-serif;
	font-size: 1.35rem;
}

.management-tabs {
	display: grid;
	gap: 14px;
}

.management-tabs__nav {
	display: flex;
	gap: 10px;
	padding: 6px;
	overflow-x: auto;
	border: 1px solid var(--panel-border);
	border-radius: 20px;
	background: linear-gradient(180deg, var(--panel-glass), var(--panel-glass-strong));
	scrollbar-width: thin;
	scrollbar-color: var(--table-border) transparent;
	-webkit-overflow-scrolling: touch;
}

.management-tabs__nav::-webkit-scrollbar {
	height: 8px;
}

.management-tabs__nav::-webkit-scrollbar-thumb {
	background: var(--table-border);
	border-radius: 999px;
}

.management-tabs__panels {
	display: grid;
}

.management-tab {
	flex: 0 0 auto;
	padding: 12px 18px;
	border: 0;
	border-radius: 14px;
	background: transparent;
	color: var(--text-muted);
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
	cursor: pointer;
	scroll-snap-align: start;
	transition:
		background-color 160ms ease,
		color 160ms ease,
		box-shadow 160ms ease,
		transform 160ms ease;
}

.management-tab:hover {
	color: var(--text-main);
	background: var(--surface-hover);
}

.management-tab.is-active,
.management-tab[aria-selected='true'] {
	color: var(--text-main);
	background: linear-gradient(180deg, var(--surface-raised), var(--panel-bg-solid));
	box-shadow:
		0 10px 24px rgba(15, 36, 48, 0.08),
		inset 0 0 0 1px var(--brand-outline);
}

.management-tab:focus-visible {
	outline: none;
	color: var(--text-main);
	box-shadow:
		0 0 0 3px var(--brand-outline),
		0 10px 24px rgba(15, 36, 48, 0.08);
}

.management-tab-panel {
	min-width: 0;
}

.management-tab-panel[hidden] {
	display: none;
}

.management-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
	gap: 16px;
}

.management-tab-panel,
.management-grid .panel,
.results-panel,
.layout > .panel {
	padding: 20px;
}

.section-title {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}

.section-title p {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.9rem;
}

.table-wrap {
	margin-top: 14px;
	overflow-x: auto;
	border: 1px solid var(--table-border);
	border-radius: 14px;
}

table {
	width: 100%;
	border-collapse: collapse;
	min-width: 680px;
}

.management-grid table {
	min-width: 0;
}

#management-panel-income table,
#management-panel-expense table,
#management-panel-installment table {
	min-width: 0;
}

th,
td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--table-row-border);
	vertical-align: middle;
}

th {
	background: var(--surface-soft);
	color: var(--text-muted);
	font-weight: 700;
	font-size: 0.88rem;
}

th.sortable-col {
	padding: 0;
}

.table-sort-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: inherit;
	text-align: left;
	cursor: pointer;
}

.table-sort-button:hover {
	color: var(--text-main);
}

.table-sort-button:focus-visible {
	outline: 2px solid var(--brand-outline);
	outline-offset: -2px;
	color: var(--text-main);
}

.table-sort-button__label {
	min-width: 0;
}

.table-sort-button__indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1rem;
	color: var(--text-soft);
	font-size: 0.82rem;
	flex-shrink: 0;
}

.table-sort-button__indicator::before {
	content: "\2195";
}

.table-sort-button[data-direction='asc'],
.table-sort-button[data-direction='desc'],
th.sortable-col[aria-sort='ascending'],
th.sortable-col[aria-sort='descending'] {
	color: var(--text-main);
}

.table-sort-button[data-direction='asc'] .table-sort-button__indicator::before {
	content: "\2191";
	color: var(--brand-strong);
}

.table-sort-button[data-direction='desc'] .table-sort-button__indicator::before {
	content: "\2193";
	color: var(--brand-strong);
}

tbody tr:hover {
	background: var(--surface-hover);
}

tbody tr.negative-row {
	background: var(--warn-bg);
}

tbody tr.warning-row {
	background: var(--caution-bg);
}

.status-chip {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
}

.status-chip.ok {
	color: var(--success);
	background: var(--success-bg);
}

.status-chip.warn {
	color: var(--warn);
	background: var(--warn-bg);
}

.status-chip.caution {
	color: var(--caution);
	background: var(--caution-bg);
}

.table-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 132px;
}

.table-actions .btn {
	padding: 6px 12px;
	font-size: 0.82rem;
	white-space: nowrap;
}

.chart-wrap {
	margin-top: 8px;
	border: 1px solid var(--table-border);
	border-radius: 16px;
	background: var(--surface-raised);
	padding: 16px 12px 6px;
}

#forecast-chart {
	width: 100% !important;
	height: 320px !important;
}

.batch-bar {
	margin-top: 14px;
	padding: 12px 14px;
	border: 1px solid var(--table-border);
	border-radius: 14px;
	background: var(--surface-hover);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.batch-bar span {
	color: var(--text-main);
	font-weight: 700;
}

.batch-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.batch-panel {
	margin-top: 12px;
	padding: 16px;
	border: 1px solid var(--table-border);
	border-radius: 16px;
	background: linear-gradient(180deg, var(--surface-raised), var(--surface-secondary));
}

.closing-account-list {
	display: grid;
	gap: 10px;
	margin-top: 14px;
}

.closing-account-row {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
	gap: 12px;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid var(--card-border-soft);
	background: var(--panel-glass);
}

.closing-account-meta,
.closing-account-input {
	display: grid;
	gap: 4px;
}

.closing-account-meta span,
.closing-account-input {
	color: var(--text-muted);
	font-size: 0.88rem;
}

.closing-account-meta strong,
.closing-account-input {
	color: var(--text-main);
}

.history-breakdown {
	margin: 0;
}

.history-breakdown > summary {
	list-style: none;
	cursor: pointer;
	color: var(--brand-strong);
	font-weight: 700;
}

.history-breakdown > summary::-webkit-details-marker {
	display: none;
}

.history-breakdown > summary::after {
	content: '＋';
	margin-left: 8px;
	color: var(--text-muted);
}

.history-breakdown[open] > summary::after {
	content: '－';
}

.history-breakdown-list {
	display: grid;
	gap: 8px;
	margin-top: 10px;
}

.history-breakdown-item {
	display: grid;
	gap: 4px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid var(--table-row-border);
	background: var(--surface-soft);
}

.history-breakdown-item span {
	color: var(--text-muted);
	font-size: 0.82rem;
	line-height: 1.45;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.batch-list {
	display: grid;
	gap: 10px;
	margin-top: 12px;
}

.batch-item-row {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
	gap: 12px;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid var(--card-border-soft);
	background: var(--panel-glass);
}

.batch-item-meta {
	display: grid;
	gap: 4px;
}

.batch-item-meta strong {
	font-size: 0.95rem;
}

.batch-item-meta span {
	color: var(--text-muted);
	font-size: 0.88rem;
}

.batch-item-select {
	display: grid;
	gap: 6px;
}

.batch-item-select span {
	color: var(--text-muted);
	font-size: 0.88rem;
}

.checkbox-col,
.selection-cell {
	width: 48px;
	text-align: center;
}

.row-selector {
	width: auto;
}

.results-stack {
	display: grid;
	gap: 18px;
	margin-top: 18px;
}

.mobile-forecast-accordion {
	display: none;
}

.mobile-forecast-empty {
	margin: 12px 0 0;
	padding: 14px;
	border: 1px dashed var(--dashed-border);
	border-radius: 14px;
	color: var(--text-muted);
	background: var(--surface-soft);
}

.forecast-mobile-accordion-item {
	border: 1px solid var(--table-border);
	border-radius: 16px;
	background: var(--surface-raised);
	box-shadow: 0 10px 24px rgba(12, 32, 44, 0.08);
	overflow: hidden;
}

.forecast-mobile-summary {
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 14px;
	cursor: pointer;
	background: var(--surface-soft);
}

.forecast-mobile-summary::-webkit-details-marker {
	display: none;
}

.forecast-mobile-summary::after {
	content: '＋';
	flex: 0 0 auto;
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-muted);
}

.forecast-mobile-accordion-item[open] .forecast-mobile-summary::after {
	content: '－';
}

.forecast-mobile-summary-main {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.forecast-mobile-summary-main strong {
	font-family: 'Manrope', sans-serif;
	font-size: 0.98rem;
}

.forecast-mobile-summary-main span {
	color: var(--text-muted);
	font-size: 0.82rem;
	line-height: 1.4;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.forecast-mobile-summary-side {
	flex: 0 0 auto;
}

.forecast-mobile-cards {
	display: grid;
	gap: 10px;
	padding: 12px;
	background: var(--surface-raised);
}

.forecast-mobile-card {
	padding: 12px;
	border: 1px solid var(--table-row-border);
	border-radius: 14px;
	background: var(--panel-bg-solid);
	min-width: 0;
}

.forecast-mobile-card.is-warning {
	background: linear-gradient(180deg, var(--caution-bg), var(--panel-bg-solid));
	border-color: rgba(154, 103, 0, 0.18);
}

.forecast-mobile-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	min-width: 0;
}

.forecast-mobile-card-header strong {
	font-size: 0.96rem;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.forecast-mobile-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.forecast-mobile-pair {
	padding: 10px;
	border-radius: 12px;
	background: var(--surface-soft);
	min-width: 0;
	display: grid;
	gap: 4px;
}

.forecast-mobile-pair-label {
	color: var(--text-muted);
	font-size: 0.78rem;
}

.forecast-mobile-pair-value {
	font-size: 0.92rem;
	line-height: 1.35;
	word-break: break-word;
	overflow-wrap: anywhere;
}

.subsection-title {
	margin-bottom: 8px;
}

.subsection-title h3 {
	margin: 0;
	font-size: 1rem;
}

.forecast-cell-highlight {
	font-weight: 700;
}

.forecast-cell-status {
	white-space: nowrap;
}

@media (max-width: 1380px) {
	.management-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	.app-shell {
		width: min(1220px, 96vw);
		margin: 0 auto 36px;
	}

	.top-control-panel {
		gap: 20px;
	}

	.settings-panel-top {
		align-items: flex-start;
	}

	.settings-utility-bar {
		align-self: flex-start;
	}

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

	.sync-overview {
		grid-template-columns: 1fr;
	}

	.sync-utility {
		position: static;
	}

	.sync-popover {
		left: 0;
		right: 0;
		width: auto;
	}

	.sync-popover::before {
		right: 20px;
	}

	.sync-panel-header {
		flex-direction: column;
		align-items: stretch;
	}

	.settings-popover-grid {
		grid-template-columns: 1fr;
	}

	.sync-badge {
		min-width: 0;
	}

	.sync-metrics {
		grid-template-columns: 1fr;
	}

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

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

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

@media (max-width: 640px) {
	html {
		overflow-x: clip;
	}

	body {
		font-size: 0.94rem;
	}

	.app-shell {
		width: auto;
		max-width: none;
		margin: 0 10px 20px;
	}

	.layout {
		gap: 16px;
	}

	.top-control-panel,
	.management-tab-panel,
	.management-grid .panel,
	.results-panel,
	.layout > .panel {
		padding: 14px;
	}

	.top-control-panel {
		gap: 16px;
	}

	.top-control-panel h1 {
		font-size: clamp(1.54rem, 6vw, 1.82rem);
	}

	.top-control-panel__intro {
		gap: 12px;
	}

	.settings-panel-top {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.settings-utility-bar {
		width: 100%;
		align-self: stretch;
		justify-content: flex-end;
		flex-wrap: wrap;
		gap: 8px;
	}

	.sync-utility {
		width: auto;
	}

	.settings-main-row {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.sync-popover {
		left: 0;
		right: 0;
		width: auto;
		padding: 14px;
		border-radius: 18px;
	}

	.sync-panel-header {
		gap: 12px;
	}

	.settings-popover-header,
	.settings-popover-section-head {
		gap: 10px;
	}

	.settings-popover-grid {
		grid-template-columns: 1fr;
	}

	.settings-popover-card {
		padding: 14px;
		border-radius: 16px;
	}

	.sync-overview {
		margin-top: 12px;
		gap: 10px;
	}

	.sync-connection-card {
		padding: 14px;
		gap: 6px;
	}

	.sync-metric-card {
		padding: 12px;
	}

	.sync-actions,
	.form-actions,
	.batch-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.sync-actions .btn,
	.form-actions .btn,
	.batch-actions .btn {
		width: 100%;
		min-height: 44px;
		margin: 0;
	}

	.sync-actions[data-visible-count='1'] > .btn:not(.hidden),
	.form-actions[data-visible-count='1'] > .btn:not(.hidden),
	.batch-actions[data-visible-count='1'] > .btn:not(.hidden) {
		grid-column: 1 / -1;
	}

.sync-actions[data-visible-count='3'] > .btn:last-child:not(.hidden),
.form-actions[data-visible-count='3'] > .btn:last-child:not(.hidden),
.batch-actions[data-visible-count='3'] > .btn:last-child:not(.hidden) {
	grid-column: 1 / -1;
}

.sync-actions[data-visible-count='5'] > .btn:last-child:not(.hidden),
.form-actions[data-visible-count='5'] > .btn:last-child:not(.hidden),
.batch-actions[data-visible-count='5'] > .btn:last-child:not(.hidden) {
	grid-column: 1 / -1;
}

	.summary-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		padding-inline: 0;
	}

	.management-tabs {
		gap: 12px;
	}

	.management-tabs__nav {
		gap: 8px;
		padding: 5px;
		border-radius: 16px;
	}

	.management-tab {
		min-height: 44px;
		padding: 10px 14px;
		font-size: 0.9rem;
	}

	.summary-card {
		padding: 14px 14px 13px;
	}

	.summary-card p {
		font-size: 0.84rem;
		line-height: 1.35;
	}

	.summary-card strong {
		margin-top: 6px;
		font-size: 1.15rem;
		line-height: 1.2;
	}

	.section-title {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.section-title p {
		font-size: 0.86rem;
	}

	.batch-bar {
		margin-top: 12px;
		padding: 10px 12px;
		gap: 10px;
		align-items: flex-start;
	}

	.batch-actions {
		width: 100%;
	}

	.batch-panel {
		padding: 14px;
	}

	.batch-item-row {
		padding: 10px 12px;
		gap: 10px;
	}

	.table-wrap {
		margin-top: 12px;
		border-radius: 12px;
	}

	th,
	td {
		padding: 9px 10px;
	}

	th {
		font-size: 0.84rem;
	}

	.table-actions {
		justify-content: flex-start;
		min-width: 0;
		gap: 6px;
	}

	.table-actions .btn {
		padding: 6px 10px;
		font-size: 0.8rem;
	}

	.results-stack {
		gap: 14px;
		margin-top: 14px;
	}

	.chart-wrap {
		margin-top: 6px;
		padding: 12px 10px 2px;
	}

	#forecast-chart {
		height: 240px !important;
	}

	.forecast-mobile-summary {
		padding: 12px;
		gap: 10px;
	}

	.forecast-mobile-summary-main strong {
		font-size: 0.94rem;
	}

	.forecast-mobile-summary-main span {
		font-size: 0.8rem;
	}

	.forecast-mobile-cards {
		gap: 8px;
		padding: 10px;
	}

	.forecast-mobile-card {
		padding: 10px;
	}

	.forecast-mobile-card-header {
		margin-bottom: 8px;
		gap: 8px;
	}

	.forecast-mobile-grid {
		gap: 6px;
	}

	.forecast-mobile-pair {
		padding: 8px;
	}

	.forecast-mobile-pair-label {
		font-size: 0.76rem;
	}

	.forecast-mobile-pair-value {
		font-size: 0.88rem;
	}

	.desktop-note {
		display: none !important;
	}

	.mobile-only-disclosure {
		display: block;
	}
}

@media (max-width: 480px) {
	.app-shell {
		margin: 0 8px 18px;
	}

	.layout {
		gap: 14px;
	}

	.top-control-panel h1 {
		font-size: 1.46rem;
	}

	.section-title p,
	.form-note,
	.settings-popover-description,
	.settings-popover-note {
		font-size: 0.84rem;
	}

	.summary-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		padding-inline: 0;
	}

	.summary-card {
		padding: 12px;
	}

	.summary-card strong {
		font-size: 1.05rem;
	}

	.form-grid.two,
	.form-grid.three,
	.form-grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	input,
	select {
		font-size: 16px;
	}

	label {
		font-size: 0.9rem;
	}

	.icon-btn {
		width: 44px;
		height: 44px;
		border-radius: 14px;
	}

	.btn {
		padding: 8px 12px;
	}

	.sync-popover {
		padding: 12px;
		border-radius: 16px;
	}

	.sync-popover::before {
		right: 18px;
	}

	.settings-popover-card {
		padding: 12px;
	}

	.sync-actions .btn,
	.form-actions .btn,
	.batch-actions .btn {
		min-height: 44px;
	}

	.batch-bar,
	.batch-panel {
		padding: 12px;
	}

	.batch-item-row {
		padding: 10px;
		gap: 8px;
	}

	.compact-disclosure {
		margin-top: 8px;
		border-radius: 12px;
	}

	.compact-disclosure > summary {
		padding: 10px 12px;
		font-size: 0.84rem;
	}

	.compact-disclosure > p {
		padding: 0 12px 10px;
		font-size: 0.84rem;
	}

	.results-panel .table-wrap {
		margin-top: 10px;
		border: 0;
		background: transparent;
		overflow: visible;
	}

	.results-panel table,
	.results-panel tbody,
	.results-panel tr,
	.results-panel td {
		display: block;
		width: 100%;
	}

	.results-panel table {
		min-width: 0;
	}

	.results-panel thead {
		display: none;
	}

	.results-panel tbody {
		display: grid;
		gap: 10px;
	}

	.results-panel tbody tr {
		padding: 12px;
		border: 1px solid var(--table-border);
		border-radius: 14px;
		background: var(--surface-raised);
		box-shadow: 0 8px 20px rgba(12, 32, 44, 0.08);
	}

	.results-panel tbody tr.warning-row {
		background: linear-gradient(180deg, var(--caution-bg), var(--surface-raised));
	}

	.results-panel tbody tr:hover {
		background: var(--surface-raised);
	}

	.results-panel tbody tr.warning-row:hover {
		background: linear-gradient(180deg, var(--caution-bg), var(--surface-raised));
	}

	.results-panel tbody td[data-label] {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
		padding: 7px 0;
		border-bottom: 1px solid var(--table-row-border);
		text-align: left;
		min-width: 0;
		word-break: break-word;
		overflow-wrap: anywhere;
	}

	.results-panel tbody td[data-label]::before {
		content: attr(data-label);
		color: var(--text-muted);
		font-size: 0.78rem;
		font-weight: 600;
		text-align: left;
		line-height: 1.35;
	}

	.results-panel tbody td[data-label]:first-child {
		padding-top: 0;
	}

	.results-panel tbody td[data-label]:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.results-panel tbody td.forecast-cell-month,
	.results-panel tbody td.forecast-cell-highlight {
		font-weight: 700;
	}

	.results-panel tbody td.forecast-cell-status {
		align-items: center;
	}

	.results-panel tbody td.forecast-cell-status .status-chip {
		margin-left: 0;
	}

	.results-panel tbody td:not([data-label]) {
		padding: 0;
		border: 0;
		text-align: left;
	}

	.results-table-wrap {
		display: none;
	}

	.mobile-forecast-accordion {
		display: grid;
		gap: 10px;
		margin-top: 10px;
	}

	#forecast-chart {
		height: 210px !important;
	}
}