:root{--cbt-bg:#0f1115;--cbt-panel:#161a20;--cbt-border:#2a2e36;--cbt-text:#e8eaef;--cbt-muted:#7c8292;--cbt-accent:#22c3e8;--cbt-accent-hover:#4dd4f0;--cbt-radius:12px;--cbt-radius-sm:8px;--cbt-focus:0 0 0 3px rgba(34,195,232,0.35);--cbt-shadow:0 4px 24px rgba(0,0,0,0.25);--cbt-good:#34d399;--cbt-warn:#fbbf24;--cbt-high:#f87171;}
.bmc-color .container{--text-muted:var(--cbt-muted);}
.cbt-tool{background:var(--cbt-panel);border:1px solid var(--cbt-border);border-radius:var(--cbt-radius);box-shadow:var(--cbt-shadow);padding:1rem;display:flex;flex-direction:column;gap:1.25rem;margin-bottom:2rem;}
.cbt-label{display:block;font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--cbt-muted);margin-bottom:0.5rem;}
.cbt-palette-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.5rem;}
.cbt-palette-actions{display:flex;gap:0.5rem;}
.cbt-swatches{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;}
.cbt-swatch-wrap{display:flex;flex-direction:column;gap:0.375rem;min-width:0;}
.cbt-swatch{width:100%;aspect-ratio:1;min-height:64px;border-radius:var(--cbt-radius-sm);border:2px solid var(--cbt-border);cursor:pointer;padding:0;transition:transform 0.15s,box-shadow 0.15s;background:var(--cbt-bg);}
.cbt-swatch:hover{transform:scale(1.02);box-shadow:0 4px 16px rgba(0,0,0,0.2);}
.cbt-swatch:focus{outline:none;box-shadow:var(--cbt-focus);}
.cbt-picker{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.cbt-hex{width:100%;padding:0.5rem 0.5rem;font-size:0.75rem;font-weight:600;background:var(--cbt-bg);border:1px solid var(--cbt-border);border-radius:6px;color:var(--cbt-text);letter-spacing:0.04em;}
.cbt-hex::placeholder{color:var(--cbt-muted);}
.cbt-hex:focus{outline:none;border-color:var(--cbt-accent);}
.cbt-vision-pills{display:flex;flex-wrap:wrap;gap:0.5rem;}
.cbt-pill{padding:0.5rem 0.875rem;font-size:0.8125rem;font-weight:600;border:1px solid var(--cbt-border);border-radius:999px;background:var(--cbt-bg);color:var(--cbt-text);cursor:pointer;transition:border-color 0.2s,background 0.2s,color 0.2s;}
.cbt-pill:hover{border-color:var(--cbt-accent);background:rgba(34,195,232,0.1);}
.cbt-pill-active{border-color:var(--cbt-accent);background:rgba(34,195,232,0.2);color:var(--cbt-accent-hover);}
.cbt-compare{display:grid;grid-template-columns:1fr;gap:0.75rem;}
.cbt-compare-item{display:flex;flex-direction:column;gap:0.375rem;padding:0.75rem;background:var(--cbt-bg);border:1px solid var(--cbt-border);border-radius:var(--cbt-radius-sm);}
.cbt-compare-row{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;align-items:stretch;}
.cbt-compare-half{min-height:48px;border-radius:6px;border:1px solid var(--cbt-border);position:relative;}
.cbt-compare-tag{position:absolute;top:4px;left:6px;font-size:0.625rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--cbt-muted);background:rgba(0,0,0,0.6);padding:2px 6px;border-radius:4px;}
.cbt-compare-hex{font-size:0.6875rem;font-weight:600;color:var(--cbt-muted);word-break:break-all;}
.cbt-feedback{padding:0.875rem;border-radius:var(--cbt-radius-sm);border:1px solid var(--cbt-border);background:var(--cbt-bg);}
.cbt-feedback-ok{border-color:var(--cbt-good);background:rgba(52,211,153,0.08);}
.cbt-feedback-ok .cbt-feedback-title{color:var(--cbt-good);}
.cbt-feedback-warn{border-color:var(--cbt-warn);background:rgba(251,191,36,0.08);}
.cbt-feedback-warn .cbt-feedback-title{color:var(--cbt-warn);}
.cbt-feedback-title{font-size:0.875rem;font-weight:700;margin:0 0 0.375rem;}
.cbt-feedback-list{margin:0;padding-left:1rem;font-size:0.8125rem;color:var(--cbt-muted);line-height:1.5;}
.cbt-types-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem;}
.cbt-type-item{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:0.125rem 0.5rem;padding:0.625rem 0.75rem;background:var(--cbt-bg);border:1px solid var(--cbt-border);border-radius:var(--cbt-radius-sm);cursor:pointer;transition:border-color 0.2s,background 0.2s;}
.cbt-type-item:hover{border-color:var(--cbt-accent);background:rgba(34,195,232,0.06);}
.cbt-type-item:focus-within{outline:none;box-shadow:var(--cbt-focus);}
.cbt-sev{grid-row:1/-1;align-self:center;width:10px;height:10px;border-radius:50%;}
.cbt-sev-low{background:var(--cbt-good);}
.cbt-sev-mid{background:var(--cbt-warn);}
.cbt-sev-high{background:var(--cbt-high);}
.cbt-type-name{font-size:0.8125rem;font-weight:600;color:var(--cbt-text);}
.cbt-type-desc{font-size:0.75rem;color:var(--cbt-muted);grid-column:2;}
.cbt-tips-grid{display:grid;grid-template-columns:1fr;gap:1rem;}
.cbt-tips-do,.cbt-tips-dont{margin:0;padding-left:1.25rem;font-size:0.8125rem;color:var(--cbt-muted);line-height:1.5;}
.cbt-tips-do li::marker{content:"✓ ";color:var(--cbt-good);}
.cbt-tips-dont li::marker{content:"✕ ";color:var(--cbt-high);}
.cbt-actions{display:flex;flex-wrap:wrap;gap:0.5rem;}
.cbt-btn{padding:0.625rem 1rem;font-size:0.875rem;font-weight:600;border-radius:var(--cbt-radius-sm);border:1px solid var(--cbt-border);background:var(--cbt-bg);color:var(--cbt-text);cursor:pointer;transition:background 0.2s,border-color 0.2s,transform 0.1s;}
.cbt-btn:hover{border-color:var(--cbt-accent);background:rgba(34,195,232,0.1);}
.cbt-btn:active{transform:scale(0.98);}
.cbt-btn-primary{border-color:var(--cbt-accent);background:var(--cbt-accent);color:#0f1115;}
.cbt-btn-primary:hover{background:var(--cbt-accent-hover);border-color:var(--cbt-accent-hover);color:#0f1115;}
.cbt-btn-outline{border-color:var(--cbt-border);}
.cbt-btn-ghost{border-color:transparent;background:transparent;}
.cbt-btn-ghost:hover{background:rgba(34,195,232,0.12);}
.cbt-remove{min-width:auto;padding:0.25rem 0.5rem;font-size:1rem;line-height:1;}
.cbt-toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(80px);padding:0.75rem 1.25rem;border-radius:var(--cbt-radius-sm);background:var(--cbt-panel);border:1px solid var(--cbt-border);color:var(--cbt-text);font-size:0.875rem;font-weight:600;box-shadow:var(--cbt-shadow);transition:transform 0.25s ease;z-index:1000;}
.cbt-toast[data-show="true"]{transform:translateX(-50%) translateY(0);}
@media (min-width:480px){.cbt-swatches{grid-template-columns:repeat(4,1fr);}.cbt-compare{grid-template-columns:repeat(2,1fr);}}
@media (min-width:640px){.cbt-tool{padding:1.25rem;gap:1.5rem;}.cbt-swatch{min-height:80px;}.cbt-tips-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:768px){.cbt-compare{grid-template-columns:repeat(2,1fr);}.cbt-swatch{min-height:88px;}}
@media (prefers-color-scheme:light){:root{--cbt-bg:#f8f9fc;--cbt-panel:#fff;--cbt-border:#e4e6ec;--cbt-text:#1a1d24;--cbt-muted:#5c6174;--cbt-accent:#0891b2;--cbt-accent-hover:#0e7490;--cbt-focus:0 0 0 3px rgba(8,145,178,0.25);--cbt-shadow:0 4px 20px rgba(0,0,0,0.06);--cbt-good:#059669;--cbt-warn:#d97706;--cbt-high:#dc2626;}}