:root{--bg: #0f1319;--bg-alt: #151b24;--panel: #1a222d;--panel-2: #212b38;--border: #2b3644;--text: #e4e9f0;--text-dim: #93a1b3;--text-mute: #64748b;--accent: #3b82f6;--accent-dim:#1d4ed8;--green: #22c55e;--red: #ef4444;--amber: #f59e0b;--danger: #ef4444;--warn: #f59e0b;--radius: 8px;--font-ui: "Segoe UI", "Noto Sans Thai", system-ui, -apple-system, sans-serif;--font-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", ui-monospace, monospace;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:14px;-webkit-font-smoothing:antialiased}button{font-family:inherit;font-size:inherit;cursor:pointer}input,select,textarea{font-family:inherit;font-size:inherit}.app{display:grid;grid-template-columns:290px 1fr;height:100%;overflow:hidden}.sidebar{background:var(--bg-alt);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.sidebar-head{padding:14px 16px 10px;border-bottom:1px solid var(--border)}.sidebar-head-row{display:flex;align-items:center;gap:8px}.sidebar-head-row h1{flex:1;min-width:0}.sidebar-head h1{margin:0;font-size:15px;font-weight:600;letter-spacing:.2px}.sidebar-head p{margin:2px 0 0;font-size:11px;color:var(--text-mute)}.sidebar-tools{padding:10px 12px;display:flex;gap:6px}.sidebar-list{flex:1;overflow-y:auto;padding:0 8px 12px}.group-label{display:flex;align-items:center;gap:6px;width:100%;background:transparent;border:none;text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-mute);padding:10px 8px 5px;font-weight:600;border-radius:6px}.group-label:hover{color:var(--text-dim);background:var(--panel)}.group-label.open{color:var(--text-dim)}.group-caret{display:inline-block;width:10px;font-size:9px;opacity:.8}.group-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-count{background:var(--panel-2);border-radius:9px;padding:0 6px;font-size:10px;letter-spacing:0;color:var(--text-mute)}.api-item{width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:var(--radius);padding:8px 10px;color:var(--text-dim);display:flex;align-items:center;gap:8px;margin-bottom:2px}.api-item:hover{background:var(--panel);color:var(--text)}.api-item.active{background:var(--panel-2);border-color:var(--accent);color:var(--text)}.api-item-body{display:block;min-width:0;flex:1}.api-item-name{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.api-item-meta{display:block;font-size:10.5px;color:var(--text-mute);margin-top:1px}.sidebar-foot{border-top:1px solid var(--border);padding:8px;display:flex;flex-direction:column;gap:4px}.main{display:flex;flex-direction:column;overflow:hidden}.main-head{padding:14px 20px 0;border-bottom:1px solid var(--border);background:var(--bg-alt)}.main-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.main-title h2{margin:0;font-size:17px;font-weight:600}.main-url{font-family:var(--font-mono);font-size:11.5px;color:var(--text-mute);margin:4px 0 0;word-break:break-all}.tabs{display:flex;gap:2px;margin-top:12px}.tab{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-dim);padding:8px 16px;font-size:13px;font-weight:500}.tab:hover{color:var(--text)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.tab-count{background:var(--panel-2);border-radius:10px;padding:1px 7px;font-size:10.5px;margin-left:6px;color:var(--text-dim)}.content{flex:1;overflow-y:auto;padding:18px 20px 40px}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px}.card h3{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim);font-weight:600}.btn{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 12px;display:inline-flex;align-items:center;gap:6px;transition:background .12s,border-color .12s}.btn:hover:not(:disabled){background:#2b3846;border-color:#3d4c5e}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.btn-primary:hover:not(:disabled){background:var(--accent-dim);border-color:var(--accent-dim)}.btn-danger{color:#fca5a5}.btn-danger:hover:not(:disabled){background:#3b1f24;border-color:#7f2d33}.btn-sm{padding:4px 9px;font-size:12px}.btn-play{font-size:15px;padding:9px 22px}.field{margin-bottom:12px}.field label{display:block;font-size:11.5px;color:var(--text-dim);margin-bottom:4px;font-weight:500}.input,.textarea,.select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:7px 10px;color:var(--text);outline:none}.input:focus,.textarea:focus,.select:focus{border-color:var(--accent)}.textarea{font-family:var(--font-mono);font-size:12.5px;resize:vertical;min-height:90px}.mono{font-family:var(--font-mono);font-size:12.5px}.row{display:flex;gap:10px}.row>*{flex:1}.grow-2{flex:2}.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:8px 14px}.check{display:flex;align-items:flex-start;gap:8px;padding:7px 10px;background:var(--bg);border:1px solid var(--border);border-radius:6px;cursor:pointer;-webkit-user-select:none;user-select:none}.check:hover{border-color:#3d4c5e}.check input{margin:2px 0 0;accent-color:var(--accent);width:15px;height:15px;cursor:pointer}.check.master{border-color:var(--accent);background:#16233a}.check.disabled{opacity:.45;cursor:not-allowed}.check-text{font-size:12.5px;line-height:1.35}.check-hint{display:block;font-size:10.5px;color:var(--text-mute);margin-top:1px}.badge{display:inline-flex;align-items:center;gap:4px;border-radius:5px;padding:2px 8px;font-size:11px;font-weight:600;font-family:var(--font-mono)}.badge-method{background:#1e3a5f;color:#7cc0ff}.badge-ok{background:#14331f;color:#4ade80}.badge-err{background:#3b1f24;color:#fca5a5}.badge-warn{background:#3a2d10;color:#fbbf24}.badge-muted{background:var(--panel-2);color:var(--text-mute)}.badge-info{background:#1e2b4a;color:#93b4ff}.result{border-radius:var(--radius);padding:14px 16px;border:1px solid;margin-bottom:14px}.result.ok{background:#11291b;border-color:#1f5133}.result.err{background:#2a1518;border-color:#6b2b31}.result-line{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px}.result-log{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.12);display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}.log-no{font-family:var(--font-mono);font-weight:700;color:#fff;background:#3b82f633;border:1px solid var(--accent);padding:2px 9px;border-radius:5px;letter-spacing:.4px}.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}table.log-table{width:100%;border-collapse:collapse;font-size:12.5px}.log-table th{text-align:left;background:var(--panel-2);color:var(--text-dim);font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:8px 12px;white-space:nowrap;border-bottom:1px solid var(--border)}.log-table td{padding:8px 12px;border-bottom:1px solid var(--border);white-space:nowrap}.log-table tbody tr{background:var(--panel);cursor:pointer}.log-table tbody tr:hover{background:var(--panel-2)}.log-table tbody tr.selected{background:#1e3050}.log-table .num{text-align:right;font-family:var(--font-mono)}.log-table .cell-logno{font-family:var(--font-mono);color:#93b4ff;font-weight:600}.empty{text-align:center;padding:40px 20px;color:var(--text-mute);font-size:13px}.pager{display:flex;align-items:center;gap:10px;justify-content:flex-end;margin-top:10px;font-size:12.5px;color:var(--text-dim)}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.toolbar .input,.toolbar .select{width:auto}.spacer{flex:1}.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:9px 14px;min-width:108px}.stat-label{font-size:10.5px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:17px;font-weight:600;margin-top:2px;font-family:var(--font-mono)}.drawer-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;justify-content:flex-end;z-index:50}.drawer{width:min(920px,92vw);background:var(--bg-alt);border-left:1px solid var(--border);display:flex;flex-direction:column;height:100%}.drawer-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-wrap:wrap}.drawer-body{flex:1;overflow-y:auto;padding:16px 18px 40px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:60;padding:24px}.modal{background:var(--bg-alt);border:1px solid var(--border);border-radius:10px;width:min(760px,100%);max-height:90vh;display:flex;flex-direction:column}.modal-head{padding:14px 18px;border-bottom:1px solid var(--border);font-weight:600}.modal-body{padding:16px 18px;overflow-y:auto}.modal-foot{padding:12px 18px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}.json-box{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:12px 14px;font-family:var(--font-mono);font-size:12px;line-height:1.55;white-space:pre;overflow:auto;max-height:480px;color:#cbd5e1}.json-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}.notice{background:#2a2210;border:1px solid #6b5518;color:#fcd34d;border-radius:6px;padding:9px 12px;font-size:12.5px;margin-bottom:12px}.error-box{background:#2a1518;border:1px solid #6b2b31;color:#fca5a5;border-radius:6px;padding:9px 12px;font-size:12.5px;margin-bottom:12px}.spin{display:inline-block;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#33404f;border-radius:5px;border:2px solid var(--bg)}::-webkit-scrollbar-thumb:hover{background:#44556a}.home-link{cursor:pointer;display:inline-block}.home-link:hover,.home-link.active{color:var(--accent)}.env-dot{margin-right:3px;vertical-align:baseline;width:9px;height:9px;border-radius:50%;flex:0 0 9px;display:inline-block}.status-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;display:inline-block}kbd.kbd{background:#0000004d;border:1px solid rgba(255,255,255,.18);border-radius:4px;padding:1px 6px;font-size:10.5px;font-family:var(--font-mono);margin-left:4px;opacity:.85}.chart{display:flex;align-items:flex-end;gap:10px;overflow-x:auto;padding-bottom:4px}.chart-col{display:flex;flex-direction:column;align-items:center;min-width:42px}.chart-bar-wrap{display:flex;align-items:flex-end}.chart-bar{width:26px;background:var(--accent);border-radius:3px 3px 0 0;position:relative;opacity:.85;display:flex;align-items:flex-end}.chart-bar-error{width:100%;background:var(--red);border-radius:0 0 3px 3px}.chart-value{font-size:11px;font-family:var(--font-mono);margin-top:4px;color:var(--text-dim)}.chart-label{font-size:10px;color:var(--text-mute)}.data-table td{max-width:240px;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-mono);font-size:12px}.data-table th{position:sticky;top:0;z-index:1}.env-layout{display:grid;grid-template-columns:210px 1fr;gap:16px;align-items:start}.env-list{border-right:1px solid var(--border);padding-right:12px}.env-detail{min-width:0}.env-detail .input{padding:4px 8px;font-size:12px}.field-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}.field-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:5px 9px;font-size:12px}.snippet{max-height:110px;white-space:pre-wrap;word-break:break-all;font-size:11.5px}mark.hl{background:#f59e0b;color:#1a1207;border-radius:2px;padding:0 2px}code{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-family:var(--font-mono);font-size:11.5px}@media(max-width:900px){.env-layout{grid-template-columns:1fr}.env-list{border-right:none;border-bottom:1px solid var(--border);padding-bottom:12px}}.span-row{display:grid;grid-template-columns:240px 1fr 70px 150px;gap:10px;align-items:center;padding:3px 0;font-size:12px}.span-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-dim)}.span-track{position:relative;height:16px;background:var(--bg);border:1px solid var(--border);border-radius:4px}.span-bar{position:absolute;top:2px;bottom:2px;background:var(--accent);border-radius:3px;opacity:.85;min-width:2px}.span-bar.err{background:var(--red)}.span-time{text-align:right;font-family:var(--font-mono);color:var(--text-dim)}.span-log{font-family:var(--font-mono);font-size:11px;color:#93b4ff}@media(max-width:900px){.span-row{grid-template-columns:140px 1fr 60px}.span-log{display:none}}.link-logno{background:none;border:none;padding:0;font:inherit;color:#93b4ff;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.link-logno:hover{color:#c7d8ff}.mock-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 16px;font-size:12.5px;color:#0b1120;background:repeating-linear-gradient(45deg,#fbbf24,#fbbf24 14px,#f0b21c 14px,#f0b21c 28px);border-bottom:1px solid #b4820f}.mock-banner strong{white-space:nowrap}.mock-banner .btn{background:#0b1120;color:#fbbf24;border-color:#0b1120}.approval-banner{padding:10px 16px;background:#2a1518;border-bottom:2px solid #b91c1c;font-size:12.5px}.approval-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.approval-head strong{color:#fca5a5}.approval-sub{color:var(--text-mute);font-size:11.5px}.approval-item{margin-top:8px}.approval-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.approval-line code{color:#fbbf24}.approval-meta{color:var(--text-mute);font-size:11.5px}.approval-args{margin:6px 0 0;padding:8px 10px;max-height:220px;overflow:auto;background:#11161d;border:1px solid var(--border);border-radius:6px;font-size:11.5px;white-space:pre-wrap;word-break:break-word}.approval-actions{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}.approval-actions .input{flex:1;min-width:200px}.caret{display:inline-block;margin-left:1px;animation:caret-blink 1s steps(2,start) infinite;color:var(--accent, #60a5fa)}@keyframes caret-blink{to{visibility:hidden}}.flow-canvas{border:1px solid var(--border);border-radius:8px;background-color:var(--panel);background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:22px 22px;overflow:hidden;-webkit-user-select:none;user-select:none}.diff-before{background:#ef444414;color:#fca5a5;white-space:pre-wrap;word-break:break-word}.diff-after{background:#22c55e14;color:#86efac;white-space:pre-wrap;word-break:break-word}.alert{border-radius:6px;padding:9px 12px;font-size:12.5px;margin:8px 0 12px;border:1px solid var(--border);background:var(--panel-2);color:var(--text-dim)}.alert-warn{background:#2a2210;border-color:#6b5518;color:#fcd34d}.alert-err{background:#2a1414;border-color:#7f1d1d;color:#fca5a5}.alert-ok{background:#10231a;border-color:#166534;color:#86efac}.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}.btn-ghost{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font:inherit;padding:2px 6px}.btn-ghost:hover{color:var(--text)}.stat-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}.app-switch{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:2px;margin-bottom:10px}.app-switch-item{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px;border-radius:6px;font-size:11px;color:var(--text-mute);text-decoration:none;white-space:nowrap}.app-switch-item:hover{background:var(--panel);color:var(--text)}.app-switch-item.active{background:var(--panel-2);color:var(--text);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}.nav-section{display:flex;align-items:center;gap:6px;width:100%;background:transparent;border:none;text-align:left;font-size:10.5px;letter-spacing:.6px;color:var(--text-mute);padding:8px 8px 4px;font-weight:600}button.nav-section{cursor:pointer;border-radius:6px}button.nav-section:hover{color:var(--text-dim);background:var(--panel)}.nav-item{width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:6px;padding:6px 10px;color:var(--text-dim);display:flex;align-items:center;gap:8px;font-size:13px;text-decoration:none;cursor:pointer}.nav-item:hover{background:var(--panel);color:var(--text)}.nav-item.active{background:var(--panel-2);border-color:var(--accent);color:var(--text)}.nav-item-icon{width:18px;text-align:center;flex:none}.nav-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-foot .nav-item{margin:0}.sidebar-foot{gap:1px;flex:0 1 auto;min-height:0;overflow-y:auto}.sidebar-list{flex:1 1 120px;min-height:120px}.user-row{display:flex;align-items:center;gap:8px;padding:10px 8px 4px;border-top:1px solid var(--border);margin-top:6px}.flow-guide{margin-bottom:14px;padding:14px 16px}.flow-guide-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.flow-guide-head h3{margin:0;font-size:14px;text-transform:none;letter-spacing:0;color:var(--text)}.flow-guide-head p{margin:3px 0 0;font-size:12px;color:var(--text-dim)}.flow-progress{display:flex;align-items:center;gap:8px;padding-top:4px}.flow-progress-bar{width:110px;height:6px;background:var(--bg);border-radius:3px;overflow:hidden;border:1px solid var(--border)}.flow-progress-bar span{display:block;height:100%;background:var(--green);transition:width .3s}.flow-progress-text{font-size:11.5px;color:var(--text-dim);font-family:var(--font-mono)}.flow-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;counter-reset:none}.flow-step{position:relative;display:flex;gap:10px;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius)}.flow-step:not(:last-child):after{content:"›";position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:var(--text-mute);font-size:16px;z-index:1}.flow-step-num{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--panel-2);color:var(--text-dim);border:1px solid var(--border)}.flow-step-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start}.flow-step-title{font-size:13px;font-weight:600;color:var(--text);display:flex;gap:6px;align-items:center;flex-wrap:wrap}.flow-step-desc{font-size:11.5px;color:var(--text-dim);line-height:1.45;flex:1}.flow-step .btn{margin-top:auto}.flow-step-desc{margin-bottom:6px}.flow-step-done{opacity:.75}.flow-step-done .flow-step-num{background:var(--green);border-color:var(--green);color:#06260f}.flow-step-next{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.flow-step-next .flow-step-num{background:var(--accent);border-color:var(--accent);color:#fff}.flow-collapsed{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:12px;padding:8px 12px;background:var(--panel);border:1px dashed var(--border);border-radius:var(--radius);color:var(--text-dim);font-size:12.5px;text-align:left;cursor:pointer}.flow-collapsed:hover{color:var(--text);border-color:var(--accent)}.flow-collapsed-cta{margin-left:auto;color:#93b4ff}.tab-step{display:inline-grid;place-items:center;width:17px;height:17px;margin-right:5px;border-radius:50%;font-size:10.5px;font-weight:700;background:var(--panel-2);color:var(--text-dim)}.tab.active .tab-step{background:var(--accent);color:#fff}@media(max-width:900px){.flow-step:not(:last-child):after{display:none}.flow-guide-head{flex-wrap:wrap}}.mobile-nav-btn{display:none}@media(max-width:760px){.app{grid-template-columns:1fr}.sidebar{position:fixed;top:0;bottom:0;left:-100%;width:min(320px,88vw);z-index:50;transition:left .2s ease;box-shadow:0 0 24px #00000080}body.nav-open .sidebar{left:0}body.nav-open .main:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;z-index:40}.mobile-nav-btn{display:flex;align-items:center;gap:6px;position:fixed;right:12px;bottom:14px;z-index:60;padding:9px 14px;border-radius:20px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-weight:600;font-size:13px;box-shadow:0 4px 14px #0006}.main-head{padding:12px 14px 0}.content{padding:14px 12px 70px}.main-title h2{font-size:16px}.flow-progress-bar{width:56px}}