:root{--bg:#f5f7fb;--ink:#172033;--muted:#667085;--line:#e6eaf1;--card:#fff;--accent:#5b4cf0;--accent2:#887cff;--soft:#efedff;--green:#19a974;--shadow:0 18px 50px #221c5414}*{box-sizing:border-box}body{color:var(--ink);background:var(--bg);margin:0;font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0}.app{min-height:100vh}.topbar{border-bottom:1px solid var(--line);background:#fff;justify-content:space-between;align-items:center;height:72px;padding:0 5vw;display:flex}.brand{letter-spacing:-.03em;align-items:center;gap:11px;font-size:18px;font-weight:800;display:flex}.mark{background:linear-gradient(135deg,var(--accent),#b19cff);color:#fff;border-radius:10px;place-items:center;width:32px;height:32px;font-weight:900;display:grid}.badge{color:var(--muted);border:1px solid var(--line);background:#f4f5f8;border-radius:20px;padding:7px 11px;font-size:12px}.shell{max-width:1180px;margin:0 auto;padding:38px 22px 64px}.hero{justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px;display:flex}.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800}.hero h1{letter-spacing:-.055em;max-width:680px;margin:9px 0 10px;font-size:clamp(30px,4vw,48px);line-height:1.04}.hero p{color:var(--muted);max-width:650px;margin:0;font-size:16px}.hero-note{background:var(--soft);color:#5044c7;border:1px solid #ddd8ff;border-radius:16px;max-width:250px;padding:15px 16px;font-size:13px}.grid{grid-template-columns:minmax(0,1.02fr) minmax(340px,.98fr);gap:22px;display:grid}.card{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:22px}.form-card{padding:24px}.output-card{flex-direction:column;min-height:700px;padding:0;display:flex}.section-title{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.section-title h2{letter-spacing:-.02em;margin:0;font-size:17px}.step{color:var(--muted);background:#f5f6f8;border-radius:20px;padding:6px 9px;font-size:11px;font-weight:700}.field{margin-bottom:17px}.field label{justify-content:space-between;align-items:center;margin-bottom:7px;font-size:13px;font-weight:750;display:flex}.hint{color:var(--muted);font-size:12px;font-weight:500}.input,textarea,select{width:100%;color:var(--ink);background:#fff;border:1px solid #dfe3ea;border-radius:12px;outline:none;padding:11px 12px;transition:all .2s}.input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #efedff}textarea{resize:vertical;min-height:83px}.row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.tools{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.tool{color:#445066;background:#fff;border:1px solid #dfe3ea;border-radius:10px;padding:8px 11px;font-size:12px;font-weight:650}.tool.active{border-color:var(--accent);background:var(--soft);color:#5144d1}.custom-tool{gap:8px;margin-top:9px;display:flex}.custom-tool input{flex:1}.integration-group{border-top:1px solid var(--line);margin-top:5px;padding:15px 0 2px}.integration-heading{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.integration-heading strong{font-size:13px}.integration-heading span{color:var(--muted);font-size:11px}.small-btn{color:var(--accent);background:#fff;border:1px solid #dfe3ea;border-radius:10px;padding:0 12px;font-weight:800}.chips{flex-wrap:wrap;gap:7px;margin-top:8px;display:flex}.chip{border:1px solid var(--line);color:#465166;background:#f7f8fb;border-radius:8px;align-items:center;gap:6px;padding:6px 9px;font-size:12px;display:flex}.chip button{color:#9ba3b2;background:0 0;padding:0;font-size:15px}.range-wrap{align-items:center;gap:12px;display:flex}.range-wrap input{accent-color:var(--accent);flex:1}.range-val{text-align:right;width:46px;color:var(--accent);font-size:13px;font-weight:800}.toggle-row{border-top:1px solid var(--line);justify-content:space-between;align-items:center;margin-top:8px;padding:12px 0;display:flex}.switch{background:#d9dee8;border-radius:20px;width:42px;height:24px;padding:3px;transition:all .2s}.switch i{background:#fff;border-radius:50%;width:18px;height:18px;transition:all .2s;display:block}.switch.on{background:var(--accent)}.switch.on i{transform:translate(18px)}.generate{background:var(--accent);color:#fff;border-radius:12px;width:100%;margin-top:5px;padding:13px 16px;font-size:14px;font-weight:800;box-shadow:0 9px 18px #5b4cf038}.generate:hover{filter:brightness(1.05)}.output-head{padding:22px 24px 0}.output-head h2{margin:0 0 5px;font-size:17px}.output-head p{color:var(--muted);margin:0;font-size:13px}.tabs{gap:7px;padding:18px 24px 0;display:flex}.tab{color:#697386;background:#f5f6f9;border-radius:9px;padding:8px 12px;font-size:12px;font-weight:750}.tab.active{background:var(--soft);color:#5144d1}.code{color:#d9e2f1;white-space:pre-wrap;background:#111827;border-radius:14px;flex:1;min-height:410px;margin:16px 24px 0;padding:18px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto}.output-actions{gap:9px;padding:17px 24px 22px;display:flex}.action{color:#3e4a5e;background:#fff;border:1px solid #dfe3ea;border-radius:10px;flex:1;padding:11px;font-size:12px;font-weight:750}.action.primary{background:var(--accent);border-color:var(--accent);color:#fff}.status{color:var(--green);min-height:18px;padding:0 24px;font-size:12px;font-weight:700}.footer{color:#8a93a4;text-align:center;padding-top:19px;font-size:12px}@media (width<=860px){.grid{grid-template-columns:1fr}.output-card{min-height:620px}.hero{display:block}.hero-note{max-width:none;margin-top:18px}.shell{padding-top:25px}}@media (width<=520px){.row{grid-template-columns:1fr}.topbar{padding:0 18px}.shell{padding-left:14px;padding-right:14px}.form-card,.output-head,.tabs,.output-actions{padding-left:16px;padding-right:16px}.code{margin-left:16px;margin-right:16px}}.theme-btn{border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:9px;align-items:center;gap:6px;padding:7px 10px;font:11px ui-monospace,monospace;display:flex}.top-actions{align-items:center;gap:9px;display:flex}.dark-mode{--bg:#0f1520;--ink:#e9edf7;--muted:#a4aec1;--line:#293247;--card:#171e2c;--soft:#2b2852;--accent:#887cff;--shadow:0 18px 50px #0003}.dark-mode .topbar,.dark-mode .card,.dark-mode .input,.dark-mode textarea,.dark-mode select,.dark-mode .tool,.dark-mode .small-btn,.dark-mode .action,.dark-mode .theme-btn{background:var(--card);color:var(--ink)}.dark-mode .badge,.dark-mode .step,.dark-mode .tab{color:var(--muted);background:#222b3c}.dark-mode .hero-note{color:#c2baff;background:#27234c;border-color:#4b43a1}.dark-mode .chip{color:#d6ddec;background:#202938}.dark-mode .code{background:#0b1019}.dark-mode .tool.active,.dark-mode .tab.active{background:var(--soft);color:#c9c3ff}