input[data-studio-color]{display:none!important}
.studio-color-swatch,.ink-float-tb .studio-color-swatch{
  position:relative;display:inline-flex;flex-shrink:0;width:28px;height:28px;min-width:28px;
  padding:0;overflow:hidden;border:1px solid var(--bd-mid,rgba(26,18,24,.2));border-radius:6px;
  cursor:pointer;background:repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 0 0/10px 10px;
}
.studio-color-chip{display:block;position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.studio-color-swatch:focus-visible{outline:2px solid var(--ac,#8e21ca);outline-offset:3px}
.ic-bln-swatch .studio-color-swatch{position:absolute;inset:0;width:100%;height:100%;border:0;min-width:0}
.studio-color-dialog{
  position:fixed;z-index:10050;width:304px;max-width:calc(100vw - 16px);overflow:auto;
  padding:16px;border:1px solid var(--bd-mid,rgba(26,18,24,.16));border-radius:14px;
  background:var(--bg-panel,#fff);color:var(--tx,#1a1218);box-shadow:var(--shadow-lg,0 12px 45px #0003);
  font:13px/1.4 var(--font-body,system-ui,sans-serif);overscroll-behavior:contain;
}
.studio-color-dialog[hidden]{display:none}
.studio-color-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.studio-color-head strong{font-weight:600;font-size:14px}
.studio-color-head button{width:28px;height:28px;font-size:22px;border-radius:6px}
.studio-color-square{height:144px;position:relative;border-radius:8px;cursor:crosshair;touch-action:none;
  background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,var(--color-hue,red));
}
.studio-color-thumb{position:absolute;width:13px;height:13px;border:2px solid #fff;border-radius:50%;
  box-shadow:0 0 0 1px #0008;transform:translate(-50%,-50%);pointer-events:none;
}
.studio-color-field{display:flex;align-items:center;gap:10px;margin-top:12px}
.studio-color-field>span{width:48px;flex-shrink:0;color:var(--tx-2,#666);font-size:12px}
.studio-color-field>input,.studio-color-field>div{flex:1;min-width:0}
.studio-color-dialog input[type=text],.studio-color-dialog input[type=number]{
  width:100%;height:34px;border:1px solid var(--bd-mid,#ccc);border-radius:6px;padding:0 8px;
  background:var(--bg-input,#fff);color:inherit;font:12px var(--font-label,monospace);
}
.studio-color-dialog input[type=range]{appearance:none;-webkit-appearance:none;height:12px;border-radius:6px;cursor:pointer;min-width:0}
.studio-color-dialog .studio-color-hue{background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.studio-color-dialog .studio-color-alpha{background:linear-gradient(to right,transparent,var(--color-rgb)),repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 0 0/8px 8px}
.studio-color-dialog input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;background:#fff;border:1px solid #999;border-radius:50%;box-shadow:0 1px 4px #0003}
.studio-color-dialog input[type=range]::-moz-range-thumb{width:14px;height:14px;background:#fff;border:1px solid #999;border-radius:50%}
.studio-color-opacity{display:flex;align-items:center;gap:6px}
.studio-color-opacity input[type=range]{flex:1;width:0}
.studio-color-opacity input[type=number]{width:51px;flex-shrink:0;padding:0 4px;text-align:center}
.studio-color-preview{height:24px;margin-top:12px;border:1px solid var(--bd-mid,#ccc);border-radius:6px;overflow:hidden;
  background:repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 0 0/10px 10px}
.studio-color-preview span{display:block;width:100%;height:100%}
.studio-color-error{font-size:12px;color:#c0392b;margin-top:8px}
.studio-color-actions{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.studio-color-actions button{height:34px;padding:0 12px;border:1px solid var(--bd-mid,#ccc);border-radius:7px;font-size:12px}
.studio-color-actions .studio-color-done{margin-left:auto;background:var(--btn-gradient,#8e21ca);border-color:transparent;color:#fff}
.studio-color-dialog :focus-visible{outline:2px solid var(--ac,#8e21ca);outline-offset:2px}
.studio-color-dialog [aria-invalid=true]{border-color:#c0392b!important}
