/* Noon Capital host clone. Tokens transcribed from the live :root probe, 2026-08-19. */

@font-face{font-family:"SuisseIntl";src:url("assets/fonts/suisse-intl-book.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"SuisseIntl";src:url("assets/fonts/suisse-intl-medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"SuisseIntl";src:url("assets/fonts/suisse-intl.otf") format("opentype");font-weight:600;font-display:swap}
@font-face{font-family:"Louize";src:url("assets/fonts/louize.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Denton";src:url("assets/fonts/denton-test.otf") format("opentype");font-weight:400;font-display:swap}

:root{
  --page-bg:#0e0e10; --surface-canvas:#0c0a09;
  --sidebar-bg:#0e0e10; --sidebar-border:#3a3b4a; --sidebar-menu:#9899aa; --sidebar-menu-hover:#f9f9fa;
  --sidebar-seperator:#3a3b4a; --sidebar-socials-fill:#9899aa;
  --card-bg:#212128; --card-border:#4a4c5e;
  --modal-bg:#212128; --modal-border:#2c2d37; --modal-overlay:#000000b2;
  --modal-title:#f9f9fa; --modal-close-icon:#78716c;
  --account-drawer-bg:#212128; --account-drawer-border:#3a3b4a;
  --selected-net-bg:#2c2d37;
  --page-header-border:#4a4c5e;

  --gp-50:#f9f9fa; --gp-100:#f4f4f5; --gp-200:#e3e3e8; --gp-300:#d6d6dc; --gp-400:#9899aa;
  --gp-500:#6a6b7b; --gp-600:#4a4c5e; --gp-700:#3a3b4a; --gp-800:#2c2d37; --gp-900:#212128; --gp-950:#0e0e10;
  --gs-50:#fafaf9; --gs-100:#f5f5f4; --gs-200:#e7e5e4; --gs-300:#d6d3d1; --gs-400:#a8a29e;
  --gs-500:#78716c; --gs-600:#57534e; --gs-700:#44403c; --gs-800:#312d2c; --gs-900:#1c1917; --gs-950:#0c0a09;

  --primary-200:#e0eaff; --primary-400:#a4bcfd; --primary-500:#8098f9; --primary-600:#6c77e9;
  --primary-700:#565dd5; --primary-900:#46488d; --primary-950:#3f4270;

  --text-primary:#fafaf9; --text-body:#78716c; --text-label:#a8a29e; --text-label-2:#78716c;
  --btn-primary:#6c77e9; --btn-primary-hover:#565dd5;
  --btn-primary-disabled:#46488d; --text-btn-primary-disabled:#6c77e9;
  --secondary-btn-bg:#2c2d37; --secondary-btn-border:#3a3b4a; --secondary-btn-text:#9899aa;

  --input-bg:#212128; --input-border:#3a3b4a; --input-label:#9899aa; --input-value:#6a6b7b;
  --input-preset-bg:#2c2d37; --input-preset-border:#4a4c5e; --input-preset-text:#e3e3e8;

  --stepper-bg:#0e0e10; --stepper-border:#4a4c5e; --stepper-title:#f9f9fa; --stepper-desc:#9899aa;
  --stepper-icon-bg:#2c2d37; --stepper-icon-border:#4a4c5e; --stepper-icon-text:#d6d6dc;
  --stepper-active-bg:#6c77e9;

  --net-trigger-bg:#2c2d37; --net-trigger-border:#4a4c5e; --net-trigger-icon:#d6d6dc;
  --selected-net-border:#565dd5;

  --green-200:#d1fae5; --green-400:#6ce9aa; --green-500:#32d583; --green-600:#12b765; --green-950:#054f2a;
  --yellow-500:#fdd122; --yellow-600:#f7c809; --yellow-950:#534409;
  --red-500:#f97066; --red-600:#f04438;
  --orange-400:#feb273; --orange-600:#ff4e0e;

  --radius-md:.375rem; --radius-lg:.5rem; --radius-xl:.75rem;
  --sidebar-w:288px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{
  background:var(--surface-canvas); color:#fff;
  font-family:"SuisseIntl",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.5;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.serif{font-family:"Louize",Georgia,"Times New Roman",serif;font-weight:400}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100vh}

.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
}
.sb-brand{padding:26px 24px 22px;color:var(--gp-50);display:block}
.sb-brand svg{display:block}
.sb-nav{padding:0 12px;display:flex;flex-direction:column;gap:2px}
.sb-item{
  display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--radius-md);
  color:var(--sidebar-menu);font-size:14px;font-weight:400;width:100%;text-align:left;
}
.sb-item:hover{color:var(--sidebar-menu-hover)}
.sb-item.is-active{color:var(--gp-50)}
.sb-item .ic{width:20px;height:20px;flex:0 0 20px;opacity:.9}
.sb-item .chev{margin-left:auto;width:16px;height:16px;transition:transform .3s}
.sb-item[data-open="true"] .chev{transform:rotate(180deg)}
.sb-sub{display:none;flex-direction:column;gap:2px;padding:2px 0 2px 44px}
.sb-sub.is-open{display:flex}
.sb-sub a{padding:7px 12px;border-radius:var(--radius-md);color:var(--sidebar-menu);font-size:13.5px}
.sb-sub a:hover{color:var(--sidebar-menu-hover)}
.sb-sub a.is-active{color:var(--gp-50)}

.sb-foot{margin-top:auto;padding:16px}
.sb-card{
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);
  overflow:hidden;
}
.sb-tabs{display:grid;grid-template-columns:repeat(3,1fr)}
.sb-tab{padding:9px 6px;text-align:left;border-right:1px solid var(--card-border)}
.sb-tab:last-child{border-right:0}
.sb-tab .k{display:block;font-size:9.5px;letter-spacing:.06em;color:var(--gp-400);text-transform:uppercase}
.sb-tab .v{display:block;font-size:13px;color:var(--gp-500);margin-top:3px}
.sb-tab.is-active{background:var(--gp-700)}
.sb-tab.is-active .v{color:var(--gp-50)}
.sb-chart{height:96px;position:relative;overflow:hidden}
.sb-chart svg{display:block;width:100%;height:100%}
.sb-chart .dates{
  position:absolute;left:8px;right:8px;bottom:5px;display:flex;justify-content:space-between;
  font-size:8.5px;color:var(--gp-400);letter-spacing:.04em;
}
.sb-donut{display:flex;gap:12px;padding:14px 12px;align-items:center}
.sb-legend{display:flex;flex-direction:column;gap:5px}
.sb-legend div{display:flex;align-items:center;gap:6px;font-size:8.5px;letter-spacing:.05em;color:var(--gp-300)}
.sb-legend i{width:7px;height:7px;border-radius:2px;display:block}
.lg-pc{background:var(--yellow-500)} .lg-ust{background:var(--green-500)}
.lg-dl{background:var(--primary-500)} .lg-clo{background:var(--orange-400)} .lg-und{background:var(--gp-500)}
.sb-donut-cap{font-size:8.5px;letter-spacing:.05em;color:var(--gp-400);padding:0 12px 12px;text-transform:uppercase;line-height:1.4}
.sb-socials{display:flex;flex-wrap:wrap;gap:14px;padding:16px 4px 10px}
.sb-socials a{color:var(--sidebar-socials-fill);display:block}
.sb-socials a:hover{color:var(--gp-50)}
.sb-copy{font-size:10px;color:var(--gp-500);padding:0 4px 14px}

/* ---------- main ---------- */
.main{flex:1;min-width:0;background:var(--page-bg);display:flex;flex-direction:column}
.topbar{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:14px 28px 0}
.net-pill{
  display:flex;align-items:center;gap:6px;background:var(--net-trigger-bg);
  border:1px solid var(--net-trigger-border);border-radius:var(--radius-md);padding:6px 8px;
  color:var(--net-trigger-icon);
}
.net-pill .chev{width:14px;height:14px}
.btn-connect{
  display:flex;align-items:center;gap:7px;background:var(--btn-primary);color:var(--gs-50);
  border-radius:var(--radius-md);padding:8px 13px;font-size:13.5px;font-weight:500;
}
.btn-connect:hover{background:var(--btn-primary-hover)}

.hero{position:relative;padding:8px 28px 30px;overflow:hidden}
.hero-art{position:absolute;top:-96px;right:120px;width:340px;height:340px;pointer-events:none;opacity:.95}
.hero-art svg{width:100%;height:100%;display:block}
.page-title{font-size:40px;line-height:1.1;color:var(--text-primary);letter-spacing:-.01em}
.page-sub{color:var(--gp-400);font-size:13.5px;max-width:430px;margin-top:8px;line-height:1.5}

.tabs{display:inline-flex;gap:4px;margin-top:20px;position:relative;z-index:2}
.tab{padding:6px 15px;border-radius:var(--radius-md);color:var(--gs-500);font-size:13.5px}
.tab.is-active{background:var(--gs-50);color:var(--gs-900);font-weight:500}

.rule{border-top:1px solid var(--page-header-border)}

/* ---------- stepper ---------- */
.stepper{display:grid;grid-template-columns:repeat(3,1fr);background:var(--stepper-bg);
  border-top:1px solid var(--stepper-border);border-bottom:1px solid var(--stepper-border)}
.step{display:flex;gap:11px;padding:16px 26px;align-items:flex-start}
.step .n{
  width:22px;height:22px;flex:0 0 22px;border-radius:var(--radius-md);
  background:var(--stepper-icon-bg);border:1px solid var(--stepper-icon-border);
  color:var(--stepper-icon-text);font-size:11px;display:flex;align-items:center;justify-content:center;
}
.step.is-active .n{background:var(--stepper-active-bg);border-color:var(--stepper-active-bg);color:#fff}
.step .t{font-size:13px;color:var(--stepper-title);font-weight:500}
.step .d{font-size:12px;color:var(--stepper-desc);margin-top:3px;line-height:1.45}

/* ---------- action card (buy / mint / stake / bridge) ---------- */
.card-wrap{display:flex;justify-content:center;padding:34px 28px 60px}
.acard{width:610px;max-width:100%;background:var(--card-bg);border:1px solid var(--modal-border);
  border-radius:var(--radius-lg);padding:18px}
.arow{background:var(--gs-950);border:1px solid var(--input-border);border-radius:var(--radius-md);padding:13px 14px}
.arow + .arow{margin-top:10px}
.arow-head{display:flex;justify-content:space-between;align-items:center}
.arow-head .lbl{font-size:10.5px;letter-spacing:.09em;color:var(--input-label);text-transform:uppercase}
.arow-head .bal{font-size:11.5px;color:var(--gp-500)}
.arow-body{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:9px}
.amt{font-size:26px;color:var(--gp-500);font-weight:400;line-height:1.1}
.usd{font-size:11.5px;color:var(--input-value);margin-top:5px}
.arow-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.cur{
  display:flex;align-items:center;gap:7px;background:var(--input-bg);
  border:1px solid var(--input-border);border-radius:var(--radius-md);padding:6px 9px;font-size:13.5px;
  color:var(--gp-100);
}
.cur .tk{width:18px;height:18px;border-radius:50%;display:block;background-size:cover;background-position:center}
.cur .chev{width:14px;height:14px;color:var(--gp-400)}
.presets{display:flex;gap:6px}
.preset{background:var(--input-preset-bg);border:1px solid var(--input-preset-border);
  border-radius:var(--radius-md);padding:3px 9px;font-size:10.5px;letter-spacing:.05em;color:var(--input-preset-text)}

.callout{
  display:flex;gap:10px;background:var(--gs-950);border:1px solid var(--input-border);
  border-radius:var(--radius-md);padding:13px 14px;margin-top:10px;
}
.callout .ci{width:16px;height:16px;flex:0 0 16px;color:var(--gp-400);margin-top:1px}
.callout .ct{font-size:12.5px;color:var(--text-primary);font-weight:500}
.callout .cb{font-size:12px;color:var(--gp-500);margin-top:6px;line-height:1.5}
.callout .cb + .cb{margin-top:8px}
.callout a{color:var(--primary-500)}

.detail{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.drow{display:flex;justify-content:space-between;align-items:center;font-size:12.5px}
.drow .dl{display:flex;align-items:center;gap:7px;color:var(--gp-500)}
.drow .dl .tk{width:14px;height:14px;border-radius:50%;background-size:cover}
.drow .dv{display:flex;align-items:center;gap:6px;color:var(--gp-200)}
.drow .dv .tk{width:14px;height:14px;border-radius:50%;background-size:cover}
.cta{
  width:100%;margin-top:16px;background:var(--btn-primary);color:var(--gs-50);
  border-radius:var(--radius-md);padding:12px;font-size:14px;font-weight:500;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.cta:hover{background:var(--btn-primary-hover)}

.holdings{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--modal-border);
  border:1px solid var(--modal-border);border-radius:var(--radius-lg);margin-top:14px;overflow:hidden}
.holdings div{background:var(--card-bg);padding:14px 16px}
.holdings .k{font-size:10px;letter-spacing:.09em;color:var(--gp-400);text-transform:uppercase}
.holdings .v{font-size:17px;color:var(--text-primary);margin-top:6px}

/* ---------- bridge extras ---------- */
.netbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.netsel{
  background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-md);
  padding:10px 13px;display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.netsel .k{font-size:10px;letter-spacing:.09em;color:var(--gp-400);text-transform:uppercase}
.netsel .v{font-size:14px;color:var(--gp-50);margin-top:2px;display:flex;align-items:center;gap:7px}
.netsel .v .tk{width:18px;height:18px;border-radius:50%;background-size:cover}
.netsel .muted{font-size:14px;color:var(--gp-300)}
.netsel .chev{width:16px;height:16px;color:var(--gs-500)}
.setaddr{
  display:inline-flex;align-items:center;gap:6px;background:var(--input-preset-bg);
  border:1px solid var(--input-preset-border);border-radius:var(--radius-md);
  padding:3px 8px;font-size:10px;letter-spacing:.06em;color:var(--input-preset-text);
}

/* ---------- dashboard ---------- */
.dash{padding:0 28px 60px}
.greet{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:6px 0 26px}
.greet-l{display:flex;align-items:center;gap:16px}
.avatar{width:56px;height:56px;border-radius:var(--radius-md);object-fit:cover;display:block;
  background:linear-gradient(135deg,#6c77e9,#ff4e0e)}
.greet h1{font-size:34px;color:var(--text-primary);line-height:1.15}
.greet .addr{display:flex;align-items:center;gap:5px;color:var(--gp-500);font-size:12.5px;margin-top:5px}
.greet-r{text-align:right}
.greet-r .big{font-size:34px;color:var(--text-primary);line-height:1.1}
.greet-r .cap{font-size:10px;letter-spacing:.09em;color:var(--gp-400);text-transform:uppercase;margin-top:6px}

.promo{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:linear-gradient(90deg,#20214a 0%,#1a1b34 42%,#141428 100%);
  border-radius:var(--radius-lg);padding:26px 28px;overflow:hidden;
}
.promo h2{font-size:25px;color:var(--text-primary);line-height:1.2;max-width:330px}
.promo p{font-size:13px;color:var(--gp-300);margin-top:9px;max-width:330px;line-height:1.5}
.promo .pass{
  width:190px;height:118px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(150deg,#8f9bff 0%,#5b64d8 55%,#3f4270 100%);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
  transform:rotate(-7deg);box-shadow:0 14px 34px #0006;
}
.promo .pass b{font-size:19px;letter-spacing:.02em;color:#fff}
.promo .pass span{font-size:8px;letter-spacing:.34em;color:#dfe3ff}
.promo .btn-connect{position:relative;z-index:2}

.sect{border-top:1px solid var(--gs-800);display:grid;grid-template-columns:210px 1fr;gap:20px;padding:26px 0}
.sect h3{font-size:22px;color:var(--text-primary);line-height:1.2}
.sect-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.mcol .k{font-size:11.5px;color:var(--gp-400);line-height:1.4}
.mcol .v{font-size:26px;color:var(--text-primary);margin-top:7px;line-height:1.1}
.mcol .v.sm{font-size:19px}
.mcol .sub{font-size:11.5px;color:var(--gp-400);margin-top:7px;display:flex;align-items:center;gap:6px}
.mcol .sub .tk{width:13px;height:13px;border-radius:50%;background-size:cover}
.mcol .caret{margin-top:10px;width:26px;height:22px;border:1px solid var(--card-border);
  border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--gp-400)}

.panels{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--gs-800);padding-top:26px}
.panel{background:var(--card-bg);border:1px solid var(--modal-border);border-radius:var(--radius-lg);padding:16px 18px}
.panel-h{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.08em;
  color:var(--gp-400);text-transform:uppercase}
.panel-h .tk{width:15px;height:15px;border-radius:50%;background-size:cover}
.panel .big{font-size:27px;color:var(--text-primary);margin-top:12px}
.panel .chart{height:150px;margin-top:12px}
.panel .chart svg{width:100%;height:100%;display:block}
.tx-empty{border-top:1px solid var(--gs-800);margin-top:26px;padding-top:22px}
.tx-empty .h{font-size:11px;letter-spacing:.08em;color:var(--gp-400);text-transform:uppercase}
.tx-empty .b{color:var(--gp-500);font-size:13px;margin-top:26px;text-align:center;padding-bottom:26px}
.dash-cta{display:flex;gap:12px;justify-content:center;padding-top:8px}
.btn-ghost{background:var(--secondary-btn-bg);border:1px solid var(--secondary-btn-border);
  color:var(--gp-100);border-radius:var(--radius-md);padding:10px 20px;font-size:13.5px}
.btn-solid{background:var(--btn-primary);color:var(--gs-50);border-radius:var(--radius-md);
  padding:10px 20px;font-size:13.5px;font-weight:500}
.btn-solid:hover{background:var(--btn-primary-hover)}

/* ---------- vaults ---------- */
.vhold{display:grid;grid-template-columns:1.35fr 1fr 1fr;background:var(--card-bg);
  border:1px solid var(--modal-border);border-radius:var(--radius-lg);overflow:hidden;margin:0 28px}
.vhold > div{padding:20px 22px;border-right:1px solid var(--modal-border)}
.vhold > div:last-child{border-right:0}
.vhold h3{font-size:21px;color:var(--text-primary);line-height:1.25}
.vhold .addr{display:flex;align-items:center;gap:6px;color:var(--gp-500);font-size:12px;margin-top:22px}
.vhold .k{font-size:12px;color:var(--gp-400);display:flex;align-items:center;gap:6px}
.vhold .v{font-size:25px;color:var(--text-primary);margin-top:10px}

.vtable{margin:0 28px;border:1px solid var(--modal-border);border-top:0;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);overflow:hidden}
.vtable table{width:100%;border-collapse:collapse}
.vtable th{
  font-size:10px;letter-spacing:.09em;color:var(--gp-400);text-transform:uppercase;
  text-align:left;padding:11px 14px;font-weight:400;background:var(--gs-950);
}
.vtable th.right,.vtable td.right{text-align:right}
.vtable td{padding:14px;border-top:1px solid var(--modal-border);font-size:13px;color:var(--gp-200);vertical-align:middle}
.vtable .vname{color:var(--text-primary);max-width:190px;line-height:1.35}
.vtable .asset{display:flex;align-items:center;gap:8px}
.vtable .tk{width:20px;height:20px;border-radius:50%;background-size:cover;display:block}
.vtable .tk.sq{border-radius:5px}
.vtable .hold .a{color:var(--gp-100);display:flex;align-items:center;gap:7px}
.vtable .hold .b{color:var(--gp-500);font-size:11.5px;margin-top:4px}
.btn-manage{
  display:inline-flex;align-items:center;gap:6px;background:var(--btn-primary);color:var(--gs-50);
  border-radius:var(--radius-md);padding:8px 14px;font-size:12.5px;font-weight:500;
}
.btn-manage:hover{background:var(--btn-primary-hover)}
.btn-manage .ext{width:13px;height:13px}

.vcards{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px 28px 60px}
.vcard{background:var(--card-bg);border:1px solid var(--modal-border);border-radius:var(--radius-lg);
  padding:18px;position:relative;overflow:hidden}
.vcard .cur-by{font-size:11px;color:var(--gp-400);display:flex;align-items:center;gap:7px}
.vcard h4{font-size:17px;color:var(--text-primary);margin-top:12px;display:flex;align-items:center;gap:7px}
.vcard .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-top:16px}
.vcard .grid .k{font-size:11.5px;color:var(--gp-400)}
.vcard .grid .v{font-size:13.5px;color:var(--gp-100);margin-top:4px;display:flex;align-items:center;gap:6px}
.vcard .tk{width:15px;height:15px;border-radius:50%;background-size:cover;display:block}
.vcard .cta{margin-top:18px}
.vcard-art{position:absolute;right:-30px;bottom:-40px;width:150px;height:150px;opacity:.22;pointer-events:none}

/* token + chain marks */
.tk-usdc{background-image:url("assets/usdc.png")}
.tk-eth{background-image:url("assets/eth.png")}
.tk-wbtc{background-image:url("assets/wbtc.png")}
.tk-cbtc{background-image:url("assets/cbtc.png")}
.tk-ethereum{background-image:url("assets/ethereum.png")}
.tk-base{background-image:url("assets/base.png")}
.tk-citrea{background-image:url("assets/citrea.png")}
.tk-arbitrum{background-image:url("assets/arbitrum.png")}
.tk-usn{background:linear-gradient(135deg,#7b86f2,#4a4bb8)}
.tk-susn{background:linear-gradient(135deg,#f5c36b,#c07d1e)}
.tk-noon{background:linear-gradient(135deg,#9ba0c9,#4a4c5e)}
.tk-usdt{background:linear-gradient(135deg,#3ec9a7,#158e6f)}
.tk-tbtc{background:linear-gradient(135deg,#2b2f6e,#14162f)}
.tk-wcbtc{background:linear-gradient(135deg,#ff9d3c,#d05a10)}
.tk-monad{background:linear-gradient(135deg,#8b6bf0,#4c2fa8)}
.tk-starknet{background:linear-gradient(135deg,#4b4bd8,#20205c)}
.tk-accountable{background:linear-gradient(135deg,#5b64d8,#2a2c60)}
.tk-vesu{background:linear-gradient(135deg,#f0a24b,#a85f14)}
.net-tk{width:16px;height:16px;border-radius:50%;background-size:cover;background-position:center;display:block}
.sect-cols.two{grid-template-columns:1fr 1fr}

/* global icon sizing: bare inline SVGs otherwise expand to their container */
svg{flex:0 0 auto}
.ic{width:20px;height:20px}
.chev{width:16px;height:16px}
.ext{width:13px;height:13px}
.ci{width:16px;height:16px}
.vhold .k .ci{width:13px;height:13px;color:var(--gs-500)}
.greet .addr .ext{width:12px;height:12px}
.dash{position:relative}
.dash-art{position:absolute;top:-58px;right:150px;width:330px;height:330px;pointer-events:none;z-index:0}
.dash-art svg{width:100%;height:100%;display:block}
.greet,.promo,.sect,.panels,.tx-empty{position:relative;z-index:1}
.art-mark{color:#6f74b8;opacity:.55}
.dash-art{right:260px;top:-66px;width:340px;height:340px}
.hero-art{right:200px;top:-104px}

/* ============ account overlay (phase 2) ============ */
.acct-wrap{position:relative}
.acct-pill{
  display:flex;align-items:center;gap:7px;background:var(--net-trigger-bg);
  border:1px solid var(--net-trigger-border);border-radius:var(--radius-md);
  padding:7px 11px;font-size:13.5px;color:var(--gp-100);
}
.acct-pill:hover{border-color:var(--selected-net-border)}
.acct-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green-500);display:block;
  box-shadow:0 0 0 3px #32d5832e}
.acct-pill .sep{color:var(--gp-500)}
.acct-pill .acct-total{color:var(--gp-50);font-weight:500}
.acct-pill .chev{width:14px;height:14px;color:var(--gp-400)}

.acct-panel{
  position:absolute;top:calc(100% + 8px);right:0;width:372px;z-index:60;
  background:var(--account-drawer-bg);border:1px solid var(--account-drawer-border);
  border-radius:var(--radius-lg);box-shadow:0 24px 60px #000a;overflow:hidden;
}
.ap-head{padding:16px 18px 14px;border-bottom:1px solid var(--account-drawer-border)}
.ap-name{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gp-50);font-weight:500}
.ap-badge{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--green-400);
  background:var(--green-950);border:1px solid var(--green-600);border-radius:20px;padding:2px 7px}
.ap-total{font-family:"Louize",Georgia,serif;font-size:30px;color:var(--gp-50);margin-top:10px;line-height:1.1}
.ap-break{font-size:11.5px;color:var(--gp-400);margin-top:5px}
.ap-addr{display:flex;align-items:center;gap:7px;margin-top:11px;font-size:11.5px;color:var(--gp-500)}
.ap-copy{color:var(--gp-500);display:flex}
.ap-copy:hover{color:var(--gp-50)}

.ap-sect{border-bottom:1px solid var(--account-drawer-border);padding:12px 18px}
.ap-sect-h{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gp-400);margin-bottom:9px}
.ap-list{display:flex;flex-direction:column;gap:9px;max-height:186px;overflow-y:auto}
.ap-row{display:flex;align-items:center;gap:10px}
.ap-row .tk{width:26px;height:26px;border-radius:50%;background-size:cover;background-position:center;flex:0 0 26px}
.ap-rl{min-width:0;flex:1}
.ap-rl .s{font-size:13px;color:var(--gp-50)}
.ap-rl .c{font-size:11px;color:var(--gp-500);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-rr{text-align:right}
.ap-rr .a{font-size:13px;color:var(--gp-100)}
.ap-rr .u{font-size:11px;color:var(--gp-500);margin-top:1px}
.ap-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:14px 18px}
.ap-btn{border-radius:var(--radius-md);padding:9px;font-size:13.5px;font-weight:500}
.ap-btn.primary{background:var(--btn-primary);color:var(--gs-50)}
.ap-btn.primary:hover{background:var(--btn-primary-hover)}
.ap-btn.ghost{background:var(--secondary-btn-bg);border:1px solid var(--secondary-btn-border);color:var(--gp-100)}

/* ---- modals ---- */
.mwrap{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:24px}
.mwrap[hidden]{display:none}
.mscrim{position:absolute;inset:0;background:var(--modal-overlay)}
.mbox{position:relative;width:560px;max-width:100%;max-height:90vh;overflow-y:auto;
  background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:var(--radius-lg);
  box-shadow:0 30px 80px #000b}
.mbox.narrow{width:420px}
.mhead{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px}
.mtitle{font-family:"Louize",Georgia,serif;font-size:20px;color:var(--modal-title)}
.mx{color:var(--modal-close-icon);display:flex}
.mx:hover{color:var(--gp-50)}
.acard.flush{border:0;padding:0 18px 18px;width:auto}

/* ---- source-asset picker control ---- */
.cur.picker{gap:8px}
.cur.picker .chip{font-size:10px;color:var(--gp-400);background:var(--gs-900);
  border:1px solid var(--input-border);border-radius:20px;padding:1px 7px}
.cur.picker:hover{border-color:var(--selected-net-border)}
.amt-in{
  width:190px;background:none;border:0;outline:none;color:var(--gp-50);
  font-family:inherit;font-size:26px;line-height:1.1;padding:0;
}
.amt-in::placeholder{color:var(--input-value)}

.pick-list{display:flex;flex-direction:column;padding:0 10px 14px;max-height:56vh;overflow-y:auto}
.pick-row{display:flex;align-items:center;gap:11px;padding:10px 10px;border-radius:var(--radius-md);text-align:left}
.pick-row:hover{background:var(--gs-900)}
.pick-row .tk{width:30px;height:30px;border-radius:50%;background-size:cover;background-position:center;flex:0 0 30px}
.pick-row .pl{flex:1;min-width:0}
.pick-row .pl .s{font-size:13.5px;color:var(--gp-50)}
.pick-row .pl .c{font-size:11.5px;color:var(--gp-500);margin-top:1px}
.pick-row .pr{text-align:right}
.pick-row .pr .a{font-size:13.5px;color:var(--gp-100)}
.pick-row .pr .u{font-size:11.5px;color:var(--gp-500);margin-top:1px}

/* ---- destination chain chooser ---- */
.chain-opts{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.chain-opt{display:flex;align-items:center;gap:7px;background:var(--input-bg);
  border:1px solid var(--input-border);border-radius:var(--radius-md);padding:7px 11px;
  font-size:12.5px;color:var(--gp-300)}
.chain-opt .tk{width:16px;height:16px;border-radius:50%;background-size:cover;display:block}
.chain-opt.is-on{border-color:var(--selected-net-border);background:var(--selected-net-bg);color:var(--gp-50)}
.cta.is-off{background:var(--btn-primary-disabled);color:var(--text-btn-primary-disabled);cursor:not-allowed}