.csg-wrap{display:flex;flex-direction:column;gap:1rem}.csg-control-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,52%);gap:1rem;align-items:stretch;padding:1rem;border-radius:8px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border-soft),var(--shadow-card)}.csg-input-row{display:flex;flex-direction:column;justify-content:center;gap:.65rem;min-width:0}.csg-label{color:var(--color-text-secondary);font-size:.78rem;font-weight:800;line-height:1.2;text-transform:uppercase;letter-spacing:0}.csg-color-input-wrap{display:flex;align-items:flex-start;gap:.75rem;min-width:0}.csg-picker{width:58px;height:58px;flex:0 0 58px;padding:3px;border:0;border-radius:8px;cursor:pointer;background:var(--color-bg-secondary);box-shadow:inset 0 0 0 1px var(--color-border-soft)}.csg-picker::-webkit-color-swatch-wrapper{padding:0}.csg-picker::-webkit-color-swatch{border:0;border-radius:6px}.csg-picker::-moz-color-swatch{border:0;border-radius:6px}.csg-hex-input-wrap{display:flex;flex-direction:column;gap:.35rem;min-width:0}.csg-hex-input{width:min(100%,12ch);min-height:46px;padding:.72rem .82rem;border:0;border-radius:8px;background:var(--color-bg-secondary);color:var(--color-text);font-family:var(--font-mono);font-size:.98rem;font-weight:700;text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--color-border-soft);transition:background-color var(--transition-fast),box-shadow var(--transition-fast)}.csg-hex-input:focus{outline:none;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-primary),0 0 0 4px var(--color-primary-light)}.csg-hex-input.csg-error{box-shadow:inset 0 0 0 1px var(--color-danger),0 0 0 4px color-mix(in oklch,var(--color-danger) 14%,transparent)}.csg-hex-error{min-height:1.1em;color:var(--color-danger);font-size:.78rem;line-height:1.25}.csg-hint{color:var(--color-text-muted);font-size:.82rem;line-height:1.35}.csg-ramp-preview{display:flex;align-items:flex-end;justify-content:flex-end;min-height:118px;padding:.9rem;border-radius:8px;font-family:var(--font-mono);font-size:.88rem;font-weight:800;line-height:1;box-shadow:inset 0 0 0 1px #ffffff40,inset 0 -46px 78px #00000024}.csg-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem}.csg-card{display:flex;min-height:178px;flex-direction:column;overflow:hidden;padding:0;border:0;border-radius:8px;background:var(--color-surface);color:var(--color-text);cursor:pointer;font:inherit;text-align:left;box-shadow:inset 0 0 0 1px var(--color-border-soft),var(--shadow-card);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}@media(hover:hover){.csg-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--color-primary) 26%,transparent),var(--shadow-card-hover)}}.csg-card:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}.csg-card:active{transform:scale(.985)}.csg-shade-swatch{position:relative;display:flex;align-items:flex-end;justify-content:flex-start;min-height:88px;padding:.72rem}.csg-shade-step{display:inline-flex;min-width:34px;justify-content:center;padding:.32rem .42rem;border-radius:var(--radius-pill);font-size:.72rem;font-weight:850;line-height:1;box-shadow:inset 0 0 0 1px #ffffff29,0 8px 18px #0000001a}.csg-shade-info{display:flex;flex:1;flex-direction:column;gap:.22rem;padding:.68rem .72rem .76rem;background:var(--color-surface);box-shadow:inset 0 1px 0 var(--color-border-soft)}.csg-shade-hex{color:var(--color-text);font-family:var(--font-mono);font-size:.86rem;font-weight:800;line-height:1.2}.csg-shade-meta{overflow:hidden;color:var(--color-text-secondary);font-family:var(--font-mono);font-size:.68rem;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.csg-footer{display:flex;justify-content:flex-end;padding-top:.1rem}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .csg-ramp-preview{box-shadow:inset 0 0 0 1px #ffffff29,inset 0 -46px 78px #00000042}}[data-theme=dark] .csg-ramp-preview{box-shadow:inset 0 0 0 1px #ffffff29,inset 0 -46px 78px #00000042}@media(max-width:760px){.csg-control-panel{grid-template-columns:1fr}.csg-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr))}.csg-ramp-preview{min-height:94px}}@media(max-width:480px){.csg-control-panel{padding:.82rem}.csg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.csg-card{min-height:148px}.csg-shade-swatch{min-height:72px;padding:.58rem}.csg-shade-info{padding:.58rem}.csg-shade-meta,.csg-hint{display:none}}