#cp-fab{position:fixed;bottom:20px;right:20px;width:48px;height:48px;border-radius:24px;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer;z-index:9999;user-select:none;transition:all .2s ease}
#cp-fab:hover{background:#1b2238;transform:scale(1.05)}
#cp-fab:active{scale:.98}
#cp-panel{position:fixed;bottom:84px;right:20px;width:360px;max-width:95vw;background:#0f1220;color:#e8ebf1;border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.35);padding:12px;z-index:9999;display:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all .2s ease}
#cp-panel{max-height:80vh;overflow-y:auto;overflow-x:hidden;padding-bottom:12px}
#cp-actions{position:static;display:flex;gap:8px;flex-wrap:wrap;background:transparent;padding:8px 0;border-top:1px solid rgba(255,255,255,.08)}
#cp-actions button{flex:1 1 45%;font-size:12px;padding:8px}
#cp-undo-redo{margin-top:8px;margin-bottom:8px}
#cp-panel{overflow-x:hidden}
#cp-panel.open{display:block}
#cp-panel header{display:flex;align-items:center;justify-content:space-between;font-weight:600}
#cp-close{width:28px;height:28px;border-radius:6px;background:#1b2238;color:#e8ebf1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}
#cp-close:hover{background:#2b3248;transform:scale(1.1)}
#cp-row{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap}
#cp-hex{flex:0 0 120px;height:36px;border:none;border-radius:8px;padding:0 8px;background:#1b2238;color:#e8ebf1}
#cp-graph{flex:1 1 180px;height:120px;border-radius:6px;background:#11172a;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
#cp-select-mode{flex:0 0 auto}
#cp-color{flex:0 0 40px;height:36px;border:none;border-radius:8px}
#cp-clear{flex:0 0 auto;background:#1b2238;border:none;color:#e8ebf1;border-radius:8px;padding:8px 10px;cursor:pointer;transition:all .15s ease}
#cp-clear:hover{background:#2b3248;transform:translateY(-1px)}
#cp-deselect{flex:0 0 auto;background:#1b2238;border:none;color:#e8ebf1;border-radius:8px;padding:8px 10px;cursor:pointer;transition:all .15s ease}
#cp-deselect:hover{background:#2b3248;transform:translateY(-1px)}
#cp-live{flex:0 0 36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);cursor:grab}
.cp-swatch.drop-target{outline:2px dashed #3f5efb;outline-offset:2px}
#cp-hue-row{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px}
#cp-spectrum-row{display:grid;grid-template-columns:1fr;gap:6px;margin-top:8px}
#cp-spectrum,#cp-bw{width:100%;height:14px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);background:#1b2238;cursor:pointer}
#cp-swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:10px}
.cp-swatch{height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.15);cursor:pointer;position:relative;transition:all .15s ease}
.cp-swatch:hover{transform:scale(1.1)}
.cp-swatch:active{scale:.98}
.cp-swatch::after{content:"";position:absolute;inset:0;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
#cp-recent{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:6px}
.cp-recent{height:24px;border-radius:6px;border:1px solid rgba(255,255,255,.12);cursor:pointer;position:relative;transition:all .15s ease}
.cp-recent:hover{transform:scale(1.1)}
.cp-recent::after{content:"";position:absolute;inset:0;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
#cp-alpha-row{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px}
#cp-alpha{width:100%;height:6px;border-radius:3px;background:rgba(255,255,255,.1);outline:none;-webkit-appearance:none}
#cp-alpha::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#3f5efb;cursor:pointer}
#cp-alpha-value{min-width:40px;text-align:right;opacity:.8}
#cp-actions{display:flex;gap:8px;margin-top:10px}
#cp-radio{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
#cp-radio label{display:flex;align-items:center;gap:6px;background:#1b2238;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px 8px}
#cp-select-mode{background:#3f5efb;border:none;color:#fff;border-radius:8px;padding:8px 10px;cursor:pointer;transition:all .15s ease}
#cp-select-mode:hover{background:#4f6fff;transform:translateY(-1px)}
#cp-save{background:#22c55e;border:none;color:#0b141e;border-radius:8px;padding:8px 10px;cursor:pointer;transition:all .15s ease}
#cp-save:hover{background:#16a34a;transform:translateY(-1px)}
#cp-publish{background:#10b981;border:none;color:#0b141e;border-radius:8px;padding:8px 10px;cursor:pointer;transition:all .15s ease}
#cp-publish:hover{background:#059669;transform:translateY(-1px)}
#cp-toggle{background:#1b2238;border:none;color:#e8ebf1;border-radius:8px;padding:8px 10px;cursor:pointer;transition:all .15s ease}
#cp-toggle:hover{background:#2b3248;transform:translateY(-1px)}
#cp-color{width:100%;height:40px;border:none;border-radius:8px}
.cp-highlight{outline:2px dashed #3f5efb;outline-offset:2px}
.cp-selected{outline:2px solid #10b981;outline-offset:2px}
#cp-undo-redo{display:flex;gap:6px;margin-top:8px}
#cp-undo,#cp-redo,#cp-cancel{background:#1b2238;border:none;color:#e8ebf1;border-radius:8px;padding:8px 10px;cursor:pointer;flex:1;transition:all .15s ease}
#cp-undo:hover,#cp-redo:hover,#cp-cancel:hover{background:#2b3248;transform:translateY(-1px)}
#cp-undo:disabled,#cp-redo:disabled,#cp-cancel:disabled{opacity:.4;cursor:not-allowed}
#cp-effects{margin-top:10px;padding:8px;background:#11172a;border:1px solid rgba(255,255,255,.08);border-radius:8px}
.cp-group-title{font-weight:600;margin-bottom:6px;opacity:.9}
.cp-row{display:flex;align-items:center;gap:8px;justify-content:space-between;margin:6px 0}
#cp-glass-controls input[type="range"]{flex:1}
#cp-glass-controls span{min-width:48px;text-align:right;opacity:.8}
#cp-glass-controls label{gap:6px}
#cp-inner-controls input[type="range"]{flex:1}
#cp-inner-controls span{min-width:48px;text-align:right;opacity:.8}
.cp-section{margin-top:8px}
.cp-collapsible{width:100%;background:#1b2238;border:1px solid rgba(255,255,255,.08);color:#e8ebf1;border-radius:8px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .15s ease}
.cp-collapsible:hover{background:#2b3248;transform:translateY(-1px)}
.cp-collapsible::after{content:"▾";opacity:.8;transition:transform .15s ease}
.cp-collapsible[aria-expanded="true"]::after{transform:rotate(180deg)}
.cp-collapse-content{display:none;margin-top:8px}
.cp-collapse-content.open{display:block}
.cp-gradient-box{width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);cursor:grab}
#cp-gradient-preview{height:40px;border-radius:8px;border:1px solid rgba(255,255,255,.12);margin-top:8px}
.drop-hover{outline:2px dashed #3f5efb;outline-offset:2px}
#cp-layer-list{max-height:120px;overflow:auto;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:#11172a}
.cp-layer-item{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;display:flex;justify-content:space-between;gap:8px}
.cp-layer-item:hover{background:#1b2238}
.cp-layer-item.selected{background:#2b3248}
.cp-layer-overlay{position:fixed;pointer-events:none;border:1px dashed #3f5efb;border-radius:4px;box-shadow:0 0 0 1px rgba(63,94,251,.35)}
.cp-layer-overlay.selected{border:2px solid #10b981;box-shadow:0 0 0 2px rgba(16,185,129,.35)}
.cp-layer-badge{position:fixed;pointer-events:none;background:#3f5efb;color:#fff;border-radius:10px;padding:2px 6px;font-size:10px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.cp-layer-overlay{position:fixed;pointer-events:none;border:1px dashed #3f5efb;border-radius:4px;box-shadow:0 0 0 1px rgba(63,94,251,.35)}
.cp-layer-overlay.selected{border:2px solid #10b981;box-shadow:0 0 0 2px rgba(16,185,129,.35)}
.cp-layer-badge{position:fixed;pointer-events:none;background:#3f5efb;color:#fff;border-radius:10px;padding:2px 6px;font-size:10px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.25)}
#cp-layer-overlays{position:fixed;inset:0;pointer-events:none;z-index:2147483647}