:root{
	--ysa-ce-accent:var(--teal, #19b6a8);
	--ysa-ce-accent-ink:var(--teal-ink, #0b6f68);
	--ysa-ce-border:var(--n-200, #e1e3e8);
	--ysa-ce-border-strong:var(--n-300, #c9ccd2);
	--ysa-ce-canvas:var(--n-50, #f6f7f8);
	--ysa-ce-muted:var(--n-600, #4d5360);
	--ysa-ce-surface:var(--n-0, #ffffff);
	--ysa-ce-text:var(--n-900, #0e141f);
}

.ysa-color-editor{
	position:relative;
	display:inline-flex;
	max-width:100%;
	vertical-align:middle;
}

.ysa-color-editor__source{
	position:absolute !important;
	width:1px !important;
	height:1px !important;
	min-width:0 !important;
	min-height:0 !important;
	padding:0 !important;
	margin:0 !important;
	overflow:hidden !important;
	clip:rect(0 0 0 0) !important;
	clip-path:inset(50%) !important;
	white-space:nowrap !important;
	border:0 !important;
	opacity:0 !important;
	pointer-events:none !important;
}

.ysa-color-editor__trigger{
	appearance:none;
	width:58px;
	min-width:58px;
	height:38px;
	margin:0;
	padding:4px 6px;
	display:inline-flex;
	align-items:center;
	justify-content:space-between;
	gap:5px;
	border:1px solid var(--ysa-ce-border-strong);
	border-radius:9px;
	background:var(--ysa-ce-surface);
	box-shadow:0 1px 2px rgba(14,20,31,.06);
	color:var(--ysa-ce-text);
	cursor:pointer;
	transition:border-color 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms ease-out;
}

.ysa-color-editor__trigger:hover{
	border-color:#aeb4be;
	background:#fbfbfc;
}

.ysa-color-editor__trigger:focus-visible{
	outline:0;
	border-color:var(--ysa-ce-accent);
	box-shadow:0 0 0 3px rgba(25,182,168,.18);
}

.ysa-color-editor__trigger:disabled{
	cursor:not-allowed;
	opacity:.5;
	background:var(--ysa-ce-canvas);
}

.ysa-color-editor__swatch-shell,
.ysa-color-popover__comparison-item i,
.ysa-color-popover__swatch-button,
.ysa-color-editor__swatch{
	background-color:#fff;
	background-image:
		linear-gradient(45deg, #d7dae0 25%, transparent 25%),
		linear-gradient(-45deg, #d7dae0 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #d7dae0 75%),
		linear-gradient(-45deg, transparent 75%, #d7dae0 75%);
	background-size:10px 10px;
	background-position:0 0, 0 5px, 5px -5px, -5px 0;
}

.ysa-color-editor__swatch-shell{
	width:34px;
	height:28px;
	padding:2px;
	box-sizing:border-box;
	overflow:hidden;
	border:1px solid rgba(14,20,31,.13);
	border-radius:6px;
}

.ysa-color-editor__swatch{
	display:block;
	width:100%;
	height:100%;
	border-radius:4px;
	background:var(--ysa-current-color, transparent);
}

.ysa-color-editor--empty .ysa-color-editor__swatch::after,
.ysa-color-popover__comparison-item i.is-empty::after{
	content:"";
	position:absolute;
	width:2px;
	height:140%;
	left:50%;
	top:-20%;
	border-radius:2px;
	background:#b33c36;
	transform:rotate(45deg);
}

.ysa-color-editor__swatch,
.ysa-color-popover__comparison-item i{
	position:relative;
}

.ysa-color-editor__chevron{
	width:0;
	height:0;
	border-left:4px solid transparent;
	border-right:4px solid transparent;
	border-top:5px solid var(--ysa-ce-muted);
	transition:transform 120ms ease-out;
}

.ysa-color-editor__trigger[aria-expanded="true"] .ysa-color-editor__chevron{
	transform:rotate(180deg);
}

.ysa-color-popover{
	--ysa-picker-hue:#ff0000;
	--ysa-picker-color:#19b6a8;
	--ysa-picker-rgb:25, 182, 168;
	position:fixed;
	z-index:9999995;
	width:min(348px, calc(100vw - 24px));
	max-height:calc(100vh - 24px);
	box-sizing:border-box;
	display:grid;
	grid-template-rows:auto minmax(0, 1fr) auto;
	overflow:hidden;
	border:1px solid var(--ysa-ce-border);
	border-radius:15px;
	background:var(--ysa-ce-surface);
	color:var(--ysa-ce-text);
	box-shadow:0 18px 52px rgba(14,20,31,.22);
	font-family:Geist, InterVariable, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	font-size:13px;
	line-height:1.4;
	color-scheme:light;
	transform:translateY(-3px) scale(.985);
	transform-origin:top left;
	opacity:0;
	transition:transform 130ms cubic-bezier(.16,1,.3,1), opacity 100ms ease-out;
}

.ysa-color-popover.is-open{
	transform:translateY(0) scale(1);
	opacity:1;
}

.ysa-color-popover[hidden]{
	display:none !important;
}

.ysa-color-popover [hidden]{
	display:none !important;
}

.ysa-color-popover *,
.ysa-color-popover *::before,
.ysa-color-popover *::after{
	box-sizing:border-box;
}

.ysa-color-popover button,
.ysa-color-popover input{
	font:inherit;
}

.ysa-color-popover button{
	appearance:none;
	margin:0;
}

.ysa-color-popover__header{
	min-height:58px;
	padding:11px 12px 10px 16px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	border-bottom:1px solid var(--ysa-ce-border);
}

.ysa-color-popover__header > div{
	min-width:0;
	display:flex;
	flex-direction:column;
	gap:1px;
}

.ysa-color-popover__header strong{
	font-size:14px;
	line-height:1.25;
	font-weight:700;
	letter-spacing:-.01em;
}

.ysa-color-popover__hint{
	overflow:hidden;
	color:var(--ysa-ce-muted);
	font-size:11.5px;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.ysa-color-popover__icon-button{
	width:34px;
	height:34px;
	padding:0;
	display:inline-grid;
	place-items:center;
	border:0;
	border-radius:8px;
	background:transparent;
	color:var(--ysa-ce-muted);
	font-size:22px !important;
	line-height:1;
	cursor:pointer;
}

.ysa-color-popover__icon-button:hover{
	background:var(--ysa-ce-canvas);
	color:var(--ysa-ce-text);
}

.ysa-color-popover button:focus-visible,
.ysa-color-popover input:focus-visible,
.ysa-color-popover [tabindex]:focus-visible{
	outline:2px solid var(--ysa-ce-accent);
	outline-offset:2px;
}

.ysa-color-popover__body{
	padding:14px 16px 15px;
	display:flex;
	flex-direction:column;
	gap:13px;
	overflow:auto;
	overscroll-behavior:contain;
}

.ysa-color-popover__body > *{
	flex-shrink:0;
}

.ysa-color-popover__comparison{
	display:grid;
	grid-template-columns:52px 52px 1fr;
	align-items:end;
	gap:10px;
}

.ysa-color-popover__comparison-item{
	display:grid;
	grid-template-columns:36px;
	gap:4px;
	color:var(--ysa-ce-muted);
	font-size:10.5px;
	line-height:1.2;
}

.ysa-color-popover__comparison-item i{
	display:block;
	width:32px;
	height:24px;
	overflow:hidden;
	border:1px solid rgba(14,20,31,.15);
	border-radius:6px;
}

.ysa-color-popover__comparison-item i::before{
	content:"";
	position:absolute;
	inset:0;
	background:var(--ysa-current-color, var(--ysa-picker-color));
}

.ysa-color-popover__eyedropper{
	min-height:32px;
	justify-self:end;
	padding:0 10px;
	border:1px solid var(--ysa-ce-border);
	border-radius:8px;
	background:var(--ysa-ce-surface);
	color:var(--ysa-ce-text);
	font-size:11.5px !important;
	font-weight:600 !important;
	cursor:pointer;
}

.ysa-color-popover__eyedropper:hover{
	border-color:var(--ysa-ce-border-strong);
	background:var(--ysa-ce-canvas);
}

.ysa-color-popover__plane{
	position:relative;
	width:100%;
	aspect-ratio:16 / 9;
	overflow:hidden;
	border:1px solid rgba(14,20,31,.17);
	border-radius:11px;
	background:var(--ysa-picker-hue);
	cursor:crosshair;
	touch-action:none;
}

.ysa-color-popover__plane-white,
.ysa-color-popover__plane-black{
	position:absolute;
	inset:0;
	pointer-events:none;
}

.ysa-color-popover__plane-white{
	background:linear-gradient(to right, #fff, rgba(255,255,255,0));
}

.ysa-color-popover__plane-black{
	background:linear-gradient(to top, #000, rgba(0,0,0,0));
}

.ysa-color-popover__plane-thumb{
	--ysa-thumb-color:#19b6a8;
	position:absolute;
	width:15px;
	height:15px;
	border:2px solid #fff;
	border-radius:50%;
	background:var(--ysa-thumb-color);
	box-shadow:0 1px 4px rgba(14,20,31,.55);
	transform:translate(-50%, -50%);
	pointer-events:none;
}

.ysa-color-popover__slider-row{
	display:grid;
	grid-template-columns:46px minmax(0, 1fr) 42px;
	align-items:center;
	gap:9px;
	margin:0;
	color:var(--ysa-ce-muted);
	font-size:11.5px;
	font-weight:600;
}

.ysa-color-popover__slider-row output{
	text-align:right;
	color:var(--ysa-ce-text);
	font-variant-numeric:tabular-nums;
	font-weight:600;
}

.ysa-color-popover input[type="range"]{
	width:100%;
	height:20px;
	margin:0;
	padding:0;
	border:0;
	background:transparent;
	cursor:pointer;
}

.ysa-color-popover input[type="range"]::-webkit-slider-runnable-track{
	height:10px;
	border:1px solid rgba(14,20,31,.16);
	border-radius:999px;
	background:linear-gradient(to right, #f00 0%, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00 100%);
}

.ysa-color-popover input[type="range"]::-webkit-slider-thumb{
	appearance:none;
	width:17px;
	height:17px;
	margin-top:-4px;
	border:2px solid #fff;
	border-radius:50%;
	background:var(--ysa-picker-hue);
	box-shadow:0 1px 4px rgba(14,20,31,.48);
}

.ysa-color-popover input[type="range"]::-moz-range-track{
	height:10px;
	border:1px solid rgba(14,20,31,.16);
	border-radius:999px;
	background:linear-gradient(to right, #f00 0%, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00 100%);
}

.ysa-color-popover input[type="range"]::-moz-range-thumb{
	width:14px;
	height:14px;
	border:2px solid #fff;
	border-radius:50%;
	background:var(--ysa-picker-hue);
	box-shadow:0 1px 4px rgba(14,20,31,.48);
}

.ysa-color-popover__alpha-track{
	height:12px;
	overflow:hidden;
	border:1px solid rgba(14,20,31,.16);
	border-radius:999px;
	background-color:#fff;
	background-image:
		linear-gradient(to right, rgba(var(--ysa-picker-rgb), 0), rgba(var(--ysa-picker-rgb), 1)),
		linear-gradient(45deg, #d7dae0 25%, transparent 25%),
		linear-gradient(-45deg, #d7dae0 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #d7dae0 75%),
		linear-gradient(-45deg, transparent 75%, #d7dae0 75%);
	background-size:auto, 8px 8px, 8px 8px, 8px 8px, 8px 8px;
	background-position:0 0, 0 0, 0 4px, 4px -4px, -4px 0;
}

.ysa-color-popover__alpha-track input[type="range"]{
	display:block;
	height:10px;
	margin:-1px 0 0;
}

.ysa-color-popover__alpha-track input[type="range"]::-webkit-slider-runnable-track{
	border-color:transparent;
	background:transparent;
}

.ysa-color-popover__alpha-track input[type="range"]::-moz-range-track{
	border-color:transparent;
	background:transparent;
}

.ysa-color-popover__alpha-track input[type="range"]::-webkit-slider-thumb{
	background:var(--ysa-picker-color);
}

.ysa-color-popover__alpha-track input[type="range"]::-moz-range-thumb{
	background:var(--ysa-picker-color);
}

.ysa-color-popover__value-editor{
	display:flex;
	flex-direction:column;
	gap:7px;
}

.ysa-color-popover__format-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	color:var(--ysa-ce-muted);
	font-size:11.5px;
	font-weight:600;
}

.ysa-color-popover__format-toggle{
	display:inline-grid;
	grid-template-columns:repeat(2, minmax(46px, 1fr));
	gap:2px;
	padding:2px;
	border:1px solid var(--ysa-ce-border);
	border-radius:8px;
	background:var(--ysa-ce-canvas);
}

.ysa-color-popover__format-toggle button{
	min-width:46px;
	height:26px;
	padding:0 9px;
	border:0;
	border-radius:6px;
	background:transparent;
	color:var(--ysa-ce-muted);
	font-size:10.5px !important;
	font-weight:700 !important;
	letter-spacing:.02em;
	cursor:pointer;
}

.ysa-color-popover__format-toggle button:hover{
	color:var(--ysa-ce-text);
}

.ysa-color-popover__format-toggle button[aria-checked="true"]{
	background:var(--ysa-ce-surface);
	box-shadow:0 1px 3px rgba(14,20,31,.12);
	color:var(--ysa-ce-text);
}

.ysa-color-popover__value-row{
	display:grid;
	grid-template-columns:minmax(0, 1fr) auto;
	align-items:end;
	gap:8px;
}

.ysa-color-popover__value-row label{
	display:flex;
	flex-direction:column;
	gap:5px;
	margin:0;
	color:var(--ysa-ce-muted);
	font-size:11.5px;
	font-weight:600;
}

.ysa-color-popover__value-row input{
	width:100%;
	height:38px;
	margin:0;
	padding:8px 10px;
	border:1px solid var(--ysa-ce-border-strong);
	border-radius:8px;
	background:var(--ysa-ce-surface);
	box-shadow:0 1px 2px rgba(14,20,31,.04);
	color:var(--ysa-ce-text);
	font-family:"SFMono-Regular", Consolas, "Liberation Mono", monospace;
	font-size:12px;
	line-height:20px;
	text-transform:none;
}

.ysa-color-popover__value-row input[aria-invalid="true"]{
	border-color:#b33c36;
	box-shadow:0 0 0 3px rgba(179,60,54,.12);
}

.ysa-color-popover__value-row > button{
	height:38px;
	padding:0 12px;
	border:1px solid var(--ysa-ce-border);
	border-radius:8px;
	background:var(--ysa-ce-canvas);
	color:var(--ysa-ce-text);
	font-size:11.5px !important;
	font-weight:650 !important;
	cursor:pointer;
}

.ysa-color-popover__value-row > button:hover{
	border-color:var(--ysa-ce-border-strong);
	background:#eef0f3;
}

.ysa-color-popover__error{
	margin:-8px 0 0;
	color:#922f2a;
	font-size:11.5px;
	line-height:1.35;
}

.ysa-color-popover__swatch-section{
	display:flex;
	flex-direction:column;
	gap:7px;
}

.ysa-color-popover__swatch-section > span{
	color:var(--ysa-ce-muted);
	font-size:11.5px;
	font-weight:600;
}

.ysa-color-popover__palette{
	display:grid;
	grid-template-columns:repeat(8, minmax(0, 1fr));
	gap:6px;
}

.ysa-color-popover__swatch-button{
	position:relative;
	width:100%;
	aspect-ratio:1;
	min-width:0;
	padding:0;
	overflow:hidden;
	border:1px solid rgba(14,20,31,.16);
	border-radius:7px;
	cursor:pointer;
}

.ysa-color-popover__swatch-button::before{
	content:"";
	position:absolute;
	inset:0;
	background:var(--ysa-swatch-color);
}

.ysa-color-popover__swatch-button:hover{
	border-color:var(--ysa-ce-text);
	transform:translateY(-1px);
}

.ysa-color-popover__swatch-button.is-selected{
	box-shadow:0 0 0 2px var(--ysa-ce-surface), 0 0 0 4px var(--ysa-ce-accent);
}

.ysa-color-popover__footer{
	min-height:57px;
	padding:10px 12px;
	display:flex;
	align-items:center;
	gap:8px;
	border-top:1px solid var(--ysa-ce-border);
	background:#fbfbfc;
}

.ysa-color-popover__footer > span{
	flex:1 1 auto;
}

.ysa-color-popover__footer button{
	min-height:36px;
	padding:0 13px;
	border-radius:8px;
	font-size:12px !important;
	font-weight:650 !important;
	cursor:pointer;
}

.ysa-color-popover__clear{
	border:0;
	background:transparent;
	color:#922f2a;
}

.ysa-color-popover__clear:hover{
	background:#fbe0de;
}

.ysa-color-popover__cancel{
	border:1px solid var(--ysa-ce-border-strong);
	background:var(--ysa-ce-surface);
	color:var(--ysa-ce-text);
}

.ysa-color-popover__cancel:hover{
	background:var(--ysa-ce-canvas);
}

.ysa-color-popover__apply{
	border:1px solid #0e141f;
	background:#0e141f;
	color:#fff;
	box-shadow:0 1px 2px rgba(14,20,31,.14);
}

.ysa-color-popover__apply:hover{
	border-color:#242b37;
	background:#242b37;
}

@media (max-width:600px){
	.ysa-color-editor__trigger{
		min-height:44px;
	}

	.ysa-color-popover{
		top:auto !important;
		right:0 !important;
		bottom:0 !important;
		left:0 !important;
		width:100%;
		max-height:min(92vh, 720px);
		overflow:hidden;
		border-right:0;
		border-bottom:0;
		border-left:0;
		border-radius:16px 16px 0 0;
		box-shadow:0 -18px 50px rgba(14,20,31,.24);
		transform:translateY(12px);
		transform-origin:bottom center;
		padding-bottom:env(safe-area-inset-bottom);
	}

	.ysa-color-popover.is-open{
		transform:translateY(0);
	}

	.ysa-color-popover__plane{
		aspect-ratio:2 / 1;
	}

	.ysa-color-popover__palette{
		grid-template-columns:repeat(6, minmax(0, 1fr));
		gap:8px;
	}

	.ysa-color-popover__swatch-button{
		min-height:44px;
	}

	.ysa-color-popover__footer{padding-bottom:max(10px, env(safe-area-inset-bottom))}

	.ysa-color-popover__footer button,
	.ysa-color-popover__icon-button,
	.ysa-color-popover__eyedropper,
	.ysa-color-popover__format-toggle button{
		min-height:44px;
	}
}

@media (prefers-reduced-motion:reduce){
	.ysa-color-editor__trigger,
	.ysa-color-editor__chevron,
	.ysa-color-popover,
	.ysa-color-popover__swatch-button{
		transition:none;
	}
}