.tool-shell .sb__previewwrap{margin-top:1.5rem}.tool-shell .sb__stage{display:flex;align-items:center;justify-content:center;padding:1.25rem;min-height:16rem;border:1px solid var(--color-border);border-radius:var(--radius-input);background-color:var(--color-surface);background-image:linear-gradient(45deg,#eceef1 25%,transparent 25%),linear-gradient(-45deg,#eceef1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eceef1 75%),linear-gradient(-45deg,transparent 75%,#eceef1 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}.tool-shell .sb__canvas{max-width:100%;max-height:62vh;height:auto;display:block}.tool-shell .sb__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}.tool-shell .sb__actions .btn{min-height:44px}.tool-shell .sb__note{margin:.85rem 0 0;font-size:.86rem;font-weight:600;color:#047857}.tool-shell .sb__note--err{color:#b91c1c}.tool-shell .sb__gradients{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-top:.75rem}.tool-shell .sb__grad{height:44px;padding:0;border-radius:.55rem;cursor:pointer;border:1px solid rgba(0,0,0,.12);box-shadow:inset 0 0 0 1px #ffffff2e;transition:transform .1s,box-shadow .1s}.tool-shell .sb__grad:hover{transform:translateY(-1px)}.tool-shell .sb__grad:focus-visible{outline:2px solid var(--color-primary-ring);outline-offset:2px}.tool-shell .sb__grad.is-active{box-shadow:0 0 0 2px var(--color-surface),0 0 0 4px var(--color-primary)}.tool-shell .sb__solidbox{margin-top:.75rem}.tool-shell .sb__colorrow{display:flex;align-items:center;gap:.6rem}.tool-shell .sb__color{width:3rem;height:44px;flex:0 0 auto;padding:.2rem;border:1px solid var(--color-border-input);border-radius:var(--radius-input);background:var(--color-surface);cursor:pointer}.tool-shell .sb__color::-webkit-color-swatch-wrapper{padding:0}.tool-shell .sb__color::-webkit-color-swatch{border:none;border-radius:.3rem}.tool-shell .sb__color::-moz-color-swatch{border:none;border-radius:.3rem}.tool-shell .sb__hex{font-size:.82rem;letter-spacing:.02em;color:var(--color-text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase}.tool-shell .sb .swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-top:.65rem}.tool-shell .sb .swatch{height:44px;width:100%;padding:0;border-radius:.5rem;border:1px solid rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px #ffffff40;cursor:pointer;transition:transform .1s}.tool-shell .sb .swatch:hover{transform:scale(1.06)}.tool-shell .sb .swatch:focus-visible{outline:2px solid var(--color-primary-ring);outline-offset:2px}.tool-shell .seg{display:inline-flex;background:var(--color-surface-muted);border:1px solid var(--color-border-input);border-radius:var(--radius-input);padding:.2rem;gap:.2rem}.tool-shell .seg--full{display:flex;width:100%}.tool-shell .seg__btn{flex:1 1 0;min-height:40px;padding:.45rem .6rem;border:0;background:transparent;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--color-text-secondary);border-radius:.35rem;transition:.15s}.tool-shell .seg__btn:hover{color:var(--color-text-heading)}.tool-shell .seg__btn.is-active{background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-card)}.tool-shell .seg__btn:focus-visible{outline:2px solid var(--color-primary-ring);outline-offset:2px}.tool-shell .sb__check{display:flex;align-items:center;gap:.55rem;font-size:.9rem;font-weight:500;color:var(--color-text-body);cursor:pointer}.tool-shell .sb__check input{width:1.1rem;height:1.1rem;accent-color:var(--color-primary);cursor:pointer}.tool-shell .sb__sub{margin-top:.9rem}.tool-shell .sb__sub .field{margin-bottom:.45rem}.tool-shell .sb .field-group--top{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--color-border)}.tool-shell .sb__summary{margin:1rem 0 0;font-size:.85rem;color:var(--color-text-muted);text-align:center}.tool-shell .sb__about{margin-top:1.75rem}.tool-shell .sb__about h2{font-size:1.25rem;font-weight:700;color:var(--color-text-heading);margin:0 0 .6rem}.tool-shell .sb__about p{margin:0 0 .8rem;font-size:.95rem;color:var(--color-text-secondary)}.tool-shell .sb__about em{color:var(--color-text-heading);font-style:italic}.tool-shell .sb__tips{margin:0;padding-left:1.1rem}.tool-shell .sb__tips li{font-size:.92rem;color:var(--color-text-secondary);margin:.3rem 0}@media (max-width: 420px){.tool-shell .sb__gradients,.tool-shell .sb .swatches{grid-template-columns:repeat(5,1fr);gap:.4rem}}