:root{
  /* palette sampled from the FeatherSwap logo: forest green #1d8353 on paper #f5f6f1 */
  --bg:#eef4ea;--bg2:#e3ecdf;--card:#fafdf8;--card2:#dcebd8;--panel:#f0f7ee;--line:#cde0c7;--line2:#a9c5a2;
  --text:#10261a;--dim:#4f6656;--dim2:#6d8574;--acc:#1d8353;--acc2:#14653f;--accText:#ffffff;--deep:#14532f;--blue:#2563eb;--red:#d92d3f;--yel:#b7791f;--green:#1d8353;
  --r:16px;--r2:12px;--font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.4}
body{position:relative;min-height:100vh;background:
  radial-gradient(1000px 600px at 10% -10%, rgba(29,131,83,.26), transparent 62%),
  radial-gradient(800px 560px at 100% 4%, rgba(20,83,47,.18), transparent 60%),
  radial-gradient(760px 640px at 50% 118%, rgba(29,131,83,.30), transparent 62%),
  radial-gradient(560px 460px at 82% 60%, rgba(46,150,104,.18), transparent 60%),
  linear-gradient(180deg,#f2f8ef 0%,#e8f1e4 60%,#dfecd9 100%);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.6;
  background:radial-gradient(700px 460px at 22% 48%, rgba(29,131,83,.16), transparent 60%),radial-gradient(560px 560px at 84% 88%, rgba(20,83,47,.13), transparent 60%);
  animation:glow 14s ease-in-out infinite alternate}
@keyframes glow{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.06)}}
.top,.wrap,.foot,.modal,.toast{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
input,select{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none;color:var(--text)}
input:focus,select:focus{border-color:var(--line2)}
::placeholder{color:var(--dim2)}
[hidden]{display:none!important}

.top{display:flex;align-items:center;gap:22px;padding:14px 22px;border-bottom:1px solid rgba(20,83,47,.16);background:rgba(232,243,228,.82);backdrop-filter:blur(14px);position:sticky;top:0;z-index:20}
.brand{font-weight:800;font-size:19px;color:var(--deep);display:flex;align-items:center;gap:9px;letter-spacing:-.02em}
.logo{width:26px;height:26px;border-radius:7px;background:url("/static/logo-mark.png?v=6") center/contain no-repeat;display:inline-block}
.tabs{display:flex;gap:4px}
.tabs a{padding:8px 13px;border-radius:10px;color:var(--dim);font-weight:600}
.tabs a:hover{color:var(--deep);background:rgba(29,131,83,.09)}
.tabs a.on{color:var(--deep);background:rgba(29,131,83,.16)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.pill{padding:7px 11px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:12px;font-weight:600}
.dim{color:var(--dim)}.tiny{font-size:11px}.mono{font-family:ui-monospace,Menlo,monospace}
.btn{padding:10px 16px;border-radius:12px;background:var(--card2);font-weight:700;border:1px solid var(--line)}
.btn:hover{background:#cfe4c9}
.btn.primary{background:var(--acc);color:var(--accText);border-color:transparent}
.btn.primary:hover{background:var(--acc2)}
.btn.primary:disabled{background:var(--card2);color:var(--dim);cursor:not-allowed}
.btn.danger{background:rgba(255,90,106,.12);color:var(--red);border-color:rgba(255,90,106,.25)}
.btn.big{width:100%;padding:15px;font-size:16px;border-radius:14px;margin-top:10px}
.btn.wallet{background:var(--acc);color:var(--accText);border-color:transparent}
.btn.wallet.connected{background:var(--card2);color:var(--text);border-color:var(--line)}
.icon{width:34px;height:34px;border-radius:10px;background:var(--card2);color:var(--dim);display:inline-flex;align-items:center;justify-content:center;font-size:15px;position:relative}
.icon:hover{color:var(--text)}
.mini{padding:5px 9px;border-radius:8px;background:var(--card2);font-size:12px;font-weight:700;color:var(--acc)}

.wrap{max-width:1180px;margin:0 auto;padding:26px 18px 60px}
.view{display:none}.view.on{display:block}
.cols{display:grid;grid-template-columns:480px 1fr;gap:18px;align-items:start}
.col-main{min-width:0}.col-side{min-width:0;position:sticky;top:78px}
.card{background:rgba(250,253,247,.94);border:1px solid rgba(20,83,47,.16);border-radius:var(--r);padding:16px;margin-bottom:18px;backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(20,83,47,.11)}
.swapcard{background:linear-gradient(160deg,rgba(29,131,83,.20),rgba(255,255,255,.94) 45%,rgba(29,131,83,.13));border-color:rgba(29,131,83,.34)}
.card.wide{max-width:100%}
.cardhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px;flex-wrap:wrap}
.cardtitle{font-weight:700;font-size:15px;color:var(--deep)}
.tools{display:flex;gap:6px}
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px}
.seg button{padding:7px 12px;border-radius:9px;color:var(--dim);font-weight:600}
.seg button.on{background:#fff;color:var(--deep);box-shadow:0 1px 3px rgba(20,83,47,.14)}
.seg.small button{padding:5px 10px;font-size:12px}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:6px}
.panel:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(29,131,83,.12)}
.panelhead{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);margin-bottom:8px}
.panel .row{display:flex;align-items:center;gap:10px}
.panel .row.sub{justify-content:space-between;margin-top:6px;font-size:12px;color:var(--dim)}
.tokbtn{display:flex;align-items:center;gap:8px;padding:7px 10px 7px 7px;border-radius:12px;background:var(--card2);border:1px solid var(--line);font-weight:700;white-space:nowrap;flex:0 0 auto}
.tokbtn:hover{background:#d7e9d2}
.tokbtn .chev{color:var(--dim);font-size:11px}
.tokbtn.chain{max-width:170px}.tokbtn.chain b{overflow:hidden;text-overflow:ellipsis}
.avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#d7ead2,#b6d3ae);display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#4d5c51;overflow:hidden;flex:0 0 auto}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.lg{width:36px;height:36px;font-size:12px}
.amt{flex:1;min-width:0;background:none;border:0;text-align:right;font-size:26px;font-weight:600;padding:2px 0;letter-spacing:-.01em}
.amt[readonly]{color:var(--text)}
.bal{cursor:pointer}.bal:hover{color:var(--text)}
.quick{display:flex;gap:4px}
.quick button{padding:3px 8px;border-radius:7px;background:var(--card2);font-size:11px;font-weight:700;color:var(--dim)}
.quick button:hover{color:var(--acc)}
.flip{display:block;margin:-10px auto;width:38px;height:38px;border-radius:12px;background:var(--card2);border:3px solid var(--card);color:var(--dim);position:relative;z-index:2;font-size:16px}
.flip:hover{color:var(--acc)}
.usd{color:var(--dim)}

.warns{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.warn{padding:9px 12px;border-radius:10px;font-size:12px;border:1px solid}
.warn.low{background:rgba(37,99,235,.07);border-color:rgba(37,99,235,.24);color:#1d4ed8}
.warn.med{background:rgba(183,121,31,.09);border-color:rgba(183,121,31,.28);color:#8a5a12}
.warn.high{background:rgba(217,45,63,.07);border-color:rgba(217,45,63,.28);color:#a81f2f}

.details{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.drow{display:flex;justify-content:space-between}.drow span{color:var(--dim)}
.drow b{font-weight:600}
.good{color:var(--green)}.bad{color:var(--red)}.warnc{color:var(--yel)}

.routeviz{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.path{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px}
.pct{min-width:46px;padding:4px 7px;border-radius:8px;background:rgba(29,131,83,.11);color:var(--acc);font-weight:800;text-align:center}
.hop{display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:10px;background:var(--panel);border:1px solid var(--line)}
.hop .v{color:var(--dim);font-size:11px}
.arrow{color:var(--dim2)}
.alts{margin-top:8px;display:flex;flex-direction:column;gap:5px;font-size:12px}
.alt{display:flex;justify-content:space-between;padding:7px 10px;border-radius:10px;background:var(--panel);border:1px solid var(--line)}
.alt .dim{font-size:11px}

.chartcard{padding:12px}
.chartHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:13px}
.chart{height:300px;width:100%}
.chg.up{color:var(--green)}.chg.down{color:var(--red)}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:12.5px}
.kv span{color:var(--dim)}.kv b{font-weight:600}
.tag{display:inline-block;padding:2px 7px;border-radius:6px;background:var(--card2);color:var(--dim);font-size:10.5px;font-weight:700;text-transform:uppercase;margin-right:3px}
.tag.stock{color:#1d63a8}.tag.crypto{color:#9a6212}.tag.launch{color:#6d3fb0}.tag.tax,.tag.curve{color:var(--yel)}.tag.verified,.tag.base{color:var(--acc)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.field label{font-size:12px;color:var(--dim);font-weight:600}
.field .inp{display:flex;gap:6px;align-items:center}.field .inp input{flex:1;min-width:0}
.field .hint,.hint{font-size:11.5px;color:var(--dim2)}
.chk{display:flex;align-items:center;gap:8px;font-size:13px!important;color:var(--text)!important}
.note{font-size:12px;color:var(--dim);padding:8px 10px;background:var(--panel);border-radius:10px;border:1px solid var(--line);margin-top:8px;line-height:1.5}
.note.ok{border-color:rgba(29,131,83,.35);color:#14653f}.note.err{border-color:rgba(217,45,63,.35);color:#a81f2f}
.adv{margin:6px 0}.adv summary{cursor:pointer;color:var(--dim);font-size:12px;font-weight:600;padding:4px 0}

.orders{display:flex;flex-direction:column;gap:8px;font-size:12.5px}
.order{padding:10px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.order .h{display:flex;justify-content:space-between;font-weight:700;margin-bottom:4px}
.order .st{font-size:11px;padding:2px 7px;border-radius:6px;background:var(--card2)}
.order .st.open{color:var(--acc)}.order .st.done{color:var(--green)}.order .st.off{color:var(--dim)}
.order .m{color:var(--dim);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.order button{margin-top:6px}

.broutes{display:flex;flex-direction:column;gap:8px}
.broute{padding:11px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line);cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:12.5px}
.broute:hover{border-color:var(--line2)}.broute.sel{border-color:var(--acc)}
.broute .n{font-weight:700;font-size:13.5px}.broute .out{font-weight:700;font-size:14px;text-align:right}
.broute .m{color:var(--dim);grid-column:1/3;display:flex;gap:10px;flex-wrap:wrap}
.best{display:inline-block;padding:2px 7px;border-radius:6px;background:rgba(29,131,83,.13);color:var(--acc);font-size:10.5px;font-weight:800;margin-left:6px}

.tablewrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--deep);font-weight:700;font-size:11.5px;padding:8px 10px;border-bottom:1px solid var(--line);background:rgba(29,131,83,.07)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line)}
.tbl tr:hover td{background:rgba(29,131,83,.08)}
.tbl .tk{display:flex;align-items:center;gap:9px;font-weight:700}.tbl .tk .dim{font-weight:400;font-size:11.5px}

.modal{position:fixed;inset:0;background:rgba(20,45,30,.34);display:flex;align-items:flex-start;justify-content:center;padding:70px 16px;z-index:50;backdrop-filter:blur(3px)}
.mbox{width:100%;max-width:460px;background:var(--card);border:1px solid var(--line2);border-radius:18px;padding:16px;max-height:calc(100vh - 100px);display:flex;flex-direction:column;gap:10px}
.mbox.small{max-width:400px}
.mhead{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.search{width:100%}
.toklist{overflow-y:auto;display:flex;flex-direction:column;gap:2px;min-height:120px}
.tokrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;cursor:pointer}
.tokrow:hover{background:rgba(29,131,83,.09)}
.tokrow .nm{flex:1;min-width:0}.tokrow .nm b{display:block}.tokrow .nm>span{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:230px}
.tokrow .rt{text-align:right;font-size:12px}.tokrow .rt b{display:block}.tokrow .rt>span{color:var(--dim);font-size:11px}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--deep);color:#f2f7f3;border:1px solid var(--acc);padding:11px 16px;border-radius:12px;opacity:0;transition:.2s;z-index:99;max-width:90vw;font-size:13px}
.toast.show{opacity:1;transform:translateX(-50%)}
.foot{max-width:1180px;margin:0 auto;padding:10px 18px 30px;display:flex;justify-content:space-between;gap:12px;font-size:11.5px;color:var(--dim2);flex-wrap:wrap}
.spin{position:absolute;inset:4px;border-radius:50%;border:2px solid transparent;border-top-color:var(--acc);display:none}
.spin.on{display:block;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,var(--card2),#dde3d6,var(--card2));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:8px;height:14px}
@keyframes sk{to{background-position:-200% 0}}
@media (max-width:900px){.cols{grid-template-columns:1fr}.col-side{position:static}.tabs a{padding:8px 9px}.top{gap:10px;padding:12px}.brand span{display:none}}