:root{
  --cp-panel-bg: #101418;
  --cp-panel-text: #e5e7eb;
  --cp-panel-border: #2b3038;
  --cp-field-bg: #0f141a;
  --cp-field-border: #2b3038;
  --cp-muted: #9aa0aa;
  --cp-handle: #f4f4f5;
  --cp-swatch-border: #5a616b;
}

.cp-panel, .cp-backdrop{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;}
.cp-panel{position:absolute;min-width:320px;padding:12px;background:var(--cp-panel-bg);color:var(--cp-panel-text);border:1px solid var(--cp-panel-border);border-radius:12px;display:none;z-index:1000;user-select:none;max-width:calc(100vw - 16px);}
.cp-panel.open{display:block;}
.cp-title{font-size:12px;color:var(--cp-muted);margin-bottom:6px;}
.cp-grid{display:grid;grid-template-columns:auto auto auto;gap:10px;align-items:start;}
.cp-sv-wrap{position:relative;width:200px;height:160px;}
#cp-sv{border:1px solid var(--cp-field-border);border-radius:8px;display:block;width:100%;height:100%;}
.cp-picker-dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border:2px solid #fff;border-radius:9999px;box-sizing:border-box;pointer-events:none;}
.cp-slider{position:relative;width:18px;height:160px;border:1px solid var(--cp-field-border);border-radius:8px;background:var(--cp-field-bg);touch-action:none;}
.cp-slider canvas{border-radius:8px;display:block;width:100%;height:100%;}
#cp-a{background:linear-gradient(45deg,#2a2f36 25%,transparent 25% 50%,#2a2f36 50% 75%,transparent 75%) 0 0/12px 12px,linear-gradient(45deg,transparent 25%,#1d232b 25% 50%,transparent 50% 75%,#1d232b 75%) 6px 6px/12px 12px;}
.cp-handle{position:absolute;left:-3px;width:24px;height:2px;background:var(--cp-handle);border-radius:2px;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.3);}
.cp-inputs{display:flex;flex-wrap:wrap;gap:10px;align-self:stretch;margin-top:6px;}
.cp-inputs label{width:88px;font-size:12px;color:var(--cp-muted);display:grid;gap:4px;}
.cp-inputs input[type="number"]{width:88px;box-sizing:border-box;padding:6px 8px;border:1px solid var(--cp-field-border);border-radius:8px;font:inherit;color:var(--cp-panel-text);background:var(--cp-field-bg);outline:none;-moz-appearance:textfield;}
.cp-inputs input[type="number"]:focus{border-color:#4f46e5;}

/* Remove default spin buttons and ensure transparent background */
.cp-inputs input[type="number"]::-webkit-inner-spin-button,
.cp-inputs input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
  background:transparent;
  border:none;
}
.cp-row{display:flex;gap:8px;margin-top:8px;align-items:center;grid-column:1/span 3;}
#cp-hex{width:88px;box-sizing:border-box;padding:6px 8px;border:1px solid var(--cp-field-border);border-radius:8px;font:inherit;color:var(--cp-panel-text);background:var(--cp-field-bg);outline:none;}
#cp-hex:focus{border-color:#4f46e5;}
#cp-pip{margin-left:auto;}
.cp-btn{padding:6px 10px;border:1px solid var(--cp-field-border);border-radius:8px;background:var(--cp-field-bg);color:var(--cp-panel-text);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.cp-btn[disabled]{opacity:.5;cursor:default;}
.cp-btn iconify-icon{display:block;}
.cp-btn:not([disabled]):hover{background:var(--cp-panel-border);border-color:#4f46e5;}
.cp-backdrop{position:fixed;inset:0;background:transparent;display:none;z-index:999;}
.cp-backdrop.open{display:block;}
@media (max-width:420px){
  .cp-sv-wrap{width:180px;height:144px;}
  #cp-sv{width:180px;height:144px;}
  .cp-panel{min-width:300px;}
}