.p-color-input{position:relative;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:16px}.p-color-input__preview{display:flex;justify-content:center;align-items:center;width:100%;height:128px;position:relative;border:1px solid #d1d5db;border-radius:6px;overflow:hidden;margin-bottom:12px;background-color:#1a1d26;background-image:linear-gradient(45deg,#2a2e3a 25%,transparent 0),linear-gradient(-45deg,#2a2e3a 25%,transparent 0),linear-gradient(45deg,transparent 75%,#2a2e3a 0),linear-gradient(-45deg,transparent 75%,#2a2e3a 0),radial-gradient(circle at center,rgba(59,130,246,.03) 0,transparent 70%);background-size:20px 20px,20px 20px,20px 20px,20px 20px,100% 100%;background-position:0 0,0 10px,10px -10px,-10px 0,50%;box-shadow:inset 0 2px 4px rgba(0,0,0,.06),inset 0 0 20px rgba(59,130,246,.015)}.p-color-input__preview:after,.p-color-input__preview:before{content:"";position:absolute;pointer-events:none;z-index:1}.p-color-input__preview:before{left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,rgba(255,0,0,.5),rgba(255,127,0,.5) 14%,rgba(255,255,0,.5) 28%,rgba(0,255,0,.5) 42%,rgba(0,127,255,.5) 57%,rgba(0,0,255,.5) 71%,rgba(127,0,255,.5) 85%,rgba(255,0,255,.5));box-shadow:inset -1px 0 2px rgba(0,0,0,.2),1px 0 2px rgba(0,0,0,.15)}.p-color-input__preview:after{right:0;top:0;bottom:0;width:6px;background:linear-gradient(0deg,rgba(255,0,0,.5),rgba(255,127,0,.5) 14%,rgba(255,255,0,.5) 28%,rgba(0,255,0,.5) 42%,rgba(0,127,255,.5) 57%,rgba(0,0,255,.5) 71%,rgba(127,0,255,.5) 85%,rgba(255,0,255,.5));box-shadow:inset 1px 0 2px rgba(0,0,0,.2),-1px 0 2px rgba(0,0,0,.15)}.p-color-input__color-name{font-size:14px;font-weight:500;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.p-color-input__color-hex{font-size:12px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.p-color-input__empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9ca3af}.p-color-input__controls{display:flex;flex-direction:column;gap:8px}.p-color-input__input-group{display:flex;flex-direction:column;gap:4px}.p-color-input__label{font-size:12px;font-weight:500;color:#374151}.p-color-input__input{width:100%;padding:8px 12px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#1f2937;transition:all .2s ease}.p-color-input__input::-moz-placeholder{color:#9ca3af}.p-color-input__input::placeholder{color:#9ca3af}.p-color-input__input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.p-color-input__controls>.c-btn.c-cta{padding:8px 16px!important;background:#3b82f6!important;font-size:13px!important;font-weight:500!important}.p-color-input__controls>.c-btn.c-cta:hover{background:#2563eb!important}@media(max-width:640px){.p-color-input{padding:12px}.p-color-input__preview{height:96px}}@media(prefers-color-scheme:dark){.p-color-input{background:#1f2937;border-color:#374151}.p-color-input__preview{background-color:#0f1117;background-image:linear-gradient(45deg,#1f232d 25%,transparent 0),linear-gradient(-45deg,#1f232d 25%,transparent 0),linear-gradient(45deg,transparent 75%,#1f232d 0),linear-gradient(-45deg,transparent 75%,#1f232d 0),radial-gradient(circle at center,rgba(99,102,241,.05) 0,transparent 70%);border-color:#374151;box-shadow:inset 0 2px 4px rgba(0,0,0,.2),inset 0 0 20px rgba(99,102,241,.025)}.p-color-input__preview:before{background:linear-gradient(180deg,rgba(255,50,50,.6),rgba(255,140,30,.6) 14%,rgba(255,255,50,.6) 28%,rgba(50,255,80,.6) 42%,rgba(50,160,255,.6) 57%,rgba(80,80,255,.6) 71%,rgba(170,50,255,.6) 85%,rgba(255,50,255,.6));box-shadow:inset -1px 0 2px rgba(0,0,0,.4),1px 0 3px rgba(99,102,241,.2),1px 0 6px rgba(99,102,241,.1)}.p-color-input__preview:after{background:linear-gradient(0deg,rgba(255,50,50,.6),rgba(255,140,30,.6) 14%,rgba(255,255,50,.6) 28%,rgba(50,255,80,.6) 42%,rgba(50,160,255,.6) 57%,rgba(80,80,255,.6) 71%,rgba(170,50,255,.6) 85%,rgba(255,50,255,.6));box-shadow:inset 1px 0 2px rgba(0,0,0,.4),-1px 0 3px rgba(99,102,241,.2),-1px 0 6px rgba(99,102,241,.1)}.p-color-input__label{color:#f9fafb}.p-color-input__input{background:#111827;border-color:#4b5563;color:#f9fafb}.p-color-input__input::-moz-placeholder{color:#6b7280}.p-color-input__input::placeholder{color:#6b7280}.p-color-input__input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.2)}}