/* PrintNinja Color Converter — scoped styles, no global leaks */
.pncc, .pncc *, .pncc *::before, .pncc *::after { box-sizing: border-box; }

.pncc {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #525263;
	background: #ffffff;
	border: 1px solid #e6e6ec;
	border-radius: 8px;
	padding: 24px;
	margin: 32px 0;
	max-width: 980px;
	box-shadow: 0 1px 3px rgba(20, 20, 35, 0.04), 0 4px 16px rgba(20, 20, 35, 0.04);
	line-height: 1.5;
	clear: both;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.pncc__header { margin-bottom: 18px; }
.pncc__title {
	font-size: 22px !important; font-weight: 700 !important; color: #343448 !important;
	margin: 0 0 6px !important; letter-spacing: -0.01em; line-height: 1.3 !important;
	padding: 0 !important; text-transform: none !important;
}
.pncc__sub { font-size: 14px; color: #525263; margin: 0; }

/* Reset theme leaks — printninja2 theme uses broad selectors on images, links, buttons */
.pncc img { float: none !important; margin: 0 !important; max-width: 100% !important; }
.pncc a, .pncc button { float: none !important; }
.pncc figure { margin: 0 !important; padding: 0 !important; }

/* ─── Tabs ─── */
.pncc__tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid #e6e6ec;
	margin-bottom: 24px;
}
.pncc__tab {
	font-family: inherit;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #888;
	background: transparent !important;
	border: none !important;
	border-bottom: 2px solid transparent !important;
	padding: 10px 16px !important;
	margin: 0 0 -1px 0 !important;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap !important;
	height: auto !important;
	line-height: 1.4 !important;
	display: inline-block !important;
}
.pncc__tab:hover { color: #343448; }
.pncc__tab--active {
	color: #d00d22;
	border-bottom-color: #d00d22;
}

.pncc__panel { animation: pncc-fade 0.18s ease; }
@keyframes pncc-fade { from { opacity: 0; } to { opacity: 1; } }

/* ─── Dropzone ─── */
.pncc__dropzone {
	border: 2px dashed #d9d9e3;
	border-radius: 10px;
	padding: 40px 24px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
	background: #fafafc;
}
.pncc__dropzone:hover, .pncc__dropzone:focus {
	border-color: #d00d22;
	background: #fff5f6;
	outline: none;
}
.pncc__dropzone--hover {
	border-color: #d00d22;
	background: #fff5f6;
}
.pncc__dropzone-icon { font-size: 36px; margin-bottom: 8px; }
.pncc__dropzone-title {
	display: block;
	font-size: 16px;
	color: #343448;
	margin-bottom: 6px;
}
.pncc__dropzone-meta {
	font-size: 13px;
	color: #888;
	margin: 0;
}

/* ─── Image results ─── */
.pncc__progress {
	text-align: center;
	font-size: 14px;
	color: #525263;
	padding: 24px;
	background: #fafafc;
	border-radius: 6px;
	margin-bottom: 16px;
}
.pncc__error {
	background: #fff0f0;
	border: 1px solid #f5c2c2;
	color: #b30000;
	padding: 12px 16px;
	border-radius: 6px;
}

.pncc__canvases {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 18px;
}
.pncc__canvas-wrap {
	margin: 0;
	background: #f4f4f8;
	border-radius: 6px;
	padding: 8px;
	border: 1px solid #e6e6ec;
}
.pncc__canvas-wrap canvas {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
	background: #ffffff;
	max-width: 100%;
}
.pncc__canvas-wrap figcaption {
	font-size: 12px;
	color: #525263;
	text-align: center;
	margin-top: 6px;
	font-weight: 600;
}

.pncc__stats {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 18px;
}
.pncc__verdict {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-radius: 8px;
}
.pncc__verdict--good { background: #f0fff5; }
.pncc__verdict--ok   { background: #fffbeb; }
.pncc__verdict--warn { background: #fff5e6; }
.pncc__verdict--bad  { background: #fff0f0; }
.pncc__verdict-pct {
	font-size: 28px;
	font-weight: 700;
	color: #343448;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	min-width: 70px;
}
.pncc__verdict-text { display: flex; flex-direction: column; gap: 2px; }
.pncc__verdict-text strong { color: #343448; font-size: 14px; }
.pncc__verdict-text span { font-size: 12.5px; color: #525263; }
.pncc__hue-breakdown {
	font-size: 13px;
	color: #525263;
	padding: 10px 14px;
	background: #f4f4f8;
	border-radius: 6px;
}
.pncc__hue-breakdown strong { color: #343448; }
.pncc__stat-note {
	font-size: 12px;
	color: #888;
	font-style: italic;
}
.pncc__image-actions {
	display: flex !important;
	flex-direction: row !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
	align-items: center !important;
}

/* ─── Value converter ─── */
.pncc__main {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 24px;
	align-items: start;
}
.pncc__swatch-wrap { display: flex; flex-direction: column; gap: 12px; }
.pncc__swatch {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	background-color: #ff6b35;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 12px;
	border: 1px solid #e6e6ec;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
	transition: background-color 0.15s ease;
}
.pncc__swatch-label {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 14px; font-weight: 600;
	background: rgba(255, 255, 255, 0.85);
	color: #1a1a26;
	padding: 4px 8px;
	border-radius: 4px;
	letter-spacing: 0.02em;
}
.pncc__gamut {
	background: #fff5e6;
	border: 1px solid #ffd599;
	border-left: 3px solid #d97706;
	border-radius: 4px;
	padding: 10px 12px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #5c3a00;
}
.pncc__gamut strong { display: block; color: #b45309; margin-bottom: 2px; font-weight: 700; }

.pncc__inputs { display: flex; flex-direction: column; gap: 18px; }
.pncc__group { display: flex; flex-direction: column; gap: 8px; }
.pncc__label {
	font-size: 12px; font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #343448;
}
.pncc__label small {
	text-transform: none; letter-spacing: 0;
	font-weight: 400; color: #888; margin-left: 6px;
}

.pncc__hex {
	width: 100%; max-width: 200px;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 16px; font-weight: 600;
	padding: 10px 12px;
	border: 1px solid #d9d9e3;
	border-radius: 6px;
	background: #fafafc;
	color: #1a1a26;
	letter-spacing: 0.02em;
	transition: border-color 0.15s ease;
}
.pncc__hex:focus, .pncc__cell input:focus {
	outline: none;
	border-color: #d00d22;
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(208, 13, 34, 0.12);
}

.pncc__row { display: flex; gap: 8px; }
.pncc__cell { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pncc__channel {
	font-size: 11px; font-weight: 700;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: center;
}
.pncc__channel--r { color: #cc3333; }
.pncc__channel--g { color: #2a7a2a; }
.pncc__channel--b { color: #2a4a8a; }
.pncc__channel--c { color: #00aac9; }
.pncc__channel--m { color: #c2185b; }
.pncc__channel--y { color: #b8860b; }
.pncc__channel--k { color: #1a1a26; }

.pncc__cell input {
	width: 100%;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 15px; font-weight: 600;
	padding: 8px 10px;
	border: 1px solid #d9d9e3;
	border-radius: 6px;
	background: #fafafc;
	color: #1a1a26;
	text-align: center;
	transition: border-color 0.15s ease;
	-moz-appearance: textfield;
}
.pncc__cell input::-webkit-outer-spin-button,
.pncc__cell input::-webkit-inner-spin-button {
	-webkit-appearance: none; margin: 0;
}

.pncc__copy-row { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.pncc__copy {
	font-family: inherit;
	font-size: 12px; font-weight: 600;
	padding: 6px 12px;
	background: #f4f4f8;
	color: #525263;
	border: 1px solid #e6e6ec;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.pncc__copy:hover { background: #e9e9f0; color: #343448; }
.pncc__copy--flash { background: #d00d22; color: #ffffff; border-color: #d00d22; }

/* ─── CTA + buttons ─── */
.pncc__cta {
	margin-top: 28px;
	padding: 20px;
	background: #f8f8fb;
	border-radius: 8px;
}
.pncc__cta-text { font-size: 14px; color: #525263; margin-bottom: 14px; line-height: 1.55; }
.pncc__cta-text strong { color: #343448; display: block; margin-bottom: 4px; font-size: 15px; }
.pncc__cta-buttons {
	display: flex !important;
	flex-direction: row !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
	align-items: center !important;
}

.pncc__btn {
	display: inline-block !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	padding: 10px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border-radius: 6px !important;
	border: none !important;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease;
	line-height: 1.4 !important;
	float: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	white-space: nowrap !important;
	margin: 0 !important;
}
.pncc__btn--primary { background: #d00d22 !important; color: #ffffff !important; border: 1px solid #d00d22 !important; }
.pncc__btn--primary:hover { background: #b00a1c !important; color: #ffffff !important; border-color: #b00a1c !important; }
.pncc__btn--secondary {
	background: #ffffff !important; color: #343448 !important;
	border: 1px solid #d9d9e3 !important;
}
.pncc__btn--secondary:hover { background: #f4f4f8 !important; color: #343448 !important; }
.pncc__btn:active { transform: translateY(1px); }

/* ─── Disclosure ─── */
.pncc__disclosure {
	margin-top: 20px;
	font-size: 13px;
	color: #525263;
	border-top: 1px solid #f0f0f5;
	padding-top: 16px;
}
.pncc__disclosure summary {
	cursor: pointer; font-weight: 600; color: #343448;
	padding: 4px 0; user-select: none; list-style: none;
	display: flex; align-items: center; gap: 8px;
}
.pncc__disclosure summary::before {
	content: "+"; display: inline-block;
	width: 16px; height: 16px; line-height: 14px;
	text-align: center;
	border: 1px solid #d9d9e3;
	border-radius: 3px;
	font-weight: 600; font-size: 14px; color: #525263;
}
.pncc__disclosure[open] summary::before { content: "−"; }
.pncc__disclosure summary::-webkit-details-marker { display: none; }
.pncc__disclosure-body { padding: 12px 0 0 24px; line-height: 1.6; }
.pncc__disclosure-body p { margin: 0 0 10px; }
.pncc__disclosure-body ul { margin: 0 0 10px; padding-left: 18px; }
.pncc__disclosure-body li { margin-bottom: 6px; }
.pncc__disclosure-body strong { color: #343448; }

/* ─── Mobile ─── */
@media (max-width: 720px) {
	.pncc { padding: 18px; border-radius: 6px; }
	.pncc__title { font-size: 19px; }
	.pncc__main { grid-template-columns: 1fr; gap: 18px; }
	.pncc__swatch { aspect-ratio: 2 / 1; max-height: 140px; }
	.pncc__cta { padding: 16px; }
	.pncc__cta-buttons, .pncc__image-actions { flex-direction: column; }
	.pncc__btn { text-align: center; }
	.pncc__canvases { grid-template-columns: 1fr; }
	.pncc__canvas-wrap canvas { max-height: 60vh; object-fit: contain; }
	.pncc__verdict { flex-direction: column; align-items: flex-start; gap: 6px; }
	.pncc__verdict-pct { min-width: 0; font-size: 24px; }
	.pncc__tab { font-size: 13px; padding: 8px 12px; }
}