body{font-family:"Be Vietnam Pro","Segoe UI",Tahoma,Geneva,Verdana,sans-serif;font-size:14px;color:#0f172a;margin:0;padding:24px;min-height:100vh;background:linear-gradient(135deg, #ecfeff 0%, #e0e7ff 100%)}.container.gradient-css-generator{max-width:1240px;margin:0 auto;background:#fff;border-radius:28px;box-shadow:0 40px 80px rgba(15,23,42,.12);overflow:hidden;display:flex;flex-direction:column;gap:24px}.header{background:linear-gradient(135deg, #3b82f6, #6366f1);color:#fff;padding:40px 48px 38px}.header h1{margin:0 0 12px;font-size:34px;font-weight:700}.header .subtitle{margin:0;font-size:15px;opacity:.92}.intro{padding:0 48px;color:#334155}.intro h2{margin:0 0 12px;font-size:18px;font-weight:600}.intro ol{margin:0;padding-left:20px;line-height:1.6}.gradient-layout{display:grid;grid-template-columns:450px minmax(0, 1fr);gap:32px;padding:0 48px 48px}.control-panel{display:flex;flex-direction:column;gap:24px}.panel-group{background:#f1f5f9;border:1px solid #dbeafe;border-radius:20px;padding:22px 22px 24px;display:flex;flex-direction:column;gap:18px}.panel-group h3{margin:0;font-size:16px;font-weight:600;color:#1d4ed8}.form-row{display:flex;flex-direction:column;gap:8px}.form-row label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#475569}.form-row select,.form-row input[type=number],.form-row input[type=range]{border-radius:12px;border:1px solid #c7d2fe;padding:10px 12px;font-weight:600;background:#fff;color:#1e3a8a}.form-row select:focus,.form-row input[type=number]:focus,.form-row input[type=range]:focus{outline:none;border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.25)}.form-row input[type=range]{padding:0;background:rgba(0,0,0,0)}.checkbox{display:flex;align-items:center;gap:10px;font-size:13px;color:#1d4ed8}.checkbox input[type=checkbox]{width:18px;height:18px;accent-color:#3b82f6}.angle-input{display:grid;grid-template-columns:minmax(0, 1fr) 80px;gap:12px}.color-stops .panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.btn-add{border:none;border-radius:999px;padding:9px 16px;font-weight:600;font-size:13px;background:#3b82f6;color:#fff;cursor:pointer}.btn-add:hover{background:#2563eb}.stop-list{display:flex;flex-direction:column;gap:14px}.stop-row{background:#fff;border:1px solid #cfe1ff;border-radius:14px;padding:14px;display:grid;grid-template-columns:1fr;gap:12px;box-shadow:0 12px 28px rgba(15,23,42,.08)}.stop-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.stop-top .stop-label{font-weight:600;color:#2563eb;font-size:13px}.stop-top button{border:none;background:rgba(0,0,0,0);color:#ef4444;font-size:12px;font-weight:600;cursor:pointer}.stop-top button:hover{color:#dc2626}.stop-top button:disabled,.stop-top button.is-disabled{color:rgba(148,163,184,.9);cursor:not-allowed}.stop-controls{display:grid;grid-template-columns:130px minmax(0, 1fr);gap:16px}.stop-controls input[type=color]{width:100%;height:42px;padding:0;border:none;border-radius:12px;background:rgba(0,0,0,0);cursor:pointer}.stop-controls .position-input{display:flex;gap:10px;align-items:center}.stop-controls .position-input input[type=number]{width:80px}.stop-controls .position-input span{font-size:13px;color:#475569}.stop-controls .position-input input[type=range]{flex:1}.preview-panel{display:flex;flex-direction:column;gap:24px}.preview-card{background:#f8fafc;border:1px solid #cbd5f5;border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:16px}.preview-header{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#1d4ed8}.preview-header h3{margin:0;font-size:16px}.preview-header span{font-size:13px;color:#475569}.preview-box{width:100%;min-height:240px;border-radius:18px;border:1px solid rgba(148,163,184,.35);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.6)}.output-card{background:#eff6ff;border:1px solid #cbd5f5;border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:16px}.output-card .card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;text-transform:uppercase;color:#2563eb}.output-card pre{margin:0;padding:18px;background:#fff;border-radius:16px;border:1px solid #dbeafe;line-height:1.6;overflow-x:auto;font-size:13px;color:#1f2937}.output-card button{border:none;border-radius:10px;padding:10px 16px;background:#3b82f6;color:#fff;font-weight:600;cursor:pointer}.output-card button:hover{background:#2563eb}@media(max-width: 1100px){.gradient-layout{grid-template-columns:1fr}.control-panel{order:2}.preview-panel{order:1}}@media(max-width: 640px){body{padding:16px}.container.gradient-css-generator{border-radius:18px}.gradient-layout{padding:0 20px 24px;gap:24px}.header{padding:32px 24px}.intro{padding:0 24px}.panel-group{padding:18px}.stop-controls{grid-template-columns:1fr}.angle-input{grid-template-columns:1fr}}