.cssland-tools {
	--cssland-bg: #ffffff;
	--cssland-text: #111827;
	--cssland-muted: #6b7280;
	--cssland-border: #dbe3ee;
	--cssland-panel: #f8fafc;
	--cssland-accent: #2563eb;
	--cssland-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
	max-width: 1100px;
	margin: 2rem auto;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--cssland-text);
}

.cssland-tools * { box-sizing: border-box; }

.cssland-tools__header,
.cssland-tools__footer,
.cssland-tools__tabs,
.cssland-tools__panel {
	border: 1px solid var(--cssland-border);
	background: var(--cssland-bg);
	border-radius: 18px;
	box-shadow: var(--cssland-shadow);
}

.cssland-tools__header,
.cssland-tools__footer,
.cssland-tools__panel {
	padding: 1.25rem;
}

.cssland-tools__header,
.cssland-tools__tabs,
.cssland-tools__panel {
	margin-bottom: 1rem;
}

.cssland-tools__header h2 {
	margin: 0 0 .5rem;
	font-size: 1.75rem;
	line-height: 1.2;
}

.cssland-tools__header p,
.cssland-tools__footer p,
.cssland-note {
	margin: 0;
	color: var(--cssland-muted);
}

.cssland-tools__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding: .5rem;
}

.cssland-tools__tab {
	border: 0;
	background: transparent;
	padding: .75rem 1rem;
	border-radius: 12px;
	cursor: pointer;
	font-weight: 600;
	color: var(--cssland-text);
}

.cssland-tools__tab.is-active {
	background: var(--cssland-accent);
	color: #fff;
}

.cssland-tools__panel { display: none; }
.cssland-tools__panel.is-active { display: block; }

.cssland-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.cssland-grid--2 {
	grid-template-columns: 1fr 1fr;
}

.cssland-card {
	background: var(--cssland-panel);
	border: 1px solid var(--cssland-border);
	border-radius: 16px;
	padding: 1rem;
}

.cssland-card h3 {
	margin-top: 0;
	margin-bottom: .5rem;
	font-size: 1.2rem;
}

.cssland-tools label {
	display: block;
	font-size: .95rem;
	font-weight: 600;
	margin-bottom: .85rem;
}

.cssland-tools input[type="text"],
.cssland-tools input[type="number"],
.cssland-tools textarea,
.cssland-tools select {
	width: 100%;
	padding: .75rem .85rem;
	border: 1px solid var(--cssland-border);
	border-radius: 12px;
	font: inherit;
	background: #fff;
}

.cssland-tools input[type="range"] {
	width: 100%;
	margin-top: .5rem;
}

.cssland-inline-values {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	font-size: .95rem;
	color: var(--cssland-muted);
}

.cssland-color-preview {
	min-height: 220px;
	border-radius: 18px;
	border: 1px solid var(--cssland-border);
	margin-bottom: 1rem;
	background: lch(65% 45 260);
}

.cssland-copy-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .5rem;
	align-items: start;
}

.cssland-copy-row textarea {
	min-height: 110px;
}

.cssland-copy,
.cssland-button {
	border: 0;
	background: var(--cssland-accent);
	color: #fff;
	padding: .8rem 1rem;
	border-radius: 12px;
	cursor: pointer;
	font-weight: 600;
	white-space: nowrap;
}

.cssland-copy:focus,
.cssland-button:focus,
.cssland-tools__tab:focus {
	outline: 2px solid rgba(37, 99, 235, .25);
	outline-offset: 2px;
}

.cssland-metrics,
.cssland-results {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
	margin: 1rem 0;
}

.cssland-metrics > div,
.cssland-results > div {
	background: #fff;
	border: 1px solid var(--cssland-border);
	border-radius: 14px;
	padding: .8rem;
}

.cssland-metrics span,
.cssland-results span {
	display: block;
	font-size: .85rem;
	color: var(--cssland-muted);
	margin-bottom: .35rem;
}

.cssland-winner {
	font-size: 1.1rem;
	font-weight: 700;
	padding: .9rem 1rem;
	border-radius: 14px;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
}

.cssland-box-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 340px;
	padding: 1rem;
	background:
		linear-gradient(45deg, rgba(148,163,184,.15) 25%, transparent 25%),
		linear-gradient(-45deg, rgba(148,163,184,.15) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, rgba(148,163,184,.15) 75%),
		linear-gradient(-45deg, transparent 75%, rgba(148,163,184,.15) 75%);
	background-size: 24px 24px;
	background-position: 0 0, 0 12px, 12px -12px, -12px 0;
	border-radius: 16px;
	border: 1px solid var(--cssland-border);
	margin-bottom: 1rem;
	overflow: auto;
}

.cssland-box-margin,
.cssland-box-border,
.cssland-box-padding,
.cssland-box-content {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-width: 40px;
	min-height: 40px;
}

.cssland-box-margin {
	background: rgba(253, 230, 138, .45);
}

.cssland-box-border {
	background: rgba(251, 191, 36, .5);
}

.cssland-box-padding {
	background: rgba(147, 197, 253, .45);
}

.cssland-box-content {
	background: rgba(167, 243, 208, .6);
	font-weight: 700;
	padding: .5rem;
}

@media (max-width: 800px) {
	.cssland-grid,
	.cssland-grid--2,
	.cssland-copy-row,
	.cssland-metrics,
	.cssland-results {
		grid-template-columns: 1fr;
	}
}


.cssland-card p {
	margin-top: 0;
	color: var(--cssland-muted);
}

.cssland-metrics--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cssland-tools code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .92em;
}


.cssland-card--full {
	margin-top: 1rem;
}

.cssland-nowrap {
	white-space: nowrap;
}

.cssland-metrics--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cssland-all-values {
	margin-top: 1rem;
}

.cssland-value-group + .cssland-value-group {
	margin-top: 1rem;
}

.cssland-value-group h4 {
	margin: 0 0 .6rem;
	font-size: 1rem;
}

.cssland-definition-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
	margin: 0;
}

.cssland-definition {
	background: #fff;
	border: 1px solid var(--cssland-border);
	border-radius: 14px;
	padding: .8rem;
	min-width: 0;
}

.cssland-definition dt {
	margin: 0 0 .35rem;
	font-size: .85rem;
	font-weight: 700;
	color: var(--cssland-muted);
}

.cssland-definition dd {
	margin: 0;
	font-weight: 600;
	word-break: break-word;
}

.cssland-empty-state {
	padding: 1rem;
	background: #fff;
	border: 1px dashed var(--cssland-border);
	border-radius: 14px;
	color: var(--cssland-muted);
}

@media (max-width: 900px) {
	.cssland-metrics--3,
	.cssland-definition-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.cssland-metrics--3,
	.cssland-definition-grid {
		grid-template-columns: 1fr;
	}
}


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

.cssland-mode-switch {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1rem;
}

.cssland-mode-switch__button {
	border: 1px solid var(--cssland-border);
	background: #fff;
	color: var(--cssland-text);
	padding: .65rem .9rem;
	border-radius: 999px;
	cursor: pointer;
	font-weight: 600;
}

.cssland-mode-switch__button.is-active {
	background: var(--cssland-accent);
	border-color: var(--cssland-accent);
	color: #fff;
}

.cssland-mode-panel {
	display: none;
	margin-bottom: .25rem;
}

.cssland-mode-panel.is-active {
	display: block;
}

.cssland-status {
	margin-top: 1rem;
	padding: .85rem 1rem;
	border: 1px solid var(--cssland-border);
	border-radius: 14px;
	background: #fff;
	font-size: .95rem;
	color: var(--cssland-muted);
}

.cssland-card--full {
	margin-top: 1rem;
}

.cssland-definition-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
	margin: 0;
}

.cssland-definition {
	background: #fff;
	border: 1px solid var(--cssland-border);
	border-radius: 14px;
	padding: .8rem;
}

.cssland-definition dt {
	margin: 0 0 .35rem;
	font-size: .85rem;
	color: var(--cssland-muted);
}

.cssland-definition dd {
	margin: 0;
	font-weight: 600;
}

.cssland-value-group + .cssland-value-group {
	margin-top: 1rem;
}

.cssland-value-group h4 {
	margin: 0 0 .65rem;
	font-size: 1rem;
}

.cssland-empty-state {
	padding: 1rem;
	border: 1px dashed var(--cssland-border);
	border-radius: 14px;
	color: var(--cssland-muted);
	background: #fff;
}

.cssland-nowrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cssland-metrics--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.cssland-grid,
	.cssland-grid--2,
	.cssland-grid--3,
	.cssland-metrics--3,
	.cssland-definition-grid {
		grid-template-columns: 1fr;
	}
}


/* v1.3.1: prevent clipping in metric cards, especially Lab */
.cssland-metrics > div,
.cssland-results > div {
	min-width: 0;
}

.cssland-metrics strong,
.cssland-results strong {
	display: block;
	min-width: 0;
}

.cssland-lab-value {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	overflow-wrap: anywhere;
	word-break: break-word;
	line-height: 1.35;
}

@media (max-width: 1200px) {
	.cssland-metrics--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.cssland-metrics--3 {
		grid-template-columns: 1fr;
	}
}