.grad-app{display:flex;flex:1;overflow:hidden;min-height:0}.panel{width:300px;min-width:300px;background:var(--bg-raised);border-right:1px solid var(--border);display:flex;flex-direction:column}.panel-scroll{flex:1;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--border-hover) transparent}.panel-scroll::-webkit-scrollbar{width:4px}.panel-scroll::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:2px}.section{padding:12px 16px}.section-head{font-size:10px;font-weight:500;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.sep{height:1px;background:var(--border);margin:0 16px}.ctrl{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}.ctrl:last-child{margin-bottom:0}.ctrl>label{font-size:10px;font-weight:500;color:var(--text-dim)}.ctrl-row{display:flex;align-items:center;gap:8px;min-width:0}.ctrl-row input[type=range]{flex:1}.ctrl-num{width:44px;padding:3px 2px;border:1px solid var(--border);border-radius:3px;background:var(--bg);font-family:var(--font-sans);font-size:11px;color:var(--text);text-align:center}.ctrl-num:focus{outline:none;border-color:var(--text)}.ctrl-num:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.ctrl-split{display:flex;gap:8px}.ctrl-split>.ctrl{flex:1;min-width:0}.grad-app input[type=range]{-webkit-appearance:none;appearance:none;height:2px;background:var(--border-hover);outline:none;cursor:pointer;min-width:0}.grad-app input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--text);cursor:pointer;border:none}.grad-app input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--text);cursor:pointer;border:none}.grad-app select{width:100%;min-width:0;padding:5px 6px;border:1px solid var(--border);border-radius:3px;background:var(--bg);font-family:var(--font-sans);font-size:11px;color:var(--text);cursor:pointer}.grad-app select:focus{outline:none;border-color:var(--text)}.stop-bar{height:16px;border-radius:4px;margin-bottom:10px;border:1px solid var(--border);background-image:linear-gradient(45deg,var(--border) 25%,transparent 25%),linear-gradient(-45deg,var(--border) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--border) 75%),linear-gradient(-45deg,transparent 75%,var(--border) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.stop-bar>div{height:100%;border-radius:3px}.stop-row{display:flex;align-items:center;gap:6px;margin-bottom:8px}.stop-swatch{width:28px;height:28px;flex-shrink:0;padding:1px;border:1px solid var(--border);border-radius:4px;cursor:pointer;background:var(--bg)}.stop-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.stop-hex{width:100%;padding:3px 6px;border:1px solid var(--border);border-radius:3px;background:var(--bg);font-family:var(--font-mono);font-size:11px;color:var(--text)}.stop-hex:focus{outline:none;border-color:var(--text)}.stop-hex.bad{border-color:#e0533c}.stop-sliders{display:flex;gap:8px;align-items:center}.stop-sliders label{font-size:9px;color:var(--text-mute);flex-shrink:0}.stop-sliders input[type=range]{flex:1}.stop-del{flex-shrink:0;width:22px;height:22px;border:none;border-radius:3px;background:none;color:var(--text-mute);cursor:pointer;font-size:15px;line-height:1}.stop-del:hover{color:var(--text);background:var(--accent-faint)}.stop-del:disabled{opacity:.2;cursor:default}.reset-link{background:none;border:none;font-family:var(--font-sans);font-size:11px;color:var(--text-dim);cursor:pointer}.reset-link:hover{color:var(--text)}.ctrl-num.wide{width:100%}.panel-foot{padding:12px 16px;flex-shrink:0;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}.dl-btn{width:100%;padding:9px;background:var(--text);color:var(--bg);border:none;border-radius:4px;font-family:var(--font-sans);font-size:12px;font-weight:500;cursor:pointer;letter-spacing:.02em}.dl-btn:hover{opacity:.85}.dl-btn.ok{background:#2f9e6e;color:#fff}.dl-ghost{background:var(--bg);color:var(--text);border:1px solid var(--border)}.dl-ghost:hover{border-color:var(--text);opacity:1}.viewport{flex:1;display:flex;align-items:center;justify-content:center;padding:32px;overflow:auto;min-width:0}.preview{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 4px 24px #00000040}@media(pointer:coarse){.grad-app input[type=range]::-webkit-slider-thumb{width:18px;height:18px}.grad-app input[type=range]::-moz-range-thumb{width:18px;height:18px}}@media(max-width:700px){.grad-app{flex-direction:column;overflow:hidden}.viewport{order:-1;flex:1 1 0;min-height:120px;padding:14px}.panel{order:1;width:100%;min-width:100%;flex:0 1 auto;max-height:52vh;border-right:none;border-top:1px solid var(--border)}}