:root {
			--bg: #07111f;
			--bg-soft: #0f172a;
			--panel: rgba(10, 18, 33, 0.92);
			--panel-border: rgba(148, 163, 184, 0.16);
			--text: #e5eef8;
			--muted: #d6e0ee;
			--accent: #3b82f6;
			--accent-2: #14b8a6;
			--accent-3: #f59e0b;
		}
		[data-theme="light"] {
			--bg: #f4f7fb;
			--bg-soft: #ffffff;
			--panel: rgba(255, 255, 255, 0.92);
			--panel-border: rgba(15, 23, 42, 0.10);
			--text: #0f172a;
			--muted: #64748b;
		}
		.money-shell {
			max-width: 430px;
			margin: 0 auto;
			padding-bottom: 108px;
		}
		@media (min-width: 992px) {
			.money-shell {
				max-width: 1200px;
				padding-bottom: 56px;
			}
		}
		body {
			background:
				radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 32%),
				radial-gradient(circle at 85% 15%, rgba(20, 184, 166, 0.16), transparent 28%),
				radial-gradient(circle at bottom right, rgba(245, 158, 11, 0.12), transparent 26%),
				var(--bg);
			background-repeat: no-repeat;
			background-size: 100vw 100vh, 100vw 100vh, 100vw 100vh, auto;
			background-attachment: fixed;
			color: var(--text);
			--bs-body-color: var(--text);
			--bs-heading-color: #f8fbff;
			--bs-emphasis-color: #f8fbff;
			--bs-secondary-color: var(--muted);
		}
		.glass {
			background: var(--panel);
			border: 1px solid var(--panel-border);
			box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
			backdrop-filter: blur(18px);
			color: #f8fbff;
		}
		[data-theme="light"] .glass {
			color: #0f172a;
		}
		.muted {
			color: var(--muted);
		}
		.hero {
			border-radius: 1.75rem;
		}
		.metric {
			min-height: 124px;
		}
		.metric .value {
			font-size: 2rem;
			font-weight: 700;
			letter-spacing: -0.03em;
		}
		.soft-divider {
			border-color: rgba(148, 163, 184, 0.12) !important;
		}
		.table-darkish {
			--bs-table-bg: rgba(15, 23, 42, 0.4);
			--bs-table-striped-bg: rgba(15, 23, 42, 0.72);
			--bs-table-striped-color: var(--text);
			--bs-table-color: var(--text);
			--bs-table-border-color: rgba(148, 163, 184, 0.12);
		}
		.translation-edit-shell {
			display: flex;
			flex-direction: column;
			gap: 0.6rem;
		}
		.translation-ai-suggestion {
			border: 1px solid rgba(148, 163, 184, 0.18);
			background: color-mix(in srgb, var(--accent) 8%, var(--panel));
			border-radius: 14px;
			padding: 0.75rem;
		}
		.translation-ai-suggestion-text {
			font-size: 0.94rem;
			line-height: 1.35;
			word-break: break-word;
		}
		.translation-ai-request,
		.translation-ai-apply {
			width: 40px;
			height: 40px;
			padding: 0;
			flex: 0 0 auto;
			display: inline-grid;
			place-items: center;
		}
		.translation-ai-request i,
		.translation-ai-apply i {
			font-size: 1.05rem;
			line-height: 1;
		}
		.form-control, .form-select {
			background-color: rgba(15, 23, 42, 0.9);
			border-color: rgba(148, 163, 184, 0.18);
			color: var(--text);
		}
		.amount-input {
			text-align: right;
			font-size: 1.45rem;
			font-weight: 800;
			letter-spacing: -0.03em;
			font-variant-numeric: tabular-nums;
		}
		.amount-pad {
			margin-top: 0.15rem;
		}
		.amount-pad-grid {
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			grid-auto-rows: 52px;
			gap: 8px;
		}
		.amount-key {
			width: 100%;
			height: 100%;
			font-size: 1.15rem;
			font-weight: 800;
			border-radius: 16px;
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
			transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
		}
		.amount-key-split {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			grid-template-rows: 1fr;
			gap: 8px;
			height: 100%;
		}
		.amount-key-split .amount-key {
			min-height: 0;
			font-size: 0.95rem;
			padding-inline: 0.5rem;
		}
		.amount-key:hover {
			transform: translateY(-1px);
			box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
		}
		.amount-key:focus,
		.amount-key:focus-visible {
			box-shadow: none !important;
			outline: none !important;
		}
		.amount-key-dot {
			letter-spacing: 0.15em;
		}
		.receipt-actions-row {
			align-items: stretch;
		}
		.receipt-action-btn {
			min-height: 48px;
			border-radius: 14px;
			font-weight: 700;
		}
		.receipt-actions-group > .btn.receipt-action-upload {
			flex: 1 1 220px;
		}
		.receipt-actions-group > .btn.receipt-action-camera {
			flex: 0 0 auto;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			border-top-right-radius: 14px !important;
			border-bottom-right-radius: 14px !important;
		}
		.receipt-actions-group {
			display: flex;
			width: 100%;
		}
		.receipt-actions-group > .btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
		.receipt-actions-group > .btn.receipt-action-camera span {
			font-size: 1.05rem;
			line-height: 1;
		}
		@media (min-width: 992px) {
			.amount-key {
				min-height: 58px;
				font-size: 1.05rem;
			}
			.receipt-actions-row {
				flex-wrap: nowrap;
				gap: 12px;
			}
			.receipt-action-btn {
				min-height: 52px;
				font-size: 1rem;
				padding-inline: 1rem;
			}
		}
		@media (max-width: 575.98px) {
			.amount-pad-grid {
				grid-auto-rows: 46px;
				gap: 6px;
			}
			.amount-key {
				font-size: 1rem;
				border-radius: 14px;
			}
			.amount-key-split {
				gap: 6px;
			}
			.amount-key-split .amount-key {
				font-size: 0.8rem;
				padding-inline: 0.25rem;
			}
			.receipt-action-btn {
				min-height: 46px;
				font-size: 0.95rem;
			}
			.receipt-actions-group > .btn.receipt-action-camera {
				flex-basis: 46px;
			}
		}
		.card {
			background: var(--panel);
			border: 1px solid var(--panel-border);
			box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
			color: var(--text);
		}
		.bootstrap-select {
			width: 100% !important;
		}
		.bootstrap-select > .dropdown-toggle.money-select-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			min-height: 48px;
			padding: 0.75rem 1rem;
			background: rgba(15, 23, 42, 0.95);
			border: 1px solid rgba(148, 163, 184, 0.22);
			color: var(--text);
			border-radius: 0.75rem;
			box-shadow: none;
		}
		.bootstrap-select > .dropdown-toggle.money-select-btn:hover,
		.bootstrap-select > .dropdown-toggle.money-select-btn:focus,
		.bootstrap-select.show > .dropdown-toggle.money-select-btn {
			background: rgba(15, 23, 42, 0.98);
			border-color: rgba(59, 130, 246, 0.85);
			box-shadow: 0 0 0 .2rem rgba(59, 130, 246, 0.14);
		}
		.bootstrap-select > .dropdown-toggle.money-select-btn .filter-option-inner-inner {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.bootstrap-select .dropdown-menu {
			background: var(--panel);
			border: 1px solid var(--panel-border);
			color: var(--text);
			box-shadow: 0 24px 50px rgba(2, 6, 23, 0.35);
		}
		.bootstrap-select .dropdown-menu .bs-searchbox .form-control {
			background: rgba(15, 23, 42, 0.96);
			color: var(--text);
			border-color: rgba(148, 163, 184, 0.22);
		}
		.bootstrap-select .dropdown-menu .dropdown-item,
		.bootstrap-select .dropdown-menu .dropdown-item .text-muted {
			color: var(--text);
		}
		.bootstrap-select .dropdown-menu .dropdown-item.active,
		.bootstrap-select .dropdown-menu .dropdown-item:active,
		.bootstrap-select .dropdown-menu .dropdown-item:hover {
			background: rgba(59, 130, 246, 0.18);
			color: #f8fbff;
		}
		.bootstrap-select .dropdown-menu .dropdown-divider {
			border-top-color: rgba(148, 163, 184, 0.2);
		}
		.bootstrap-select .dropdown-menu .optgroup-1 {
			color: var(--muted);
		}
		.tx-type-group {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 8px;
		}
		.tx-type-btn {
			justify-content: center;
			min-width: 0;
			padding-inline: 0.75rem;
			text-wrap: balance;
		}
		.tx-type-btn.active,
		.tx-type-btn:focus-visible {
			background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent-2) 85%, var(--accent)));
			border-color: transparent;
			color: white;
			box-shadow: 0 16px 30px rgba(59, 130, 246, 0.18);
		}
		[data-theme="light"] .form-control,
		[data-theme="light"] .form-select,
		[data-theme="light"] .form-control-plaintext {
			background-color: #ffffff;
			border-color: rgba(15, 23, 42, 0.16);
			color: #0f172a;
			box-shadow: none;
		}
		[data-theme="light"] .form-control::placeholder {
			color: #94a3b8;
		}
		[data-theme="light"] .form-control:focus,
		[data-theme="light"] .form-select:focus {
			background-color: #ffffff;
			color: #0f172a;
			border-color: var(--accent);
			box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.15);
		}
		[data-theme="light"] .translation-ai-suggestion {
			background: color-mix(in srgb, var(--accent) 6%, #ffffff);
			border-color: rgba(15, 23, 42, 0.12);
		}
		[data-theme="light"] .translation-ai-suggestion-text {
			color: #0f172a;
		}
		[data-theme="light"] .bootstrap-select > .dropdown-toggle.money-select-btn {
			background: #ffffff;
			border-color: rgba(15, 23, 42, 0.16);
			color: #0f172a;
		}
		[data-theme="light"] .bootstrap-select > .dropdown-toggle.money-select-btn:hover,
		[data-theme="light"] .bootstrap-select > .dropdown-toggle.money-select-btn:focus,
		[data-theme="light"] .bootstrap-select.show > .dropdown-toggle.money-select-btn {
			background: #ffffff;
			border-color: var(--accent);
			box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.15);
		}
		[data-theme="light"] .bootstrap-select .dropdown-menu {
			background: #ffffff;
			border-color: rgba(15, 23, 42, 0.12);
			color: #0f172a;
		}
		[data-theme="light"] .bootstrap-select .dropdown-menu .bs-searchbox .form-control {
			background: #ffffff;
			color: #0f172a;
			border-color: rgba(15, 23, 42, 0.16);
		}
		[data-theme="light"] .bootstrap-select .dropdown-menu .dropdown-item,
		[data-theme="light"] .bootstrap-select .dropdown-menu .dropdown-item .text-muted {
			color: #0f172a;
		}
		[data-theme="light"] .bootstrap-select .dropdown-menu .dropdown-item.active,
		[data-theme="light"] .bootstrap-select .dropdown-menu .dropdown-item:active,
		[data-theme="light"] .bootstrap-select .dropdown-menu .dropdown-item:hover {
			background: rgba(59, 130, 246, 0.12);
			color: #0f172a;
		}
		[data-theme="light"] .form-label,
		[data-theme="light"] .form-check-label,
		[data-theme="light"] .form-text,
		[data-theme="light"] .col-form-label,
		[data-theme="light"] .input-group-text {
			color: #0f172a;
			background-color: transparent;
			border-color: transparent;
			text-shadow: none;
			font-weight: 600;
			opacity: 1;
		}
		body:not([data-theme="light"]) .form-label,
		body:not([data-theme="light"]) .form-check-label,
		body:not([data-theme="light"]) .form-text,
		body:not([data-theme="light"]) .col-form-label,
		body:not([data-theme="light"]) .input-group-text {
			color: #f8fbff;
			background-color: rgba(15, 23, 42, 0.96);
			border-color: rgba(148, 163, 184, 0.28);
			font-weight: 600;
			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
			opacity: 1;
		}
		body:not([data-theme="light"]) .form-control,
		body:not([data-theme="light"]) .form-select {
			background-color: rgba(15, 23, 42, 0.95);
			border-color: rgba(148, 163, 184, 0.28);
			color: var(--text);
		}
		body:not([data-theme="light"]) .card {
			color: #f8fbff;
		}
		body:not([data-theme="light"]) .card h1,
		body:not([data-theme="light"]) .card h2,
		body:not([data-theme="light"]) .card h3,
		body:not([data-theme="light"]) .card h4,
		body:not([data-theme="light"]) .card h5,
		body:not([data-theme="light"]) .card h6 {
			color: #f8fbff;
		}
		body:not([data-theme="light"]) .text-muted,
		body:not([data-theme="light"]) .small,
		body:not([data-theme="light"]) .form-text {
			color: #d6e0ee !important;
		}
		body:not([data-theme="light"]) .form-label.small,
		body:not([data-theme="light"]) .col-form-label.small,
		body:not([data-theme="light"]) .form-check-label.small {
			color: #f8fbff !important;
			font-weight: 600;
			opacity: 1;
			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
		}
		.form-control:focus, .form-select:focus {
			background-color: rgba(15, 23, 42, 0.95);
			color: var(--text);
			border-color: rgba(59, 130, 246, 0.9);
			box-shadow: 0 0 0 .25rem rgba(59, 130, 246, 0.18);
		}
		.form-control::placeholder {
			color: #64748b;
		}
		.chart-card canvas {
			max-height: 320px;
		}
		.sticky-top-soft {
			position: sticky;
			top: 1rem;
		}
		a {
			text-decoration: none;
		}
		.nav-pills .nav-link {
			color: var(--muted);
		}
		.nav-pills .nav-link.active {
			background: linear-gradient(135deg, var(--accent), var(--accent-2));
		}
		.mobile-topbar {
			position: sticky;
			top: 0;
			z-index: 1030;
			background: color-mix(in srgb, var(--bg) 84%, transparent);
			backdrop-filter: blur(18px);
			border-bottom: 1px solid var(--panel-border);
		}
		.app-bar {
			width: 100%;
			display: grid;
			grid-template-columns: auto minmax(0, 1fr) auto;
			align-items: center;
			gap: 12px;
			padding: 14px 16px;
		}
		.app-bar-side {
			display: flex;
			align-items: center;
			gap: 8px;
			min-width: 0;
		}
		.app-bar-left {
			justify-self: start;
		}
		.app-bar-right {
			justify-self: end;
		}
		.app-bar-title {
			min-width: 0;
			text-align: center;
			font-size: 1rem;
			font-weight: 700;
			letter-spacing: -0.01em;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.icon-btn {
			width: 42px;
			height: 42px;
			border-radius: 999px;
			border: 1px solid var(--panel-border);
			background: var(--panel);
			color: var(--text);
			display: inline-grid;
			place-items: center;
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
		}
		.icon-btn i {
			font-size: 1.05rem;
		}
		.push-toggle-btn[data-push-state="enabled"] {
			border-color: rgba(34, 197, 94, 0.72);
			background: color-mix(in srgb, #22c55e 20%, var(--panel));
			color: #22c55e;
		}
		.push-toggle-btn[data-push-state="disabled"] {
			border-color: rgba(245, 158, 11, 0.5);
			background: color-mix(in srgb, #f59e0b 12%, var(--panel));
			color: #f59e0b;
		}
		.push-toggle-btn[data-push-state="blocked"],
		.push-toggle-btn[data-push-state="unsupported"] {
			border-color: rgba(148, 163, 184, 0.28);
			background: color-mix(in srgb, #64748b 12%, var(--panel));
			color: var(--muted);
			opacity: 0.72;
		}
		.app-mark {
			width: 22px;
			height: 22px;
			display: block;
			object-fit: contain;
		}
		.seg-tabs {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 10px;
			width: 100%;
		}
		.period-tabs {
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 8px;
			width: 100%;
		}
		.period-tab {
			border: 1px solid var(--panel-border);
			background: var(--panel);
			color: var(--muted);
			border-radius: 18px;
			padding: 0.75rem 0.55rem;
			font-weight: 700;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-height: 92px;
			white-space: nowrap;
			min-width: 0;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			box-shadow: none;
			text-decoration: none;
		}
		.period-tab i {
			font-size: 3.35rem;
			line-height: 1;
			opacity: 0.9;
		}
		.period-tab-icon {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 4.85rem;
			min-height: 4.85rem;
			flex: 0 0 auto;
		}
		.period-tab-icon-text {
			position: absolute;
			inset: 50% auto auto 50%;
			transform: translate(-50%, -50%);
			min-width: 100%;
			padding: 0 0.15rem;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			color: inherit;
			font-size: clamp(0.82rem, 1.15vw, 1.1rem);
			font-weight: 800;
			line-height: 1;
			letter-spacing: 0.02em;
			text-align: center;
			pointer-events: none;
			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
			margin-top: 3px;
		}
		.period-stats-card {
			padding: 16px;
			border-radius: 22px;
			background: color-mix(in srgb, var(--accent) 6%, var(--panel));
			border: 1px solid var(--panel-border);
		}
		.period-chart-card {
			min-height: 340px;
			padding: 18px;
			border-radius: 18px;
			background: color-mix(in srgb, var(--panel) 92%, #000 8%);
			border: 1px solid var(--panel-border);
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
		}
		.period-chart-title {
			font-size: 0.95rem;
			font-weight: 800;
			letter-spacing: 0.03em;
			text-transform: uppercase;
			color: var(--muted);
			margin-bottom: 12px;
		}
		.period-trend-canvas-wrap {
			position: relative;
			height: 280px;
		}
		.period-bar-canvas-wrap {
			position: relative;
			width: 100%;
		}
		.period-chart-card canvas {
			width: 100% !important;
			height: 100% !important;
		}
		.period-tab.active {
			background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, var(--accent-2)), var(--accent-2));
			color: white;
			border-color: transparent;
		}
		.seg-tab {
			border: 1px solid var(--panel-border);
			background: var(--panel);
			color: var(--muted);
			border-radius: 18px;
			padding: 0.9rem 1rem;
			font-weight: 700;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			white-space: nowrap;
			min-width: 0;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			box-shadow: none;
		}
		.seg-tab.active {
			background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent-2) 85%, var(--accent)));
			color: white;
			border-color: transparent;
			box-shadow: 0 16px 30px rgba(59, 130, 246, 0.18);
		}
		.tab-pane-shell {
			display: none;
		}
		.tab-pane-shell.active {
			display: block;
		}
		.shell-card {
			border-radius: 30px;
			padding: 18px;
		}
		.day-strip {
			display: grid;
			grid-template-columns: auto 1fr auto;
			align-items: center;
			gap: 12px;
			text-align: center;
		}
		.day-picker-shell {
			z-index: 20;
		}
		.day-main {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 4px;
		}
		.day-main-button {
			border: 0;
			background: transparent;
			color: inherit;
			padding: 0;
			width: 100%;
			cursor: pointer;
		}
		.tx-date-button {
			width: 100%;
			display: inline-flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			gap: 0.35rem;
			text-align: center;
		}
		.tx-date-label {
			line-height: 1.05;
			letter-spacing: -0.03em;
			font-size: clamp(1.15rem, 4.6vw, 1.95rem);
		}
		.tx-date-button.date-warning,
		.tx-date-button.date-warning .tx-date-label {
			color: #ff7f50;
		}
		.tx-date-picker-button {
			flex: 0 0 auto;
		}
		.day-picker-popover {
			position: absolute;
			left: 50%;
			top: calc(100% + 12px);
			transform: translateX(-50%);
			z-index: 40;
			width: min(430px, calc(100vw - 2rem));
			padding: 1rem;
			border-radius: 20px;
			background: var(--panel);
			border: 1px solid var(--panel-border);
			box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
		}
		.period-picker-grid {
			display: grid;
			gap: 8px;
		}
		.period-picker-grid .btn {
			justify-content: center;
			white-space: nowrap;
			min-height: 44px;
			text-align: center;
		}
		.period-picker-grid-week {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
		.period-picker-grid-month {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.period-picker-grid-year {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
		.period-picker-month-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			margin-bottom: 0.75rem;
		}
		.period-picker-month-title {
			font-size: 1rem;
			font-weight: 800;
			letter-spacing: -0.02em;
		}
		.period-picker-weekdays {
			display: grid;
			grid-template-columns: repeat(7, minmax(0, 1fr));
			gap: 6px;
			margin-bottom: 6px;
			color: var(--muted);
			font-size: 0.72rem;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.08em;
			text-align: center;
		}
		.period-picker-day-grid {
			display: grid;
			grid-template-columns: repeat(7, minmax(0, 1fr));
			gap: 6px;
		}
		.period-picker-day {
			min-height: 42px;
			padding: 0.35rem 0.25rem;
			line-height: 1;
			font-size: 0.95rem;
			border-radius: 12px;
		}
		.period-picker-day.other-month {
			opacity: 0.45;
		}
		.period-picker-day.today {
			border-color: rgba(20, 184, 166, 0.75);
			box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.35);
		}
		.period-picker-day.active-week {
			background: linear-gradient(135deg, #16a34a, #22c55e);
			border-color: #16a34a;
			color: #ffffff;
		}
		.period-picker-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 8px;
			margin-top: 0.75rem;
		}
		.day-title {
			font-size: clamp(1.45rem, 6vw, 2.2rem);
			font-weight: 800;
			letter-spacing: -0.03em;
			line-height: 1.05;
		}
		.day-balance {
			font-size: clamp(1.05rem, 4.4vw, 1.5rem);
			font-weight: 800;
			letter-spacing: -0.03em;
			line-height: 1.05;
		}
		.seg-metrics {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 8px;
			margin-top: 16px;
			align-items: stretch;
		}
		.seg-metric {
			appearance: none;
			text-align: left;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 2px;
			min-height: 0;
			border-radius: 20px;
			padding: clamp(8px, 2.2vw, 12px);
			background: color-mix(in srgb, var(--accent) 7%, var(--panel));
			border: 1px solid var(--panel-border);
			min-width: 0;
			overflow: hidden;
		}
		.seg-metric-toggle {
			cursor: pointer;
		}
		.seg-metric-toggle[aria-pressed="false"] .value {
			opacity: 0.42;
			letter-spacing: 0.12em;
		}
		.seg-metric-toggle .small {
			font-size: 0.64rem;
			line-height: 1.15;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.seg-metric .label {
			color: var(--muted);
			font-size: clamp(0.66rem, 1.9vw, 0.84rem);
			font-weight: 600;
			display: flex;
			align-items: center;
			gap: 4px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.seg-metric .value {
			font-size: clamp(0.82rem, 3.2vw, 1.25rem);
			font-weight: 800;
			letter-spacing: -0.03em;
			line-height: 1;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 100%;
		}
		.tx-list {
			display: flex;
			flex-direction: column;
			gap: 14px;
		}
		.tx-summary-row {
			display: grid;
			gap: 8px;
		}
		.tx-summary-row-3 {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.tx-summary-row-5 {
			grid-template-columns: repeat(5, minmax(0, 1fr));
		}
		.tx-summary-action {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			min-height: 100%;
			text-align: center;
			border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--panel-border));
			background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--panel)), color-mix(in srgb, var(--info) 10%, var(--panel)));
			color: var(--text);
			transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
		}
		.tx-summary-action:hover,
		.tx-summary-action:focus-visible {
			transform: translateY(-1px);
			border-color: color-mix(in srgb, var(--accent) 75%, var(--panel-border));
			box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
		}
		.tx-summary-action-inner {
			display: inline-flex;
			align-items: center;
			gap: 0.55rem;
			font-weight: 700;
			letter-spacing: 0.01em;
		}
		.tx-summary-action-inner i {
			font-size: 1.05rem;
		}
		.tx-summary-card {
			padding: 12px 14px;
			border-radius: 16px;
			background: color-mix(in srgb, var(--accent) 8%, var(--panel));
			border: 1px solid var(--panel-border);
			box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
			min-width: 0;
		}
		.tx-summary-label {
			font-size: 0.72rem;
			font-weight: 700;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			color: var(--muted);
			margin-bottom: 0.3rem;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.tx-summary-value {
			font-size: clamp(0.95rem, 3vw, 1.25rem);
			font-weight: 800;
			letter-spacing: -0.02em;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.tx-row {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr) auto;
			gap: 12px;
			align-items: flex-start;
			padding: 12px 0;
		}
		.tx-row-pending {
			opacity: 0.48;
			filter: grayscale(1);
		}
		.tx-row-pending .tx-title,
		.tx-row-pending .tx-sub,
		.tx-row-pending .tx-amount,
		.tx-row-pending .tx-icon {
			color: var(--muted) !important;
		}
		.day-transaction-item {
			cursor: pointer;
			border-radius: 18px;
			padding-left: 12px;
			padding-right: 12px;
			margin-left: -12px;
			margin-right: -12px;
			transition: background-color 0.15s ease, transform 0.15s ease;
		}
		.day-transaction-item:hover,
		.day-transaction-item:focus-visible {
			background: color-mix(in srgb, var(--accent) 6%, transparent);
			transform: translateY(-1px);
		}
		.tx-icon {
			width: 42px;
			height: 42px;
			border-radius: 14px;
			display: grid;
			place-items: center;
			color: var(--tx-color);
			background: color-mix(in srgb, var(--tx-color) 12%, var(--panel));
			border: 1px solid color-mix(in srgb, var(--tx-color) 20%, var(--panel-border));
			flex: 0 0 auto;
		}
		.tx-title {
			font-size: 1.05rem;
			font-weight: 700;
			letter-spacing: -0.01em;
		}
		.tx-sub {
			font-size: 0.84rem;
			color: var(--muted);
			margin-top: 4px;
		}
		.tx-right {
			text-align: right;
			min-width: 0;
		}
		.tx-amount {
			font-weight: 800;
			letter-spacing: -0.02em;
		}
		@media (min-width: 992px) {
			.seg-tabs {
				grid-template-columns: repeat(3, minmax(0, 1fr));
			}
			.period-tabs {
				grid-template-columns: repeat(4, minmax(0, 1fr));
			}
			.seg-tab {
				justify-content: center;
				padding: 0.9rem 1rem;
				font-size: 0.98rem;
			}
			.period-tab {
				justify-content: center;
				padding: 0.8rem 0.9rem;
			}
			.tx-type-group {
				grid-template-columns: repeat(4, minmax(0, 1fr));
			}
			.day-title {
				font-size: 2.35rem;
			}
			.day-balance {
				font-size: 1.55rem;
			}
			.seg-metrics {
				gap: 16px;
			}
			.seg-metric {
				padding: 14px 16px;
				min-height: 0;
			}
			.seg-metric .value {
				font-size: 1.55rem;
			}
			.tx-row {
				padding: 14px 4px;
			}
		}
		@media (max-width: 767.98px) {
			.tx-summary-row {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}
		@media (max-width: 767.98px) {
			.period-tab {
				padding: 0.65rem 0.4rem;
				position: relative;
				min-height: 84px;
			}
			.period-tab-icon {
				min-width: 4.3rem;
				min-height: 4.3rem;
			}
			.period-tab i {
				font-size: 2.95rem;
			}
			.period-tab-icon-text {
				font-size: 0.8rem;
			}
			.period-chart-card {
				min-height: 280px;
			}
			.period-trend-canvas-wrap {
				height: 240px;
			}
		}
		.tx-amount {
			font-weight: 800;
			letter-spacing: -0.02em;
		}
		.tx-context-menu {
			position: fixed;
			z-index: 1085;
			min-width: 180px;
			padding: 8px;
			border-radius: 18px;
			border: 1px solid var(--panel-border);
			background: color-mix(in srgb, var(--panel) 94%, #000 6%);
			backdrop-filter: blur(18px);
			box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
		}
		.tx-context-menu-item {
			width: 100%;
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 12px 14px;
			border: 0;
			border-radius: 14px;
			background: transparent;
			color: var(--text);
			font-weight: 700;
			text-align: left;
		}
		.tx-context-menu-item:hover,
		.tx-context-menu-item:focus-visible {
			background: color-mix(in srgb, var(--accent) 12%, transparent);
			outline: none;
		}
		.tx-context-menu-item i {
			font-size: 1rem;
		}
		.tx-delete-modal {
			background: color-mix(in srgb, var(--panel) 96%, #000 4%);
			color: var(--text);
			border: 1px solid var(--panel-border);
			border-radius: 28px;
			box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
		}
		.tx-delete-note {
			display: flex;
			align-items: flex-start;
			gap: 12px;
			padding: 14px;
			border-radius: 18px;
			background: color-mix(in srgb, #ef4444 12%, transparent);
			border: 1px solid color-mix(in srgb, #ef4444 24%, var(--panel-border));
		}
		.tx-delete-note i {
			color: #f87171;
			font-size: 1.15rem;
			margin-top: 2px;
		}
		.tx-delete-preview {
			padding: 14px;
			border-radius: 18px;
			background: color-mix(in srgb, var(--accent) 8%, transparent);
			border: 1px solid var(--panel-border);
			word-break: break-word;
		}
		.tx-meta {
			font-size: 0.78rem;
			color: var(--muted);
			margin-top: 4px;
		}
		.tab-card {
			border-radius: 24px;
			padding: 16px;
			background: var(--panel);
			border: 1px solid var(--panel-border);
			box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
		}
		.chart-card canvas {
			max-height: 250px;
		}
		.budget-meter {
			height: 10px;
			border-radius: 999px;
			background: color-mix(in srgb, var(--accent) 10%, var(--panel));
			overflow: hidden;
		}
		.budget-meter > span {
			display: block;
			height: 100%;
			border-radius: inherit;
			background: linear-gradient(135deg, var(--accent), var(--accent-2));
		}
		.fab {
			position: fixed;
			left: 50%;
			bottom: 24px;
			transform: translateX(-50%);
			width: 68px;
			height: 68px;
			border: 0;
			border-radius: 999px;
			background: linear-gradient(135deg, #ff8a8a, #ff6d8d);
			color: white;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			font-size: 2.7rem;
			font-weight: 300;
			line-height: 1;
			letter-spacing: 0;
			text-indent: 0;
			box-shadow: 0 16px 36px rgba(255, 109, 141, 0.32);
			z-index: 1040;
		}
		.fab span {
			display: block;
			transform: translateY(-1px);
		}
		.money-offline-status {
			position: fixed;
			right: 16px;
			bottom: 104px;
			z-index: 1060;
			max-width: min(88vw, 320px);
			padding: 10px 14px;
			border-radius: 999px;
			background: rgba(2, 6, 23, 0.92);
			border: 1px solid rgba(148, 163, 184, 0.22);
			color: #f8fbff;
			font-size: 0.88rem;
			font-weight: 700;
			letter-spacing: -0.01em;
			box-shadow: 0 18px 45px rgba(2, 6, 23, 0.35);
			backdrop-filter: blur(12px);
		}
		.money-offline-status[data-tone="warn"] {
			border-color: rgba(245, 158, 11, 0.4);
			background: rgba(88, 55, 2, 0.92);
		}
		.money-offline-status[data-tone="sync"] {
			border-color: rgba(20, 184, 166, 0.4);
			background: rgba(5, 47, 51, 0.92);
		}
		.money-offline-status[data-tone="error"] {
			border-color: rgba(248, 113, 113, 0.5);
			background: rgba(69, 10, 10, 0.92);
		}
		.money-offcanvas {
			background: var(--bg);
			color: var(--text);
			--bs-offcanvas-height: 100dvh;
			--bs-offcanvas-width: 100vw;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			width: 100vw;
			max-width: 100vw;
			height: 100dvh;
			max-height: 100dvh;
		}
		.money-drawer {
			background: var(--bg);
			color: var(--text);
			width: min(88vw, 330px);
		}
		.drawer-head {
			padding: 14px 14px 10px;
			background:
				linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent)),
				var(--panel);
			border-bottom: 1px solid var(--panel-border);
			position: sticky;
			top: 0;
			z-index: 2;
		}
		.drawer-head-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
		}
		.drawer-name {
			font-size: 1.1rem;
			font-weight: 800;
			letter-spacing: -0.02em;
			line-height: 1.1;
		}
		.drawer-sub {
			margin-top: 4px;
			font-size: 0.8rem;
			color: var(--muted);
		}
		.drawer-menu {
			flex: 1 1 auto;
			padding: 10px 10px 14px;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			overscroll-behavior: contain;
		}
		.money-drawer .offcanvas-body {
			display: flex;
			flex-direction: column;
			padding: 0;
			overflow: hidden;
		}
		.drawer-close-btn {
			width: 40px;
			height: 40px;
			flex: 0 0 auto;
		}
		.drawer-close-btn i {
			font-size: 0.95rem;
		}
		.drawer-item {
			width: 100%;
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 10px;
			border: 0;
			border-radius: 14px;
			background: transparent;
			color: var(--text);
			text-align: left;
		}
		.drawer-item:hover,
		.drawer-item:focus-visible {
			background: color-mix(in srgb, var(--accent) 10%, transparent);
		}
		.drawer-item i {
			width: 32px;
			height: 32px;
			border-radius: 10px;
			display: grid;
			place-items: center;
			background: color-mix(in srgb, var(--accent) 14%, transparent);
			color: var(--accent);
			font-size: 0.95rem;
			flex: 0 0 auto;
		}
		.drawer-item .meta {
			display: block;
			font-size: 0.72rem;
			color: var(--muted);
			margin-top: 1px;
		}
		.drawer-lang-strip {
			display: flex;
			align-items: center;
			gap: 8px;
			flex: 0 0 auto;
		}
		.drawer-lang-flag {
			width: 42px;
			height: 42px;
			border-radius: 14px;
			border: 1px solid var(--panel-border);
			background: color-mix(in srgb, var(--accent) 8%, var(--panel));
			color: var(--text);
			display: grid;
			place-items: center;
			font-size: 1.15rem;
			line-height: 1;
			box-shadow: none;
		}
		.drawer-lang-flag.active {
			border-color: color-mix(in srgb, var(--accent) 38%, var(--panel-border));
			background: color-mix(in srgb, var(--accent) 18%, var(--panel));
		}
		.drawer-lang-flag:focus-visible {
			outline: 2px solid color-mix(in srgb, var(--accent) 65%, white);
			outline-offset: 2px;
		}
		.category-manager {
			border-radius: 20px;
			padding: 14px;
			border: 1px solid var(--panel-border);
			background: color-mix(in srgb, var(--accent) 8%, var(--panel));
		}
		.category-tree {
			display: grid;
			gap: 10px;
		}
		.category-dropzone {
			transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
		}
		.category-dropzone.drag-over {
			border-radius: 18px;
			box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.5);
			background: color-mix(in srgb, var(--accent) 10%, transparent);
		}
		.category-node {
			border: 1px solid var(--panel-border);
		}
		.category-node > summary {
			list-style: none;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			cursor: pointer;
		}
		.category-node > summary::-webkit-details-marker {
			display: none;
		}
		.category-children {
			display: grid;
			gap: 8px;
			padding: 0 12px 12px;
		}
		.category-node.is-dragging {
			opacity: 0.55;
			transform: scale(0.99);
		}
		.category-drag-handle {
			width: 34px;
			height: 34px;
			display: inline-grid;
			place-items: center;
			border-radius: 10px;
			border: 1px solid transparent;
			background: transparent;
			color: var(--muted);
			cursor: grab;
			user-select: none;
			flex: 0 0 auto;
		}
		.category-drag-handle:hover,
		.category-drag-handle:focus-visible {
			background: color-mix(in srgb, var(--accent) 12%, transparent);
			color: var(--text);
			border-color: rgba(148, 163, 184, 0.18);
			outline: none;
		}
		.category-drag-handle:active {
			cursor: grabbing;
		}
		.category-drag-handle i {
			font-size: 1.05rem;
			line-height: 1;
		}
		.category-chevron {
			transition: transform 0.18s ease;
			color: var(--muted);
			flex: 0 0 auto;
		}
		.category-node[open] > summary .category-chevron {
			transform: rotate(90deg);
		}
		.category-leaf {
			border: 1px solid var(--panel-border);
		}
		.bottom-nav-wrap {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1045;
			padding: 0 12px calc(10px + env(safe-area-inset-bottom));
			pointer-events: none;
		}
		.bottom-nav {
			max-width: 120px;
			margin: 0 auto;
			padding: 0;
			border-radius: 999px;
			display: flex;
			justify-content: center;
			pointer-events: auto;
			background: transparent;
			border: 0;
			box-shadow: none;
		}
		.nav-action {
			width: 64px;
			height: 64px;
			border: 0;
			border-radius: 999px;
			color: white;
			background: linear-gradient(135deg, #ff8a8a, #ff6d8d);
			box-shadow: 0 18px 32px rgba(255, 109, 141, 0.34);
			display: inline-grid;
			place-items: center;
			align-items: center;
			justify-content: center;
			padding: 0;
		}
		.nav-action i {
			font-size: 1.55rem;
			line-height: 1;
		}
		.legacy-hide {
			display: none !important;
		}
		.money-auth-page {
			display: grid;
			place-items: center;
			min-height: 100vh;
			background:
				radial-gradient(circle at top left, rgba(37, 99, 235, 0.18), transparent 35%),
				radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.18), transparent 35%),
				#08111f;
			color: #e5eef8;
			--bs-body-color: #e5eef8;
			--bs-heading-color: #f8fbff;
			--bs-emphasis-color: #f8fbff;
			--bs-secondary-color: #d6e0ee;
		}
		.money-auth-page .card {
			background: rgba(10, 18, 33, 0.85);
			border: 1px solid rgba(148, 163, 184, 0.15);
			backdrop-filter: blur(18px);
			box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
			color: #f8fbff;
		}
		.money-auth-page .login-card {
			color: #f8fbff;
		}
		.money-auth-page .login-card .form-label {
			color: #f8fbff;
			font-weight: 700;
			font-size: 0.95rem;
			letter-spacing: 0.01em;
			opacity: 0.98;
			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
		}
		.money-auth-page .login-card .form-control {
			background-color: rgba(16, 24, 40, 0.96);
			border-color: rgba(184, 196, 214, 0.42);
			color: #f8fbff;
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
		}
		.money-auth-page .login-card .form-control::placeholder {
			color: rgba(248, 251, 255, 0.5);
		}
		.money-auth-page .login-card .form-control:focus {
			background-color: rgba(16, 24, 40, 0.98);
			color: #f8fbff;
			border-color: #4f8cff;
			box-shadow: 0 0 0 0.2rem rgba(79, 140, 255, 0.18);
		}
		.money-auth-page .login-card .form-control:-webkit-autofill,
		.money-auth-page .login-card .form-control:-webkit-autofill:hover,
		.money-auth-page .login-card .form-control:-webkit-autofill:focus {
			-webkit-text-fill-color: #f8fbff;
			box-shadow: 0 0 0 1000px rgba(16, 24, 40, 0.98) inset;
			transition: background-color 5000s ease-in-out 0s;
		}
		.money-auth-page .muted {
			color: #d6e0ee;
		}
		.money-auth-page .google-bubble {
			width: 44px;
			height: 44px;
			border-radius: 999px;
			display: inline-grid;
			place-items: center;
			background: rgba(255, 255, 255, 0.08);
			border: 1px solid rgba(255, 255, 255, 0.2);
			margin-right: 10px;
			flex: 0 0 auto;
		}
		.money-auth-page .google-bubble i {
			font-size: 1.2rem;
		}