.cg-preview-card{padding:10px}
.cg-preview{height:clamp(180px,42vw,280px);border-radius:10px}
.cg-types{width:100%}
.cg-types button{flex:1 1 0}
.cg-angle-row{display:flex;gap:18px;align-items:center}
.cg-angle-ctrl{flex:1;min-width:0}
.cg-num{width:120px}
.cg-dial{flex:none;position:relative;width:96px;height:96px;border-radius:50%;background:var(--surface-2);border:2px solid var(--border);cursor:grab;touch-action:none}
.cg-dial:focus-visible{outline:3px solid var(--brand-soft);border-color:var(--brand)}
.cg-dial::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--brand)}
.cg-dial-hand{position:absolute;left:50%;top:8px;bottom:50%;width:4px;margin-left:-2px;background:var(--brand);border-radius:2px;transform-origin:50% 100%}
.cg-dial-hand::before{content:"";position:absolute;top:-6px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--surface)}
#cg-angle-quick .chip{min-height:34px}
@media (max-width:480px){.cg-angle-row{gap:12px;align-items:flex-start}.cg-dial{width:84px;height:84px}#cg-angle-quick .chip{padding:6px 9px;font-size:13px}}
.cg-bar-wrap{position:relative;padding:0 15px}
.cg-bar{height:40px;border-radius:10px;cursor:copy;border:1px solid var(--border);background-color:#fff}
.cg-handles{position:absolute;left:15px;right:15px;top:0;height:40px;pointer-events:none}
.cg-h{pointer-events:auto;position:absolute;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.25);cursor:grab;touch-action:none;padding:0}
.cg-h.on{box-shadow:0 0 0 2px var(--brand),0 0 0 5px var(--brand-soft),0 2px 6px rgba(0,0,0,.25);z-index:2}
.cg-stops{display:grid;gap:8px}
.cg-stop{display:grid;grid-template-columns:46px minmax(0,1fr) 104px auto;gap:8px;align-items:center;padding:6px;border-radius:var(--radius-sm);border:1px solid transparent}
.cg-stop.on{border-color:var(--brand);background:var(--brand-soft)}
.cg-color{width:46px;height:46px;padding:2px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}
.cg-hex{font-size:15px}
.cg-p .input{padding-right:30px}
.cg-p>span{right:10px}
.cg-del{min-height:46px;min-width:46px;font-size:16px}
@media (max-width:400px){.cg-stop{grid-template-columns:46px minmax(0,1fr) 88px auto;gap:6px}}
.cg-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.cg-preset{display:flex;flex-direction:column;gap:6px;align-items:stretch;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-sm);padding:6px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer}
.cg-preset:hover{border-color:var(--brand)}
.cg-preset span{display:block;height:52px;border-radius:7px}
.cg-css{word-break:break-all}
#tool .row>.label.grow,#tool .row>span.grow:empty{flex:1 1 auto}