/* UltraKit Image Comparison — premium before/after (icx) */
.ultrakit-icx { --a: #6c5ce7; --b: #00cec9; --ink: #14142b; --cols: 2; --cols-t: 2; --cols-m: 1; --gap: 28px; --r: 22px; --ratio: 3 / 2; --lens: 220px; --sweep: 5s; width: 100%; box-sizing: border-box; color: var(--ink); }
.ultrakit-icx *, .ultrakit-icx *::before, .ultrakit-icx *::after { box-sizing: border-box; }
.icx-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); }
.icx-item { position: relative; margin: 0; display: flex; flex-direction: column; border-radius: var(--r); --sr: var(--r); min-width: 0; }
.icx-stage { position: relative; width: 100%; aspect-ratio: var(--ratio); overflow: hidden; border-radius: var(--sr); background: #e9e9f3; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; isolation: isolate; }
.icx-d-v .icx-stage { cursor: ns-resize; touch-action: pan-x; }
.icx-stage:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--a); }
.icx-stage img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; pointer-events: none; }
.icx-top { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.icx-d-v .icx-top { clip-path: inset(0 0 calc(100% - var(--pos)) 0); }

/* ---------- Frames ---------- */
.icx-f-soft .icx-item { box-shadow: 0 30px 60px -28px rgba(20, 20, 60, .45); background: #fff; }
.icx-f-soft .icx-cap { padding: 18px 22px 22px; }
.icx-f-border .icx-item { background: #fff; padding: 10px; --sr: calc(var(--r) - 8px); box-shadow: 0 30px 60px -28px rgba(20, 20, 60, .4); }
.icx-f-gradient .icx-item { background: linear-gradient(135deg, var(--a), var(--b)); padding: 4px; --sr: calc(var(--r) - 4px); box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--a) 60%, transparent); }
.icx-f-dark .icx-item { background: #14142b; padding: 10px; --sr: calc(var(--r) - 8px); color: #fff; box-shadow: 0 30px 60px -24px rgba(8, 8, 30, .6); }
.icx-f-border .icx-cap, .icx-f-dark .icx-cap { padding: 16px 14px 8px; }
.icx-f-gradient .icx-cap { padding: 16px 20px 18px; background: #fff; border-radius: 0 0 calc(var(--r) - 4px) calc(var(--r) - 4px); margin-top: -1px; }
.icx-f-none .icx-cap { padding: 16px 2px 0; }
.icx-f-dark .icx-cap span { color: #b8b8d8; }
.icx-cap { display: flex; flex-direction: column; gap: 4px; }
.icx-cap b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.icx-cap span { font-size: 14.5px; line-height: 1.55; color: #6b6b85; }

/* ---------- Labels ---------- */
.icx-lab { position: absolute; z-index: 3; pointer-events: none; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #14142b; background: #fff; padding: 7px 14px; border-radius: 30px; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .35); transition: opacity .3s ease, transform .3s ease; }
.icx-lab-b { left: 16px; top: 16px; }
.icx-lab-a { right: 16px; top: 16px; background: linear-gradient(120deg, var(--a), var(--b)); color: #fff; }
.icx-d-v .icx-lab-a { top: auto; bottom: 16px; }
.icx-lb-glass .icx-lab { background: rgba(14, 14, 32, .42); color: #fff; -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.icx-lb-dot .icx-lab { background: rgba(14, 14, 32, .62); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding-left: 26px; box-shadow: none; }
.icx-lb-dot .icx-lab::before { content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #ff7a90; }
.icx-lb-dot .icx-lab-a::before { background: #3dffb8; }
.icx-lab.is-off { opacity: 0; transform: translateY(-6px); }
.icx-m-toggle .icx-lab { display: none; }

/* ---------- Handle ---------- */
.icx-handle { position: absolute; z-index: 4; left: var(--pos); top: 0; bottom: 0; width: 0; pointer-events: none; }
.icx-handle::before { content: ""; position: absolute; left: -1.5px; top: 0; bottom: 0; width: 3px; background: #fff; box-shadow: 0 0 14px rgba(0, 0, 0, .35); }
.icx-d-v .icx-handle { left: 0; right: 0; top: var(--pos); bottom: auto; width: auto; height: 0; }
.icx-d-v .icx-handle::before { left: 0; right: 0; top: -1.5px; bottom: auto; width: auto; height: 3px; }
.icx-knob { position: absolute; left: 0; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: #fff; color: #14142b; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px -6px rgba(0, 0, 0, .5); transition: transform .25s cubic-bezier(.22, .9, .3, 1); }
.icx-d-v .icx-knob { left: 50%; top: 0; margin: -27px 0 0 -27px; }
.icx-d-v .icx-knob svg { transform: rotate(90deg); }
.icx-stage:hover .icx-knob, .icx-item.is-drag .icx-knob { transform: scale(1.1); }
.icx-item.is-drag .icx-knob { transform: scale(.94); }
.icx-h-pill .icx-knob { width: 36px; height: 72px; border-radius: 30px; margin: -36px 0 0 -18px; }
.icx-h-pill .icx-knob svg { width: 18px; height: 18px; }
.icx-d-v.icx-h-pill .icx-knob { width: 72px; height: 36px; margin: -18px 0 0 -36px; }
.icx-d-v.icx-h-pill .icx-knob { left: 50%; top: 0; margin: -18px 0 0 -36px; }
.icx-h-glass .icx-knob { width: 66px; height: 66px; margin: -33px 0 0 -33px; background: rgba(255, 255, 255, .2); color: #fff; -webkit-backdrop-filter: blur(12px) saturate(1.6); backdrop-filter: blur(12px) saturate(1.6); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8), 0 12px 30px -6px rgba(0, 0, 0, .4); }
.icx-d-v.icx-h-glass .icx-knob { margin: -33px 0 0 -33px; }
.icx-h-line .icx-knob { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .35); }
.icx-h-line .icx-knob svg { display: none; }
.icx-d-v.icx-h-line .icx-knob { margin: -9px 0 0 -9px; }
.icx-h-gradient .icx-handle::before { background: linear-gradient(180deg, var(--a), var(--b)); width: 4px; left: -2px; }
.icx-d-v.icx-h-gradient .icx-handle::before { background: linear-gradient(90deg, var(--a), var(--b)); height: 4px; top: -2px; width: auto; left: 0; }
.icx-h-gradient .icx-knob { background: linear-gradient(135deg, var(--a), var(--b)); color: #fff; }

/* ---------- Fade mode ---------- */
.icx-m-fade .icx-top { clip-path: none; opacity: var(--k, .5); }
.icx-m-fade .icx-handle { display: block; }

/* ---------- Toggle mode ---------- */
.icx-m-toggle .icx-stage { cursor: pointer; }
.icx-m-toggle .icx-top { transition: clip-path .75s cubic-bezier(.65, 0, .25, 1); }
.icx-switch { position: absolute; z-index: 5; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; padding: 4px; border-radius: 40px; background: rgba(14, 14, 32, .68); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .5); }
.icx-switch button { position: relative; z-index: 1; appearance: none; border: 0; background: none; color: rgba(255, 255, 255, .8); font: 800 13px/1 inherit; letter-spacing: .04em; padding: 11px 24px; border-radius: 30px; cursor: pointer; transition: color .3s; }
.icx-switch button.is-on { color: #fff; }
.icx-switch i { position: absolute; z-index: 0; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 30px; background: linear-gradient(120deg, var(--a), var(--b)); transition: transform .5s cubic-bezier(.65, 0, .25, 1); }
.icx-item.is-after .icx-switch i { transform: translateX(100%); }

/* ---------- Lens mode ---------- */
.icx-m-lens .icx-stage { cursor: none; touch-action: none; }
.icx-m-lens .icx-top { --lr: 0px; clip-path: circle(var(--lr) at var(--x, 50%) var(--y, 50%)); transition: clip-path .3s cubic-bezier(.22, .9, .3, 1); }
.icx-m-lens .icx-item.is-on .icx-top { --lr: calc(var(--lens) / 2); }
.icx-m-lens .icx-item.is-move .icx-top { transition: none; }
.icx-ring { position: absolute; z-index: 4; left: var(--x, 50%); top: var(--y, 50%); width: var(--lens); height: var(--lens); margin: calc(var(--lens) / -2) 0 0 calc(var(--lens) / -2); border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 55%, transparent), 0 30px 60px -16px rgba(0, 0, 0, .55), inset 0 0 40px rgba(255, 255, 255, .12); opacity: 0; transform: scale(.4); pointer-events: none; transition: opacity .25s, transform .3s cubic-bezier(.22, .9, .3, 1); }
.icx-item.is-on .icx-ring { opacity: 1; transform: none; }
.icx-item.is-move .icx-ring { transition: opacity .25s, transform .3s cubic-bezier(.22, .9, .3, 1); }
.icx-hint { position: absolute; z-index: 4; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 9px 18px; border-radius: 30px; background: rgba(14, 14, 32, .68); color: #fff; font-size: 13px; font-weight: 700; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; transition: opacity .3s; white-space: nowrap; }
.icx-item.is-on .icx-hint { opacity: 0; }
.icx-m-lens .icx-lab-a { top: 16px; }

/* ---------- Switcher layout ---------- */
.icx-l-switcher .icx-grid { display: block; }
.icx-l-switcher .icx-item { display: none; }
.icx-l-switcher .icx-item.is-current { display: flex; animation: icxIn .5s cubic-bezier(.22, .9, .3, 1); }
@keyframes icxIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.icx-thumbs { display: flex; gap: 14px; margin-top: 20px; overflow-x: auto; padding: 6px 4px 12px; scrollbar-width: none; justify-content: center; }
.icx-thumbs::-webkit-scrollbar { display: none; }
.icx-thumb { appearance: none; flex: 0 0 auto; width: 148px; padding: 6px; border: 0; border-radius: 16px; background: #fff; color: inherit; text-align: left; cursor: pointer; box-shadow: 0 8px 20px -10px rgba(20, 20, 60, .35); font-family: inherit; transition: transform .25s, box-shadow .25s; }
.icx-thumb:hover { transform: translateY(-3px); }
.icx-thumb img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 11px; }
.icx-thumb span { display: block; padding: 8px 4px 2px; font-size: 12px; font-weight: 800; color: #14142b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icx-thumb.is-active { box-shadow: 0 0 0 2.5px var(--a), 0 14px 28px -10px color-mix(in srgb, var(--a) 60%, transparent); }
.icx-f-dark .icx-thumb { background: #14142b; }
.icx-f-dark .icx-thumb span { color: #fff; }

@media (max-width: 1024px) { .icx-grid { grid-template-columns: repeat(var(--cols-t), minmax(0, 1fr)); } }
@media (max-width: 767px) {
	.icx-grid { grid-template-columns: repeat(var(--cols-m), minmax(0, 1fr)); }
	.icx-knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
	.icx-d-v .icx-knob { margin: -23px 0 0 -23px; }
	.icx-lab { font-size: 11px; padding: 6px 11px; }
	.icx-lab-b, .icx-lab-a { top: 10px; } .icx-lab-b { left: 10px; } .icx-lab-a { right: 10px; }
	.icx-thumb { width: 118px; }
	.icx-m-lens { --lens: 150px; }
}
@media (prefers-reduced-motion: reduce) { .icx-m-toggle .icx-top, .icx-switch i, .icx-knob, .icx-l-switcher .icx-item.is-current { transition: none !important; animation: none !important; } }