/* MASKHOOD — /app + /verify ("Midnight heist"). Own tokens and components (bx-*), independent of the home page styles.
   Night indigo + moon cream + loot gold (primary) + aurora violet. Price green/red only for numbers (.bx-up / .bx-down).
   Fonts come from base.css (:root --sans / --mono, optional --display). Static CSS sky: no canvas, no backdrop-filter. */
.bx {
  --n0: #07060F; --n1: #0E0B1E; --n2: #171330; --n3: #1F1940; --n4: #2A2252; --nin: #110D24;
  --line: rgba(183, 148, 255, .11); --line2: rgba(183, 148, 255, .2); --line3: rgba(183, 148, 255, .32);
  --t0: #F5F0FF; --t1: rgba(245, 240, 255, .8); --t2: #A39EC0; --t3: rgba(163, 158, 192, .62);
  --moon: #FFF3DC; --cream: #F4EBDD;
  --gold: #FFB547; --gold-hi: #FFD27A; --gold-deep: #E08A00; --gold-ink: #2A1700;
  --vio: #8B5CF6; --vio-hi: #B794FF; --mag: #FF5FA2;
  --fur: #8A8FA3; --fur2: #4A4E5E;
  --up: #34D399; --down: #F87171;
  --ok: #C9B4FF; --warn: #FFA05C; --bad: #FF8098;
  --r: 20px; --r2: 14px; --r3: 10px;
  --disp: var(--display, var(--font-display, var(--sans, ui-sans-serif, system-ui, sans-serif)));
  --ease: cubic-bezier(.19, 1, .22, 1);
  --city: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 220' preserveAspectRatio='xMidYMax slice'%3E%3Cpath fill='%230F0C20' d='M0 220V165h50V220zM53 220V175h33V220zM92 220V172h64V220zM158 220V120h33V220zM192 220V173h32V220zM227 220V176h56V220zM284 220V114h35V220zM322 220V112h33V220zM355 220V104h44V220zM404 220V111h33V220zM441 220V178h55V220zM497 220V113h32V220zM535 220V147h38V220zM576 220V115h39V220zM615 220V113h49V220zM670 220V171h41V220zM715 220V137h42V220zM757 220V112h34V220zM791 220V121h43V220zM839 220V130h64V220zM909 220V125h50V220zM963 220V138h59V220zM1024 220V161h45V220zM1074 220V174h45V220zM1123 220V117h49V220zM1175 220V127h51V220zM1228 220V169h34V220zM1266 220V163h56V220zM1328 220V165h51V220zM1382 220V179h56V220zM1443 220V113h34V220zM1481 220V141h50V220zM1536 220V108h52V220zM1591 220V176h59V220z'/%3E%3Cpath fill='none' stroke='%232A2152' stroke-width='2' d='M9.0 77V61M30.0 77V56M52.0 79V62M79.0 65V44M110.0 65V54M189.0 62V47M223.0 62V56M281.0 80V62M312.0 98V88M350.0 77V56M478.0 47V33M559.0 61V47M590.0 61V47M622.0 78V66M652.0 102V96M771.0 138V128M801.0 132V110M858.0 91V72M899.0 133V120M922.0 128V114M953.0 128V119M988.0 111V92M1018.0 111V95M1073.0 143V130M1096.0 165V148M1143.0 159V148M1163.0 153V136M1214.0 148V132M1239.0 136V123M1328.0 70V53M1356.0 70V48M1382.0 80V71M1409.0 80V63M1433.0 88V75M1464.0 78V73M1492.0 70V60M1555.0 79V68M1584.0 43V22M1607.0 34V21'/%3E%3Cpath fill='%23171231' d='M0 220V77h18V220zM22 220V77h16V220zM44 220V79h16V220zM64 220V65h30V220zM100 220V65h20V220zM122 220V72h34V220zM160 220V62h16V220zM178 220V62h22V220zM206 220V62h34V220zM242 220V80h24V220zM270 220V80h22V220zM295 220V98h34V220zM333 220V77h34V220zM370 220V36h34V220zM410 220V36h26V220zM440 220V37h18V220zM461 220V47h34V220zM497 220V55h20V220zM520 220V69h26V220zM549 220V61h20V220zM573 220V61h34V220zM610 220V78h24V220zM637 220V102h30V220zM670 220V102h24V220zM697 220V89h24V220zM724 220V89h26V220zM754 220V138h34V220zM790 220V132h22V220zM816 220V108h30V220zM850 220V91h16V220zM870 220V91h16V220zM890 220V133h18V220zM911 220V128h22V220zM936 220V128h34V220zM973 220V111h30V220zM1007 220V111h22V220zM1033 220V143h26V220zM1062 220V143h22V220zM1087 220V165h18V220zM1111 220V176h20V220zM1134 220V159h18V220zM1154 220V153h18V220zM1176 220V148h22V220zM1202 220V148h24V220zM1228 220V136h22V220zM1256 220V131h24V220zM1284 220V92h26V220zM1316 220V70h24V220zM1344 220V70h24V220zM1372 220V80h20V220zM1398 220V80h22V220zM1423 220V88h20V220zM1449 220V78h30V220zM1483 220V70h18V220zM1507 220V70h30V220zM1540 220V79h30V220zM1576 220V43h16V220zM1598 220V34h18V220z'/%3E%3Cpath fill='%23FFB547' fill-opacity='.55' d='M50 97h3v4h-3zM86 93h3v4h-3zM137 130h3v4h-3zM126 160h3v4h-3zM137 204h3v4h-3zM192 200h3v4h-3zM232 135h3v4h-3zM232 73h3v4h-3zM246 149h3v4h-3zM348 201h3v4h-3zM348 98h3v4h-3zM414 121h3v4h-3zM501 67h3v4h-3zM561 175h3v4h-3zM553 178h3v4h-3zM577 146h3v4h-3zM707 205h3v4h-3zM794 158h3v4h-3zM900 143h3v4h-3zM894 148h3v4h-3zM915 171h3v4h-3zM920 192h3v4h-3zM962 163h3v4h-3zM940 151h3v4h-3zM977 157h3v4h-3zM1016 133h3v4h-3zM1037 163h3v4h-3zM1044 172h3v4h-3zM1066 196h3v4h-3zM1066 153h3v4h-3zM1144 189h3v4h-3zM1242 192h3v4h-3zM1237 205h3v4h-3zM1260 144h3v4h-3zM1295 125h3v4h-3zM1326 118h3v4h-3zM1326 174h3v4h-3zM1332 197h3v4h-3zM1435 124h3v4h-3zM1462 206h3v4h-3zM1453 152h3v4h-3zM1520 113h3v4h-3zM1511 187h3v4h-3zM1544 188h3v4h-3z'/%3E%3C/svg%3E");
  background: var(--n0); color: var(--t0); font-family: var(--sans, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif); font-size: 15px; line-height: 1.5; margin: 0; min-height: 100vh;
  -webkit-font-smoothing: antialiased; color-scheme: dark; overflow-x: clip;
}
.bx [hidden] { display: none !important; }
.bx *, .bx *::before, .bx *::after { box-sizing: border-box; }
.bx h1, .bx h2, .bx h3, .bx p { margin: 0; }
.bx :where(a) { color: var(--gold-hi); text-decoration: none; }
.bx a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bx :where(button, input, select, textarea) { font: inherit; color: inherit; }
.bx svg { display: block; flex: none; }
.bx .mono, .bx code { font-family: var(--mono, ui-monospace, 'SFMono-Regular', Menlo, monospace); font-feature-settings: 'zero' 1; }
.bx :focus-visible { outline: 2px solid var(--vio-hi); outline-offset: 2px; border-radius: 8px; }
.bx ::selection { background: var(--gold); color: var(--n0); }
.bx .bx-up { color: var(--up); } .bx .bx-down { color: var(--down); }
html.bx-lock { overflow: hidden; }
.bx-skip { position: absolute; left: 8px; top: -60px; z-index: 300; background: var(--gold); color: var(--gold-ink); padding: 8px 14px; border-radius: 10px; font-weight: 600; }
.bx-skip:focus { top: 8px; }

/* ---------- sky: aurora, two star layers (one twinkles), moon with halo, candle-chart skyline ---------- */
.bx-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(110% 70% at 50% -12%, #1B1342 0%, rgba(27, 19, 66, 0) 62%), linear-gradient(180deg, #0C0A1C 0%, var(--n0) 72%); }
.bx-bg > i { position: absolute; display: block; }
.bx-bg__aurora { left: -15%; right: -15%; top: -14vh; height: 64vh; transform: skewY(-7deg);
  background: radial-gradient(38% 46% at 20% 46%, rgba(139, 92, 246, .22), transparent 70%), radial-gradient(30% 34% at 44% 30%, rgba(255, 95, 162, .07), transparent 72%), radial-gradient(44% 44% at 74% 34%, rgba(183, 148, 255, .1), transparent 70%); }
.bx-bg__stars { inset: 0; background-image: radial-gradient(1.6px 1.6px at 123px 68px, rgba(245, 240, 255, 1), transparent 70%), radial-gradient(1px 1px at 244px 35px, rgba(245, 240, 255, 0.45), transparent 70%), radial-gradient(1px 1px at 134px 121px, rgba(201, 180, 255, 0.6), transparent 70%), radial-gradient(1px 1px at 242px 278px, rgba(245, 240, 255, 0.9), transparent 70%), radial-gradient(1px 1px at 79px 120px, rgba(201, 180, 255, 0.6), transparent 70%), radial-gradient(1px 1px at 201px 9px, rgba(255, 243, 220, 0.45), transparent 70%), radial-gradient(1px 1px at 23px 156px, rgba(245, 240, 255, 0.45), transparent 70%), radial-gradient(1px 1px at 244px 200px, rgba(245, 240, 255, 0.9), transparent 70%), radial-gradient(1px 1px at 229px 70px, rgba(255, 243, 220, 0.75), transparent 70%); background-size: 280px 280px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 82%); mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 82%); opacity: .75; }
.bx-bg__stars--2 { background-image: radial-gradient(1.6px 1.6px at 239px 315px, rgba(245, 240, 255, 1), transparent 70%), radial-gradient(1.6px 1.6px at 138px 72px, rgba(255, 243, 220, 1), transparent 70%), radial-gradient(1px 1px at 348px 5px, rgba(201, 180, 255, 0.75), transparent 70%), radial-gradient(1px 1px at 239px 311px, rgba(245, 240, 255, 0.45), transparent 70%), radial-gradient(1px 1px at 285px 317px, rgba(201, 180, 255, 0.45), transparent 70%), radial-gradient(1px 1px at 196px 88px, rgba(201, 180, 255, 0.9), transparent 70%), radial-gradient(1px 1px at 218px 82px, rgba(255, 243, 220, 0.6), transparent 70%); background-size: 430px 430px; background-position: 140px 70px; opacity: .9; animation: bxtw 6.5s ease-in-out infinite alternate; }
@keyframes bxtw { from { opacity: .25; } to { opacity: .95; } }
.bx-bg__moon { top: 112px; right: max(20px, calc(50% - 700px)); width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 64% 62%, rgba(214, 190, 150, .45) 0 9%, transparent 10%), radial-gradient(circle at 34% 58%, rgba(214, 190, 150, .35) 0 6%, transparent 7%), radial-gradient(circle at 52% 30%, rgba(214, 190, 150, .3) 0 5%, transparent 6%), radial-gradient(circle at 38% 34%, #FFFDF6 0%, var(--moon) 48%, #EBD3A8 100%);
  box-shadow: 0 0 36px 6px rgba(255, 210, 122, .2), 0 0 160px 70px rgba(255, 181, 71, .07); }
.bx:has(.bx-gate:not([hidden])) .bx-bg__moon { display: none; }
.bx-bg__city { left: 0; right: 0; bottom: 0; height: 210px; background: var(--city) center bottom / auto 100% repeat-x; opacity: .85;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%); mask-image: linear-gradient(180deg, transparent 0%, #000 38%); }

/* ---------- header ---------- */
.bx-top { position: sticky; top: 0; z-index: 50; background: linear-gradient(180deg, rgba(9, 7, 20, .97), rgba(9, 7, 20, .9)); border-bottom: 1px solid var(--line); }
.bx-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 181, 71, .35) 30%, rgba(183, 148, 255, .35) 70%, transparent); opacity: .7; }
.bx-top__in { max-width: 1280px; margin: 0 auto; height: 64px; padding: 0 16px; display: flex; align-items: center; gap: 14px; }
.bx-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--moon) !important; font-family: var(--disp); font-weight: 600; letter-spacing: -.02em; font-size: 20px; text-decoration: none !important; }
.bx-brand img { width: 32px; height: 32px; }
.bx-brand em { font-family: var(--sans, sans-serif); font-style: normal; font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding: 3px 7px; border-radius: 6px; background: rgba(255, 181, 71, .1); border: 1px solid rgba(255, 181, 71, .22); }
.bx-route { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--t2); padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; background: rgba(23, 19, 48, .6); }
.bx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t3); }
.bx-dot.ok { background: var(--vio-hi); box-shadow: 0 0 0 3px rgba(183, 148, 255, .16); }
.bx-dot.warn { background: var(--warn); }
.bx-top__r { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.bx-toplink { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border-radius: 999px; color: var(--t2) !important; font-size: 13.5px; font-weight: 550; text-decoration: none !important; }
.bx-toplink svg { width: 16px; height: 16px; }
.bx-toplink:hover { color: var(--t0) !important; background: rgba(245, 240, 255, .05); }
.bx-mode { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; cursor: pointer; font-size: 13px; color: var(--t1); transition: border-color .2s, background .2s; }
.bx-mode svg { width: 17px; height: 17px; }
.bx-mode:hover { border-color: var(--line3); }
.bx-mode.is-on { color: var(--gold-hi); border-color: rgba(255, 181, 71, .38); background: rgba(255, 181, 71, .07); }
.bx-acct { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bx-acct__chip { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--n2); border: 1px solid var(--line); min-width: 0; }
.bx-acct__chip img { width: 26px; height: 26px; border-radius: 8px; background: var(--n3); padding: 2px; object-fit: contain; }
.bx-acct__chip > span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.bx-acct__chip b { font-size: 13px; font-weight: 600; }
.bx-acct__chip small { font-size: 11px; color: var(--t2); white-space: nowrap; }

/* ---------- layout + type ---------- */
.bx-main { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 22px 16px 64px; display: flex; flex-direction: column; gap: 16px; }
.bx-card { position: relative; background: linear-gradient(180deg, rgba(32, 26, 66, .88), rgba(16, 12, 34, .92)); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; min-width: 0; color: var(--t0);
  box-shadow: inset 0 1px 0 rgba(255, 243, 220, .045), 0 26px 60px -38px rgba(0, 0, 0, .95); }
.bx-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.bx-card-h h3, .bx h3 { font-size: 16px; font-weight: 620; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 8px; }
.bx-card-h h3 svg { width: 18px; height: 18px; color: var(--gold); }
.bx-h2 { font-family: var(--disp); font-size: 26px; font-weight: 500; letter-spacing: -.015em; display: inline-flex; align-items: center; gap: 10px; }
.bx-h2 svg { width: 22px; height: 22px; color: var(--gold); }
.bx-sub { color: var(--t2); font-size: 13px; }
.bx-lead { color: var(--t1); font-size: 16px; line-height: 1.6; max-width: 640px; }
.bx-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.bx-kicker svg { width: 17px; height: 17px; }
.bx-kicker__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(255, 181, 71, .16), 0 0 14px rgba(255, 210, 122, .7); }
.bx-fine { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: var(--t2); margin-top: 12px; }
.bx-fine svg { width: 15px; height: 15px; margin-top: 2px; color: var(--t2); }
.bx-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bx-row--wrap { flex-wrap: wrap; }
.bx-row--tight { gap: 4px; }
.bx-row--end { justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; }
.bx-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.bx-toolbar__r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bx-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }

/* ---------- buttons ---------- */
.bx-btn { --bh: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--bh); padding: 0 18px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; font-size: 14.5px; font-weight: 620; letter-spacing: -.01em; text-decoration: none !important; transition: background-color .2s, border-color .2s, color .2s, transform .25s var(--ease), box-shadow .3s, filter .2s; -webkit-tap-highlight-color: transparent; }
.bx-btn svg { width: 16px; height: 16px; }
.bx-btn:disabled { opacity: .45; cursor: not-allowed; }
.bx-btn:not(:disabled):active { transform: scale(.98); }
.bx-btn--sm { --bh: 34px; padding: 0 13px; font-size: 13.5px; }
.bx-btn--lg { --bh: 50px; padding: 0 24px; font-size: 15.5px; }
.bx-btn--block { width: 100%; }
.bx-btn--gold { background: linear-gradient(180deg, #FFC66B 0%, var(--gold) 55%, #F4A63E 100%); color: var(--gold-ink); box-shadow: 0 12px 28px -16px rgba(255, 181, 71, .95), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(150, 80, 0, .22); }
.bx-btn--gold:not(:disabled):hover { background: linear-gradient(180deg, #FFDA91 0%, var(--gold-hi) 55%, #FFB547 100%); box-shadow: 0 16px 36px -14px rgba(255, 210, 122, .75), inset 0 1px 0 rgba(255, 255, 255, .5); }
.bx-btn--quiet { background: rgba(245, 240, 255, .035); border-color: var(--line2); color: var(--t0); }
.bx-btn--quiet:not(:disabled):hover { border-color: rgba(255, 181, 71, .5); color: var(--gold-hi); background: rgba(255, 181, 71, .05); }
.bx-btn--danger { background: rgba(255, 128, 152, .08); border-color: rgba(255, 128, 152, .35); color: #FFC2CE; }
.bx-btn--danger:not(:disabled):hover { background: rgba(255, 128, 152, .16); color: #fff; }
.bx-btn--light { background: var(--moon); color: var(--n0); }
.bx-btn--light:not(:disabled):hover { background: #fff; }
.bx-ib { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--t2); cursor: pointer; transition: color .2s, background .2s; }
.bx-ib svg { width: 16px; height: 16px; }
.bx-ib:hover { color: var(--t0); background: rgba(245, 240, 255, .07); text-decoration: none; }
.bx-ib.is-copied { color: var(--gold); }
.bx-ib--sm { width: 26px; height: 26px; border-radius: 8px; vertical-align: middle; }
.bx-ib--sm svg { width: 14px; height: 14px; }
.bx-linkbtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--gold-hi); cursor: pointer; font-weight: 620; }
.bx-linkbtn svg { width: 16px; height: 16px; }
.bx-linkbtn:hover { color: #fff; }
.bx-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--t1); font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.bx-chip svg { width: 14px; height: 14px; }
.bx-chip b { color: var(--t0); font-weight: 600; }
.bx-chip:hover { border-color: rgba(255, 181, 71, .45); color: var(--t0); }
.bx-chip--ok { color: var(--ok); border-color: rgba(183, 148, 255, .38); background: rgba(139, 92, 246, .08); }
.bx-chip--warn { color: var(--warn); border-color: rgba(255, 160, 92, .38); }
.bx-chip--bad { color: var(--bad); border-color: rgba(255, 128, 152, .42); }
.bx-mini { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(245, 240, 255, .03); color: var(--t1); font-size: 12px; cursor: pointer; }
.bx-mini:hover { color: var(--gold-hi); border-color: rgba(255, 181, 71, .42); }
.bx-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: bxspin .7s linear infinite; flex: none; }
@keyframes bxspin { to { transform: rotate(360deg); } }

/* ---------- inputs ---------- */
.bx-in { width: 100%; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line2); background: var(--nin); color: var(--t0); font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.bx-in:focus { outline: none; border-color: rgba(183, 148, 255, .6); box-shadow: 0 0 0 3px rgba(139, 92, 246, .18); }
.bx-in::placeholder { color: var(--t3); }
.bx-in--sm { height: 36px; font-size: 13.5px; margin-top: 6px; }
.bx-ta { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.bx-selwrap { position: relative; }
.bx-selwrap select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; text-overflow: ellipsis; }
.bx-selwrap select option { background: var(--n1); color: var(--t0); }
.bx-selwrap > svg { position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; color: var(--t2); }
.bx-lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--t2); margin: 14px 0 7px; letter-spacing: .01em; }
.bx-check { display: inline-flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--t1); cursor: pointer; line-height: 1.45; }
.bx-check input { accent-color: var(--gold); width: 17px; height: 17px; margin: 1px 0 0; flex: none; }
.bx-seg { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: var(--nin); border: 1px solid var(--line); flex-wrap: wrap; }
.bx-seg button { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 10px; border: 0; background: transparent; color: var(--t1); cursor: pointer; font-size: 14px; font-weight: 560; white-space: nowrap; transition: background .2s, color .2s; }
.bx-seg button:hover { color: var(--t0); }
.bx-seg button.is-on { background: var(--n4); color: var(--t0); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .4); }
.bx-seg--sm button { height: 30px; font-size: 13px; }
.bx-err { color: var(--bad); font-size: 13.5px; margin-top: 10px; line-height: 1.45; }
.bx-usd { position: relative; }
.bx-usd span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--t2); }
.bx-usd input { padding-left: 26px; }

/* ---------- token logos ---------- */
.bx-tl { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--n4); overflow: hidden; flex: none; font-size: 9px; font-weight: 700; color: var(--t1); }
.bx-tl img { width: 100%; height: 100%; object-fit: cover; }
.bx-tl i { font-style: normal; }
.bx-tl--eth { background: #2B2E5C; color: #CDD4F6; }
.bx-tl--eth svg { width: 15px; height: 15px; }
.bx-tl--usd { background: var(--moon); color: #7A5200; }
.bx-tl--usd b { font-size: 13px; }

/* ---------- mask mode blur ---------- */
html.bx-blur .bx-priv { filter: blur(6px); transition: filter .25s; }
html.bx-blur .bx-priv:hover, html.bx-blur .bx-priv.is-shown, html.bx-blur .bx-mask:focus-within .bx-priv { filter: none; }

/* ---------- banners ---------- */
.bx-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--r2); background: linear-gradient(90deg, #4B2412, #2D1631); border: 1px solid rgba(255, 160, 92, .38); color: #FFE6D3; font-size: 14px; }
.bx-banner--soft { background: var(--n2); border-color: var(--line2); color: var(--t1); }

/* ---------- summary ---------- */
.bx-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bx-sumc { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px !important; overflow: hidden; }
.bx-sumc small { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t2); font-weight: 600; letter-spacing: .02em; }
.bx-sumc small i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(183, 148, 255, .1); color: var(--vio-hi); }
.bx-sumc small i svg { width: 14px; height: 14px; }
.bx-sumc__v { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 22px; font-weight: 650; letter-spacing: -.02em; min-height: 34px; min-width: 0; font-variant-numeric: tabular-nums; }
.bx-sumc__v .mono { font-size: 16px; }
.bx-sumc > span { font-size: 12.5px; color: var(--t2); }
.bx-sumc--mask { background: radial-gradient(120% 150% at 100% 0%, rgba(255, 181, 71, .16), transparent 58%), linear-gradient(180deg, rgba(32, 26, 66, .9), rgba(16, 12, 34, .94)) !important; border-color: rgba(255, 181, 71, .2) !important; }
.bx-sumc--mask small i { background: rgba(255, 181, 71, .14); color: var(--gold); }
.bx-bar { display: block; height: 5px; border-radius: 9px; background: rgba(245, 240, 255, .08); overflow: hidden; margin-top: 6px; }
.bx-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--vio), var(--gold)); border-radius: 9px; transition: width .6s var(--ease); }
.bx-sk1 { display: inline-block; width: 90px; height: 20px; border-radius: 6px; background: linear-gradient(90deg, rgba(183, 148, 255, .06), rgba(183, 148, 255, .16), rgba(183, 148, 255, .06)); background-size: 200% 100%; animation: bxsk 1.3s linear infinite; }

/* ---------- tabs ---------- */
.bx-tabs { position: sticky; top: 74px; z-index: 40; display: flex; gap: 4px; padding: 5px; border-radius: 16px; background: rgba(14, 11, 30, .96); border: 1px solid var(--line); align-self: flex-start; max-width: 100%; overflow-x: auto; scrollbar-width: none; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9); }
.bx-tabs::-webkit-scrollbar { display: none; }
.bx-tabs button { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 11px; border: 0; background: transparent; color: var(--t2); cursor: pointer; font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: color .2s, background .2s; }
.bx-tabs button svg { width: 18px; height: 18px; }
.bx-tabs button:hover { color: var(--t0); }
.bx-tabs button.is-on { background: linear-gradient(180deg, #2C2356, #211A44); color: var(--t0); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .32), 0 10px 24px -16px rgba(255, 181, 71, .7); }
.bx-tabs button.is-on svg { color: var(--gold); }
.bx-tab { animation: bxin .38s var(--ease); }
@keyframes bxin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- gate (not connected) ---------- */
.bx-gate { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; padding: 44px 40px 64px !important; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 90% at 0% 0%, rgba(139, 92, 246, .2), transparent 60%), linear-gradient(180deg, rgba(30, 23, 64, .96), rgba(12, 9, 26, .97)) !important; border-color: var(--line2) !important; }
.bx-gate__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bx-gate__sky > i { position: absolute; display: block; }
.bx-gate__moon { right: 12%; top: 30px; width: 168px; height: 168px; border-radius: 50%; opacity: .9;
  background: radial-gradient(circle at 60% 66%, rgba(214, 190, 150, .4) 0 8%, transparent 9%), radial-gradient(circle at 30% 60%, rgba(214, 190, 150, .3) 0 5%, transparent 6%), radial-gradient(circle at 38% 38%, #FFFDF6 0%, var(--moon) 46%, #E9CF9F 100%);
  box-shadow: 0 0 60px 14px rgba(255, 210, 122, .2), 0 0 220px 90px rgba(255, 181, 71, .08); }
.bx-gate__beam { left: 42%; bottom: -40px; width: 160px; height: 560px; transform-origin: 50% 100%; transform: rotate(-24deg);
  background: linear-gradient(0deg, rgba(255, 243, 220, .16), rgba(255, 243, 220, 0) 92%); clip-path: polygon(44% 100%, 56% 100%, 100% 0, 0 0); animation: bxbeam 16s ease-in-out infinite alternate; }
@keyframes bxbeam { from { transform: rotate(-26deg); } to { transform: rotate(30deg); } }
.bx-gate__city { left: 0; right: 0; bottom: 0; height: 130px; background: var(--city) center bottom / auto 100% repeat-x; opacity: .9; }
.bx-gate__main { position: relative; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.bx-gate h1 { font-family: var(--disp); font-size: 50px; line-height: 1.02; letter-spacing: -.025em; font-weight: 500; color: var(--moon); text-wrap: balance; }
.bx-gate h1 em { font-style: italic; padding: 0 .06em 0 .02em; background: linear-gradient(90deg, var(--gold-hi), var(--gold) 45%, #FF9E6B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bx-gate__wallets { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bx-gate__wallets img { width: 34px; height: 34px; border-radius: 10px; background: var(--n2); padding: 4px; border: 1px solid var(--line); }
.bx-gate__wallets span { font-size: 12.5px; color: var(--t2); margin-left: 4px; }
.bx-gate__side { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 150px; }
.bx-gate__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; counter-reset: st; }
.bx-gate__steps li { counter-increment: st; position: relative; padding: 52px 16px 16px; border-radius: 16px; background: rgba(14, 11, 30, .9); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.bx-gate__steps li::before { content: counter(st, decimal-leading-zero); position: absolute; left: 16px; top: 16px; width: 30px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 181, 71, .12); color: var(--gold); font-weight: 700; font-size: 12px; letter-spacing: .02em; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .25); }
.bx-gate__steps b { font-size: 14.5px; }
.bx-gate__steps span { font-size: 13px; color: var(--t2); }

/* ---------- mini Bandi (MASCOT agent's still) ---------- */
.bx-bandi { display: inline-flex; justify-content: center; }
.bx-bandi img { display: block; width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)); }
.bx-bandi--gate { position: absolute; right: calc(12% + 18px); top: 66px; z-index: 2; }
.bx-bandi--gate img { width: 132px; height: 132px; }
.bx-bandi--unlock { position: absolute; right: 18px; top: 12px; }
.bx-bandi--unlock img { width: 92px; height: 92px; }

/* ---------- states ---------- */
.bx-sk { display: flex; flex-direction: column; gap: 12px; padding: 6px 0; }
.bx-sk span { display: block; border-radius: 8px; background: linear-gradient(90deg, rgba(183, 148, 255, .05), rgba(183, 148, 255, .13), rgba(183, 148, 255, .05)); background-size: 200% 100%; animation: bxsk 1.3s linear infinite; }
@keyframes bxsk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.bx-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 12px; color: var(--t1); }
.bx-state b { font-size: 15px; color: var(--t0); }
.bx-state p { font-size: 13.5px; color: var(--t2); max-width: 420px; }
.bx-state__ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: rgba(139, 92, 246, .14); color: var(--vio-hi); box-shadow: inset 0 0 0 1px rgba(183, 148, 255, .2); }
.bx-state__ic svg { width: 22px; height: 22px; }
.bx-state--err .bx-state__ic { background: rgba(255, 128, 152, .1); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(255, 128, 152, .25); }
.bx-state--bandi { padding-top: 14px; }
.bx-state .bx-btn { margin-top: 6px; }

/* ---------- unlock ---------- */
.bx-unlock { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.bx-unlock__main { display: flex; flex-direction: column; gap: 16px; padding: 30px !important; overflow: hidden;
  background: radial-gradient(90% 120% at 0% 0%, rgba(139, 92, 246, .2), transparent 60%), radial-gradient(50% 70% at 100% 0%, rgba(255, 181, 71, .1), transparent 70%), linear-gradient(180deg, rgba(32, 26, 66, .94), rgba(14, 11, 30, .96)) !important; }
.bx-unlock__main h2 { font-family: var(--disp); font-size: 32px; font-weight: 500; letter-spacing: -.02em; line-height: 1.08; max-width: 520px; color: var(--moon); }
.bx-unlock__main h2 em { font-style: italic; color: var(--gold); }
.bx-sig { margin: 0 0 14px; padding: 14px; border-radius: 12px; background: #0A0817; border: 1px solid var(--line); font-family: var(--mono, monospace); font-size: 12px; line-height: 1.6; color: var(--moon); white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }
.bx-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bx-ticks li { display: flex; gap: 10px; font-size: 13.5px; color: var(--t1); line-height: 1.5; }
.bx-ticks svg { width: 17px; height: 17px; color: var(--vio-hi); margin-top: 2px; }
.bx-unlock__side .bx-ticks li:last-child svg { color: var(--warn); }
.bx-pass label { font-size: 13px; color: var(--t2); display: block; margin-bottom: 8px; }
.bx-or { display: flex; align-items: center; gap: 10px; color: var(--t3); font-size: 12px; }
.bx-or::before, .bx-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ---------- mask cards ---------- */
.bx-total { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; margin-right: 6px; }
.bx-total small { font-size: 11px; color: var(--t2); }
.bx-total b { font-size: 18px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bx-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.bx-mask, .bx-agent { display: flex; flex-direction: column; gap: 12px; overflow: hidden; transition: border-color .25s, transform .35s var(--ease), box-shadow .35s; }
.bx-mask::before { content: ''; position: absolute; right: -60px; top: -80px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 210, 122, .1), transparent); pointer-events: none; }
.bx-mask:hover { border-color: rgba(255, 181, 71, .26); box-shadow: inset 0 1px 0 rgba(255, 243, 220, .05), 0 30px 60px -36px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 181, 71, .06); }
.bx-mask__h { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; }
.bx-mask__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; flex: 1; }
.bx-mask__t b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-mask__t span { font-size: 12.5px; color: var(--t2); }
.bx-mask__icons { display: flex; gap: 0; margin-left: auto; }
.bx-mav { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; background: rgba(139, 92, 246, .18); color: #CDB8FF; box-shadow: inset 0 0 0 1px rgba(183, 148, 255, .3); }
.bx-mav svg { width: 24px; height: 24px; }
.bx-mav[data-tone="1"] { background: rgba(255, 181, 71, .14); color: var(--gold-hi); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .3); }
.bx-mav[data-tone="2"] { background: rgba(255, 243, 220, .1); color: var(--moon); box-shadow: inset 0 0 0 1px rgba(255, 243, 220, .22); }
.bx-mav[data-tone="3"] { background: rgba(138, 143, 163, .16); color: #D2D5E0; box-shadow: inset 0 0 0 1px rgba(138, 143, 163, .3); }
.bx-mav[data-tone="4"] { background: linear-gradient(135deg, rgba(139, 92, 246, .3), rgba(255, 95, 162, .16)); color: var(--t0); box-shadow: inset 0 0 0 1px rgba(183, 148, 255, .3); }
.bx-mask__v { position: relative; display: flex; align-items: baseline; gap: 8px; }
.bx-mask__v > span { font-size: 30px; font-weight: 680; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.bx-mask__v small { color: var(--t2); font-size: 12px; }
.bx-hold { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bx-hold li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.bx-hold li:first-child { border-top: 0; }
.bx-hold__s { font-weight: 600; }
.bx-hold__a { font-family: var(--mono, monospace); font-size: 12.5px; color: var(--t1); }
.bx-hold__u { color: var(--t2); font-size: 12.5px; min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.bx-hold__more { display: block !important; color: var(--t2); font-size: 12.5px; }
.bx-mempty { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: rgba(12, 9, 26, .5); border: 1px dashed var(--line2); font-size: 13px; color: var(--t2); line-height: 1.5; }
.bx-mempty b { color: var(--t0); }
.bx-gas-warn { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--warn); }
.bx-gas-warn svg { width: 15px; height: 15px; }
.bx-mask__a { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.bx-mnew { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 180px; padding: 20px; border-radius: var(--r); border: 1px dashed var(--line3); background: rgba(14, 11, 30, .45); color: var(--t1); cursor: pointer; text-align: center; transition: border-color .25s, background .25s, color .25s; }
.bx-mnew > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 181, 71, .12); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .3); transition: transform .35s var(--ease); }
.bx-mnew > span svg { width: 20px; height: 20px; }
.bx-mnew b { font-size: 15px; color: var(--t0); }
.bx-mnew small { font-size: 12.5px; color: var(--t2); }
.bx-mnew:hover { border-color: rgba(255, 181, 71, .5); background: rgba(255, 181, 71, .04); }
.bx-mnew:hover > span { transform: rotate(90deg) scale(1.05); }

/* activity + hides */
.bx-alist { list-style: none; margin: 0; padding: 0; }
.bx-alist li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.bx-alist li:first-child { border-top: 0; }
.bx-alist__k { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; background: rgba(245, 240, 255, .06); color: var(--t1); text-align: center; }
.bx-k--swap { background: rgba(255, 181, 71, .13); color: var(--gold-hi); }
.bx-k--fund { background: rgba(255, 160, 92, .12); color: var(--warn); }
.bx-k--bridge { background: rgba(139, 92, 246, .16); color: var(--vio-hi); }
.bx-k--agent { background: rgba(255, 243, 220, .09); color: var(--moon); }
.bx-k--sweep { background: rgba(138, 143, 163, .16); color: #D2D5E0; }
.bx-alist__t { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.bx-alist__t small { color: var(--t3); font-size: 11.5px; }
.bx-alist a, .bx-links a, .bx-finds a, .bx-log a { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; white-space: nowrap; }
.bx-alist a svg, .bx-links a svg, .bx-finds a svg, .bx-log a svg, .bx-proofsteps a svg, .bx-table a svg, .bx-okline a svg { width: 12px; height: 12px; display: inline-block; vertical-align: -1px; }
.bx-hl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bx-hl li { display: flex; gap: 10px; font-size: 13.5px; color: var(--t1); line-height: 1.5; }
.bx-hl svg { width: 17px; height: 17px; margin-top: 2px; }
.bx-hl .ok svg { color: var(--vio-hi); }
.bx-hl .warn svg { color: var(--warn); }
.bx-hides { background: radial-gradient(80% 90% at 100% 100%, rgba(139, 92, 246, .12), transparent 60%), linear-gradient(180deg, rgba(32, 26, 66, .88), rgba(16, 12, 34, .92)); }

/* ---------- swap / bridge ---------- */
.bx-swapwrap { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 16px; align-items: start; }
.bx-swap { padding: 22px !important; }
.bx-box { margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: var(--nin); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.bx-box:focus-within { border-color: rgba(255, 181, 71, .42); box-shadow: 0 0 0 3px rgba(255, 181, 71, .07); }
.bx-box__top, .bx-box__bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--t2); min-height: 22px; }
.bx-box__top b { color: var(--t1); font-weight: 600; }
.bx-box__row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.bx-amtin { flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; outline: none; font-size: 32px; font-weight: 620; letter-spacing: -.03em; color: var(--t0); padding: 0; font-variant-numeric: tabular-nums; }
.bx-amtin::placeholder { color: var(--t3); }
.bx-amtout { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-amtout.is-load { color: var(--t3); }
.bx-tokbtn, .bx-tokstatic { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 7px; border-radius: 999px; background: var(--n3); border: 1px solid var(--line2); color: var(--t0); cursor: pointer; flex: none; font-size: 15px; }
.bx-tokstatic { padding: 0 14px; cursor: default; font-weight: 600; }
.bx-tokbtn svg { width: 15px; height: 15px; color: var(--t2); }
.bx-tokbtn:hover { border-color: rgba(255, 181, 71, .45); }
.bx-flip { display: grid; place-items: center; width: 40px; height: 40px; margin: -8px auto -20px; position: relative; z-index: 2; border-radius: 12px; border: 3px solid #17122F; background: var(--n4); color: var(--t1); cursor: pointer; transition: transform .35s var(--ease), color .2s; }
.bx-flip svg { width: 18px; height: 18px; }
.bx-flip:hover { color: var(--gold); transform: rotate(180deg); }
.bx-fees { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(12, 9, 26, .55); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; }
.bx-fees div { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; }
.bx-fees dt { color: var(--t2); flex: none; }
.bx-fees dd { margin: 0; text-align: right; color: var(--t0); min-width: 0; overflow-wrap: anywhere; }
.bx-fees small { color: var(--t2); }
.bx-swap .bx-btn--block { margin-top: 16px; }
.bx-swapside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bx-explain h3 { margin-bottom: 12px; }
.bx-explain .bx-fine { margin-top: 14px; }
.bx-num { margin: 0; padding-left: 0; list-style: none; counter-reset: n; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; color: var(--t1); line-height: 1.5; }
.bx-num li { counter-increment: n; position: relative; padding-left: 34px; }
.bx-num li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: rgba(255, 181, 71, .12); color: var(--gold); }
.bx-num b { color: var(--t0); }
.bx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bx-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; color: var(--t2); }
.bx-steps li i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; background: rgba(245, 240, 255, .06); border: 1px solid var(--line2); }
.bx-steps li i svg { width: 14px; height: 14px; }
.bx-steps li > span { display: flex; flex-direction: column; min-width: 0; }
.bx-steps li b { color: var(--t1); font-size: 14px; font-weight: 600; }
.bx-steps li small { font-size: 12.5px; overflow-wrap: anywhere; }
.bx-steps li.run b { color: var(--t0); }
.bx-steps li.run i { border-color: rgba(183, 148, 255, .6); color: var(--vio-hi); }
.bx-steps li.ok i { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.bx-steps li.ok b { color: var(--t0); }
.bx-steps li.bad i { background: rgba(255, 128, 152, .15); border-color: var(--bad); color: var(--bad); }
.bx-steps li.bad small { color: var(--bad); }
.bx-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

/* token picker */
.bx-picklist { display: flex; flex-direction: column; margin-top: 12px; max-height: 56vh; overflow: auto; }
.bx-pick { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 12px; border: 0; background: transparent; cursor: pointer; text-align: left; color: var(--t0); }
.bx-pick .bx-tl { width: 30px; height: 30px; }
.bx-pick:hover { background: rgba(183, 148, 255, .07); }
.bx-pick > span { display: flex; flex-direction: column; min-width: 0; }
.bx-pick small { color: var(--t2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-pick em { font-style: normal; font-size: 13px; color: var(--t1); font-family: var(--mono, monospace); }
.bx-pick.is-dis { opacity: .35; cursor: not-allowed; }

/* ---------- agents ---------- */
.bx-auto { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t1); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--n1); }
.bx-auto svg { width: 15px; height: 15px; }
.bx-live { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(255, 181, 71, .6); animation: bxpulse 1.8s infinite; }
@keyframes bxpulse { 70% { box-shadow: 0 0 0 8px rgba(255, 181, 71, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 181, 71, 0); } }
.bx-allowcard { margin-bottom: 16px; }
.bx-allow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; }
.bx-allow > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bx-allow small { font-size: 12px; color: var(--t2); font-weight: 600; }
.bx-allow b { font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bx-allow__t span { font-size: 13px; color: var(--t1); }
.bx-allow__t b { font-size: 13px; color: var(--gold-hi); }
.bx-allow__t a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 4px; }
.bx-allow__t a svg { width: 14px; height: 14px; }
.bx-agwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.bx-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bx-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bx-allowed { display: flex; flex-direction: column; gap: 8px; }
.bx-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bx-chips .bx-in { width: 180px; margin: 0; }
.bx-tchip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 4px; border-radius: 999px; background: var(--n3); border: 1px solid var(--line2); cursor: pointer; font-size: 13px; color: var(--t0); }
.bx-tchip .bx-tl { width: 22px; height: 22px; }
.bx-tchip svg { width: 12px; height: 12px; color: var(--t2); }
.bx-budget { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 14px; border-radius: 14px; background: rgba(255, 181, 71, .05); border: 1px solid rgba(255, 181, 71, .18); }
.bx-budget > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.bx-budget small { font-size: 12px; color: var(--t2); }
.bx-budget b { font-size: 20px; font-variant-numeric: tabular-nums; }
.bx-plan { margin-top: 16px; padding: 16px; border-radius: 16px; background: #0C0A1D; border: 1px solid rgba(183, 148, 255, .3); animation: bxin .4s var(--ease); }
.bx-plan__h { display: flex; gap: 12px; align-items: flex-start; }
.bx-plan__h p { color: var(--t1); font-size: 14px; margin-top: 2px; }
.bx-orders { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bx-orders li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; background: rgba(245, 240, 255, .03); border: 1px solid var(--line); }
.bx-orders li i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; }
.bx-orders li i svg { width: 13px; height: 13px; }
.bx-orders li > span { display: flex; flex-direction: column; min-width: 0; }
.bx-orders li b { font-size: 14px; font-weight: 580; }
.bx-orders li small { font-size: 12.5px; color: var(--t2); }
.bx-orders li.ok i, .bx-orders li.done i { background: var(--gold); color: var(--gold-ink); }
.bx-orders li.bad i, .bx-orders li.failed i { background: rgba(255, 128, 152, .18); color: var(--bad); }
.bx-orders li.bad small, .bx-orders li.failed small { color: var(--bad); }
.bx-orders li.pending i { background: rgba(245, 240, 255, .06); color: var(--t2); }
.bx-orders li.running i { color: var(--vio-hi); }
.bx-orders--live { margin-top: 0; }
.bx-aglist { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bx-mandate { font-size: 14px; color: var(--t1); font-style: italic; }
.bx-agstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bx-agstats span { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: rgba(12, 9, 26, .5); min-width: 0; }
.bx-agstats small { font-size: 11px; color: var(--t2); }
.bx-agstats b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.bx-pill { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 8px; border-radius: 7px; white-space: nowrap; background: rgba(245, 240, 255, .07); color: var(--t1); }
.bx-pill--armed { background: rgba(255, 181, 71, .14); color: var(--gold-hi); }
.bx-pill--paused { background: rgba(255, 160, 92, .14); color: var(--warn); }
.bx-pill--expired, .bx-pill--done { background: rgba(245, 240, 255, .07); color: var(--t2); }
.bx-log { font-size: 13px; color: var(--t1); }
.bx-log summary { cursor: pointer; color: var(--t2); font-size: 12.5px; }
.bx-log ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.bx-log li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; }
.bx-log li small { color: var(--t3); }
.bx-warnline, .bx-okline { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; }
.bx-warnline { background: rgba(255, 160, 92, .08); border: 1px solid rgba(255, 160, 92, .26); color: #FFE2CC; }
.bx-okline { background: rgba(139, 92, 246, .09); border: 1px solid rgba(183, 148, 255, .26); color: var(--t0); }
.bx-warnline svg, .bx-okline svg { width: 16px; height: 16px; margin-top: 2px; }
.bx-warnline svg { color: var(--warn); }
.bx-okline svg { color: var(--vio-hi); }

/* ---------- verify ---------- */
.bx-vhero { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 4px 8px; max-width: 760px; }
.bx-vhero h1 { font-family: var(--disp); font-size: 52px; line-height: 1.02; letter-spacing: -.025em; font-weight: 500; color: var(--moon); }
.bx-vhero h1 em { font-style: italic; padding: 0 .06em 0 .02em; background: linear-gradient(90deg, var(--gold-hi), var(--gold) 50%, #FF9E6B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bx--verify [data-vf] > .bx-toolbar { display: none; }
.bx-verify { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.bx-vcheck form .bx-in { flex: 1; }
.bx-vcheck [data-out] { margin-top: 14px; }
.bx-verdict { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; }
.bx-verdict > span { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.bx-verdict > span svg { width: 18px; height: 18px; }
.bx-verdict b { font-size: 17px; }
.bx-verdict p { font-size: 13.5px; color: var(--t1); margin-top: 2px; }
.bx-verdict--ok { background: rgba(139, 92, 246, .1); border: 1px solid rgba(183, 148, 255, .3); }
.bx-verdict--ok > span { background: linear-gradient(135deg, var(--vio-hi), var(--vio)); color: #120A2A; }
.bx-verdict--warn { background: rgba(255, 160, 92, .08); border: 1px solid rgba(255, 160, 92, .32); }
.bx-verdict--warn > span { background: var(--warn); color: #2B1300; }
.bx-verdict--bad { background: rgba(255, 128, 152, .08); border: 1px solid rgba(255, 128, 152, .36); }
.bx-verdict--bad > span { background: var(--bad); color: #2B0010; }
.bx-proofsteps { list-style: none; counter-reset: p; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bx-proofsteps li { counter-increment: p; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 13.5px; }
.bx-proofsteps li b { color: var(--t2); font-weight: 600; font-size: 12.5px; padding-top: 2px; }
.bx-proofsteps li b::before { content: counter(p) '. '; color: var(--gold); }
.bx-code { display: block; padding: 10px 12px; border-radius: 10px; background: #0A0817; border: 1px solid var(--line); font-size: 12px; line-height: 1.6; color: #E4D6FF; white-space: pre-wrap; word-break: break-all; }
.bx-log .bx-code { margin-top: 8px; }
.bx-tiers { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 6px 0 14px; }
.bx-tiers th { text-align: left; font-size: 11.5px; color: var(--t2); font-weight: 600; padding: 6px 0; border-bottom: 1px solid var(--line2); }
.bx-tiers td { padding: 10px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.bx-tiers td:last-child, .bx-tiers th:last-child { text-align: right; }
.bx-tiers tr td:first-child { font-weight: 650; }
.bx-tiers tr:nth-child(2) td:first-child { color: var(--gold-hi); }
.bx-tiers tr:nth-child(3) td:first-child { color: var(--vio-hi); }
.bx-proof .bx-card-h h3 svg { color: #FF9E6B; }
.bx-prooflayout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.bx-proofstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.bx-proofstats > div { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 14px; background: rgba(12, 9, 26, .5); border: 1px solid var(--line); min-width: 0; }
.bx-proofstats small { font-size: 12px; color: var(--t2); font-weight: 600; }
.bx-proofstats b { font-size: 22px; letter-spacing: -.02em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.bx-proofstats span { font-size: 12px; color: var(--t2); }
.bx-tablewrap { overflow-x: auto; }
.bx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 480px; }
.bx-table th { text-align: left; font-size: 11.5px; color: var(--t2); padding: 8px 10px; border-bottom: 1px solid var(--line2); }
.bx-table td { padding: 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }

/* ---------- modals ---------- */
.bx-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 4, 12, .8); animation: bxfade .2s; }
@keyframes bxfade { from { opacity: 0; } }
.bx-modal__box { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow: auto; padding: 24px; border-radius: 22px; background: radial-gradient(90% 60% at 100% 0%, rgba(139, 92, 246, .14), transparent 70%), linear-gradient(180deg, #19143A, #110D26); border: 1px solid var(--line2); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 243, 220, .05); color: var(--t0); animation: bxpop .3s var(--ease); }
.bx-modal__box.is-wide { max-width: 680px; }
@keyframes bxpop { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.bx-modal__box h2 { font-family: var(--disp); font-size: 24px; font-weight: 500; letter-spacing: -.01em; line-height: 1.15; padding-right: 36px; }
.bx-modal__p { margin-top: 6px !important; color: var(--t1); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.bx-modal__x { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(245, 240, 255, .06); color: var(--t1); cursor: pointer; display: grid; place-items: center; }
.bx-modal__x:hover { background: rgba(245, 240, 255, .12); color: var(--t0); }
.bx-modal__x svg { width: 16px; height: 16px; }
.bx-modal__act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.bx-mic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: rgba(255, 181, 71, .12); color: var(--gold); margin-bottom: 12px; box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .25); }
.bx-mic svg { width: 24px; height: 24px; }
.bx-mic--bad { background: rgba(255, 128, 152, .12); color: var(--bad); box-shadow: inset 0 0 0 1px rgba(255, 128, 152, .3); }
.bx-cn__head { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.bx-cn__head img { width: 46px; height: 46px; }
.bx-wl { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.bx-wl__i { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(12, 9, 26, .5); color: var(--t0) !important; cursor: pointer; text-decoration: none !important; text-align: left; transition: border-color .2s, background .2s, transform .25s var(--ease); }
.bx-wl__i:hover { border-color: rgba(255, 181, 71, .45); background: rgba(255, 181, 71, .05); }
.bx-wl__i img { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; background: var(--n2); padding: 3px; }
.bx-wl__i b { font-size: 15px; font-weight: 600; }
.bx-wl__i small { font-size: 12px; color: var(--t2); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line2); }
.bx-wl__i.is-det { border-color: rgba(255, 181, 71, .28); background: linear-gradient(90deg, rgba(255, 181, 71, .07), rgba(12, 9, 26, .5)); }
.bx-wl__i.is-det small { color: var(--gold-ink); border-color: transparent; background: var(--gold); font-weight: 650; }
.bx-wl__i.is-busy { opacity: .7; pointer-events: none; }
.bx-warnbox { margin-top: 14px; padding: 13px 14px; border-radius: 14px; background: rgba(255, 160, 92, .07); border: 1px solid rgba(255, 160, 92, .28); font-size: 13.5px; color: #FFE4CF; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.bx-warnbox b { display: flex; gap: 8px; align-items: flex-start; color: #FFC9A0; }
.bx-warnbox b svg { width: 16px; height: 16px; margin-top: 2px; }
.bx-warnbox ul { margin: 0; padding-left: 18px; }
.bx-modal .bx-check { margin-top: 14px; }
.bx-amt { display: flex; gap: 8px; align-items: center; }
.bx-qr { margin: 16px auto; width: 220px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 6px rgba(255, 181, 71, .14); }
.bx-qr svg { width: 100%; height: auto; }
.bx-addrbox { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line2); background: var(--nin); color: var(--t0); font-size: 12.5px; cursor: pointer; overflow-wrap: anywhere; text-align: center; }
.bx-addrbox:hover { border-color: rgba(255, 181, 71, .45); }
.bx-addrbox svg { width: 15px; height: 15px; flex: none; color: var(--t2); }
.bx-keybox { margin: 14px 0 8px; padding: 12px; border-radius: 12px; background: #1C0814; border: 1px solid rgba(255, 128, 152, .35); color: #FFD3DC; font-size: 13px; word-break: break-all; user-select: all; }
.bx-menu { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.bx-menu button { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(12, 9, 26, .45); cursor: pointer; text-align: left; color: var(--t0); }
.bx-menu button:hover { border-color: rgba(255, 181, 71, .4); }
.bx-menu button svg { width: 20px; height: 20px; color: var(--t1); }
.bx-menu span { display: flex; flex-direction: column; }
.bx-menu small { color: var(--t2); font-size: 12.5px; }
.bx-dest { display: flex; flex-direction: column; gap: 8px; }
.bx-radio { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; }
.bx-radio:has(input:checked) { border-color: rgba(255, 181, 71, .45); background: rgba(255, 181, 71, .05); }
.bx-radio input { accent-color: var(--gold); margin: 2px 0 0; }
.bx-radio > span { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.bx-radio small { color: var(--t2); font-size: 12.5px; }
.bx-radio--warn small { color: var(--warn); }
.bx-sweeplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bx-sweeplist .bx-check { width: 100%; align-items: center; padding: 6px 0; margin: 0 !important; }
.bx-sweeplist .bx-check > span { flex: 1; }
.bx-sweeplist em { font-style: normal; color: var(--t2); font-size: 12.5px; }
.bx-finds { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bx-finds li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: start; font-size: 13.5px; padding: 10px 12px; border-radius: 12px; background: rgba(12, 9, 26, .5); }
.bx-finds li svg { width: 16px; height: 16px; margin-top: 2px; }
.bx-finds li.linked svg { color: var(--bad); }
.bx-finds li.watch svg { color: var(--warn); }
.bx-switch { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.bx-switch:first-of-type { margin-top: 10px; }
.bx-switch input { accent-color: var(--gold); width: 18px; height: 18px; margin: 2px 0 0; }
.bx-switch span { display: flex; flex-direction: column; gap: 2px; }
.bx-switch small { color: var(--t2); font-size: 12.5px; line-height: 1.5; }

/* ---------- toast ---------- */
.bx-toast { position: fixed; left: 50%; bottom: 24px; z-index: 300; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 14px; background: #1B1538; border: 1px solid rgba(255, 181, 71, .38); color: var(--t0); font-size: 14px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .85); transition: opacity .25s, transform .35s var(--ease); font-family: var(--sans, sans-serif); }
.bx-toast[data-kind="warn"] { background: #24152A; border-color: rgba(255, 160, 92, .5); }
.bx-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* footer partial sits above the sky */
.bx .footer { position: relative; z-index: 1; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .bx-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-agwrap, .bx-verify { grid-template-columns: minmax(0, 1fr); }
  .bx-proofstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-gate h1, .bx-vhero h1 { font-size: 40px; }
}
@media (max-width: 900px) {
  .bx-swapwrap, .bx-unlock, .bx-two, .bx-gate, .bx-prooflayout { grid-template-columns: minmax(0, 1fr); }
  .bx-allow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bx-allow__t { grid-column: 1 / -1; }
  .bx-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-gate { padding: 28px 24px 120px !important; gap: 24px; }
  .bx-gate__moon { width: 92px; height: 92px; top: -42px; right: -22px; }
  .bx-gate__sky > .bx-gate__beam { display: none; }
  .bx-gate__side { padding-top: 0; }
  .bx-gate__steps { grid-template-columns: minmax(0, 1fr); }
  .bx-gate__steps li { padding: 14px 16px 14px 58px; }
  .bx-gate__steps li::before { left: 14px; top: 14px; }
  .bx-gate h1 { font-size: 34px; }
  .bx-bandi--gate { position: relative; right: auto; top: auto; align-self: center; margin: 0 0 -14px; }
  .bx-bandi--gate img { width: 104px; height: 104px; }
  .bx-toplink { display: none; }
}
@media (max-width: 720px) {
  .bx-main { padding: 14px 16px 112px; gap: 12px; }
  .bx-route { display: none; }
  .bx-tabs { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); top: auto; z-index: 60; background: #120E27; justify-content: space-between; align-self: auto; border-radius: 18px; border-color: var(--line2); box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, .8); overflow: hidden; }
  .bx-tabs button { flex: 1 1 0; flex-direction: column; gap: 3px; height: 56px; padding: 0 2px; font-size: 11px; min-width: 0; }
  .bx-tabs button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .bx-tabs button.is-on { background: linear-gradient(180deg, #2A2152, #1E1840); color: var(--gold-hi); }
  .bx-toast { bottom: 96px; }
  .bx-card { padding: 16px; border-radius: 18px; }
  .bx-mgrid { grid-template-columns: minmax(0, 1fr); }
  .bx-mnew { min-height: 120px; }
  .bx-unlock__main { padding: 22px 18px !important; }
  .bx-unlock__main h2 { font-size: 24px; padding-right: 70px; }
  .bx-bandi--unlock { right: 10px; top: 10px; }
  .bx-bandi--unlock img { width: 66px; height: 66px; }
  .bx-agstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-proofsteps li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .bx-modal { align-items: flex-end; padding: 0; }
  .bx-modal__box { max-width: none !important; border-radius: 22px 22px 0 0; max-height: 92vh; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .bx-bg > .bx-bg__moon { display: none; }   /* on phones the cards cover it: the gate card carries its own moon */
  .bx-bg__city { height: 150px; }
  .bx-vhero { padding: 10px 2px 2px; }
  .bx-vhero h1 { font-size: 32px; }
}
@media (max-width: 480px) {
  .bx-top__in { padding: 0 12px; gap: 8px; }
  .bx-brand span, .bx-brand em { display: none; }
  .bx-mode span { display: none; }
  .bx-mode { width: 34px; padding: 0; justify-content: center; }
  .bx-acct__chip small { display: none; }
  .bx-acct__chip { height: 36px; padding: 0 10px 0 5px; }
  .bx-acct__chip img { width: 24px; height: 24px; }
  .bx-btn--danger.bx-btn--sm { padding: 0 11px; }
  .bx-sum { gap: 8px; }
  .bx-sumc { padding: 11px 12px !important; gap: 2px; border-radius: 14px !important; }
  .bx-sumc small { font-size: 11px; gap: 6px; }
  .bx-sumc small i { width: 20px; height: 20px; border-radius: 6px; }
  .bx-sumc small i svg { width: 12px; height: 12px; }
  .bx-sumc__v { font-size: 17px; min-height: 28px; }
  .bx-sumc__v .mono { font-size: 12px; }
  .bx-sumc__v .bx-ib--sm { width: 22px; height: 22px; }
  .bx-sumc > span { font-size: 11px; line-height: 1.35; }
  .bx-sumc > span[data-sum-wallet], .bx-sumc > .bx-bar { display: none; }
  .bx-gate { padding: 24px 18px 110px !important; }
  .bx-gate h1 { font-size: 30px; }
  .bx-gate .bx-btn--lg { width: 100%; }
  .bx-gate__wallets span { flex-basis: 100%; margin: 2px 0 0; }
  .bx-amtin { font-size: 26px; }
  .bx-allow, .bx-rules { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bx-total { display: none; }
  .bx-proofstats { grid-template-columns: minmax(0, 1fr); }
  .bx-toolbar__r { width: 100%; }
  .bx-mask__v > span { font-size: 26px; }
  .bx-h2 { font-size: 22px; }
  .bx-vhero h1 { font-size: 30px; }
}
@media (max-width: 370px) {
  .bx-acct__chip b { font-size: 12px; }
  .bx-btn--danger.bx-btn--sm { padding: 0 10px; gap: 6px; }
  .bx-gate h1 { font-size: 27px; }
  .bx-sumc__v { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .bx *, .bx *::before, .bx *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}