:root{--bg:#f6f8fc;--card:#ffffff;--text:#152238;--muted:#65738a;--line:#e6ebf2;--primary:#2563eb;--primary2:#7c3aed;--success:#0f9f6e;--danger:#dc2626;--shadow:0 20px 60px rgba(20,36,70,.09);--radius:22px}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,'Noto Sans Thai',sans-serif;background:radial-gradient(circle at top left,#dbeafe 0,#f6f8fc 38%,#f8fafc 100%);color:var(--text)}a{text-decoration:none;color:inherit}.app-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}.sidebar{padding:24px;background:rgba(255,255,255,.82);border-right:1px solid var(--line);backdrop-filter:blur(18px);position:sticky;top:0;height:100vh}.brand{display:flex;gap:12px;align-items:center;margin-bottom:28px}.brand span{display:block;color:var(--muted);font-size:12px}.logo{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:0 10px 30px rgba(37,99,235,.25)}nav{display:grid;gap:8px}nav a{padding:13px 14px;border-radius:14px;color:#334155;font-weight:700}nav a:hover{background:#eef4ff;color:#1d4ed8}.side-card{margin-top:24px;background:linear-gradient(135deg,#111827,#1e3a8a);color:#fff;border-radius:18px;padding:16px;font-size:13px;line-height:1.6}.main{padding:28px}.topbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:24px}.topbar h1{margin:0;font-size:30px;letter-spacing:-.6px}.topbar p{margin:6px 0 0;color:var(--muted)}.user-pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 14px;font-weight:800;box-shadow:var(--shadow)}.user-pill span{display:block;font-size:11px;color:var(--muted);font-weight:600}.grid{display:grid;gap:18px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.card{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center;background:linear-gradient(135deg,#fff,#eef4ff);overflow:hidden;position:relative}.hero:after{content:"";position:absolute;right:-120px;top:-120px;width:280px;height:280px;border-radius:50%;background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(124,58,237,.18))}.hero h2{font-size:38px;line-height:1.12;margin:0 0 12px}.hero p{color:var(--muted);line-height:1.8}.btn{border:0;border-radius:14px;padding:12px 16px;font-weight:900;cursor:pointer;display:inline-flex;gap:8px;align-items:center;justify-content:center}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 14px 30px rgba(37,99,235,.25)}.btn-soft{background:#eef4ff;color:#1d4ed8}.btn-danger{background:#fee2e2;color:#b91c1c}.stat{padding:18px}.stat b{font-size:28px}.stat span{display:block;color:var(--muted);margin-top:6px}.flow-canvas{display:grid;grid-template-columns:repeat(7,minmax(180px,1fr));gap:12px;overflow:auto;padding-bottom:10px}.node{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;min-height:150px;position:relative}.node:before{content:"";position:absolute;left:18px;top:0;width:42px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--primary2))}.node small{color:var(--muted);font-weight:800}.node h3{font-size:16px;margin:10px 0 8px}.node p{font-size:13px;color:var(--muted);line-height:1.55}.form{display:grid;gap:14px}.form label{font-weight:800;color:#334155}.form input,.form textarea,.form select{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;font:inherit}.form textarea{min-height:120px;resize:vertical}.table{width:100%;border-collapse:separate;border-spacing:0 10px}.table th{text-align:left;color:var(--muted);font-size:13px}.table td{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px}.table td:first-child{border-left:1px solid var(--line);border-radius:14px 0 0 14px}.table td:last-child{border-right:1px solid var(--line);border-radius:0 14px 14px 0}.badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#eef4ff;color:#1d4ed8;font-weight:800;font-size:12px}.badge.done{background:#dcfce7;color:#15803d}.badge.failed{background:#fee2e2;color:#b91c1c}.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(460px,100%)}.notice{padding:12px 14px;border-radius:14px;background:#ecfdf5;color:#047857;margin-bottom:12px}.error{padding:12px 14px;border-radius:14px;background:#fef2f2;color:#b91c1c;margin-bottom:12px}.pipeline{height:260px;border-radius:22px;background:linear-gradient(135deg,#172554,#312e81);position:relative;overflow:hidden}.bubble{position:absolute;border-radius:22px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;padding:16px;font-weight:900;animation:float 5s infinite ease-in-out}.b1{left:30px;top:35px}.b2{right:38px;top:80px;animation-delay:1s}.b3{left:120px;bottom:40px;animation-delay:2s}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}@media(max-width:980px){.app-shell{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.main{padding:18px}.hero,.grid-2,.grid-3{grid-template-columns:1fr}.flow-canvas{grid-template-columns:1fr}.topbar{align-items:flex-start;flex-direction:column}}