.billing-breadcrumb { margin: 0; font-size: 1.04rem; color: #2d2d2d; font-weight: 600; }
.billing-card { border: 1px solid #9fa1a8; border-radius: 8px; background: #f7f7f8; padding: 14px 18px 16px; margin-bottom: 16px; }
.billing-card h3 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 700; color: #1d1d1d; }

.bill-rows { border-top: 1px solid #bdbdc4; }
.bill-row { display: grid; grid-template-columns: 1.08fr 1fr; gap: 20px; border-bottom: 1px solid #bdbdc4; padding: 10px 0; align-items: center; }
.bill-row .k { color: #6f6f74; font-size: .92rem; }
.bill-row .v { color: #212126; font-size: .92rem; }
.bill-row .v.link { color: #0c4fa7; font-weight: 600; }
.bill-row .v.link span { margin-left: 10px; font-size: 1.2rem; vertical-align: middle; }

.billing-table { width: 100%; border-collapse: collapse; margin-top: 2px; }
.billing-table thead th { text-align: left; color: #1f1f1f; font-size: .95rem; padding: 10px; border-bottom: 1px solid #b7b7bd; }
.billing-table tbody td { padding: 10px; color: #222; font-size: .95rem; }
.billing-empty { text-align: center; color: #7a7a80; padding: 22px 10px 58px; font-size: .95rem; }

.cost-filters { display: grid; grid-template-columns: 1.2fr .9fr .9fr auto auto; gap: 14px; margin: 4px 0 14px; align-items: end; }
.cost-field { display: grid; gap: 6px; }
.cost-field label { font-size: .8rem; color: #50525b; font-weight: 700; }
.cost-field .filter-select { height: 42px; border-radius: 10px; border: 1px solid #bfc3cc; background: #fff; }
.cost-btn { height: 42px; border: none; border-radius: 999px; background: #0c4fa7; color: #fff; font-size: .95rem; font-weight: 700; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.cost-btn-export { background: #1f2937; color: #fff; }

.cost-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 14px; }
.cost-summary-item { background: #eef3fb; border: 1px solid #cddcf2; border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; }
.cost-summary-item .k { font-size: .78rem; color: #5b6475; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.cost-summary-item .v { font-size: 1.2rem; color: #0b4a96; font-weight: 800; }

.cost-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.cost-table thead th { text-align: left; color: #1f1f1f; font-size: .95rem; font-weight: 700; padding: 8px 10px; }
.cost-table tbody td { text-align: left; color: #242428; font-size: .93rem; padding: 10px 10px; background: #f7f7f8; }
.cost-table tbody tr:nth-child(even) td { background: #ececef; }
.cost-table tbody td:first-child { border-radius: 10px 0 0 10px; }
.cost-table tbody td:last-child { border-radius: 0 10px 10px 0; }
.cost-value { text-align: right; font-weight: 700; color: #0b4a96; }
.cost-total-row td { background: #dde7f7 !important; font-weight: 700; }
.cost-total-label { text-align: right !important; color: #1f2937; }
.cost-total-value { text-align: right !important; color: #0b4a96; font-size: 1rem; }
.cost-table-wrap { width: 100%; overflow-x: auto; }

@media (max-width: 760px) {
	.billing-card {
		padding: 12px;
		border-radius: 12px;
	}
	.cost-table {
		border-spacing: 0;
		min-width: 0;
	}
	.cost-table thead {
		display: none;
	}
	.cost-table tbody tr {
		display: block;
		margin-bottom: 10px;
		border: 1px solid #d5dbe7;
		border-radius: 12px;
		overflow: hidden;
		background: #ffffff;
		box-shadow: 0 3px 12px rgba(11, 39, 79, 0.05);
	}
	.cost-table tbody tr:nth-child(even) {
		background: #ffffff;
	}
	.cost-table tbody td {
		display: grid;
		grid-template-columns: 92px minmax(0, 1fr);
		align-items: center;
		gap: 10px;
		padding: 9px 12px;
		border-radius: 0 !important;
		background: transparent !important;
		border-top: 1px solid #edf1f7;
		font-size: .9rem;
	}
	.cost-table tbody td:first-child {
		border-top: none;
	}
	.cost-table tbody td::before {
		content: attr(data-label);
		color: #5a6478;
		font-weight: 700;
		font-size: .76rem;
		text-transform: uppercase;
		letter-spacing: .02em;
	}
	.cost-value {
		text-align: left;
	}
	.cost-total-row {
		display: grid !important;
		grid-template-columns: 1fr;
		border: 1px solid #c5d3ea !important;
		background: #e8f0ff !important;
	}
	.cost-total-row td {
		display: block !important;
		border-top: none;
		padding: 8px 12px;
	}
	.cost-total-row td::before {
		content: none;
	}
	.cost-total-label,
	.cost-total-value {
		text-align: left !important;
	}
	.cost-empty-row {
		border: 1px dashed #c9d2e0;
		background: #f9fbff;
		box-shadow: none;
	}
	.cost-empty-row td {
		display: block;
		border-top: none;
		padding: 14px 12px;
	}
	.cost-empty-row td::before {
		content: none;
	}
}