/* flow-ui.css — reusable LSP flow design system.
   Design tokens (:root), base resets, and the shared page chrome (top bar / brand / tabs / connection
   chip / avatar) used across the LSP static flow pages. Extracted from the swap page so this foundation
   is shared rather than duplicated; the channel-order page can adopt it next. Loaded BEFORE page-specific
   CSS so tokens resolve and page rules win on source order. */

:root{
  --bg:#F5F6FA; --bg-2:#EEF0F7; --panel:#FFFFFF; --panel-2:#FAFBFD;
  --line:#E5E7F4; --line-2:#CED3E8; --line-3:#B8BFDB;
  --ink:#0E1530; --ink-2:#1E2548; --ink-dim:#4B5573; --ink-mute:#8690AB;
  --accent:#4F46E5; --accent-2:#6D66EC; --accent-soft:#EEEDFC; --accent-tint:#F5F4FE;
  --liquid:#119DA4; --liquid-2:#14B8B0; --liquid-soft:#DEF5F4; --liquid-tint:#EDFAF9;
  --asset:#D97706; --asset-soft:#FEF3C7;
  --ok:#10B981; --ok-soft:#D1FAE5;
  --warn:#D97706; --warn-soft:#FEF3C7;
  --err:#DC2626;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --sans:'Inter',system-ui,sans-serif;
  --ring:0 0 0 3px rgba(79,70,229,.12); /* shared accent focus ring — rgb(79,70,229) == --accent */
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

/* Reusable input shell: a bordered box wrapping a borderless <input> plus an optional addon
   (a unit, icon, or button). Page CSS sizes the input inside; the hover + focus-within ring live
   here so any flow field gets them for free. Distinct from the order flow's layout-only .field. */
.input-box{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--line-2);border-radius:10px;background:var(--panel);transition:.15s}
.input-box:hover{border-color:var(--line-3)}
.input-box:focus-within{border-color:var(--accent);box-shadow:var(--ring)}

.shell{min-height:100vh;display:grid;grid-template-rows:auto 1fr}

/* top */
.top{display:flex;align-items:center;gap:18px;padding:14px 28px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.85);backdrop-filter:blur(10px);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.01em}
.brand .mark{width:28px;height:28px;border-radius:8px;background:var(--ink);display:grid;place-items:center;color:#fff}
.brand b{color:var(--ink)}
.brand .sep{color:var(--ink-mute);font-weight:400;margin:0 4px}
.brand span.sub{color:var(--accent);font-weight:500;font-size:13px}
.tabs{display:flex;gap:4px;margin-left:8px}
.tabs a{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-mute);padding:7px 12px;border-radius:8px}
.tabs a:hover{color:var(--ink);background:var(--bg-2)}
.tabs a.on{color:var(--accent);background:var(--accent-soft);font-weight:500}
.spacer{flex:1}
.chip-conn{display:flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;font-family:var(--mono);font-size:12px;color:var(--ink-dim)}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--liquid));color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:600}