.wlcc-calculator,
.wlcc-calculator * {
	box-sizing: border-box;
}

.wlcc-calculator {
	--wlcc-bg: #f3f5f8;
	--wlcc-surface: #ffffff;
	--wlcc-surface-2: #eef1f5;
	--wlcc-text: #151922;
	--wlcc-muted: #687080;
	--wlcc-border: #d8dee8;
	--wlcc-primary: #2f5f98;
	--wlcc-primary-2: #173f6c;
	--wlcc-danger: #9f2f37;
	--wlcc-shadow: 0 18px 45px rgba(19, 28, 45, 0.12);
	--wlcc-radius: 22px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--wlcc-text);
	margin: 24px auto;
	max-width: 1240px;
	width: 100%;
}

.wlcc-calculator.wlcc-dark {
	--wlcc-bg: #111827;
	--wlcc-surface: #1f2937;
	--wlcc-surface-2: #111827;
	--wlcc-text: #f9fafb;
	--wlcc-muted: #b6bfcc;
	--wlcc-border: #374151;
	--wlcc-primary: #8ab4f8;
	--wlcc-primary-2: #c7ddff;
	--wlcc-danger: #f58b93;
	--wlcc-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.wlcc-shell {
	background: linear-gradient(145deg, var(--wlcc-bg), var(--wlcc-surface-2));
	border: 1px solid var(--wlcc-border);
	border-radius: var(--wlcc-radius);
	box-shadow: var(--wlcc-shadow);
	padding: clamp(16px, 3vw, 32px);
	overflow: hidden;
}

.wlcc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}

.wlcc-kicker {
	color: var(--wlcc-primary);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.wlcc-header h2 {
	font-size: clamp(1.65rem, 4vw, 2.55rem);
	line-height: 1.05;
	margin: 0;
}

.wlcc-theme-toggle,
.wlcc-button {
	align-items: center;
	background: var(--wlcc-surface);
	border: 1px solid var(--wlcc-border);
	border-radius: 999px;
	color: var(--wlcc-text);
	cursor: pointer;
	display: inline-flex;
	font-weight: 800;
	gap: 8px;
	justify-content: center;
	line-height: 1;
	min-height: 44px;
	padding: 12px 16px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.wlcc-theme-toggle:hover,
.wlcc-button:hover {
	box-shadow: 0 8px 22px rgba(20, 28, 43, 0.14);
	transform: translateY(-1px);
}

.wlcc-theme-toggle:focus-visible,
.wlcc-button:focus-visible,
.wlcc-calculator input:focus-visible,
.wlcc-calculator select:focus-visible {
	outline: 3px solid rgba(47, 95, 152, 0.35);
	outline-offset: 3px;
}

.wlcc-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}

.wlcc-form,
.wlcc-results {
	display: grid;
	gap: 16px;
}

.wlcc-card,
.wlcc-results > section,
.wlcc-chart-wrap,
.wlcc-table-wrap,
.wlcc-error {
	background: var(--wlcc-surface);
	border: 1px solid var(--wlcc-border);
	border-radius: 18px;
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
	padding: clamp(16px, 2.5vw, 22px);
}

.wlcc-card-heading {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
}

.wlcc-icon {
	align-items: center;
	background: linear-gradient(135deg, var(--wlcc-primary), var(--wlcc-primary-2));
	border-radius: 12px;
	color: #ffffff;
	display: inline-flex;
	font-size: 0.78rem;
	font-weight: 900;
	height: 36px;
	justify-content: center;
	min-width: 36px;
}

.wlcc-card h3 {
	font-size: 1.08rem;
	margin: 0;
}

.wlcc-field-row {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
	margin-bottom: 14px;
}

.wlcc-field-row:last-child {
	margin-bottom: 0;
}

.wlcc-calculator label {
	display: grid;
	gap: 7px;
	min-width: 0;
}

.wlcc-calculator label > span,
.wlcc-switch span {
	color: var(--wlcc-muted);
	font-size: 0.9rem;
	font-weight: 750;
}

.wlcc-calculator input,
.wlcc-calculator select {
	background: var(--wlcc-surface-2);
	border: 1px solid var(--wlcc-border);
	border-radius: 14px;
	color: var(--wlcc-text);
	font: inherit;
	min-height: 46px;
	padding: 10px 12px;
	width: 100%;
}

.wlcc-calculator input[type="range"] {
	accent-color: var(--wlcc-primary);
	min-height: auto;
	padding: 8px 0;
}

.wlcc-calculator small {
	color: var(--wlcc-muted);
	font-size: 0.8rem;
}

.wlcc-range-value {
	color: var(--wlcc-primary);
	font-size: 0.95rem;
}

.wlcc-switch {
	align-items: center;
	background: var(--wlcc-surface-2);
	border: 1px solid var(--wlcc-border);
	border-radius: 14px;
	display: flex;
	gap: 10px;
	padding: 13px 14px;
}

.wlcc-switch input {
	accent-color: var(--wlcc-primary);
	height: 20px;
	min-height: 20px;
	width: 20px;
}

.wlcc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wlcc-button {
	flex: 1 1 140px;
}

.wlcc-primary {
	background: linear-gradient(135deg, var(--wlcc-primary), var(--wlcc-primary-2));
	border-color: transparent;
	color: #ffffff;
}

.wlcc-danger {
	color: var(--wlcc-danger);
}

.wlcc-result-hero {
	background: linear-gradient(135deg, var(--wlcc-primary), var(--wlcc-primary-2));
	border-color: transparent;
	color: #ffffff;
}

.wlcc-result-hero p,
.wlcc-result-hero span {
	margin: 0;
	opacity: 0.92;
}

.wlcc-result-hero strong {
	display: block;
	font-size: clamp(2rem, 5vw, 3.4rem);
	line-height: 1;
	margin: 10px 0;
	word-break: break-word;
}

.wlcc-result-cards {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}

.wlcc-mini-card {
	background: var(--wlcc-surface);
	border: 1px solid var(--wlcc-border);
	border-radius: 16px;
	padding: 16px;
}

.wlcc-mini-card span {
	color: var(--wlcc-muted);
	display: block;
	font-size: 0.86rem;
	font-weight: 800;
	margin-bottom: 6px;
}

.wlcc-mini-card strong {
	font-size: 1.2rem;
}

.wlcc-chart-wrap canvas {
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

.wlcc-table-wrap {
	overflow-x: auto;
}

.wlcc-breakdown {
	border-collapse: collapse;
	min-width: 100%;
	width: 100%;
}

.wlcc-breakdown caption {
	color: var(--wlcc-muted);
	font-weight: 850;
	margin-bottom: 10px;
	text-align: left;
}

.wlcc-breakdown th,
.wlcc-breakdown td {
	border-bottom: 1px solid var(--wlcc-border);
	padding: 10px 8px;
	text-align: left;
	vertical-align: top;
}

.wlcc-breakdown th:last-child,
.wlcc-breakdown td:last-child {
	font-weight: 850;
	text-align: right;
}

.wlcc-error {
	border-color: rgba(159, 47, 55, 0.45);
	color: var(--wlcc-danger);
	font-weight: 800;
}

@media (min-width: 680px) {
	.wlcc-field-row,
	.wlcc-result-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1040px) {
	.wlcc-grid {
		align-items: start;
		grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
	}

	.wlcc-results {
		position: sticky;
		top: 24px;
	}
}

@media (max-width: 480px) {
	.wlcc-header {
		align-items: flex-start;
		flex-direction: column;
	}

	.wlcc-theme-toggle,
	.wlcc-button {
		width: 100%;
	}
}

@media print {
	body * {
		visibility: hidden !important;
	}

	.wlcc-calculator,
	.wlcc-calculator * {
		visibility: visible !important;
	}

	.wlcc-calculator {
		box-shadow: none;
		left: 0;
		margin: 0;
		max-width: none;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.wlcc-actions,
	.wlcc-theme-toggle {
		display: none !important;
	}
}