.twp-gradient-tool{background:#fff;border-radius:12px;padding:18px;max-width:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;margin:0 0 25px}.twp-gradient-preview-wrap{border-radius:12px;overflow:hidden;margin-bottom:20px}.gradient-preview{height:220px;border-radius:12px}.twp-gradient-panel{display:grid;gap:18px}.gradient-top-controls{display:flex;align-items:center;justify-content:space-between;gap:16px}.type-toggle{display:flex;gap:6px}.type-toggle button{padding:6px 14px;border-radius:6px;border:1px solid #d0d7de;background:#f8fafc;cursor:pointer;font-size:14px}.type-toggle .active{background:#2563eb;color:#fff;border-color:#2563eb}.angle-wrap{display:flex;align-items:center;gap:6px}.angle-wrap label{font-size:13px;color:#475569}.angle-wrap input{width:72px;padding:4px 6px}.gradient-stops-bar{height:14px;border-radius:999px;background:linear-gradient(90deg,#000,#fff)}#stopsContainer{display:flex;gap:10px}.stop-row{display:grid;grid-template-columns:36px 1fr 70px 32px;align-items:center;gap:10px;padding:8px 10px;background:#e5e7eb;border-radius:10px}.stop-color-wrap{width:36px;height:36px;border-radius:8px;overflow:hidden;border:2px solid #fff}.stop-color{width:100%;height:100%;border:none;padding:0;cursor:pointer}.stop-hex{padding:6px 8px;border-radius:6px;border:1px solid #cbd5e1;font-family:ui-monospace,monospace;font-size:13px;text-transform:uppercase}.stop-pos{padding:6px;border-radius:6px;border:1px solid #cbd5e1;width:100%}.remove-stop{border:none;background:none;font-size:18px;color:#64748b;cursor:pointer}.remove-stop:hover{color:#ef4444}.add-stop{padding:8px;border-radius:8px;border:1px dashed #94a3b8;background:#f8fafc;cursor:pointer;font-size:14px}.preset-row{display:flex;gap:10px}.preset{border-radius:8px;border:none;cursor:pointer;flex-grow:1;min-height:60px}.preset[data-preset="sunset"]{background:linear-gradient(90deg,#ff512f,#dd2476)}.preset[data-preset="ocean"]{background:linear-gradient(90deg,#2193b0,#6dd5ed)}.preset[data-preset="lime"]{background:linear-gradient(90deg,#56ab2f,#a8e063)}.preset[data-preset="fire"]{background:linear-gradient(90deg,#f12711,#f5af19)}.css-output label{font-size:13px;color:#475569;display:block;margin-bottom:4px}.css-output textarea{width:100%;height:90px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;padding:8px;border-radius:8px;border:1px solid #cbd5f5;background:#0f172a;color:#e5e7eb}.css-output button{margin-top:8px;padding:6px 12px;border-radius:6px;border:none;background:#2563eb;color:#fff;cursor:pointer;font-size:13px}#stopsContainer{display:flex;grid-template-rows:auto auto;gap:10px}.stops-inner{display:flex;flex-wrap:wrap;gap:10px;width:86%}.stop-row{display:grid;grid-template-columns:36px 90px 60px 28px;align-items:center;gap:8px;padding:8px;background:#e5e7eb;border-radius:10px}.stop-color-wrap{width:36px;height:36px;border-radius:8px;overflow:hidden;border:2px solid #fff}.stop-color{width:100%;height:100%;border:none;cursor:pointer}.stop-hex{padding:6px;border-radius:6px;border:1px solid #cbd5e1;font-family:ui-monospace,monospace;font-size:12px;text-transform:uppercase}.stop-pos{padding:6px;border-radius:6px;border:1px solid #cbd5e1;width:100%}.remove-stop{border:none;background:none;font-size:18px;color:#64748b;cursor:pointer}.remove-stop:hover{color:#ef4444}#stopsContainer .add-stop{width:14%;padding:10px;border-radius:10px;border:1px dashed #94a3b8;background:#f8fafc;cursor:pointer;font-size:14px;text-align:center;background:#000;color:#fff}.preset-row{display:flex;flex-wrap:wrap;gap:15px}.preset{width:70px;height:70px;border-radius:8px;border:none;cursor:pointer;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .08)}.preset[data-preset="sunset"]{background:linear-gradient(90deg,#ff512f,#dd2476)}.preset[data-preset="ocean"]{background:linear-gradient(90deg,#2193b0,#6dd5ed)}.preset[data-preset="lime"]{background:linear-gradient(90deg,#56ab2f,#a8e063)}.preset[data-preset="fire"]{background:linear-gradient(90deg,#f12711,#f5af19)}.preset[data-preset="violet"]{background:linear-gradient(90deg,#654ea3,#eaafc8)}.preset[data-preset="sky"]{background:linear-gradient(90deg,#2980b9,#6dd5fa)}.preset[data-preset="peach"]{background:linear-gradient(90deg,#ed4264,#ffedbc)}.preset[data-preset="aqua"]{background:linear-gradient(90deg,#13547a,#80d0c7)}.preset[data-preset="mint"]{background:linear-gradient(90deg,#76b852,#8dc26f)}.preset[data-preset="candy"]{background:linear-gradient(90deg,#d66efd,#ff6f91)}.preset[data-preset="dusk"]{background:linear-gradient(90deg,#2c3e50,#4ca1af)}.preset[data-preset="gold"]{background:linear-gradient(90deg,#f7971e,#ffd200)}.preset[data-preset="ice"]{background:linear-gradient(90deg,#83a4d4,#b6fbff)}.preset[data-preset="forest"]{background:linear-gradient(90deg,#134e5e,#71b280)}.preset[data-preset="rose"]{background:linear-gradient(90deg,#ffafbd,#ffc3a0)}.gradient-top-controls{display:flex;align-items:center;gap:14px}.type-toggle{display:inline-flex;background:#e5e7eb;border-radius:8px;padding:2px}.type-toggle .type-btn{border:none;background:#fff0;padding:6px 14px;border-radius:6px;font-size:14px;cursor:pointer;color:#334155}.type-toggle .type-btn.active{background:#fff;box-shadow:0 1px 2px rgb(0 0 0 / .12);font-weight:500}.angle-control{display:flex;align-items:center;gap:6px;background:#fff;border-radius:8px;padding:4px 8px}.angle-icon{width:42px;height:42px;border-radius:50%;border:2px solid #0f172a;position:relative}.angle-icon::after{content:'';position:absolute;width:11px;height:11px;transform:rotate(45deg);right:-2px;top:4px;background:#000;border-radius:100%}.angle-control input{outline:none;padding:10px 3px 10px 20px;border:1px solid #000;min-width:72px;text-align:center;font-weight:700;font-size:1rem;border-radius:5px}.angle-icon{cursor:grab;transition:transform 0.15s ease}.angle-icon:active{cursor:grabbing}