/* ═══════════════════════════════════════════════════════════════
   PSDiha Color Harmony Tool  ·  v1.1
   Clean · Modern · Premium
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

.psdiha-ch {
	--ch-bg: #f4f5f7;
	--ch-surface: #ffffff;
	--ch-surface-2: #f8f9fb;
	--ch-border: #e8eaed;
	--ch-border-hover: #d0d4da;
	--ch-text: #111827;
	--ch-text-2: #4b5563;
	--ch-text-3: #9ca3af;
	--ch-primary: #5b5bd6;
	--ch-primary-hover: #4a4ac4;
	--ch-primary-soft: rgba(91, 91, 214, 0.1);
	--ch-radius: 16px;
	--ch-radius-sm: 10px;
	--ch-radius-xs: 7px;
	--ch-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
	--ch-shadow-lg: 0 4px 12px rgba(0,0,0,.05), 0 16px 40px rgba(0,0,0,.08);
	--ch-font: 'Vazirmatn', 'Tahoma', system-ui, sans-serif;
	--ch-ease: cubic-bezier(.4, 0, .2, 1);
	--ch-transition: .22s var(--ch-ease);

	font-family: var(--ch-font);
	color: var(--ch-text);
	max-width: 1080px;
	margin: 0 auto;
	padding: 32px 20px 48px;
	box-sizing: border-box;
	direction: rtl;
	-webkit-font-smoothing: antialiased;
}

.psdiha-ch *,
.psdiha-ch *::before,
.psdiha-ch *::after {
	box-sizing: border-box;
}

/* ── Header ─────────────────────────────────────────────────── */
.psdiha-ch__header {
	text-align: center;
	margin-bottom: 36px;
}

.psdiha-ch__badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--ch-primary);
	background: var(--ch-primary-soft);
	padding: 5px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.psdiha-ch__title {
	font-size: 1.85rem;
	font-weight: 800;
	margin: 0 0 10px;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--ch-text);
}

.psdiha-ch__subtitle {
	font-size: 0.95rem;
	color: var(--ch-text-2);
	margin: 0 auto;
	max-width: 460px;
	line-height: 1.7;
}

/* ── Layout ─────────────────────────────────────────────────── */
.psdiha-ch__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: start;
}

/* ── Preview ────────────────────────────────────────────────── */
.psdiha-ch__preview-wrap {
	position: sticky;
	top: 24px;
}

.psdiha-ch__preview {
	position: relative;
	border-radius: var(--ch-radius);
	overflow: hidden;
	min-height: 340px;
	box-shadow: var(--ch-shadow-lg);
	background: #fff;
}

.psdiha-ch__preview-bg {
	position: absolute;
	inset: 0;
	display: flex;
}

.psdiha-ch__preview-half {
	flex: 1;
	transition: background-color .4s var(--ch-ease);
}

.psdiha-ch__preview-body {
	position: relative;
	z-index: 2;
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-height: 340px;
}

.psdiha-ch__preview-shapes {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-bottom: 22px;
}

.psdiha-ch__shape {
	display: block;
	transition: background-color .4s var(--ch-ease), border-color .4s var(--ch-ease);
}

.psdiha-ch__shape--circle {
	width: 52px;
	height: 52px;
	border-radius: 50%;
}

.psdiha-ch__shape--rect {
	width: 60px;
	height: 38px;
	border-radius: 8px;
}

.psdiha-ch__shape--triangle {
	width: 0;
	height: 0;
	border-left: 26px solid transparent;
	border-right: 26px solid transparent;
	border-bottom: 46px solid currentColor;
	background: transparent !important;
}

.psdiha-ch__preview-title {
	font-size: 1.7rem;
	font-weight: 800;
	margin: 0 0 6px;
	line-height: 1.3;
	transition: color .4s var(--ch-ease);
	letter-spacing: -0.01em;
}

.psdiha-ch__preview-text {
	font-size: 0.92rem;
	margin: 0 0 18px;
	opacity: 0.88;
	transition: color .4s var(--ch-ease);
	font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
	letter-spacing: 0.01em;
	font-weight: 500;
}

.psdiha-ch__preview-badge {
	display: inline-block;
	padding: 7px 16px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	transition: background-color .4s var(--ch-ease), color .4s var(--ch-ease);
}

.psdiha-ch__preview-hint {
	text-align: center;
	font-size: 0.78rem;
	color: var(--ch-text-3);
	margin: 14px 0 0;
	font-weight: 500;
}

/* ── Panel ──────────────────────────────────────────────────── */
.psdiha-ch__panel {
	background: var(--ch-surface);
	border-radius: var(--ch-radius);
	padding: 28px 24px;
	box-shadow: var(--ch-shadow);
	border: 1px solid var(--ch-border);
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.psdiha-ch__group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.psdiha-ch__group-label {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ch-text-2);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ── Pills ──────────────────────────────────────────────────── */
.psdiha-ch__pills {
	display: flex;
	gap: 8px;
	flex-wrap: nowrap;
}

.psdiha-ch__pills--wrap {
	flex-wrap: wrap;
}

.psdiha-ch__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 16px;
	font-size: 0.84rem;
	font-weight: 600;
	font-family: inherit;
	border-radius: 999px;
	border: 1.5px solid var(--ch-border);
	background: var(--ch-surface);
	color: var(--ch-text-2);
	cursor: pointer;
	transition: all var(--ch-transition);
	line-height: 1;
	white-space: nowrap;
	user-select: none;
}

.psdiha-ch__pill svg {
	flex-shrink: 0;
	opacity: 0.7;
}

.psdiha-ch__pill:hover {
	border-color: var(--ch-border-hover);
	background: var(--ch-surface-2);
	color: var(--ch-text);
}

.psdiha-ch__pill.is-active {
	background: var(--ch-primary);
	border-color: var(--ch-primary);
	color: #fff;
	box-shadow: 0 2px 8px rgba(91, 91, 214, 0.3);
}

.psdiha-ch__pill.is-active svg {
	opacity: 1;
}

.psdiha-ch__pills--wrap .psdiha-ch__pill {
	padding: 8px 14px;
	font-size: 0.8rem;
}

/* ── Color Fields ───────────────────────────────────────────── */
.psdiha-ch__colors {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.psdiha-ch__field {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	background: var(--ch-surface-2);
	border-radius: var(--ch-radius-sm);
	border: 2px solid transparent;
	transition: border-color var(--ch-transition), background var(--ch-transition), box-shadow var(--ch-transition);
}

.psdiha-ch__field.is-locked {
	border-color: var(--ch-primary);
	background: var(--ch-primary-soft);
	box-shadow: 0 0 0 3px rgba(91, 91, 214, 0.08);
}

.psdiha-ch__swatch {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	border: 2px solid rgba(0,0,0,.06);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 2px 6px rgba(0,0,0,.08);
	transition: transform .18s var(--ch-ease), box-shadow .18s var(--ch-ease);
}

.psdiha-ch__swatch:hover {
	transform: scale(1.08);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 4px 12px rgba(0,0,0,.14);
}

.psdiha-ch__swatch input[type="color"] {
	position: absolute;
	inset: -10px;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	opacity: 0;
	cursor: pointer;
	border: none;
	padding: 0;
}

.psdiha-ch__field-info {
	flex: 1;
	min-width: 0;
}

.psdiha-ch__field-top {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 5px;
}

.psdiha-ch__field-label {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--ch-text);
}

.psdiha-ch__lock {
	display: none;
	align-items: center;
	font-size: 0.68rem;
	font-weight: 700;
	background: var(--ch-primary);
	color: #fff;
	padding: 2px 9px;
	border-radius: 999px;
	letter-spacing: 0.02em;
}

.psdiha-ch__field.is-locked .psdiha-ch__lock {
	display: inline-flex;
}

.psdiha-ch__field-bottom {
	display: flex;
	align-items: center;
	gap: 8px;
}

.psdiha-ch__hex {
	font-family: 'SF Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	background: var(--ch-surface);
	border: 1.5px solid var(--ch-border);
	border-radius: var(--ch-radius-xs);
	padding: 5px 11px;
	width: 104px;
	text-align: center;
	text-transform: uppercase;
	color: var(--ch-text);
	direction: ltr;
	transition: border-color var(--ch-transition), box-shadow var(--ch-transition);
}

.psdiha-ch__hex:focus {
	outline: none;
	border-color: var(--ch-primary);
	box-shadow: 0 0 0 3px rgba(91, 91, 214, 0.15);
}

.psdiha-ch__copy {
	background: var(--ch-surface);
	border: 1.5px solid var(--ch-border);
	border-radius: var(--ch-radius-xs);
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--ch-text-3);
	transition: all var(--ch-transition);
	flex-shrink: 0;
	padding: 0;
}

.psdiha-ch__copy:hover {
	background: var(--ch-primary);
	border-color: var(--ch-primary);
	color: #fff;
}

.psdiha-ch__copy.is-copied {
	background: #10b981;
	border-color: #10b981;
	color: #fff;
}

/* ── Actions ────────────────────────────────────────────────── */
.psdiha-ch__actions {
	display: flex;
	gap: 10px;
}

.psdiha-ch__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 20px;
	font-size: 0.9rem;
	font-weight: 700;
	font-family: inherit;
	border-radius: var(--ch-radius-sm);
	border: none;
	cursor: pointer;
	transition: all var(--ch-transition);
	line-height: 1.2;
	user-select: none;
}

.psdiha-ch__btn svg {
	flex-shrink: 0;
}

.psdiha-ch__btn--primary {
	background: var(--ch-primary);
	color: #fff;
	flex: 1;
	box-shadow: 0 2px 10px rgba(91, 91, 214, 0.28);
}

.psdiha-ch__btn--primary:hover {
	background: var(--ch-primary-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(91, 91, 214, 0.38);
}

.psdiha-ch__btn--primary:active {
	transform: translateY(0);
}

.psdiha-ch__btn--ghost {
	background: var(--ch-surface);
	color: var(--ch-text-2);
	border: 1.5px solid var(--ch-border);
}

.psdiha-ch__btn--ghost:hover {
	background: var(--ch-surface-2);
	border-color: var(--ch-border-hover);
	color: var(--ch-text);
}

/* ── Meta chips ─────────────────────────────────────────────── */
.psdiha-ch__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.psdiha-ch__chip {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--ch-surface-2);
	color: var(--ch-text-2);
	border: 1px solid var(--ch-border);
}

.psdiha-ch__chip--muted {
	color: var(--ch-text-3);
	font-weight: 500;
}

/* ── Footer ─────────────────────────────────────────────────── */
.psdiha-ch__footer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 36px;
	font-size: 0.78rem;
	color: var(--ch-text-3);
	font-weight: 500;
}

.psdiha-ch__dot {
	opacity: 0.5;
}

/* ── Toast ──────────────────────────────────────────────────── */
.psdiha-ch__toast {
	position: fixed;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%) translateY(90px);
	background: #1e1e2e;
	color: #fff;
	padding: 13px 28px;
	border-radius: 12px;
	font-size: 0.88rem;
	font-weight: 600;
	opacity: 0;
	visibility: hidden;
	transition: all .32s var(--ch-ease);
	z-index: 99999;
	box-shadow: 0 10px 30px rgba(0,0,0,.25);
	pointer-events: none;
	white-space: nowrap;
}

.psdiha-ch__toast.is-show {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 860px) {
	.psdiha-ch__layout {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.psdiha-ch__preview-wrap {
		position: static;
	}

	.psdiha-ch__preview,
	.psdiha-ch__preview-body {
		min-height: 280px;
	}

	.psdiha-ch__preview-body {
		padding: 28px 24px;
	}

	.psdiha-ch__title {
		font-size: 1.5rem;
	}

	.psdiha-ch__panel {
		padding: 22px 18px;
	}
}

@media (max-width: 480px) {
	.psdiha-ch {
		padding: 20px 12px 36px;
	}

	.psdiha-ch__pills {
		gap: 6px;
	}

	.psdiha-ch__pill {
		padding: 8px 12px;
		font-size: 0.78rem;
	}

	.psdiha-ch__actions {
		flex-direction: column;
	}

	.psdiha-ch__btn--primary {
		width: 100%;
	}

	.psdiha-ch__swatch {
		width: 42px;
		height: 42px;
	}

	.psdiha-ch__hex {
		width: 94px;
		font-size: 0.82rem;
	}

	.psdiha-ch__footer {
		font-size: 0.72rem;
	}
}

/* Save button */
.psdiha-ch__btn--save {
	background: linear-gradient(135deg, #059669, #10b981);
	color: #fff;
	width: 100%;
	box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}
.psdiha-ch__btn--save:hover {
	background: linear-gradient(135deg, #047857, #059669);
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
}
.psdiha-ch__btn--save:active {
	transform: translateY(0);
}

/* ── Modern Pickr color button ──────────────────────────────── */
.psdiha-ch__swatch-wrap {
	flex-shrink: 0;
}
.psdiha-ch__pickr .pickr {
	display: block;
}
.psdiha-ch__pickr .pcr-button {
	width: 48px !important;
	height: 48px !important;
	border-radius: 12px !important;
	border: 2px solid rgba(0,0,0,.08) !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.1) !important;
	padding: 0 !important;
	overflow: hidden;
	transition: transform .18s var(--ch-ease), box-shadow .18s var(--ch-ease) !important;
}
.psdiha-ch__pickr .pcr-button:hover {
	transform: scale(1.08);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 4px 14px rgba(0,0,0,.16) !important;
}
.psdiha-ch__pickr .pcr-button::before,
.psdiha-ch__pickr .pcr-button::after {
	border-radius: 10px !important;
}

/* Pickr popup polish */
.pcr-app[data-theme="nano"] {
	border-radius: 14px !important;
	box-shadow: 0 8px 32px rgba(0,0,0,.18) !important;
	border: 1px solid rgba(0,0,0,.06) !important;
	font-family: var(--ch-font), system-ui, sans-serif !important;
	z-index: 100000 !important;
}
.pcr-app[data-theme="nano"] .pcr-interaction input {
	border-radius: 8px !important;
	font-family: 'SF Mono', 'Fira Code', Consolas, monospace !important;
	font-weight: 600 !important;
	letter-spacing: 0.03em;
}
.pcr-app[data-theme="nano"] .pcr-save {
	border-radius: 8px !important;
	background: #5b5bd6 !important;
	font-weight: 700 !important;
}
.pcr-app[data-theme="nano"] .pcr-save:hover {
	background: #4a4ac4 !important;
}