.epla-kw {
	--epla-kw-accent: #00924a;
	background: #fff;
	border-radius: 8px;
	padding: 24px 20px;
	box-sizing: border-box;
	color: #111;
}
.epla-kw *,
.epla-kw *::before,
.epla-kw *::after { box-sizing: border-box; }

.epla-kw__title {
	margin: 0 0 24px;
	font-size: clamp(22px, 3vw, 36px);
	font-weight: 400;
	line-height: 1.2;
}

.epla-kw__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

.epla-kw__field {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 240px;
	min-width: 0;
}

.epla-kw__select {
	flex: 0 0 auto;
	width: auto;
	min-width: 84px;
	height: 44px;
	padding: 0 8px;
	border: 1px solid transparent;
	background: transparent;
	font-size: 18px;
	font-weight: 700;
	color: inherit;
	cursor: pointer;
}

.epla-kw__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 44px;
	padding: 0 12px;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	font-size: 18px;
	color: inherit;
	background: #fff;
}

.epla-kw__select:focus-visible,
.epla-kw__input:focus,
.epla-kw__swap:focus-visible {
	outline: 2px solid var(--epla-kw-accent);
	outline-offset: 2px;
	border-color: var(--epla-kw-accent);
}

.epla-kw__swap {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #1d3a2a;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.epla-kw__swap:hover {
	background: rgba(0, 0, 0, .05);
	color: var(--epla-kw-accent);
}

.epla-kw__result {
	flex: 1 1 260px;
	text-align: center;
	color: var(--epla-kw-accent);
	font-size: clamp(24px, 3vw, 38px);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

.epla-kw__detail {
	margin-top: 6px;
	font-size: 14px;
	color: #595959;
}

.epla-kw__code {
	display: block;
	font-weight: 700;
}
.epla-kw__name {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: #595959;
}

.epla-kw__meta {
	margin: 20px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #595959;
}

.epla-kw__table-wrap {
	margin-top: 20px;
	overflow-x: auto;
}
.epla-kw__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.epla-kw__table th,
.epla-kw__table td {
	padding: 8px 10px;
	border-bottom: 1px solid #ececec;
	text-align: left;
}
.epla-kw__table td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.epla-kw__table thead th:not(:first-child) {
	text-align: right;
}
.epla-kw__table thead th {
	color: var(--epla-kw-accent);
	font-weight: 700;
}

.epla-kw--error {
	padding: 16px 20px;
	border-left: 4px solid #c0392b;
	background: #fdf2f1;
}

.epla-kw .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 600px) {
	.epla-kw__swap { transform: rotate(90deg); margin: 0 auto; }
	.epla-kw__result { text-align: left; }
}