:root{--bg-deep: #04061a;--bg-mid: #070c2b;--bg-panel: #080e30;--bg-inset: rgba(255, 255, 255, .022);--stroke: rgba(140, 160, 255, .11);--stroke-soft: rgba(140, 160, 255, .06);--text: #e6ebff;--text-dim: #8e99cc;--text-faint: #5d6699;--cyan: #3fd0e3;--violet: #8b5cf6;--indigo: #6d7cff;--magenta: #e8479b;--amber: #ffa23e;--red: #ff4d6d;--green: #35d6a4;--radius-lg: 18px;--radius-md: 12px;--radius-sm: 8px;--font: "Inter", "IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", Roboto, sans-serif;--mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg-deep);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 70% 55% at 22% 12%,rgba(74,92,255,.16),transparent 62%),radial-gradient(ellipse 60% 50% at 82% 78%,rgba(139,92,246,.13),transparent 60%),radial-gradient(ellipse 90% 70% at 50% 108%,rgba(63,208,227,.07),transparent 66%);pointer-events:none;z-index:0}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}input,select,textarea{font-family:inherit;font-size:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#8ca0ff29;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#8ca0ff47}.shell{position:relative;z-index:1;display:flex;height:100vh;padding:14px;gap:14px}.rail{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 8px;width:56px;flex-shrink:0;background:linear-gradient(180deg,#0c1234e6,#080c26bf);border:1px solid var(--stroke);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.rail-logo{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--indigo));color:#041028;font-weight:800;font-size:13px;letter-spacing:-.5px;box-shadow:0 0 18px #3fd0e366;flex-shrink:0}.rail-btn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--text-faint);transition:background .16s,color .16s;flex-shrink:0}.rail-btn:hover{background:#8ca0ff17;color:var(--text-dim)}.rail-btn.active{background:#6d7cff2e;color:var(--cyan);box-shadow:inset 0 0 0 1px #3fd0e347}.rail-spacer{flex:1}.panel{flex:1;min-width:0;display:flex;flex-direction:column;background:linear-gradient(165deg,#0e153cd1,#070b21e6 55%,#05081af2);border:1px solid var(--stroke);border-radius:var(--radius-lg);overflow:hidden;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 70px #00000080}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px 0;gap:16px;flex-shrink:0}.panel-title{font-size:19px;font-weight:600;letter-spacing:-.2px;margin:0}.head-right{display:flex;align-items:center;gap:8px}.icon-btn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--text-dim);border:1px solid var(--stroke);position:relative;transition:background .16s,color .16s}.icon-btn:hover{background:#8ca0ff1a;color:var(--text)}.icon-btn .dot{position:absolute;top:3px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan)}.help-btn{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;color:var(--text-dim);font-size:13px;border:1px solid var(--stroke);transition:background .16s}.help-btn:hover{background:#8ca0ff17}.user-chip{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;border:1px solid var(--stroke)}.avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--violet),var(--indigo));font-size:11px;font-weight:700;color:#fff;flex-shrink:0}.user-name{font-size:13px;color:var(--text-dim);white-space:nowrap}.filter-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 22px 14px;gap:12px;flex-wrap:wrap;flex-shrink:0}.filter-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.filter-label{display:flex;align-items:center;gap:6px;color:var(--text-faint);font-size:13px;margin-right:2px}.chip{display:inline-flex;align-items:center;gap:7px;padding:4px 9px 4px 11px;border-radius:7px;background:#6d7cff24;border:1px solid rgba(109,124,255,.26);font-size:12.5px;color:var(--text);white-space:nowrap}.chip button{color:var(--text-faint);display:grid;place-items:center;padding:0;line-height:1;transition:color .14s}.chip button:hover{color:var(--text)}.chip-add{padding:4px 11px;border-radius:7px;border:1px dashed var(--stroke);color:var(--text-faint);font-size:12.5px;transition:color .16s,border-color .16s}.chip-add:hover{color:var(--text-dim);border-color:#8ca0ff3d}.clear-filters{display:inline-flex;align-items:center;gap:5px;color:var(--text-faint);font-size:12.5px;transition:color .14s}.clear-filters:hover{color:var(--text-dim)}.range-group{display:flex;gap:2px;padding:3px;border-radius:9px;background:#04071899;border:1px solid var(--stroke);flex-shrink:0}.range-btn{padding:4px 13px;border-radius:7px;font-size:12.5px;color:var(--text-faint);transition:background .16s,color .16s}.range-btn:hover{color:var(--text-dim)}.range-btn.active{background:linear-gradient(135deg,#2b6ef0,#3f8ef7);color:#fff;box-shadow:0 2px 10px #2b6ef06b}.canvas{flex:1;min-height:0;display:grid;grid-template-columns:214px 1fr;gap:8px;padding:0 22px;overflow:hidden}.side-metrics{display:flex;flex-direction:column;justify-content:center;gap:26px;padding-bottom:30px}.metric{display:flex;align-items:flex-start;gap:11px}.metric-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#8ca0ff14;border:1px solid var(--stroke);color:var(--text-dim);flex-shrink:0}.metric-icon.accent{background:#ffa23e21;border-color:#ffa23e4d;color:var(--amber);box-shadow:0 0 14px #ffa23e2e}.metric-label{font-size:12px;color:var(--text-faint);margin-bottom:1px}.metric-value{font-size:21px;font-weight:600;letter-spacing:-.4px;font-variant-numeric:tabular-nums}.flow-wrap{position:relative;min-width:0;display:flex;flex-direction:column}.flow-cols{display:grid;grid-template-columns:repeat(3,1fr);padding:6px 0 14px;flex-shrink:0}.flow-col-label{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--text-faint);text-align:center;font-weight:500}.flow-svg-holder{flex:1;min-height:0;position:relative}.flow-svg{width:100%;height:100%;display:block;overflow:visible}.flow-col-head{font-size:10.5px;letter-spacing:1.4px;fill:var(--text-faint);font-weight:500;font-family:var(--font)}.node-label{font-size:12px;fill:var(--text-dim);font-family:var(--font)}.node-value{font-size:12.5px;fill:var(--text);font-weight:600;font-family:var(--font)}.hub-value{font-size:27px;font-weight:650;fill:var(--text);letter-spacing:-.6px;font-family:var(--font)}.hub-sub{font-size:10.5px;fill:var(--text-faint);font-family:var(--font)}.flow-node{cursor:pointer}.flow-node circle{transition:r .18s ease,opacity .18s ease}.flow-node:hover .node-ring{opacity:1}.flow-tip{position:absolute;z-index:20;min-width:176px;padding:9px;border-radius:10px;background:#0a102ef7;border:1px solid rgba(140,160,255,.2);box-shadow:0 16px 40px #0000009e;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.flow-tip-title{font-size:12.5px;font-weight:600;margin-bottom:7px;padding-left:2px}.flow-tip-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:3px 7px;border-radius:5px;font-size:11.5px;color:var(--text-dim)}.flow-tip-row.hi{background:linear-gradient(90deg,#3a6ef08c,#3a6ef038);color:#fff}.flow-tip-row span:nth-child(2){font-variant-numeric:tabular-nums;color:var(--text)}.flow-tip-row span:last-child{color:var(--text-faint);font-size:11px}.bottom{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:26px;padding:14px 22px 18px;border-top:1px solid var(--stroke-soft);flex-shrink:0}.foot-metrics{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap}.foot-metric-value{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}.foot-metric-label{font-size:11px;color:var(--text-faint)}.breakdown-title{font-size:12px;color:var(--text-dim);margin-bottom:7px}.breakdown-value{display:flex;align-items:baseline;gap:8px;margin-bottom:9px}.breakdown-number{font-size:22px;font-weight:600;letter-spacing:-.4px;font-variant-numeric:tabular-nums}.trend{font-size:12px;font-weight:500}.trend.up{color:var(--green)}.trend.down{color:var(--red)}.seg-bar{display:flex;gap:3px;height:5px;margin-bottom:9px}.seg{border-radius:2px;min-width:3px;transition:opacity .16s}.seg:hover{opacity:.78}.legend{display:flex;gap:14px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim)}.legend-swatch{width:3px;height:11px;border-radius:2px;flex-shrink:0}.legend-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.endpoints{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:24px}.endpoint{display:flex;align-items:center;gap:9px}.endpoint-marker{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--text-faint);flex-shrink:0}.endpoint-value{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}.endpoint-label{font-size:11.5px;color:var(--text-faint)}.view{flex:1;min-height:0;overflow-y:auto;padding:4px 22px 22px}.card{background:var(--bg-inset);border:1px solid var(--stroke);border-radius:var(--radius-md);padding:16px;margin-bottom:14px}.card-title{font-size:14px;font-weight:600;margin:0 0 3px}.card-sub{font-size:12px;color:var(--text-faint);margin:0 0 14px}table{width:100%;border-collapse:collapse;font-size:12.5px}th{text-align:left;font-weight:500;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--text-faint);padding:8px 10px;border-bottom:1px solid var(--stroke);white-space:nowrap}td{padding:9px 10px;border-bottom:1px solid var(--stroke-soft);color:var(--text-dim);vertical-align:middle}tbody tr:hover td{background:#8ca0ff0a}td.strong{color:var(--text)}.mono{font-family:var(--mono);font-size:11.5px}.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:500;white-space:nowrap}.badge:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}.badge.delivered{background:#35d6a421;color:var(--green)}.badge.sent,.badge.accepted{background:#3fd0e321;color:var(--cyan)}.badge.queued{background:#6d7cff26;color:var(--indigo)}.badge.send_error,.badge.delivery_error,.badge.expired,.badge.cancelled{background:#ff4d6d21;color:var(--red)}.btn{padding:8px 15px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;border:1px solid var(--stroke);color:var(--text-dim);transition:background .16s,color .16s,border-color .16s}.btn:hover:not(:disabled){background:#8ca0ff17;color:var(--text)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:linear-gradient(135deg,#2b6ef0,#4f8ff8);color:#fff;border-color:transparent;box-shadow:0 3px 14px #2b6ef057}.btn.primary:hover:not(:disabled){filter:brightness(1.1);color:#fff}.btn.danger{color:var(--red);border-color:#ff4d6d47}.btn.danger:hover:not(:disabled){background:#ff4d6d1c}.btn.sm{padding:5px 11px;font-size:12px}.field{margin-bottom:13px}.field label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:5px}.input{width:100%;padding:9px 12px;border-radius:var(--radius-sm);background:#04071899;border:1px solid var(--stroke);color:var(--text);outline:none;transition:border-color .16s,box-shadow .16s}.input:focus{border-color:#3fd0e373;box-shadow:0 0 0 3px #3fd0e31a}.input::placeholder{color:var(--text-faint)}textarea.input{resize:vertical;min-height:78px;font-family:inherit}.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}.notice{padding:11px 13px;border-radius:var(--radius-sm);font-size:12.5px;margin-bottom:13px;border:1px solid;line-height:1.5}.notice.warn{background:#ffa23e17;border-color:#ffa23e47;color:#ffc98a}.notice.error{background:#ff4d6d17;border-color:#ff4d6d47;color:#ff96a8}.notice.ok{background:#35d6a417;border-color:#35d6a447;color:#7ce8c4}.notice.info{background:#6d7cff17;border-color:#6d7cff42;color:#a9b4ff}.alert-row{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:12.5px;color:var(--text-dim);border-bottom:1px solid var(--stroke-soft)}.alert-row:last-child{border-bottom:none}.alert-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.login-wrap{position:relative;z-index:1;height:100vh;display:grid;place-items:center;padding:20px}.login-card{width:100%;max-width:372px;padding:30px;border-radius:var(--radius-lg);background:linear-gradient(165deg,#0e153ce6,#060a1ef2);border:1px solid var(--stroke);box-shadow:0 26px 76px #0000009e;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.login-logo{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--indigo));color:#041028;font-weight:800;font-size:16px;margin-bottom:17px;box-shadow:0 0 26px #3fd0e361}.login-title{font-size:20px;font-weight:600;margin:0 0 5px;letter-spacing:-.2px}.login-sub{font-size:12.5px;color:var(--text-faint);margin:0 0 22px}.empty{text-align:center;padding:44px 20px;color:var(--text-faint);font-size:13px}.spinner{width:15px;height:15px;border:2px solid rgba(140,160,255,.22);border-top-color:var(--cyan);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.pulse{animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.45}50%{opacity:1}}.flow-dash{stroke-dasharray:4 5;animation:dash 22s linear infinite}@keyframes dash{to{stroke-dashoffset:-180}}.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.token-box{font-family:var(--mono);font-size:11.5px;padding:11px;border-radius:var(--radius-sm);background:#040718bf;border:1px solid rgba(63,208,227,.28);word-break:break-all;color:var(--cyan);margin:9px 0;line-height:1.6}@media(max-width:1080px){.canvas{grid-template-columns:1fr}.side-metrics{flex-direction:row;justify-content:space-around;padding-bottom:0;flex-wrap:wrap;gap:16px}.endpoints{display:none}.bottom{grid-template-columns:1fr;gap:16px}}@media(max-width:720px){body{overflow:auto}.shell{flex-direction:column;height:auto;min-height:100vh;padding:10px}.rail{flex-direction:row;width:100%;padding:8px 12px}.rail-spacer{flex:1}.panel-head{flex-direction:column;align-items:flex-start;gap:10px}.flow-svg-holder{min-height:380px}.user-name{display:none}}