.cb-wrap{max-width:840px;margin:0 auto}.cb-panel{border:1px solid var(--color-border-light);border-radius:var(--radius-md);overflow:hidden;margin-bottom:.8em}.cb-panel-header{display:flex;align-items:center;gap:.4em;padding:.5em .9em;background:var(--color-bg);border-bottom:1px solid var(--color-border-light);font-size:.85em;font-weight:700;color:var(--color-heading)}.cb-panel-header .sub{font-weight:400;color:var(--color-sub);margin-left:.25em}.cb-panel-body{display:flex;flex-direction:column;gap:.75em;padding:.85em 1em;background:var(--color-bg-white)}.cb-preview-row{display:grid;grid-template-columns:1fr 1fr;gap:.8em;margin-bottom:0}.cb-preview-row .cb-panel{margin-bottom:0}.cb-field-row{display:flex;gap:1em;align-items:flex-end;flex-wrap:wrap}.cb-field{display:flex;flex-direction:column;gap:.25em}.cb-field-grow{flex:1;min-width:0}.cb-field-label{font-size:.82em;font-weight:700;color:var(--color-heading)}.cb-field-label small{font-weight:400;color:var(--color-sub)}input.cb-color-pick{width:64px;height:40px;padding:3px 4px;border:1px solid var(--color-border-input);border-radius:var(--radius-md);background:var(--color-bg-input);cursor:pointer;-webkit-appearance:none;appearance:none}input.cb-color-pick::-webkit-color-swatch-wrapper{padding:0}input.cb-color-pick::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}input.cb-color-pick:hover{border-color:var(--color-primary)}.cb-alpha-row{display:flex;align-items:center;gap:.6em}input.cb-range{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:3px;background:var(--color-border-light);border:1px solid var(--color-border-input);outline:0;cursor:pointer;display:block}input.cb-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-primary);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer}input.cb-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--color-primary);border:2px solid #fff;cursor:pointer}input.cb-range::-moz-range-thumb:hover,input.cb-range::-webkit-slider-thumb:hover{background:var(--color-primary-active)}input.cb-range:focus{box-shadow:0 0 0 3px var(--color-primary-glow)}.cb-alpha-val{font-size:.8em;font-weight:600;color:var(--color-primary);min-width:2.8em;text-align:center;padding:.2em .4em;background:var(--color-bg);border:1px solid var(--color-border-input);border-radius:var(--radius-sm);flex-shrink:0}select.cb-select{padding:.42em .7em;font-size:.88em;font-family:inherit;border:1px solid var(--color-border-input);border-radius:var(--radius-md);background:var(--color-bg-input);color:var(--color-text-dark);outline:0;width:100%;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}select.cb-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}.cb-code-row{display:flex;align-items:center;gap:.5em}.cb-code-label{font-size:.75em;font-weight:700;color:var(--color-sub);min-width:2.8em;text-align:right;flex-shrink:0}input.cb-input{flex:1;padding:.42em .7em;font-size:.85em;font-family:'Courier New',monospace;border:1px solid var(--color-border-input);border-radius:var(--radius-md);background:var(--color-bg-input);color:var(--color-text-dark);outline:0;min-width:0;transition:border-color var(--transition-fast);box-sizing:border-box}input.cb-input:focus{border-color:var(--color-primary)}button.cb-copy-btn{display:inline-flex;align-items:center;justify-content:center;width:2em;height:2em;padding:0;border:1px solid var(--color-border-input);border-radius:var(--radius-sm);background:var(--color-bg-white);color:var(--color-sub)!important;cursor:pointer;font-size:.9em;flex-shrink:0;transition:color var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast);transform:none;box-shadow:none}button.cb-copy-btn:hover{color:var(--color-primary)!important;border-color:var(--color-primary);background:var(--color-primary-light);transform:none;box-shadow:none}button.cb-copy-btn:active{transform:scale(.95)}.cb-preview-box{height:5em;border-radius:var(--radius-md);border:1px solid var(--color-border-light);background:var(--color-bg)}.cb-palette{display:flex;gap:.45em;flex-wrap:wrap}.pal-swatch{width:2.5em;height:2.5em;border-radius:var(--radius-md);border:1px solid rgba(0,0,0,.08);cursor:pointer;flex-shrink:0;transition:transform .1s,box-shadow .1s}.pal-swatch:hover{transform:scale(1.12);box-shadow:0 2px 6px rgba(0,0,0,.18)}.cb-contrast-meta{display:grid;grid-template-columns:1fr 1fr;gap:.75em}.cb-contrast-ratio{font-size:1.2em;font-weight:700;color:var(--color-heading)}.cb-contrast-result{font-size:.95em;font-weight:600;color:var(--color-heading)}.cb-contrast-sample{padding:.75em 1em;border-radius:var(--radius-md);font-weight:700;text-align:center;font-size:1em;border:1px solid var(--color-border-light)}.cb-actions{display:flex;gap:.6em;margin-bottom:.6em}button.cb-btn-secondary{display:inline-flex;align-items:center;gap:.4em;padding:.55em 1.2em;font-size:.9em;font-weight:600;font-family:inherit;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-white);color:var(--color-text-dark)!important;cursor:pointer;line-height:1;transition:background var(--transition-base),border-color var(--transition-fast)}button.cb-btn-secondary:hover{border-color:var(--color-primary);background:var(--color-primary);color:#fff!important}button.cb-btn-secondary:active{transform:scale(.97)}@media (max-width:640px){.cb-preview-row{grid-template-columns:1fr}.cb-contrast-meta{grid-template-columns:1fr}.cb-field-row{flex-direction:column;align-items:stretch}input.cb-color-pick{width:100%;max-width:80px}}