:root{--cbs-primary:var(--main-primary);--cbs-text:#1f2937;--cbs-text-muted:#6b7280;--cbs-bg:#fff;--cbs-bg-hover:#f9fafb;--cbs-border:#e5e7eb;--cbs-border-hover:#d1d5db;--cbs-shadow:0 1px 3px #0000001a;--cbs-shadow-lg:0 4px 12px #00000026;--cbs-radius:.5rem;--cbs-radius-lg:.75rem}._cbs-container{gap:var(--main-space-5);flex-direction:column;width:100%;max-width:1000px;margin:0 auto;display:flex}._cbs-mode-tabs{gap:var(--main-space-2);background:var(--cbs-bg);padding:var(--main-space-1);border-radius:var(--cbs-radius-lg);box-shadow:var(--cbs-shadow);border-style:solid;border-width:1px;border-color:var(--cbs-border);width:-moz-fit-content;width:fit-content;margin:0 auto;display:flex}._cbs-mode-tab{align-items:center;gap:var(--main-space-2);border-radius:var(--cbs-radius);font-size:var(--main-text-sm);color:var(--cbs-text-muted);cursor:pointer;background:0 0;border:none;padding:.625rem 1.25rem;font-weight:500;transition:background .15s,color .15s;display:inline-flex}._cbs-mode-tab:hover{color:var(--cbs-text);background:var(--cbs-bg-hover)}._cbs-mode-tab.active{color:var(--cbs-primary);background:#6366f11a}._cbs-mode-content{display:none}._cbs-mode-content.active{display:block}._cbs-btn{justify-content:center;align-items:center;gap:var(--main-space-2);border-radius:var(--cbs-radius);font-size:var(--main-text-sm);cursor:pointer;background:0 0;border:none;padding:.625rem 1.25rem;font-weight:500;transition:opacity .15s,background .15s;display:inline-flex}._cbs-btn:hover{opacity:.85}._cbs-btn-primary{background:var(--cbs-primary);color:#fff;box-shadow:0 2px 8px #6366f140}._cbs-btn-secondary{background:var(--cbs-bg);color:var(--cbs-text);border-style:solid;border-width:1px;border-color:var(--cbs-border)}._cbs-btn-secondary:hover{background:var(--cbs-bg-hover);border-color:var(--cbs-border-hover)}._cbs-btn-ghost{color:var(--cbs-text-muted)}._cbs-btn-ghost:hover{color:var(--cbs-text);background:var(--cbs-bg-hover)}@media (max-width:768px){._cbs-container{padding-left:1rem;padding-right:1rem}._cbs-mode-tab span{display:none}._cbs-mode-tab{padding:.625rem 1rem}}._cbs-upload-area{gap:var(--main-space-4);flex-direction:column;display:flex}._cbs-upload-zone{justify-content:center;align-items:center;gap:var(--main-space-4);padding:var(--main-space-10);background:var(--cbs-bg);border-style:dashed;border-width:2px;border-color:var(--cbs-border);border-radius:var(--cbs-radius-lg);cursor:pointer;flex-direction:column;min-height:250px;transition:border-color .15s,background .15s;display:flex}._cbs-upload-zone:hover,._cbs-upload-zone.dragover{border-color:var(--cbs-primary);background:#6366f105}._cbs-upload-icon{color:var(--cbs-text-muted);opacity:.6}._cbs-upload-zone:hover ._cbs-upload-icon,._cbs-upload-zone.dragover ._cbs-upload-icon{color:var(--cbs-primary);opacity:1}._cbs-upload-text{align-items:center;gap:var(--main-space-1);text-align:center;flex-direction:column;display:flex}._cbs-upload-title{font-size:var(--main-text-base);color:var(--cbs-text);font-weight:500}._cbs-upload-hint{font-size:var(--main-text-sm);color:var(--cbs-text-muted)}._cbs-samples{justify-content:center;align-items:center;gap:var(--main-space-3);flex-wrap:wrap;display:flex}._cbs-samples-label{font-size:var(--main-text-sm);color:var(--cbs-text-muted)}._cbs-samples-list{gap:var(--main-space-2);display:flex}._cbs-sample-btn{font-size:var(--main-text-sm);color:var(--cbs-text-muted);background:var(--cbs-bg);border-style:solid;border-width:1px;border-color:var(--cbs-border);border-radius:var(--cbs-radius);cursor:pointer;padding:.375rem .875rem;transition:background .15s,color .15s,border-color .15s}._cbs-sample-btn:hover{color:var(--cbs-text);background:var(--cbs-bg-hover);border-color:var(--cbs-border-hover)}@media (max-width:768px){._cbs-upload-zone{padding:var(--main-space-6);min-height:200px}._cbs-samples{flex-direction:column}}._cbs-preview-area{gap:var(--main-space-5);flex-direction:column;display:flex}._cbs-cvd-selector{align-items:center;gap:var(--main-space-3);flex-wrap:wrap;display:flex}._cbs-cvd-types{gap:var(--main-space-2);flex-wrap:wrap;flex:1;display:flex}._cbs-cvd-btn{background:var(--cbs-bg);border-style:solid;border-width:1px;border-color:var(--cbs-border);border-radius:var(--cbs-radius);cursor:pointer;flex-direction:column;align-items:flex-start;gap:2px;padding:.5rem .875rem;transition:background .15s,border-color .15s;display:flex}._cbs-cvd-btn:hover{background:var(--cbs-bg-hover);border-color:var(--cbs-border-hover)}._cbs-cvd-btn.active{border-color:var(--cbs-primary);background:#6366f10d}._cbs-cvd-name{font-size:var(--main-text-sm);color:var(--cbs-text);font-weight:500}._cbs-cvd-badge{font-size:var(--main-text-xs);color:var(--cbs-text-muted)}._cbs-view-all-btn{align-items:center;gap:var(--main-space-2);background:var(--cbs-bg);border-style:solid;border-width:1px;border-color:var(--cbs-border);border-radius:var(--cbs-radius);font-size:var(--main-text-sm);color:var(--cbs-text-muted);cursor:pointer;padding:.625rem 1rem;font-weight:500;transition:background .15s,color .15s;display:inline-flex}._cbs-view-all-btn:hover{background:var(--cbs-bg-hover);color:var(--cbs-text)}._cbs-view-all-btn.active{border-color:var(--cbs-primary);color:var(--cbs-primary);background:#6366f10d}._cbs-comparison{background:var(--cbs-bg);border-radius:var(--cbs-radius-lg);box-shadow:var(--cbs-shadow);border-style:solid;border-width:1px;border-color:var(--cbs-border);overflow:hidden}._cbs-comparison-container{min-height:400px;position:relative}._cbs-image-wrapper{background:#f8fafc;justify-content:center;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}._cbs-image-wrapper._cbs-original{z-index:2;clip-path:inset(0 50% 0 0)}._cbs-image-wrapper._cbs-simulated{z-index:1}._cbs-image-wrapper canvas{object-fit:contain;max-width:100%;max-height:400px}._cbs-image-label{bottom:var(--main-space-3);color:#fff;font-size:var(--main-text-xs);border-radius:var(--cbs-radius);white-space:nowrap;background:#0009;padding:.25rem .75rem;font-weight:500;position:absolute;left:50%;transform:translate(-50%)}._cbs-slider-divider{background:var(--cbs-primary);cursor:ew-resize;z-index:10;width:4px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}._cbs-slider-handle{background:var(--cbs-primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px #6366f166}._cbs-all-types-grid{gap:var(--main-space-4);grid-template-columns:repeat(3,1fr);min-height:300px;display:grid}._cbs-grid-item{background:var(--cbs-bg);border-radius:var(--cbs-radius-lg);box-shadow:var(--cbs-shadow);border-style:solid;border-width:1px;border-color:var(--cbs-border);position:relative;overflow:hidden}._cbs-grid-item canvas{width:100%;height:auto;display:block}._cbs-grid-label{bottom:var(--main-space-2);color:#fff;font-size:var(--main-text-xs);border-radius:var(--cbs-radius);white-space:nowrap;background:#0009;padding:.25rem .625rem;font-weight:500;position:absolute;left:50%;transform:translate(-50%)}._cbs-actions{justify-content:center;align-items:center;gap:var(--main-space-3);flex-wrap:wrap;display:flex}@media (max-width:768px){._cbs-cvd-types{justify-content:center;width:100%}._cbs-cvd-btn{flex:1;align-items:center;min-width:120px}._cbs-comparison-container{flex-direction:column;min-height:auto;display:flex}._cbs-image-wrapper{position:relative}._cbs-image-wrapper canvas{max-height:250px}._cbs-slider-divider{display:none}._cbs-image-wrapper._cbs-original{clip-path:none;z-index:1}._cbs-image-wrapper._cbs-simulated{z-index:1}._cbs-all-types-grid{grid-template-columns:repeat(2,1fr)}._cbs-actions{flex-direction:column}._cbs-actions ._cbs-btn{width:100%}}@media (max-width:480px){._cbs-cvd-btn{min-width:100%}._cbs-all-types-grid{grid-template-columns:1fr}}._cbs-color-layout{gap:var(--main-space-6);grid-template-columns:300px 1fr;align-items:start;display:grid}._cbs-color-input-card{background:var(--cbs-bg);border-radius:var(--cbs-radius-lg);padding:var(--main-space-5);box-shadow:var(--cbs-shadow);border-style:solid;border-width:1px;border-color:var(--cbs-border);gap:var(--main-space-4);flex-direction:column;display:flex}._cbs-color-label{font-size:var(--main-text-sm);color:var(--cbs-text);font-weight:500}._cbs-color-input-row{gap:var(--main-space-3);align-items:center;display:flex}._cbs-color-picker{border-radius:var(--cbs-radius);cursor:pointer;background:0 0;border:none;width:56px;height:56px;padding:0}._cbs-color-picker::-webkit-color-swatch-wrapper{padding:0}._cbs-color-picker::-webkit-color-swatch{border-radius:var(--cbs-radius);border-style:solid;border-width:1px;border-color:var(--cbs-border)}._cbs-hex-input{font-size:var(--main-text-base);font-family:var(--main-font-mono);color:var(--cbs-text);background:var(--cbs-bg);border-style:solid;border-width:1px;border-color:var(--cbs-border);border-radius:var(--cbs-radius);text-transform:uppercase;flex:1;padding:.75rem 1rem}._cbs-hex-input:focus{border-color:var(--cbs-primary);outline:none;box-shadow:0 0 0 3px #6366f11a}._cbs-original-preview{align-items:center;gap:var(--main-space-3);padding-top:var(--main-space-3);border-top-style:solid;border-top-width:1px;border-top-color:var(--cbs-border);display:flex}._cbs-original-swatch{border-radius:var(--cbs-radius);background:#3b82f6;width:48px;height:48px;box-shadow:inset 0 0 0 1px #0000001a}._cbs-original-label{font-size:var(--main-text-sm);color:var(--cbs-text-muted)}._cbs-color-results{gap:var(--main-space-4);grid-template-columns:repeat(2,1fr);min-height:200px;display:grid}._cbs-color-result{align-items:center;gap:var(--main-space-4);padding:var(--main-space-4);background:var(--cbs-bg);border-radius:var(--cbs-radius-lg);box-shadow:var(--cbs-shadow);border-style:solid;border-width:1px;border-color:var(--cbs-border);display:flex}._cbs-result-swatch{border-radius:var(--cbs-radius);background:#3b82f6;flex-shrink:0;width:64px;height:64px;box-shadow:inset 0 0 0 1px #0000001a}._cbs-result-info{flex-direction:column;gap:2px;display:flex}._cbs-result-name{font-size:var(--main-text-sm);color:var(--cbs-text);font-weight:600}._cbs-result-desc{font-size:var(--main-text-xs);color:var(--cbs-text-muted)}@media (max-width:768px){._cbs-color-layout,._cbs-color-results{grid-template-columns:1fr}}._cbs-webcam-modal{z-index:1000;padding:var(--main-space-4);background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}._cbs-webcam-content{background:var(--cbs-bg);border-radius:var(--cbs-radius-lg);box-shadow:var(--cbs-shadow-lg);width:100%;max-width:640px;overflow:hidden}._cbs-webcam-header{padding:var(--main-space-4);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--cbs-border);color:var(--cbs-text);justify-content:space-between;align-items:center;font-weight:500;display:flex}._cbs-webcam-close{border-radius:var(--cbs-radius);width:32px;height:32px;color:var(--cbs-text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex}._cbs-webcam-close:hover{background:var(--cbs-bg-hover);color:var(--cbs-text)}._cbs-webcam-content video{background:#000;width:100%;display:block}._cbs-webcam-actions{padding:var(--main-space-4);border-top-style:solid;border-top-width:1px;border-top-color:var(--cbs-border);justify-content:center;display:flex}