: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}.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}.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}.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 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;align-items:center;gap:7px;padding:8px 11px;font-size:12px;font-weight:650;display:inline-flex}.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 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-wrap{flex:1;min-height:410px;margin:16px 24px 0;position:relative}.code-copy{z-index:1;color:#d9e2f1;background:#ffffff1f;border:1px solid #ffffff2e;border-radius:8px;align-items:center;gap:5px;padding:7px 9px;font-size:11px;display:flex;position:absolute;top:10px;right:10px}.code-copy:hover{background:#fff3}.code{color:#d9e2f1;white-space:pre-wrap;background:#111827;border-radius:14px;height:100%;margin: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}.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-wrap{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 .chip{color:#d6ddec;background:#202938}.dark-mode .code{background:#0b1019}.dark-mode .code-copy{color:#d9e2f1;background:#ffffff1a}.dark-mode .tool.active,.dark-mode .tab.active{background:var(--soft);color:#c9c3ff}.system-icon{opacity:.82;flex:none}.tool.active .system-icon{opacity:1}.chip .system-icon{color:var(--accent)}.hero{align-items:flex-start;margin-bottom:22px}.hero h1{letter-spacing:-.045em;max-width:620px;font-size:clamp(28px,3.4vw,40px)}.hero p{max-width:610px;font-size:14px}.grid{gap:18px}.card{border-radius:14px;box-shadow:0 10px 30px #221c540f}.form-card{padding:22px}.section-title{border-bottom:1px solid var(--line);margin-bottom:20px;padding-bottom:14px}.section-title h2{font-size:16px}.field{margin-bottom:14px}.integration-group{padding:13px 0 0}.output-card{min-height:640px;position:sticky;top:20px}.output-head{padding:20px 22px 0}.tabs{padding:14px 22px 0}.code-wrap{min-height:360px;margin:14px 22px 0}.output-actions{padding:14px 22px 18px}.generate{margin-top:12px}@media (width<=860px){.output-card{position:relative;top:auto}.hero h1{max-width:580px}.code-wrap{min-height:330px}}.collapse-toggle{z-index:3;border:1px solid var(--line);background:var(--card);width:34px;height:34px;color:var(--muted);border-radius:50%;place-items:center;display:grid;position:absolute;top:50%;left:calc(50% - 17px);box-shadow:0 5px 14px #1720331f}.collapse-toggle:hover{color:var(--accent);border-color:var(--accent)}.grid{transition:grid-template-columns .32s cubic-bezier(.22,1,.36,1)}.grid.output-collapsed{grid-template-columns:minmax(0,1fr) minmax(0,0fr)}.grid .output-card{transform-origin:100%;transition:opacity .24s,transform .32s cubic-bezier(.22,1,.36,1),min-height .32s}.grid.output-collapsed .output-card{opacity:0;pointer-events:none;height:0;min-height:0;overflow:hidden;transform:translate(18px)}.collapse-toggle{transition:transform .25s,box-shadow .25s}.collapse-toggle:hover{transform:scale(1.06)}.collapse-toggle.collapsed{left:auto;right:-17px}@media (width<=860px){.collapse-toggle{top:-17px;left:auto;right:12px}.collapse-toggle.collapsed{right:12px}}.input::placeholder,textarea::placeholder{color:#9aa3b3;opacity:.9;font-size:12px}.dark-mode .input::placeholder,.dark-mode textarea::placeholder{color:#8c98ad}