@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600&family=Inter:wght@400;500;600;700;800&display=swap');
:root{font-family:Inter,'IBM Plex Sans Thai',sans-serif;color:#242b36;background:#f7f8fa;font-size:14px;--green:#147d64;--border:#e3e7eb}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--border);border-radius:8px;background:white;color:inherit;padding:9px 13px}button:hover{background:#f1f5f3}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #9cdbc8;outline-offset:2px}input,select,textarea{border:1px solid var(--border);border-radius:8px;background:white;padding:10px;width:100%;color:inherit}textarea{resize:vertical;min-height:85px}.sidebar{position:fixed;inset:0 auto 0 0;width:235px;background:#fff;border-right:1px solid var(--border);padding:29px 19px;display:flex;flex-direction:column}.brand{display:flex;gap:10px;align-items:center;font-size:29px;font-weight:800;color:#1c5546;text-decoration:none}.brand-sub{display:block;font-size:9px;letter-spacing:3px;margin-top:2px;color:#89948f}.workspace{display:flex;gap:12px;align-items:center;padding:17px 8px;margin:28px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-weight:600;font-size:12px}small{display:block;color:#8a939f;font-weight:400;font-size:11px;margin-top:5px;line-height:1.7}nav{display:grid;gap:8px}nav button{display:flex;gap:13px;align-items:center;border:0;background:none;text-align:left;padding:13px;font-size:17px}nav button span{font-size:13px}nav button.active{background:#eaf5ef;color:var(--green);font-weight:600}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--border);padding:20px 7px 0;color:#59636f;font-size:12px}.dot{display:inline-block;width:7px;height:7px;background:#3dac83;border-radius:50%;margin-right:6px}main{margin-left:235px}header{height:77px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:white}.breadcrumb{color:#8c95a0;font-size:12px}.breadcrumb span{padding:0 13px}.breadcrumb b{font-weight:500;color:#3c4652}.header-right{display:flex;align-items:center;gap:10px}.mode{background:#edf7f1;color:#428568;padding:7px 10px;border-radius:5px;letter-spacing:1px;font-size:9px;font-weight:700}.quiet{background:transparent}.primary{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}.primary:hover{background:#096b54}.danger{color:#bf4242}.page{padding:30px 32px}.page-title{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:25px}h1{font-size:27px;letter-spacing:-1px;margin:0 0 8px}h2{font-size:16px;margin:0 0 16px}p{color:#87909a;font-size:12px;line-height:1.8;margin:0}.title-eyebrow{text-transform:uppercase;letter-spacing:2px;color:#828e99;font-size:9px;margin-bottom:10px}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.flow-title{border:0;background:none;padding:0;font-size:27px;font-weight:700;max-width:500px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}.stat{background:#fff;border:1px solid var(--border);border-radius:10px;padding:18px 20px;display:flex;justify-content:space-between;align-items:center}.stat b{font-size:25px;display:block;margin-top:7px}.stat span{font-size:11px;color:#86919b}.stat-icon{background:#eef5f2;padding:13px;border-radius:11px;font-size:20px;color:#559e80}.studio{display:grid;grid-template-columns:minmax(400px,1fr) 290px;border:1px solid var(--border);border-radius:12px;background:white;overflow:hidden}.canvas-section{min-width:0}.canvas-toolbar{height:61px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;border-bottom:1px solid var(--border);font-size:12px}.canvas-toolbar small{display:inline;margin-left:8px}.canvas-scroll{height:490px;overflow:auto;background-color:#fafcfb;background-image:radial-gradient(#d7dfda 1px,transparent 1px);background-size:20px 20px}.canvas{position:relative;width:1500px;height:950px}.edges{position:absolute;inset:0;width:1500px;height:950px;pointer-events:none}.node{position:absolute;width:205px;background:#fff;border:1px solid #dce4df;border-radius:11px;box-shadow:0 5px 16px #273c2e08;text-align:left;padding:0;touch-action:none;user-select:none}.node.selected{border:2px solid #279a78;box-shadow:0 0 0 4px #239c7310}.node.running,.node.waiting{border-color:#cb942b}.node.completed{border-color:#4caa88}.node.skipped{opacity:.5}.node-top{display:flex;gap:10px;align-items:center;padding:14px;border-bottom:1px solid #eff1f0}.node-icon{border-radius:8px;padding:8px;font-size:17px;background:#edf5ef;color:#2c8a61}.node.agent .node-icon{background:#eeeafc;color:#7a61b8}.node.condition .node-icon{background:#fff4de;color:#b08034}.node.approval .node-icon{background:#eaf1fc;color:#537dac}.node-name{font-size:12px;font-weight:600}.node-type{font-size:9px;color:#98a09c;margin-top:4px;text-transform:uppercase;letter-spacing:1px}.node-bottom{padding:10px 14px;font-size:10px;color:#909992;display:flex;justify-content:space-between}.inspector{border-left:1px solid var(--border);padding:21px;max-height:551px;overflow:auto}.section-label{font-size:9px;font-weight:700;letter-spacing:1.5px;color:#929ba5;margin:22px 0 10px}.inspector label,.form-grid label{display:block;font-size:11px;color:#66727e;margin:15px 0 6px}.inspector p{font-size:11px}.inspector button{margin-top:12px}.help{padding:11px;background:#f5f8f6;border:1px solid #e2ece6;border-radius:8px;font-size:10px;line-height:1.9;color:#688076;margin-top:20px}.run-panel{border:1px solid var(--border);background:white;border-radius:12px;margin-top:20px;padding:20px}.run-head{display:flex;justify-content:space-between;align-items:center}.run-body{display:grid;grid-template-columns:260px 1fr;gap:20px;margin-top:18px}.step{padding:10px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;cursor:pointer;font-size:12px}.step.active{border-color:var(--green);background:#f3faf6}.badge{font-size:10px;padding:4px 7px;border-radius:5px;background:#eef2f4;color:#7d8a92}.badge.completed{background:#eaf6ef;color:#328466}.badge.waiting{background:#fff2d5;color:#a5812e}.badge.failed,.badge.cancelled{background:#fff0ee;color:#b96961}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f8faf9;border:1px solid var(--border);padding:14px;border-radius:8px;font:12px/1.8 ui-monospace,monospace;max-height:230px;overflow:auto;margin:8px 0 15px}.run-detail p{color:#536b5f}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:18px}.card{background:white;border:1px solid var(--border);border-radius:12px;padding:23px}.card .avatar{width:44px;height:44px;border-radius:12px;background:#edf3f0;color:#4c8974;display:grid;place-items:center;font-size:20px;margin-bottom:20px}.card p{margin:10px 0 20px}.card h2{margin-bottom:5px}.card .toolbar{margin-top:20px}.empty{text-align:center;padding:60px;color:#8b959e}.empty b{display:block;color:#52665b;margin-bottom:10px}table{width:100%;border-collapse:collapse;background:white;font-size:12px}th,td{text-align:left;border-bottom:1px solid var(--border);padding:16px}th{font-size:10px;color:#85909d;font-weight:500}.table-wrap{border:1px solid var(--border);border-radius:10px;overflow:auto}dialog{border:1px solid var(--border);border-radius:14px;padding:26px;width:500px;max-width:90vw;box-shadow:0 30px 120px #182f2733}dialog::backdrop{background:#172d2755}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:23px}.form-grid{display:grid;gap:9px}.form-grid label{margin:8px 0 4px}.note{color:#6c8277;background:#eff7f2;border-radius:8px;padding:12px;font-size:11px;line-height:1.8;margin:18px 0}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:13px 20px;background:#203d31;color:#fff;box-shadow:0 5px 20px #0002;border-radius:9px;display:none;z-index:10}.connect-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.connect-row button{grid-column:span 2}.flow-picker{width:200px}.mobile-note{display:none}@media(max-width:1100px){.sidebar{width:190px}main{margin-left:190px}.studio{grid-template-columns:minmax(300px,1fr) 250px}.page{padding:24px 20px}.inspector{padding:16px}.header-right{gap:5px}header{padding:0 20px}.stats{gap:8px}.stat{padding:13px}.stat-icon{display:none}}@media(max-width:760px){.sidebar{position:relative;width:100%;padding:14px 18px;display:block}.brand{font-size:23px}.workspace,.sidebar-bottom{display:none}nav{display:flex;margin-top:14px;overflow:auto}nav button{padding:8px;white-space:nowrap}main{margin:0}header{height:60px}.breadcrumb{display:none}.page-title{align-items:flex-start;flex-direction:column}.studio{display:flex;flex-direction:column}.canvas-scroll{height:380px}.inspector{border-left:0;border-top:1px solid var(--border);max-height:none}.stats{grid-template-columns:repeat(3,1fr)}.stat b{font-size:20px}.stat span{font-size:9px}.run-body{grid-template-columns:1fr}.flow-title{font-size:23px}.page{padding:20px 14px}h1{font-size:24px}.cards{grid-template-columns:1fr}}