:root{--bg:#f6f7f9;--panel:#fff;--border:#e3e6ea;--text:#1c2430;--muted:#6b7682;--brand:#2ca01c;--brand-dark:#258016;--danger:#c0392b;--radius:8px}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.45}a{color:var(--brand-dark);text-decoration:none}a:hover{text-decoration:underline}.container{max-width:960px;margin:0 auto;padding:24px 20px 64px}.topbar{background:var(--panel);border-bottom:1px solid var(--border);align-items:center;gap:20px;padding:12px 20px;display:flex}.topbar .brand{color:var(--brand-dark);font-weight:700}.topbar nav{gap:16px;display:flex}.topbar .spacer{flex:1}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;padding:18px}h1{margin:0 0 16px;font-size:22px}h2{margin:0 0 12px;font-size:17px}label{color:var(--muted);margin:10px 0 4px;font-size:13px;display:block}input[type=text],input[type=email],input[type=password],select,textarea{border:1px solid var(--border);width:100%;font:inherit;color:var(--text);background:#fff;border-radius:6px;padding:8px 10px}textarea{resize:vertical;min-height:64px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}button,.btn{border:1px solid var(--border);color:var(--text);font:inherit;cursor:pointer;background:#fff;border-radius:6px;align-items:center;gap:6px;padding:8px 14px;display:inline-flex}button:hover,.btn:hover{background:#f0f2f4}button.primary,.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}button.primary:hover{background:var(--brand-dark)}button.danger{color:var(--danger);border-color:#e7c3bd}button.small{padding:4px 8px;font-size:12px}.row{align-items:center;gap:10px;display:flex}.row.wrap{flex-wrap:wrap}.spread{justify-content:space-between;align-items:center;gap:10px;display:flex}.muted{color:var(--muted)}.tag{background:#eef1f4;border-radius:999px;margin:2px 4px 2px 0;padding:2px 10px;font-size:12px;display:inline-block}.pill{border-radius:999px;padding:2px 8px;font-size:12px}.pill.on{color:var(--brand-dark);background:#e3f4e0}.pill.off{color:var(--muted);background:#f0f2f4}.list-item{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:10px 0;display:flex}.list-item:last-child{border-bottom:none}.step-card{border:1px solid var(--border);border-radius:var(--radius);background:#fff;margin-bottom:12px;padding:14px}.step-num{background:var(--brand);color:#fff;border-radius:999px;flex:none;justify-content:center;align-items:center;width:26px;height:26px;font-size:13px;font-weight:700;display:inline-flex}.thumb{border:1px solid var(--border);border-radius:6px;max-width:160px;max-height:110px}.error{color:var(--danger);margin-top:8px;font-size:13px}.empty{color:var(--muted);text-align:center;padding:18px}.step-drag-row{align-items:flex-start;gap:8px;display:flex}.step-drag-row.drag-over{outline:2px dashed var(--brand);outline-offset:2px;border-radius:var(--radius)}.step-drag-row .step-card{flex:1;margin-bottom:0}.step-drag-row+.step-drag-row{margin-top:12px}.drag-handle{cursor:grab;color:var(--muted);-webkit-user-select:none;user-select:none;flex:none;padding:16px 2px;font-size:18px;line-height:1}.drag-handle:active{cursor:grabbing}.recorder-hint{border-radius:var(--radius);background:#f0f8ee;border:1px solid #cfe8c8;margin-bottom:14px;padding:12px 14px;font-size:14px}.recorder-hint ol{font-size:13px}.flow-id{border:1px solid var(--border);color:var(--text);background:#fff;border-radius:6px;padding:5px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}