.gb{min-width:0;max-width:100%;color:var(--c-text);font-family:var(--font-body)}
.gb *,.gb *::before,.gb *::after{box-sizing:border-box}
.gb-head h2{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:1.05rem}
.gb-icon{width:18px;height:18px;flex:none;display:block}
.gb-lead{margin:0 0 12px;color:var(--c-muted);font-size:.9rem}
.gb-preview-wrap{min-width:0;padding:10px;border-radius:8px;border:1px solid var(--c-border);background-color:#1b1d22;background-image:linear-gradient(45deg,#2a2d34 25%,transparent 25%),linear-gradient(-45deg,#2a2d34 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2a2d34 75%),linear-gradient(-45deg,transparent 75%,#2a2d34 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px,12px 12px,12px 12px,12px 12px}
.gb-preview{min-height:88px;border-radius:6px;background-image:linear-gradient(90deg,#ff0000 0%,#0000ff 100%)}
.gb-angle,.gb-row,.gb-color,.gb-preset{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:end;min-width:0}
.gb-row{margin:8px 0;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.gb-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.gb-label{font-size:.78rem;color:var(--c-muted)}
.gb-sub{margin:12px 0 8px;font-size:.95rem}
.gb-stops,.gb-preset-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gb-stop{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:8px;align-items:end;min-width:0}
.gb-stop > *,.gb-angle > *,.gb-row > *,.gb-color > *,.gb-preset > *{min-width:0}
.gb input,.gb textarea,.gb button{max-width:100%;border:1px solid var(--c-border);border-radius:8px;background:var(--c-surface);color:var(--c-text);font:inherit}
.gb input,.gb button{min-height:44px;padding:8px 10px}
.gb textarea{width:100%;padding:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem}
.gb button{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.gb button:disabled{opacity:.45;cursor:not-allowed}
.gb-status{min-height:1.4em;margin:6px 0;font-size:.85rem}
.gb-status[data-state="success"]{color:#3dd6c6}
.gb-status[data-state="error"]{color:#ff8aa8}
.gb-error{margin:8px 0 0;color:#ff8aa8;font-size:.85rem}
.gb-canvas{display:block;width:100%;max-width:100%;height:auto;margin-top:8px;border-radius:6px;border:1px solid var(--c-border)}
.gb-presets{margin-top:12px;min-width:0}
@media (max-width:360px){
  .gb-stop,.gb-angle,.gb-preset{grid-template-columns:minmax(0,1fr)}
}