/* BotFlow Exchange web app styles. Colors are theme tokens with a dark mode override. */
:root{--bg:#e9eef8;--card:#fff;--fg:#0f1530;--mut:#5d6684;--bd:#d5dcee;--ac:#2f5bff;--acfg:#fff;--in:#f1f4fb;--err:#c62828;--ok:#1b7f4b;--warn:#b26a00;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#080c1c;--card:#111832;--fg:#e8ecff;--mut:#8f9ac0;--bd:#252f57;--ac:#5c82ff;--acfg:#06102e;--in:#0b1127;--err:#ff7a7a;--ok:#5fd59a;--warn:#ffb547}}
:root[data-theme="dark"]{--bg:#080c1c;--card:#111832;--fg:#e8ecff;--mut:#8f9ac0;--bd:#252f57;--ac:#5c82ff;--acfg:#06102e;--in:#0b1127;--err:#ff7a7a;--ok:#5fd59a;--warn:#ffb547}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh;display:flex;justify-content:center;padding:20px 14px}
main{width:100%;max-width:440px}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px}
header nav{display:flex;gap:8px}
h1{font-size:1.35rem;margin:0;font-weight:700;letter-spacing:-.01em}
h2{font-size:1rem;margin:0;font-weight:700}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.pill{background:var(--card);border:1px solid var(--bd);color:var(--fg);border-radius:999px;padding:7px 13px;font-size:.85rem}
.card{background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:10px}
.box{background:var(--in);border-radius:14px;padding:14px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lbl{font-size:.8rem;color:var(--mut)}
.amt{width:100%;min-width:0;border:0;background:transparent;color:var(--fg);font:inherit;font-size:1.7rem;font-weight:500;padding:6px 0;outline-offset:4px}
.amt::placeholder{color:var(--mut)}
.tok{font-weight:700;font-size:1.05rem;background:var(--card);color:var(--fg);border:1px solid var(--bd);border-radius:999px;padding:7px 12px 7px 14px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.tok::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--mut)}
.max,.link{background:none;border:0;color:var(--ac);font-size:.8rem;font-weight:700;padding:0 0 0 6px}
.link{padding:0;font-size:.85rem}
.flip{display:block;margin:-12px auto;position:relative;z-index:1;width:38px;height:38px;border-radius:12px;border:3px solid var(--card);background:var(--ac);color:var(--acfg);font-size:1.1rem}
.go{width:100%;margin-top:10px;padding:16px;border:0;border-radius:14px;background:var(--ac);color:var(--acfg);font-size:1.05rem;font-weight:700}
.go:disabled{opacity:.45;cursor:not-allowed}
.go.danger{background:var(--err)}
.info{margin:12px 4px 0;font-size:.85rem;color:var(--mut);display:grid;gap:5px}
.info>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.info .v{color:var(--fg);text-align:right}
.v.warn{color:var(--warn)}.v.bad{color:var(--err);font-weight:700}
.slip{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.slip button{background:var(--in);border:1px solid var(--bd);color:var(--fg);border-radius:8px;padding:5px 10px;font-size:.82rem}
.slip button[aria-pressed="true"]{background:var(--ac);color:var(--acfg);border-color:var(--ac)}
.num{width:84px;padding:5px 9px;border:1px solid var(--bd);border-radius:8px;background:var(--in);color:var(--fg);font:inherit;font-size:.85rem}
#msg{margin:12px 4px 0;font-size:.88rem;min-height:1.2em;word-break:break-word}
#msg.err{color:var(--err)}#msg.ok{color:var(--ok)}
#msg a,#hist a,dialog a{color:inherit}
#msg .link{margin-left:6px}
.tools{margin:10px 4px 0;display:flex;justify-content:space-between;gap:10px}
#hist{margin-top:18px}
#hist ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
#hist li{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:10px 12px;font-size:.85rem;display:grid;gap:2px}
#hist .lbl a{color:var(--ac)}
.st{font-weight:700}.st.pending{color:var(--warn)}.st.failed{color:var(--err)}
footer{margin:18px 4px 0;font-size:.75rem;color:var(--mut);line-height:1.5}
dialog{border:1px solid var(--bd);border-radius:20px;background:var(--card);color:var(--fg);width:min(420px,calc(100% - 28px));padding:16px;max-height:82vh}
dialog::backdrop{background:rgba(5,8,20,.55)}
.x{background:var(--in);border:0;color:var(--fg);border-radius:10px;width:32px;height:32px}
.fld{margin-top:16px;display:grid;gap:8px}
.fld p{margin:0}
#pickQ{width:100%;margin:12px 0 8px;padding:11px 12px;border:1px solid var(--bd);border-radius:12px;background:var(--in);color:var(--fg);font:inherit;font-size:.92rem}
.tlist{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:46vh;overflow:auto}
.tlist li{display:flex;align-items:center;justify-content:space-between;gap:6px}
.opt{flex:1;display:flex;justify-content:space-between;align-items:center;gap:10px;background:none;border:0;color:var(--fg);padding:9px 8px;border-radius:10px;text-align:left}
button.opt:hover,.opt[aria-current="true"]{background:var(--in)}
.opt b{display:block;font-size:.98rem}
.opt small{color:var(--mut);font-size:.75rem}
.rm{background:none;border:0;color:var(--mut);font-size:.78rem;padding:4px 6px}
.rm.strong{color:var(--err);font-weight:700}
.imp{margin-top:8px;padding:12px;border:1px solid var(--warn);border-radius:12px;font-size:.82rem;display:grid;gap:8px}
.imp button{padding:10px;border:0;border-radius:10px;background:var(--ac);color:var(--acfg);font-weight:700}
h1 a{color:inherit;text-decoration:none}
.net{display:inline-block;vertical-align:middle;margin-left:6px;font-size:.7rem;font-weight:700;letter-spacing:.01em;padding:3px 8px;border-radius:999px;background:#fff4d6;color:#7a5200;border:1px solid #f0d58a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .net{background:#3a2c08;color:#ffd77a;border-color:#6b5414}}
footer a{color:inherit}
header h1{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:1.25rem}
header .net{margin-left:0}
.pill{white-space:nowrap}
@media (max-width:420px){header h1{font-size:1.08rem}header .net{font-size:.62rem;padding:2px 6px}}
/* Loading and progress states */
.spin{display:inline-block;width:1em;height:1em;flex:none;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:rot .7s linear infinite;vertical-align:-.15em;margin-right:.5em}
@keyframes rot{to{transform:rotate(360deg)}}
.go{display:flex;align-items:center;justify-content:center}
button:disabled{cursor:not-allowed}
input:disabled{opacity:.6}
.v.skel{display:inline-block;min-width:96px;height:.85em;border-radius:6px;background:linear-gradient(90deg,var(--bd) 25%,var(--in) 50%,var(--bd) 75%);background-size:200% 100%;animation:shim 1.1s linear infinite;vertical-align:baseline}
@keyframes shim{to{background-position:-200% 0}}
.skelrow{height:54px;border-radius:12px;background:linear-gradient(90deg,var(--bd) 25%,var(--in) 50%,var(--bd) 75%);background-size:200% 100%;animation:shim 1.1s linear infinite;list-style:none}
#steps{list-style:none;margin:12px 4px 0;padding:0;display:grid;gap:6px}
#steps li{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--mut)}
#steps .dot{width:22px;height:22px;flex:none;border-radius:50%;border:1px solid var(--bd);background:var(--card);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700}
#steps li.step-active{color:var(--fg)}
#steps li.step-active .dot{border-color:var(--ac);color:var(--ac);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 25%,transparent)}}
#steps li.step-done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
#steps li.step-failed{color:var(--err)}
#steps li.step-failed .dot{background:var(--err);border-color:var(--err);color:#fff}
#msg.err,#msg.ok{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:10px 12px}
#msg.err{border-color:var(--err)}
#msg.ok{border-color:var(--ok)}