/*! ColorSelector.css */:root{--color-selector-overlay:var(--dna-overlay-dark);--color-selector-surface:var(--dna-surface-soft);--color-selector-panel:var(--dna-surface);--color-selector-text:var(--dna-ink);--color-selector-muted:var(--dna-ink-muted);--color-selector-brand:var(--dna-brand);--color-selector-accent:var(--dna-accent);--color-selector-line:var(--dna-line);--color-selector-focus:var(--dna-mint-28);--color-selector-shadow:var(--dna-shadow-strong)}.color-selector-root{position:fixed;inset:0;z-index:100020;display:none;place-items:center;padding:22px;background:var(--color-selector-overlay)}.color-selector-root--open{display:grid}.color-selector{width:min(880px,96vw);max-height:90vh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;background:var(--color-selector-surface);border:1px solid var(--color-selector-line);border-radius:var(--dna-radius-lg) var(--dna-radius-lg) var(--dna-radius-lg) 0;box-shadow:var(--color-selector-shadow)}.color-selector__foot,.color-selector__head{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 20px}.color-selector__head{align-items:start;border-bottom:1px solid var(--color-selector-line)}.color-selector__head p{margin:0;color:var(--color-selector-brand);font-size:10px;font-weight:800;text-transform:uppercase}.color-selector__head h2{margin:4px 0 0;color:var(--color-selector-text);font-size:26px;line-height:1}.color-selector__close{width:38px;height:38px;border:1px solid var(--color-selector-line);border-radius:50%;background:var(--color-selector-panel);cursor:pointer;font-size:22px}.color-selector__main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0;min-height:0}.color-selector__controls{min-height:0;overflow:auto;padding:16px 20px 20px;border-right:1px solid var(--color-selector-line)}.color-selector__section{margin-bottom:18px}.color-selector__section h3{margin:0 0 8px;color:var(--color-selector-muted);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.color-selector__swatches{display:flex;flex-wrap:wrap;gap:8px}.color-selector__swatch{width:34px;height:34px;border:1px solid var(--dna-black-16);border-radius:12px 12px 12px 0;cursor:pointer;transition:transform var(--dna-transition-bounce),box-shadow var(--dna-transition)}.color-selector__swatch:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 6px 14px var(--dna-black-16)}.color-selector__spectrum{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:10px;align-items:center}.color-selector__spectrum input[type=color]{width:54px;height:42px;padding:3px;border:1px solid var(--color-selector-line);border-radius:12px;background:var(--color-selector-panel);cursor:pointer}.color-selector__spectrum input[type=text]{min-height:42px;border:1px solid var(--color-selector-line);border-radius:999px;background:var(--color-selector-panel);color:var(--color-selector-text);padding:0 14px;outline:0;font:inherit;font-size:13px}.color-selector__spectrum input[type=text]:focus{border-color:var(--color-selector-accent);box-shadow:0 0 0 4px var(--color-selector-focus)}.color-selector__eyedropper{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--color-selector-line);border-radius:12px;background:var(--color-selector-panel);color:var(--color-selector-text);cursor:pointer;transition:border-color var(--dna-transition),color var(--dna-transition),transform var(--dna-transition)}.color-selector__eyedropper:hover{transform:translateY(-1px);border-color:var(--color-selector-brand);color:var(--color-selector-brand)}.color-selector__modes{display:flex;gap:8px;margin-bottom:12px}.color-selector__mode{flex:1;min-height:36px;border:1px solid var(--color-selector-line);border-radius:999px;background:var(--color-selector-panel);color:var(--color-selector-text);cursor:pointer;font:inherit;font-size:12px;font-weight:700;transition:background var(--dna-transition),border-color var(--dna-transition)}.color-selector__mode:hover{border-color:var(--color-selector-accent)}.color-selector__mode--active{border-color:var(--color-selector-brand);background:var(--color-selector-brand);color:var(--dna-white)}.color-selector__layers{display:grid;gap:8px}.color-selector__slot{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--color-selector-line);border-radius:16px 16px 16px 0;background:var(--color-selector-panel);cursor:pointer;transition:border-color var(--dna-transition),box-shadow var(--dna-transition)}.color-selector__slot:hover{border-color:var(--color-selector-accent)}.color-selector__slot--active{border-color:var(--color-selector-brand);box-shadow:0 0 0 3px var(--color-selector-focus)}.color-selector__slot-chip{width:34px;height:34px;border:1px solid var(--dna-black-16);border-radius:12px 12px 12px 0}.color-selector__slot-copy{display:grid;min-width:0}.color-selector__slot-copy strong{font-size:12px}.color-selector__slot-copy span{overflow:hidden;color:var(--color-selector-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.color-selector__slot-remove{width:26px;height:26px;border:1px solid var(--color-selector-line);border-radius:50%;background:var(--color-selector-panel);color:var(--color-selector-muted);cursor:pointer;font-size:14px;line-height:1}.color-selector__slot-remove:hover{border-color:var(--dna-danger);color:var(--dna-danger)}.color-selector__field{display:grid;gap:2px;justify-items:end}.color-selector__field span{color:var(--color-selector-muted);font-size:10px;font-weight:700;text-transform:uppercase}.color-selector__field input{width:64px;min-height:32px;border:1px solid var(--color-selector-line);border-radius:10px;background:var(--color-selector-surface);color:var(--color-selector-text);padding:0 8px;outline:0;font:inherit;font-size:12px;text-align:right}.color-selector__field input:focus{border-color:var(--color-selector-accent)}.color-selector__add{justify-self:start;min-height:32px;border:1px dashed var(--dna-line-strong);border-radius:999px;background:0 0;color:var(--color-selector-text);cursor:pointer;font:inherit;font-size:12px;font-weight:700;padding:0 14px}.color-selector__add:hover{border-color:var(--color-selector-brand);color:var(--color-selector-brand)}.color-selector__divider{display:flex;gap:10px;align-items:center;margin:8px 0 0;color:var(--color-selector-muted);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.color-selector__divider::after,.color-selector__divider::before{content:"";flex:1;height:1px;background:var(--color-selector-line)}.color-selector__hint{margin:2px 0 0;color:var(--color-selector-muted);font-size:12px}.color-selector__preview{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;min-height:0;padding:20px}.color-selector__stage{display:grid;place-items:center;overflow:hidden;min-height:min(260px,40vh);border:1px solid var(--color-selector-line);border-radius:var(--dna-radius-md);background:linear-gradient(45deg,var(--dna-black-04) 25%,transparent 25%,transparent 75%,var(--dna-black-04) 75%),linear-gradient(45deg,var(--dna-black-04) 25%,transparent 25%,transparent 75%,var(--dna-black-04) 75%),var(--color-selector-panel);background-position:0 0,11px 11px;background-size:22px 22px;cursor:crosshair}.color-selector__output{max-height:72px;overflow:auto;padding:10px 12px;border:1px solid var(--color-selector-line);border-radius:14px 14px 14px 0;background:var(--color-selector-panel);color:var(--color-selector-muted);font-size:11px;line-height:1.5;word-break:break-all}.color-selector__shape{display:grid;place-items:center;width:100%;padding:24px}.color-selector__folder-demo{position:relative;width:min(230px,70%,42vh);margin-top:18px}.color-selector__folder-tab{position:absolute;left:0;top:-17px;width:40%;height:28px;display:block;border:1px solid var(--color-selector-line);border-bottom:0;border-radius:18px 18px 0 0;background:var(--dna-gradient-green-mint)}.color-selector__folder-body{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:20px;background:var(--dna-gradient-green-mint);box-shadow:var(--dna-shadow-card)}.color-selector__folder-body img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.color-selector__folder-label{position:absolute;left:12px;top:12px;padding:4px 10px;border-radius:999px;background:var(--dna-black-36);color:var(--dna-white);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.color-selector__foot{border-top:1px solid var(--color-selector-line)}.color-selector__button{min-height:42px;border:1px solid var(--color-selector-brand);border-radius:999px;background:var(--color-selector-brand);color:var(--dna-white);cursor:pointer;font:inherit;font-size:13px;font-weight:700;padding:0 22px;transition:transform var(--dna-transition),box-shadow var(--dna-transition)}.color-selector__button:hover{transform:translateY(-1px);box-shadow:0 8px 18px var(--dna-black-16)}.color-selector__button--ghost{border-color:var(--color-selector-line);background:var(--color-selector-panel);color:var(--color-selector-text)}@media (max-width:760px){.color-selector__main{grid-template-columns:minmax(0,1fr);overflow:auto}.color-selector__controls{border-right:0;border-bottom:1px solid var(--color-selector-line)}.color-selector__stage{min-height:200px}}