*{box-sizing:border-box;margin:0}
html,body{width:1280px;height:826px;overflow:hidden}
body{font:400 13px/1.45 system-ui,"Segoe UI",Arial,sans-serif;color:#0f172a;background:#f5f6f8;display:flex}
button,input{font:inherit;color:inherit}
.side{width:226px;background:#fff;border-left:1px solid #e5e7eb;padding:16px 12px;display:flex;flex-direction:column;gap:3px;position:relative}
.logo{font:400 21px/1 Georgia,serif;letter-spacing:.32em;text-align:center;margin:6px 0 22px;color:#111}
.side a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:12.5px;color:#334155;transition:background .25s}
.side a i{font-style:normal;width:16px;text-align:center;color:#64748b}
.side a b{margin-inline-start:auto;font-size:10.5px;background:#f1f5f9;border-radius:10px;padding:1px 8px;font-weight:600}
.side a.on{background:#eef2ff;color:#1d4ed8;font-weight:600}.side a.on i{color:#1d4ed8}
.wa-ok{position:absolute;bottom:18px;inset-inline:12px;background:#ecfdf5;color:#047857;border-radius:8px;padding:7px;text-align:center;font-size:11px}
main{flex:1;position:relative}
.page{position:absolute;inset:0;padding:22px 30px;opacity:0;visibility:hidden;transform:translateX(-14px);transition:opacity .4s,visibility .4s,transform .4s}
.page.on{opacity:1;visibility:visible;transform:none}
.ph{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.ph h1{font-size:21px;font-weight:700;display:flex;align-items:center;gap:8px}.ph p{color:#64748b;font-size:12px;margin-top:2px}
.pill{font-size:11px;background:#fef3c7;color:#b45309;border-radius:10px;padding:1px 8px}
.ghost{border:1px solid #e5e7eb;background:#fff;border-radius:8px;padding:6px 12px;font-size:12px}
.primary{border:0;background:#2563eb;color:#fff;border-radius:8px;padding:9px 16px;font-weight:600;font-size:12.5px;transition:opacity .25s,transform .12s}
.primary:disabled{opacity:.35}.primary.wide{width:100%;margin-top:14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stat{background:#fff;border:1px solid #eef0f3;border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:14px}
.stat strong{font-size:26px;display:block;line-height:1.1;transition:color .3s}.stat small{color:#64748b;font-size:11.5px}
.ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:16px}.ic.y{background:#fef3c7;color:#b45309}.ic.b{background:#dbeafe;color:#1d4ed8}.ic.g{background:#dcfce7;color:#15803d}
.sub{font-size:14px;margin:20px 0 10px}
.runs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.run{background:#fff;border:1px solid #eef0f3;border-radius:12px;padding:12px 14px}
.run b{font-size:12.5px;display:block}.run small{color:#64748b;font-size:11px}
.run .row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:10.5px;color:#64748b}
.bar{height:6px;background:#eef2f7;border-radius:4px;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:#2563eb;border-radius:4px;width:0;transition:width .7s cubic-bezier(.3,.7,.2,1)}
.chip{font-size:10.5px;border-radius:10px;padding:2px 9px;font-weight:600;white-space:nowrap}
.chip.blue{background:#dbeafe;color:#1d4ed8}.chip.purple{background:#f3e8ff;color:#7e22ce}.chip.green{background:#dcfce7;color:#15803d}.chip.yellow{background:#fef3c7;color:#b45309}
.search{background:#fff;border:1px solid #e5e7eb;border-radius:9px;padding:8px 12px;color:#94a3b8;font-size:12px;margin-bottom:10px}
.tbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid #eef0f3;border-radius:12px;overflow:hidden;font-size:11.5px}
.tbl th{background:#f8fafc;color:#64748b;font-weight:500;text-align:right;padding:9px 10px;font-size:11px}
.tbl td{padding:9px 10px;border-top:1px solid #f1f5f9;vertical-align:top}
.tbl td small{display:block;color:#64748b;font-size:10.5px}
.tbl tr{transition:background .25s}.tbl tr.sel{background:#eff6ff}
.cb{width:15px;height:15px;border:1.5px solid #cbd5e1;border-radius:4px;display:grid;place-items:center;font-size:10px;color:#fff;transition:background .2s,border-color .2s}
tr.sel .cb{background:#2563eb;border-color:#2563eb}
.card{background:#fff;border:1px solid #eef0f3;border-radius:12px;padding:14px 16px;margin-bottom:12px}
.card h3{font-size:14px}.hint{color:#64748b;font-size:11px;margin:2px 0 10px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;font-weight:600;margin-top:10px}
.form input{border:1px solid #e5e7eb;border-radius:8px;padding:8px 10px;font-weight:400;outline:none;background:#fff}
.form input.typing{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb22}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini-stops{display:flex;flex-direction:column;gap:6px}
.mstop{display:flex;align-items:center;gap:10px;border:1px solid #eef0f3;border-radius:9px;padding:8px 10px;font-size:12px;transition:transform .45s cubic-bezier(.3,.7,.2,1),box-shadow .2s;background:#fff}
.mstop .n{width:22px;height:22px;border-radius:50%;background:#eef2ff;color:#1d4ed8;display:grid;place-items:center;font-size:11px;font-weight:700}
.mstop .h{margin-inline-start:auto;color:#94a3b8;letter-spacing:-2px}
.mstop.drag{box-shadow:0 8px 20px #0f172a22}
.prog .row{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600}
.stop{display:grid;grid-template-columns:28px 1fr auto;gap:10px;border:1px solid #eef0f3;border-radius:10px;padding:10px 12px;margin-bottom:8px;transition:background .4s,border-color .4s}
.stop .n{width:24px;height:24px;border-radius:50%;background:#eef2ff;color:#1d4ed8;display:grid;place-items:center;font-size:11px;font-weight:700}
.stop b{font-size:12.5px}.stop small{display:block;color:#64748b;font-size:11px}
.stop .meta{display:flex;gap:6px;align-items:center;margin-top:5px;flex-wrap:wrap}
.tw{font-size:11px;color:#1d4ed8}
.tag{font-size:10px;border-radius:9px;padding:1px 7px;opacity:0;transform:scale(.8);transition:opacity .35s,transform .35s}
.tag.on{opacity:1;transform:none}
.tag.wa{background:#ecfdf5;color:#047857}.tag.ok{background:#dcfce7;color:#15803d}
.stop.done{background:#f0fdf4;border-color:#bbf7d0}
.badge{position:fixed;left:24px;bottom:8px;font:600 8.5px/1 ui-monospace,monospace;letter-spacing:.12em;color:#94a3b8}
body.static .demo-pointer{display:none}
.stop>.chip{align-self:start}