.gradient-tool{display:grid;gap:16px}.gradient-preview{min-height:280px;border:1px solid rgba(0,109,119,.16);border-radius:8px;background:var(--gradient-preview, linear-gradient(90deg, #006d77, #83c5be));box-shadow:inset 0 0 0 1px #ffffff6b}.gradient-controls{display:grid;gap:14px}.gradient-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.gradient-field{display:grid;gap:8px;color:var(--ink);font-weight:800}.gradient-input,.gradient-select{width:100%;min-height:44px;border:1px solid rgba(0,109,119,.18);border-radius:8px;background:#fbfefe;color:var(--ink);padding:10px 12px;font:.95rem/1.45 ui-monospace,SFMono-Regular,Consolas,Liberation Mono,monospace}.gradient-color{min-height:44px;padding:4px;cursor:pointer}.gradient-input:focus,.gradient-select:focus,.gradient-color:focus,.gradient-stop-remove:focus{outline:none;box-shadow:var(--tool-focus)}.gradient-range-row{display:grid;grid-template-columns:minmax(0,1fr) 86px;gap:10px;align-items:center}.gradient-actions{display:flex;flex-wrap:wrap;gap:10px}.gradient-actions .button{min-height:44px}.gradient-stops{display:grid;gap:10px}.gradient-stops h3,.gradient-output h3{margin:0;color:var(--ink);font-size:1rem}.gradient-stop-list{display:grid;gap:10px}.gradient-stop{display:grid;grid-template-columns:54px minmax(0,1fr) minmax(150px,.7fr) auto;gap:10px;align-items:end;border:1px solid rgba(0,109,119,.14);border-radius:8px;background:#fbfefe;padding:12px}.gradient-stop-remove{min-height:44px;border:1px solid rgba(0,109,119,.16);border-radius:8px;background:var(--mist);color:var(--deep-teal);cursor:pointer;font-weight:900;padding:8px 12px}.gradient-meta{margin:0;border-radius:8px;padding:12px;background:#edf6f9db;color:var(--muted);font-weight:800}.gradient-meta.is-valid{background:#83c5be38;color:var(--deep-teal)}.gradient-meta.is-invalid{background:var(--peach);color:#613224}.gradient-output{display:grid;gap:10px}.gradient-code{width:100%;min-height:112px;resize:vertical;border:1px solid rgba(0,109,119,.14);border-radius:8px;background:var(--mist);color:var(--ink);padding:14px;font:.92rem/1.55 ui-monospace,SFMono-Regular,Consolas,Liberation Mono,monospace;white-space:pre-wrap}@media (max-width: 900px){.gradient-grid,.gradient-stop{grid-template-columns:1fr}}@media (max-width: 720px){.gradient-preview{min-height:220px}.gradient-actions{display:grid;grid-template-columns:1fr}.gradient-range-row{grid-template-columns:1fr}}