.cs-panel{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);gap:1.5rem;margin-bottom:1.25rem;padding:1.25rem;display:flex}.cs-panel-left{flex:none;min-width:240px}.cs-panel-right{flex-direction:column;flex:1;gap:1rem;display:flex}.cs-panel-right-top,.cs-panel-right-bottom{gap:1.5rem;display:flex}.cs-setting-block{flex:1}.cs-setting-label{letter-spacing:.05em;color:var(--text-3);text-transform:uppercase;margin-bottom:.375rem;font-size:10px;font-weight:600;display:block}.cs-color-row{align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.cs-picker{border:1px solid var(--border);cursor:pointer;background:var(--bg);border-radius:50%;flex-shrink:0;width:48px;height:48px;padding:2px}.cs-hex-wrap{align-items:center;gap:.5rem;display:flex}.cs-hex-input{font-family:var(--font-mono);color:var(--text);background:0 0;border:none;outline:none;width:110px;padding:0;font-size:18px;font-weight:700}.cs-format-label{color:var(--text-3);font-size:12px}.cs-rgb-sliders{flex-direction:column;gap:.375rem;display:flex}.cs-channel{align-items:center;gap:.5rem;display:flex}.cs-channel-label{color:var(--text-3);text-align:center;flex-shrink:0;width:12px;font-size:11px;font-weight:600}.cs-channel-track{cursor:pointer;border:1px solid #00000014;border-radius:6px;flex:1;height:12px;position:relative}.cs-channel-thumb{pointer-events:none;background:#fff;border:2px solid #0000004d;border-radius:50%;width:14px;height:14px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 1px 3px #0003}.cs-channel-input{width:44px;font-family:var(--font-mono);text-align:center;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:4px;flex-shrink:0;padding:2px 4px;font-size:12px}.cs-channel-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.cs-channel-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cs-channel-input{-moz-appearance:textfield}.cs-algo-select{width:100%;color:var(--text);background:var(--bg);border:1px solid var(--border);cursor:pointer;appearance:auto;border-radius:6px;padding:6px 10px;font-size:16px;font-weight:600}.cs-shift-display{color:var(--text);font-size:32px;font-weight:700;line-height:1.1;font-family:var(--font-mono);margin-bottom:.25rem}.cs-slider{width:100%;accent-color:var(--accent);margin:0}.cs-count-control{border:1px solid var(--border);background:var(--bg);border-radius:6px;align-items:center;gap:0;width:fit-content;display:flex;overflow:hidden}.cs-count-btn{width:36px;height:36px;color:var(--text-2);background:var(--bg);cursor:pointer;border:none;justify-content:center;align-items:center;font-size:20px;font-weight:600;transition:background .1s;display:flex}.cs-count-btn:hover{background:var(--bg-hover)}.cs-count-value{color:var(--text);text-align:center;border-left:1px solid var(--border);border-right:1px solid var(--border);min-width:36px;padding:0 4px;font-size:18px;font-weight:700;line-height:36px}.cs-name-input{width:100%;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font-size:14px}.cs-grid-wrap{margin-bottom:1.25rem}.cs-format-bar{align-items:center;gap:.75rem;margin-bottom:.5rem;display:flex}.cs-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.5rem;display:grid}@media (width>=769px){.cs-grid{grid-template-columns:repeat(11,1fr)}}.cs-shade-wrapper{flex-direction:column;align-items:stretch;display:flex}.cs-shade{border-radius:10px;flex-direction:column;justify-content:space-between;min-height:80px;padding:6px;display:flex}.cs-shade-label{opacity:.75;font-size:9px;font-weight:600}.cs-shade-value{font-size:8px;font-family:var(--font-mono);word-break:break-all;opacity:.65;line-height:1.2}.cs-shade-empty{background:var(--bg-soft);border:1px dashed var(--border)}.cs-shade-empty-label{color:var(--text-3);opacity:.5;text-align:center;margin:auto;font-size:9px;font-weight:600}.cs-shade-copy{width:100%;color:var(--text-3);border:1px solid var(--border);cursor:pointer;text-align:center;background:0 0;border-radius:5px;margin-top:4px;padding:3px 0;font-size:10px;font-weight:500;transition:background .1s,color .1s;display:block}.cs-shade-copy:hover{background:var(--bg-hover);color:var(--text-2)}.cs-shade-copy.copied{color:var(--accent);border-color:var(--accent)}.cs-export{margin-bottom:1.25rem}.cs-export-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.5rem;display:flex}.cs-export-code{max-height:240px;font-size:12px;overflow-y:auto}.cs-contrast{margin-bottom:1.25rem}.cs-contrast-row{gap:1rem;margin-top:.375rem;display:flex}.cs-contrast-card{border:1px solid var(--border);border-radius:var(--radius);flex:1;overflow:hidden}.cs-contrast-preview{text-align:center;padding:12px 16px;font-size:15px}.cs-contrast-info{color:var(--text-2);background:var(--bg-soft);align-items:center;gap:.5rem;padding:8px 12px;font-size:12px;display:flex}.cs-badge{border-radius:4px;padding:2px 6px;font-size:11px;font-weight:600}.cs-badge.pass{color:#276749;background:#f0fff4}.cs-badge.fail{color:#c53030;background:#fff5f5}.cs-recent{margin-top:.25rem}.cs-recent-list{gap:.375rem;min-height:32px;margin-top:.375rem;display:flex}.cs-recent-swatch{border:1px solid var(--border);cursor:pointer;border-radius:6px;width:32px;height:32px;transition:transform .15s}.cs-recent-swatch:hover{transform:scale(1.15)}@media (width<=768px){.cs-panel{flex-direction:column}.cs-panel-left{min-width:unset}.cs-panel-right-top,.cs-panel-right-bottom{flex-direction:column;gap:1rem}.cs-shade{min-height:64px;padding:4px}}