/* Mini color picker stilleri */
.bnt-cp-trigger {
    width: 38px; height: 38px;
    border: 2px solid rgba(255,255,255,.18);
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    transition: border-color .2s, transform .15s;
}
.bnt-cp-trigger:hover { border-color: var(--accent); transform: scale(1.05); }
.bnt-cp-panel {
    position: fixed; z-index: 600;
    width: 224px;
    background: rgba(20,20,28,0.98);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    backdrop-filter: blur(12px);
    color: #f3f3f5;
}
.bnt-cp-sat {
    position: relative;
    width: 100%; height: 140px;
    border-radius: 8px;
    overflow: hidden;
    cursor: crosshair;
    margin-bottom: 10px;
}
.bnt-cp-sat-overlay-1 {
    position: absolute; inset: 0;
    background: linear-gradient(to right, #fff, transparent);
    pointer-events: none;
}
.bnt-cp-sat-overlay-2 {
    position: absolute; inset: 0;
    background: linear-gradient(to top, #000, transparent);
    pointer-events: none;
}
.bnt-cp-cursor {
    position: absolute;
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.6);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.bnt-cp-hue {
    position: relative;
    width: 100%; height: 12px;
    border-radius: 999px;
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    cursor: ew-resize;
    margin-bottom: 10px;
}
.bnt-cp-hue-cursor {
    position: absolute; top: 50%;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(0,0,0,0.6);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.bnt-cp-row { margin-bottom: 10px; }
.bnt-cp-hex {
    width: 100%; height: 32px;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.12);
    color: inherit;
    border-radius: 8px;
    padding: 0 10px;
    font-family: ui-monospace, monospace;
    text-align: center;
    outline: none;
}
.bnt-cp-hex:focus { border-color: var(--accent); }
.bnt-cp-presets {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}
.bnt-cp-preset {
    width: 100%; aspect-ratio: 1;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    padding: 0;
    transition: transform .15s;
}
.bnt-cp-preset:hover { transform: scale(1.15); }