/*
 * MightyPaint Tools — Shade & Tint Generator
 * Scoped under .mp-shade-tint-tool only.
 */

/* ========== Tokens ========== */
.mp-shade-tint-tool {
	overflow-x: clip;
	--mp-shade-bg: #f5f9ff;
	--mp-shade-surface: #ffffff;
	--mp-shade-soft: #f8fbff;
	--mp-shade-ink: #071a3d;
	--mp-shade-text: #10233f;
	--mp-shade-muted: #64748b;
	--mp-shade-border: #dfe8f3;
	--mp-shade-border-strong: #cbd8e8;
	--mp-shade-blue: #1368d8;
	--mp-shade-blue-dark: #0f4fb0;
	--mp-shade-teal: #079685;
	--mp-shade-green: #16a34a;
	--mp-shade-yellow: #f59e0b;
	--mp-shade-red: #dc2626;
	--mp-shade-radius: 18px;
	--mp-shade-radius-lg: 26px;
	--mp-shade-shadow: 0 14px 40px rgba(15, 35, 70, 0.08);
	--mp-shade-shadow-soft: 0 8px 24px rgba(15, 35, 70, 0.06);

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--mp-shade-text);
	line-height: 1.55;
	font-size: 17px;
}

.mp-tool-app,
.mp-tool-app *,
.mp-tool-app *::before,
.mp-tool-app *::after {
	box-sizing: border-box;
}

/* ========== Page ========== */
.mp-shade-page {
	background:
		radial-gradient(circle at 5% 5%, rgba(14, 165, 233, 0.12), transparent 26rem),
		radial-gradient(circle at 96% 8%, rgba(245, 158, 11, 0.10), transparent 24rem),
		var(--mp-shade-bg);
	padding: clamp(16px, 1.8vw, 28px) 0 clamp(42px, 5vw, 72px);
}

.mp-shade-inner {
	width: min(100% - clamp(32px, 5vw, 140px), 1920px);
	margin-inline: auto;
	max-width: 100%;
}

.mp-shade-page,
.mp-shade-inner,
.mp-shade-panel,
.mp-shade-lab,
.mp-shade-export {
	max-width: 100%;
}

/* ========== Hero ========== */
.mp-shade-hero {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: clamp(16px, 1.4vw, 22px);
}

.mp-shade-eyebrow {
	display: inline-flex;
	width: fit-content;
	margin: 0 0 0;
	padding: 6px 10px;
	border-radius: 999px;
	background: #e7f2ff;
	color: var(--mp-shade-blue);
	font-size: 0.78rem;
	line-height: 1;
	font-weight: 800;
	letter-spacing: 0.1em;
}

.mp-shade-hero h1 {
	margin: 0;
	color: var(--mp-shade-ink);
	max-width: 980px;
	font-size: clamp(2.5rem, 3.2vw, 4.6rem);
	line-height: 1;
	letter-spacing: -0.05em;
}

.mp-shade-hero p {
	max-width: 760px;
	margin: 0;
	color: var(--mp-shade-text);
	font-size: clamp(1.05rem, 1vw, 1.22rem);
	line-height: 1.55;
}

.mp-shade-trust-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px;
	margin-top: 4px;
}

.mp-shade-trust-row span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 8px 14px;
	border: 1px solid var(--mp-shade-border);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: var(--mp-shade-shadow-soft);
	color: var(--mp-shade-text);
	font-size: 0.95rem;
	font-weight: 700;
}

/* ========== Workbench ========== */
.mp-shade-workbench {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(420px, 0.9fr);
	gap: 28px;
	align-items: start;
}

@media (min-width: 1800px) {
	.mp-shade-workbench {
		grid-template-columns: minmax(0, 2.25fr) minmax(480px, 0.85fr);
	}
}

@media (min-width: 1025px) {
	.mp-shade-workbench {
		margin-top: clamp(18px, 1.4vw, 28px);
	}

	.mp-shade-lab {
		margin-top: 0;
	}

	.mp-shade-export {
		position: relative;
		top: clamp(-220px, -11vw, -150px);
		z-index: 2;
	}
}

/* ========== Panels ========== */
.mp-shade-panel {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--mp-shade-border);
	border-radius: var(--mp-shade-radius-lg);
	box-shadow: var(--mp-shade-shadow-soft);
	padding: clamp(18px, 1.4vw, 28px);
}

.mp-shade-panel-title {
	font-size: clamp(1.25rem, 1.15vw, 1.55rem);
	font-weight: 800;
	color: var(--mp-shade-ink);
	margin: 0 0 16px;
}

/* ========== Controls ========== */
.mp-shade-controls {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 18px;
	margin-bottom: 18px;
}

@media (max-width: 640px) {
	.mp-shade-controls {
		grid-template-columns: 1fr;
	}
}

.mp-shade-control-card {
	background: var(--mp-shade-soft);
	border: 1px solid var(--mp-shade-border);
	border-radius: var(--mp-shade-radius);
	padding: 16px;
}

.mp-shade-control-label {
	display: block;
	font-size: 0.85rem;
	font-weight: 800;
	color: var(--mp-shade-muted);
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Base color */
.mp-shade-color-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mp-shade-color-swatch {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	border: 2px solid var(--mp-shade-border-strong);
	flex-shrink: 0;
	cursor: pointer;
}

.mp-shade-hex-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--mp-shade-border);
	border-radius: 10px;
	font-size: 1rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-weight: 700;
	background: #fff;
	color: var(--mp-shade-ink);
	letter-spacing: 0.02em;
}

.mp-shade-hex-input:focus {
	outline: none;
	border-color: var(--mp-shade-blue);
	box-shadow: 0 0 0 3px rgba(19, 104, 216, 0.12);
}

.mp-shade-native-picker {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--mp-shade-border);
	border-radius: 10px;
	background: none;
	cursor: pointer;
	flex-shrink: 0;
}

.mp-shade-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--mp-shade-border);
	border-radius: 10px;
	background: #fff;
	color: var(--mp-shade-muted);
	cursor: pointer;
	flex-shrink: 0;
}

.mp-shade-icon-btn:hover {
	border-color: var(--mp-shade-blue);
	color: var(--mp-shade-blue);
}

.mp-shade-invalid {
	color: var(--mp-shade-red);
	font-size: 0.875rem;
	font-weight: 700;
	margin: 6px 0 0;
}

/* Sliders */
.mp-shade-slider-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.mp-shade-slider-header label {
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--mp-shade-text);
}

.mp-shade-slider-value {
	font-weight: 900;
	color: var(--mp-shade-blue);
	font-size: 1.3rem;
}

.mp-shade-slider {
	width: 100%;
	accent-color: var(--mp-shade-blue);
	height: 8px;
	margin-bottom: 4px;
}

/* ========== Actions ========== */
.mp-shade-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
}

.mp-shade-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	line-height: 1.2;
	transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mp-shade-btn:hover {
	transform: translateY(-1px);
}

.mp-shade-btn-primary {
	background: #1368d8;
	color: #ffffff;
	border-color: #1368d8;
}

.mp-shade-btn-primary:hover,
.mp-shade-btn-primary:focus-visible {
	background: #0f4fb0;
	color: #ffffff;
	border-color: #0f4fb0;
}

.mp-shade-btn-primary:focus-visible {
	outline: 3px solid rgba(19, 104, 216, 0.35);
	outline-offset: 2px;
}

.mp-shade-btn-secondary {
	background: #ffffff;
	color: #071a3d;
	border-color: #cbd8e8;
}

.mp-shade-btn-secondary:hover,
.mp-shade-btn-secondary:focus-visible {
	background: #eaf3ff;
	color: #071a3d;
	border-color: #1368d8;
}

.mp-shade-copy-feedback {
	color: var(--mp-shade-green);
	font-size: 0.875rem;
	font-weight: 800;
	margin: 4px 0 0;
}

/* ========== Palette ========== */
.mp-shade-palette-title {
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--mp-shade-ink);
	margin: 0 0 6px;
}

.mp-shade-palette-hint {
	display: none;
	font-size: 0.9rem;
	color: var(--mp-shade-muted);
	margin: 0 0 8px;
}

@media (max-width: 640px) {
	.mp-shade-palette-hint {
		display: block;
	}
}

.mp-shade-palette-scroll {
	overflow-x: auto;
	overflow-y: visible;
	padding: 6px 2px 12px;
	scrollbar-gutter: stable;
}

.mp-shade-palette {
	display: flex;
	gap: 10px;
	min-width: max-content;
}

.mp-shade-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: clamp(78px, 5vw, 104px);
	flex-shrink: 0;
	cursor: pointer;
}

.mp-shade-swatch-color {
	width: clamp(64px, 4.4vw, 88px);
	height: clamp(64px, 4.4vw, 88px);
	border-radius: 12px;
	border: 2px solid transparent;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mp-shade-swatch:hover .mp-shade-swatch-color {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.mp-shade-swatch.is-base .mp-shade-swatch-color {
	border-color: var(--mp-shade-blue);
	box-shadow: 0 0 0 3px rgba(19, 104, 216, 0.18);
}

.mp-shade-swatch-label {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--mp-shade-muted);
	text-align: center;
}

.mp-shade-swatch-hex {
	font-size: 0.78rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-weight: 700;
	color: var(--mp-shade-text);
	text-align: center;
}

/* ========== Export Panel ========== */
.mp-shade-export-helper {
	font-size: 0.95rem;
	color: var(--mp-shade-muted);
	margin: 0 0 14px;
	line-height: 1.5;
}

.mp-shade-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 18px;
}

.mp-shade-stat {
	background: var(--mp-shade-soft);
	border: 1px solid var(--mp-shade-border);
	border-radius: 12px;
	padding: 12px;
	text-align: center;
}

.mp-shade-stat-number {
	display: block;
	font-size: 1.6rem;
	font-weight: 900;
	color: var(--mp-shade-blue);
	line-height: 1;
}

.mp-shade-stat-label {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--mp-shade-muted);
	margin-top: 4px;
}

/* Code block */
.mp-shade-code-block {
	background: #071a3d;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	padding: 16px;
	position: relative;
	margin-bottom: 14px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.mp-shade-code-block pre,
.mp-shade-code-block code {
	margin: 0;
	overflow-x: auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.88rem;
	line-height: 1.6;
	color: #eaf3ff !important;
	background: transparent !important;
	opacity: 1 !important;
	text-shadow: none !important;
}

.mp-shade-code-copy {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 8px;
	background: rgba(255,255,255,0.1);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mp-shade-code-copy:hover {
	background: rgba(255,255,255,0.2);
}

/* ========== Content Sections ========== */
.mp-shade-content {
	margin-top: 24px;
	font-size: 18px;
}

.mp-shade-feature-card p,
.mp-shade-grid-card p,
.mp-shade-guide-item p,
.mp-shade-practice-card p,
.mp-shade-related-card p,
.mp-shade-closing p,
.mp-shade-faq-item p {
	font-size: clamp(1.05rem, 1vw, 1.16rem);
	line-height: 1.75;
}

.mp-shade-grid-section h2,
.mp-shade-related-section h2,
.mp-shade-faq-section h2 {
	font-size: clamp(1.5rem, 1.6vw, 2rem);
}

/* Feature cards row */
.mp-shade-feature-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin-bottom: 24px;
}

@media (min-width: 900px) {
	.mp-shade-feature-row {
		grid-template-columns: 1fr 1fr;
	}
}

.mp-shade-feature-card {
	background: linear-gradient(135deg, #ffffff, #f5f9ff);
	border: 1px solid var(--mp-shade-border);
	border-radius: var(--mp-shade-radius-lg);
	padding: clamp(18px, 1.4vw, 28px);
	box-shadow: var(--mp-shade-shadow-soft);
	border-left: 5px solid var(--mp-shade-blue);
}

.mp-shade-feature-card:nth-child(2) {
	border-left-color: var(--mp-shade-teal);
}

.mp-shade-feature-card h3 {
	font-size: clamp(1.35rem, 1.3vw, 1.75rem);
	font-weight: 800;
	color: var(--mp-shade-ink);
	margin: 0 0 10px;
}

.mp-shade-feature-card p {
	font-size: clamp(1.05rem, 1vw, 1.16rem);
	color: var(--mp-shade-muted);
	line-height: 1.75;
	margin: 0;
}

/* Grid cards */
.mp-shade-grid-section {
	margin-bottom: 24px;
}

.mp-shade-grid-section h2 {
	font-size: clamp(1.35rem, 1.3vw, 1.75rem);
	font-weight: 800;
	color: var(--mp-shade-ink);
	margin: 0 0 14px;
}

.mp-shade-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

@media (min-width: 640px) {
	.mp-shade-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	.mp-shade-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.mp-shade-grid-card {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--mp-shade-border);
	border-radius: var(--mp-shade-radius);
	padding: 18px;
	box-shadow: var(--mp-shade-shadow-soft);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mp-shade-grid-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--mp-shade-shadow);
}

.mp-shade-swatch-card-tints {
	background: linear-gradient(135deg, #ffffff, #f0f7ff);
	border-top: 4px solid #93c5fd;
}

.mp-shade-swatch-card-base {
	background: linear-gradient(135deg, #ffffff, #eef7ff);
	border-top: 4px solid var(--mp-shade-blue);
}

.mp-shade-swatch-card-shades {
	background: linear-gradient(135deg, #ffffff, #f0f4ff);
	border-top: 4px solid #1e3a8a;
}

.mp-shade-grid-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 1.1rem;
	margin-bottom: 10px;
}

.mp-shade-grid-card h4 {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--mp-shade-ink);
	margin: 0 0 6px;
}

.mp-shade-grid-card p {
	font-size: clamp(1rem, 0.95vw, 1.12rem);
	color: var(--mp-shade-muted);
	line-height: 1.7;
	margin: 0;
}

/* Guide section */
.mp-shade-guide-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

@media (min-width: 900px) {
	.mp-shade-guide-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.mp-shade-guide-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px 18px;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--mp-shade-border);
	border-radius: 12px;
	box-shadow: var(--mp-shade-shadow-soft);
}

.mp-shade-guide-number {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--mp-shade-blue);
	color: #fff;
	font-weight: 900;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.mp-shade-guide-item h4 {
	font-size: 1.05rem;
	font-weight: 800;
	margin: 0 0 4px;
	color: var(--mp-shade-ink);
}

.mp-shade-guide-item p {
	font-size: clamp(1.05rem, 1vw, 1.16rem);
	color: var(--mp-shade-muted);
	margin: 0;
	line-height: 1.7;
}

/* Best practices */
.mp-shade-practices-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

@media (min-width: 640px) {
	.mp-shade-practices-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	.mp-shade-practices-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.mp-shade-practice-card {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--mp-shade-border);
	border-radius: var(--mp-shade-radius);
	padding: 16px;
	box-shadow: var(--mp-shade-shadow-soft);
}

.mp-shade-practice-card h4 {
	font-size: 1rem;
	font-weight: 800;
	color: var(--mp-shade-ink);
	margin: 0 0 6px;
}

.mp-shade-practice-card p {
	font-size: clamp(1rem, 0.95vw, 1.12rem);
	color: var(--mp-shade-muted);
	line-height: 1.7;
	margin: 0;
}

/* Related tools */
.mp-shade-related-section {
	background: linear-gradient(135deg, #ffffff, #f0f9ff);
	border: 1px solid var(--mp-shade-border);
	border-radius: var(--mp-shade-radius-lg);
	padding: clamp(18px, 1.4vw, 28px);
	box-shadow: var(--mp-shade-shadow-soft);
	margin-bottom: 24px;
}

.mp-shade-related-section h2 {
	font-size: clamp(1.35rem, 1.3vw, 1.75rem);
	font-weight: 800;
	color: var(--mp-shade-ink);
	margin: 0 0 10px;
}

.mp-shade-related-intro {
	font-size: clamp(1rem, 0.95vw, 1.12rem);
	color: var(--mp-shade-muted);
	margin: 0 0 14px;
	line-height: 1.6;
}

.mp-shade-related-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

@media (min-width: 640px) {
	.mp-shade-related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	.mp-shade-related-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.mp-shade-related-card {
	display: flex;
	flex-direction: column;
	min-height: 170px;
	background: #ffffff;
	border: 1px solid var(--mp-shade-border-strong);
	border-radius: 12px;
	padding: 14px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.mp-shade-related-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--mp-shade-shadow-soft);
	border-color: var(--mp-shade-blue);
}

.mp-shade-related-chips {
	display: flex;
	gap: 4px;
	margin-bottom: 8px;
}

.mp-shade-related-chip {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	border: 1px solid var(--mp-shade-border);
}

.mp-shade-related-card h4 {
	font-size: 1.05rem;
	font-weight: 800;
	margin: 0 0 6px;
	color: var(--mp-shade-blue);
}

.mp-shade-related-card p {
	font-size: clamp(1rem, 0.95vw, 1.12rem);
	color: var(--mp-shade-muted);
	margin: 0 0 8px;
	line-height: 1.6;
}

.mp-shade-related-arrow {
	margin-top: auto;
	display: inline-flex;
	width: fit-content;
	padding: 6px 10px;
	border-radius: 999px;
	background: #e7f2ff;
	color: var(--mp-shade-blue);
	font-size: 0.9rem;
	font-weight: 800;
}

.mp-shade-related-card:hover .mp-shade-related-arrow {
	background: var(--mp-shade-blue);
	color: #ffffff;
}

/* CTA Banner */
.mp-shade-cta-banner {
	background: linear-gradient(135deg, #0f766e, #1368d8);
	border-radius: var(--mp-shade-radius-lg);
	padding: clamp(24px, 2vw, 40px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 24px;
}

.mp-shade-cta-text h3 {
	font-size: clamp(1.25rem, 1.3vw, 1.65rem);
	font-weight: 800;
	color: #ffffff;
	margin: 0 0 6px;
}

.mp-shade-cta-text p {
	font-size: clamp(1rem, 0.95vw, 1.12rem);
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
	line-height: 1.6;
}

.mp-shade-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 10px;
	background: #ffffff;
	color: #1368d8;
	font-weight: 800;
	font-size: 1rem;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.mp-shade-cta-btn:hover {
	background: #eaf3ff;
	color: #0f4fb0;
}

/* FAQ */
.mp-shade-faq-section {
	margin-bottom: 24px;
}

.mp-shade-faq-section h2 {
	font-size: clamp(1.35rem, 1.3vw, 1.75rem);
	font-weight: 800;
	color: var(--mp-shade-ink);
	margin: 0 0 14px;
}

.mp-shade-faq-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

@media (min-width: 900px) {
	.mp-shade-faq-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.mp-shade-faq-item {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--mp-shade-border);
	border-radius: 14px;
	padding: 18px 20px;
	box-shadow: var(--mp-shade-shadow-soft);
	transition: box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.mp-shade-faq-item[open] {
	background: #ffffff;
	border-color: #bcd4f2;
	box-shadow: var(--mp-shade-shadow);
}

.mp-shade-faq-item summary {
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--mp-shade-ink);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
}

.mp-shade-faq-item summary::-webkit-details-marker {
	display: none;
}

.mp-shade-faq-q {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--mp-shade-blue);
	color: #fff;
	font-weight: 900;
	font-size: 0.95rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.mp-shade-faq-item[open] summary {
	margin-bottom: 10px;
}

.mp-shade-faq-item p {
	font-size: 1.05rem;
	color: var(--mp-shade-muted);
	margin: 10px 0 0;
	line-height: 1.7;
	padding-left: 38px;
}

/* Closing note */
.mp-shade-closing {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid var(--mp-shade-border);
	border-radius: var(--mp-shade-radius-lg);
	padding: clamp(18px, 1.4vw, 28px);
	box-shadow: var(--mp-shade-shadow-soft);
}

.mp-shade-closing p {
	font-size: clamp(1rem, 0.95vw, 1.12rem);
	color: var(--mp-shade-muted);
	line-height: 1.7;
	margin: 0;
}

/* ========== Responsive ========== */
@media (max-width: 1024px) {
	.mp-shade-inner {
		width: calc(100% - 24px);
		max-width: 100%;
	}

	.mp-shade-workbench,
	.mp-shade-controls,
	.mp-shade-color-row,
	.mp-shade-actions,
	.mp-shade-stats {
		min-width: 0;
	}

	.mp-shade-control-card,
	.mp-shade-panel,
	.mp-shade-code-block {
		min-width: 0;
		max-width: 100%;
	}

	.mp-shade-hex-input {
		min-width: 0;
		width: 100%;
	}

	.mp-shade-color-row {
		display: grid;
		grid-template-columns: 58px minmax(0, 1fr) 44px 44px;
		gap: 10px;
	}

	.mp-shade-code-block {
		overflow: hidden;
	}

	.mp-shade-code-block pre {
		max-width: 100%;
		overflow-x: auto;
		white-space: pre;
	}

	.mp-shade-workbench,
	.mp-shade-lab,
	.mp-shade-export {
		margin-top: 0;
	}

	.mp-shade-export {
		position: static;
		top: auto;
		z-index: auto;
	}

	.mp-shade-workbench {
		grid-template-columns: 1fr;
	}

	.mp-shade-controls {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.mp-shade-page {
		padding-top: 18px;
	}

	.mp-shade-hero h1 {
		font-size: clamp(2.1rem, 10vw, 3rem);
		line-height: 1.05;
	}

	.mp-shade-panel {
		border-radius: 18px;
		padding: 18px;
	}

	.mp-shade-swatch {
		width: 76px;
	}

	.mp-shade-swatch-color {
		width: 60px;
		height: 60px;
	}

	.mp-shade-stats {
		grid-template-columns: 1fr;
	}

	.mp-shade-cta-banner {
		flex-direction: column;
		align-items: flex-start;
	}

	.mp-shade-inner {
		width: calc(100% - 20px);
	}

	.mp-shade-color-row {
		grid-template-columns: 54px minmax(0, 1fr);
	}

	.mp-shade-native-picker,
	.mp-shade-icon-btn {
		width: 44px;
		height: 44px;
	}

	.mp-shade-color-row .mp-shade-native-picker,
	.mp-shade-color-row .mp-shade-icon-btn {
		grid-row: 2;
	}

	.mp-shade-slider-header {
		margin-bottom: 10px;
	}

	.mp-shade-slider-value {
		font-size: 1.4rem;
	}

	.mp-shade-slider {
		height: 10px;
	}
}