.gradient-page{--gradient-accent:#7447ef;--gradient-ink:#07183d}.gradient-workflow{padding:clamp(24px,3vw,48px)}.gradient-workspace-grid{grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:22px;display:grid}.gradient-settings,.gradient-result{background:#f9fbffeb;border:1px solid #d8e4f7;border-radius:26px;padding:clamp(22px,2.2vw,34px)}.gradient-type,.gradient-shape,.gradient-stops-fieldset,.gradient-examples{border:0;min-width:0;margin:20px 0 0;padding:0}.gradient-type legend,.gradient-shape legend,.gradient-stops-fieldset legend,.gradient-examples legend{color:#243a63;margin-bottom:9px;font-weight:850}.gradient-type>div,.gradient-shape>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.gradient-type label,.gradient-shape label{cursor:pointer}.gradient-type input,.gradient-shape input{opacity:0;pointer-events:none;position:absolute}.gradient-type span,.gradient-shape span{color:#476087;background:#fff;border:1px solid #ccd9ee;border-radius:13px;place-items:center;min-height:48px;font-weight:900;display:grid}.gradient-type input:checked+span,.gradient-shape input:checked+span{border-color:var(--gradient-accent);color:#6841df;background:#f1edff;box-shadow:0 0 0 2px #7447ef1a}.gradient-type input:focus-visible+span,.gradient-shape input:focus-visible+span{outline-offset:2px;outline:3px solid #7447ef40}.gradient-angle{color:#243a63;gap:8px;margin-top:18px;font-weight:850;display:grid}.gradient-angle>span:last-child{grid-template-columns:minmax(0,1fr) 84px 34px;align-items:center;gap:9px;display:grid}.gradient-angle input[type=range]{width:100%;min-height:44px;accent-color:var(--gradient-accent);cursor:pointer}.gradient-angle input[type=number]{width:100%;min-width:0;min-height:46px;color:var(--gradient-ink);font:inherit;border:1px solid #cbdaf1;border-radius:12px;padding:0 10px;font-weight:900}.gradient-angle em,.gradient-stop-position em{color:#60769b;font-style:normal;font-weight:800}.gradient-shape[hidden],.gradient-angle[hidden]{display:none}.gradient-stops-fieldset{border-top:1px solid #e0e8f5;padding-top:18px}.gradient-stop-row{background:#fff;border:1px solid #dae5f6;border-radius:16px;grid-template-columns:90px minmax(160px,1fr) 130px 44px;align-items:end;gap:10px;margin-bottom:10px;padding:12px;display:grid}.gradient-stop-row>strong{color:var(--gradient-ink);align-self:center;font-size:.85rem}.gradient-stop-row label{color:#64799d;gap:5px;font-size:.75rem;font-weight:800;display:grid}.gradient-stop-color{grid-template-columns:48px minmax(0,1fr);gap:7px;display:grid}.gradient-stop-color input[type=color]{cursor:pointer;background:#fff;border:1px solid #cbdaf1;border-radius:10px;width:48px;height:46px;padding:3px}.gradient-stop-color input[type=text],.gradient-stop-position input{width:100%;min-width:0;min-height:46px;color:var(--gradient-ink);font:inherit;border:1px solid #cbdaf1;border-radius:10px;padding:0 10px;font-weight:850}.gradient-stop-position{grid-template-columns:minmax(0,1fr) 18px;align-items:center;gap:5px;display:grid}.gradient-remove{color:#b83248;cursor:pointer;background:#fff7f8;border:1px solid #f0cbd2;border-radius:11px;width:44px;height:44px;font-size:1rem}.gradient-add{width:100%;min-height:46px}.gradient-examples>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;display:grid}.gradient-examples button{color:#263c65;cursor:pointer;min-height:64px;font:inherit;text-align:left;background:#fff;border:1px solid #d5e0f2;border-radius:13px;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:9px;padding:8px 10px;font-size:.84rem;font-weight:800;display:grid}.gradient-examples button span{background:var(--preset);border:1px solid #cad8ec;border-radius:10px;width:54px;height:44px}.gradient-actions{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px;margin-top:18px;display:grid}.gradient-actions button{min-height:54px}.gradient-preview-heading{color:#52698f;margin-bottom:9px;font-weight:850}.gradient-preview{background:linear-gradient(135deg,#0b1b46,#087af4);border:1px solid #d3def0;border-radius:22px;min-height:280px;box-shadow:inset 0 0 0 10px #ffffff24}.gradient-code{color:#52698f;gap:8px;margin-top:16px;font-weight:850;display:grid}.gradient-code textarea{resize:none;width:100%;color:var(--gradient-ink);background:#fff;border:1px solid #cbdaf1;border-radius:14px;padding:14px;font:700 .88rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}.gradient-copy{width:100%;margin-top:12px}.gradient-copy-status{color:#087c64;min-height:22px;margin:8px 0 0;font-weight:750}.gradient-scope-note{color:#52698f;background:#eef4ff;border-radius:13px;gap:8px;margin:8px 0 0;padding:12px;line-height:1.55;display:flex}@media (width<=1100px){.gradient-workspace-grid{grid-template-columns:1fr}}@media (width<=720px){.gradient-workflow{padding:20px 14px}.gradient-settings,.gradient-result{border-radius:20px;padding:20px 16px}.gradient-stop-row{grid-template-columns:1fr 44px}.gradient-stop-row>strong{grid-column:1/-1}.gradient-stop-row label,.gradient-stop-row label+label{grid-column:1}.gradient-remove{grid-area:2/2/4;align-self:center}.gradient-examples>div,.gradient-actions{grid-template-columns:1fr}}@media (width<=390px){.gradient-angle>span:last-child{grid-template-columns:minmax(0,1fr) 72px 30px}.gradient-type span,.gradient-shape span{font-size:.88rem}}