.action-button {
	height: 34px;
	border-radius: 7px;
	border: 1px solid #c7cedf;
	background: #ffffff;
	color: #111827;
	font-weight: 700;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.action-button.primary {
	background: var(--primary);
	color: #ffffff;
	border-color: #3735c4;
}

.loan-workspace {
	padding: 6px 8px;
}

.loan-workspace .page-head,
.loan-workspace .tool-surface {
	width: 100%;
	max-width: none !important;
	margin-left: 0;
	margin-right: 0;
}

.loan-workspace .page-head {
	margin-bottom: 10px;
	padding: 0;
}

.loan-layout {
	display: grid;
	grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
	gap: 10px;
	align-items: stretch;
}

.loan-panel {
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--panel);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.panel-head {
	min-height: 46px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 12px;
	border-bottom: 1px solid #e2e6f0;
	background: #ffffff;
}

.panel-title {
	font-size: 15px;
	font-weight: 800;
	margin: 0;
}

.meta {
	color: #277a9c;
	font-size: 12px;
	font-weight: 800;
}

.loan-form {
	display: grid;
	gap: 14px;
	padding: 14px;
}

.repayment-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 5px;
	border: 1px solid #d7dcea;
	border-radius: 8px;
	background: #f7f9fc;
	padding: 4px;
}

.repayment-button {
	min-height: 34px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #344054;
	font-size: 12px;
	font-weight: 800;
	padding: 0 8px;
	white-space: nowrap;
}

.repayment-button:hover {
	background: #eef3f8;
}

.repayment-button.active {
	background: var(--primary);
	color: #ffffff;
}

.field-grid,
.prepayment-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.loan-form label {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.loan-form label span {
	color: #344054;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.25;
}

.loan-form input {
	width: 100%;
	height: 38px;
	border: 1px solid #cfd6e6;
	border-radius: 7px;
	background: #ffffff;
	color: #111827;
	padding: 0 10px;
	outline: 0;
}

.loan-form input:focus {
	border-color: #6264e8;
	box-shadow: 0 0 0 3px rgba(74, 75, 224, 0.12);
}

.graduated-control {
	transition: opacity .15s ease;
}

.loan-form:not(.is-graduated) .graduated-control {
	opacity: .56;
}

.loan-form:not(.is-graduated) .graduated-control input {
	background: #f5f7fb;
	color: #667085;
}

.prepayment-box {
	display: grid;
	gap: 12px;
	border: 1px solid #dbe2ed;
	border-radius: 8px;
	background: #fbfcff;
	padding: 12px;
}

.prepayment-box h3 {
	margin: 0;
	color: #0f1f35;
	font-size: 14px;
	line-height: 1.3;
}

.prepayment-box p {
	margin: 5px 0 0;
	color: #5b667a;
	font-size: 12px;
	line-height: 1.5;
}

.result-panel {
	min-width: 0;
}

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

.summary-item {
	position: relative;
	min-height: 94px;
	border: 1px solid #dbe2ed;
	border-radius: 8px;
	background: #ffffff;
	padding: 12px;
	overflow: hidden;
}

.summary-item::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: #4a4be0;
}

.summary-item span,
.budget-result span {
	display: block;
	color: #5b667a;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.35;
}

.summary-item strong {
	display: block;
	margin-top: 9px;
	color: #0c1728;
	font-size: clamp(16px, 1.8vw, 23px);
	line-height: 1.12;
	letter-spacing: 0;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.accent-green::before {
	background: #16865a;
}

.accent-orange::before {
	background: #d97706;
}

.accent-ink::before {
	background: #243b53;
}

.accent-red::before {
	background: #d92d20;
}

.accent-violet::before {
	background: #6d45d8;
}

.budget-result {
	margin: 0 14px 12px;
	border: 1px solid #c9d7ef;
	border-radius: 8px;
	background: #f4f8ff;
	padding: 12px;
}

.budget-result strong {
	display: block;
	margin-top: 5px;
	color: #12366f;
	font-size: 20px;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.loan-note {
	margin: 0;
	border-top: 1px solid #e5eaf3;
	background: #fbfcff;
	color: #5b667a;
	font-size: 12px;
	line-height: 1.5;
	padding: 10px 14px;
}

.chart-panel,
.scenario-panel,
.schedule-panel {
	margin-top: 10px;
}

.chart-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
	gap: 12px;
	padding: 14px;
}

.line-chart-wrap,
.payment-bars-wrap {
	min-width: 0;
}

.chart-caption {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 9px;
	color: #5b667a;
	font-size: 12px;
	line-height: 1.35;
}

.chart-caption strong {
	color: #0f1f35;
	font-size: 13px;
}

.balance-chart {
	width: 100%;
	height: 220px;
	display: block;
}

.chart-bg {
	fill: #f8fafc;
}

.chart-grid-line {
	stroke: #dce3ee;
	stroke-width: 1;
}

.balance-area {
	fill: rgba(36, 99, 235, 0.1);
}

.balance-line {
	stroke: #2463eb;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.chart-axis-text {
	fill: #667085;
	font-size: 11px;
	font-weight: 800;
}

.payment-bars {
	display: grid;
	gap: 7px;
}

.payment-bar-row {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) 112px;
	align-items: center;
	gap: 9px;
	min-height: 24px;
}

.bar-month {
	color: #667085;
	font-size: 12px;
	font-weight: 800;
	text-align: right;
}

.stacked-bar {
	display: flex;
	height: 12px;
	border-radius: 999px;
	background: #eef2f7;
	overflow: hidden;
}

.bar-principal {
	background: #2463eb;
}

.bar-interest {
	background: #f59e0b;
}

.payment-bar-row strong {
	color: #22324a;
	font-size: 12px;
	line-height: 1.2;
	text-align: right;
	overflow-wrap: anywhere;
}

.scenario-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(190px, 1fr));
	gap: 10px;
	padding: 14px;
	overflow-x: auto;
}

.scenario-card {
	border: 1px solid #dbe2ed;
	border-radius: 8px;
	background: #ffffff;
	padding: 12px;
	min-width: 190px;
}

.scenario-head {
	display: grid;
	gap: 4px;
	min-height: 46px;
}

.scenario-head strong {
	color: #0f1f35;
	font-size: 14px;
	line-height: 1.25;
}

.scenario-head span {
	color: #667085;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.25;
}

.scenario-card dl {
	display: grid;
	gap: 8px;
	margin: 10px 0 0;
}

.scenario-card dl div {
	display: grid;
	gap: 3px;
	padding-top: 8px;
	border-top: 1px solid #eef2f7;
}

.scenario-card dt {
	color: #667085;
	font-size: 11px;
	font-weight: 800;
}

.scenario-card dd {
	margin: 0;
	color: #172033;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.scenario-card dd.positive {
	color: #16865a;
}

.scenario-card dd.negative {
	color: #c2410c;
}

.schedule-table-wrap {
	max-height: 520px;
	overflow: auto;
}

.schedule-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	background: #ffffff;
	font-size: 13px;
}

.schedule-table th,
.schedule-table td {
	border-bottom: 1px solid #e3e8f2;
	padding: 9px 10px;
	text-align: right;
	vertical-align: middle;
	overflow-wrap: anywhere;
}

.schedule-table th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: #eef3f8;
	color: #22324a;
	font-size: 12px;
	font-weight: 800;
}

.schedule-table th:nth-child(1),
.schedule-table th:nth-child(2),
.schedule-table td:nth-child(1),
.schedule-table td:nth-child(2) {
	text-align: left;
}

.schedule-table tbody tr:nth-child(even) {
	background: #fbfcff;
}

.schedule-table tbody tr:hover {
	background: #eef6ff;
}

.schedule-month,
.schedule-date {
	color: #344054;
	font-weight: 800;
}

.principal-cell {
	color: #155eef;
}

.interest-cell {
	color: #b45309;
}

.prepayment-cell {
	color: #16865a;
}

.balance-cell {
	color: #102033;
	font-weight: 800;
}

.empty-schedule {
	text-align: center !important;
	color: #667085;
	padding: 26px !important;
}

.copy-dialog {
	position: fixed;
	top: 76px;
	right: 22px;
	bottom: auto;
	z-index: 90;
	width: min(360px, calc(100vw - 28px));
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	border: 1px solid #ccd4e5;
	border-left: 4px solid var(--primary);
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
	padding: 12px 12px 12px 10px;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease;
}

.copy-dialog[hidden] {
	display: none;
}

.copy-dialog.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.copy-dialog.is-error {
	border-left-color: #d92d20;
}

.copy-dialog-icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #eef0ff;
	position: relative;
}

.copy-dialog-icon::after {
	content: "";
	position: absolute;
	left: 11px;
	top: 8px;
	width: 9px;
	height: 15px;
	border-right: 3px solid var(--primary);
	border-bottom: 3px solid var(--primary);
	transform: rotate(42deg);
}

.copy-dialog.is-error .copy-dialog-icon {
	background: #fff1f0;
}

.copy-dialog.is-error .copy-dialog-icon::before,
.copy-dialog.is-error .copy-dialog-icon::after {
	content: "";
	position: absolute;
	left: 10px;
	top: 15px;
	width: 14px;
	height: 3px;
	border: 0;
	background: #d92d20;
	transform: rotate(45deg);
}

.copy-dialog.is-error .copy-dialog-icon::after {
	transform: rotate(-45deg);
}

.copy-dialog-content {
	min-width: 0;
}

.copy-dialog-content strong {
	display: block;
	color: var(--text);
	font-size: 14px;
	line-height: 1.25;
}

.copy-dialog-content p {
	margin: 3px 0 0;
	color: #475467;
	font-size: 13px;
	line-height: 1.35;
}

.copy-dialog-close {
	height: 30px;
	border: 1px solid #c7cedf;
	border-radius: 7px;
	background: #ffffff;
	color: #22324a;
	font-size: 12px;
	font-weight: 800;
	padding: 0 9px;
}

.clipboard-fallback {
	position: fixed;
	left: -9999px;
	top: 0;
	opacity: 0;
}

@media (max-width: 1120px) {
	.loan-layout,
	.chart-grid {
		grid-template-columns: 1fr;
	}

	.scenario-grid {
		grid-template-columns: repeat(3, minmax(210px, 1fr));
	}
}

@media (max-width: 900px) {
	.loan-workspace {
		padding: 6px;
	}

	.loan-workspace .page-head {
		gap: 26px;
		margin-bottom: 34px;
	}

	.summary-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.scenario-grid {
		grid-template-columns: repeat(2, minmax(210px, 1fr));
	}

	.copy-dialog {
		top: 70px;
		right: auto;
		left: 50%;
		transform: translate(-50%, 10px);
	}

	.copy-dialog.is-visible {
		transform: translate(-50%, 0);
	}
}

@media (max-width: 640px) {
	.loan-workspace .page-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		gap: 10px;
	}

	.action-button {
		width: 100%;
		justify-content: center;
	}

	.field-grid,
	.prepayment-fields,
	.summary-grid,
	.scenario-grid {
		grid-template-columns: 1fr;
	}

	.repayment-strip {
		grid-template-columns: 1fr;
	}

	.payment-bar-row {
		grid-template-columns: 24px minmax(0, 1fr);
	}

	.payment-bar-row strong {
		grid-column: 2;
		text-align: left;
	}

	.schedule-table {
		min-width: 780px;
	}
}