/* Oneliq shared UI - navbar, cursor, aurora, toast, glass primitives */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Arc.network-inspired palette - deep navy base, teal/cyan accent, peach horizon.
     Retains legacy purple as tertiary only. */
  --bg:#0A1628; --bg2:#0F1E36;
  --surface:rgba(255,255,255,0.035); --surface2:rgba(255,255,255,0.065);
  --border:rgba(255,255,255,0.09); --border2:rgba(255,255,255,0.16);
  --text:#F5F7FB; --muted:#A4B8D0; --muted-soft:#7E92AE;

  /* Primary accents - arc.network horizon */
  --arc1:#4DD6DB;        /* teal (was purple) - primary */
  --arc2:#4A7BEC;        /* blue (was cyan) */
  --arc3:#F4C89A;        /* peach horizon (was pink) */
  --arc4:#7BE495;        /* mint (was neon green) */

  /* Extended */
  --peach:#F4C89A; --sand:#ECDCC4; --deep:#0A1628;
  --legacy-purple:#6C3FFF;    /* kept for ramp-downs / gradients only */
  --green:#7BE495; --red:#FF6B8A; --yellow:#FFCC77; --gold:#FFB347;

  --radius:16px;
  /* Type system - DM Sans for body/UI, Space Grotesk for display, Space Mono for numbers.
     Same family Arc.io uses. Kept Inter as fallback so a slow font-load doesn't regress. */
  --display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font:'DM Sans','Inter',system-ui,sans-serif;
  --mono:'Space Mono','DM Mono',ui-monospace,monospace;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);overflow-x:hidden;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.label-caps{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--mono)}

/* Arc.Network-inspired typography utilities */
.arc-label{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;color:#FF9F4A;text-transform:uppercase;white-space:nowrap}
.arc-label::before{content:'{\00a0';opacity:.75}
.arc-label::after{content:'\00a0}';opacity:.75}
.arc-divider{height:1px;background:linear-gradient(90deg,transparent 0%,rgba(77,214,219,.35) 20%,rgba(77,214,219,.35) 80%,transparent 100%);border:none;margin:18px 0}
.arc-num{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums}
.arc-display{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.05}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);cursor:pointer}
input,select,textarea{font-family:var(--font)}


/* Arc.network-style horizon background - deep navy at top, teal mid, peach/cream
   glow at the bottom edge. Orbs are subtle secondary decoration. */
.aurora-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
  background:
    radial-gradient(ellipse 140% 60% at 50% 110%, rgba(244,200,154,0.28) 0%, rgba(244,200,154,0.08) 35%, transparent 60%),
    radial-gradient(ellipse 120% 40% at 50% 90%, rgba(77,214,219,0.22) 0%, rgba(74,123,236,0.10) 35%, transparent 65%),
    linear-gradient(180deg, #0A1628 0%, #0E1F39 40%, #133155 75%, #1E4A6E 100%);
}
/* Optional faint orbs for extra depth - used sparingly */
.orb{position:absolute;border-radius:50%;filter:blur(150px);opacity:.06;animation:orb-drift 40s ease-in-out infinite alternate;mix-blend-mode:screen}
.orb1{width:720px;height:500px;background:var(--arc1);top:-240px;left:-200px;animation-duration:40s}
.orb2{width:620px;height:520px;background:var(--arc2);top:-160px;right:-220px;animation-duration:46s;animation-delay:-10s}
.orb3{display:none}   /* retired - was the loud pink orb */
.orb4{display:none}   /* retired - mint orb was too colorful */
@keyframes orb-drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(30px,20px) scale(1.06)}}

/* Noise */
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");opacity:.4;pointer-events:none;z-index:9997}

/* Glass primitive */
.glass{background:rgba(255,255,255,.025);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);position:relative;overflow:hidden}
.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.04) 30%,rgba(255,255,255,0) 60%,rgba(255,255,255,.08) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* Navbar */
nav.arc-nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;transition:all .3s;gap:16px}
nav.arc-nav.scrolled{background:rgba(3,1,10,.85);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.nav-logo{display:flex;align-items:center;gap:10px;cursor:pointer}
.logo-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--arc1),var(--arc2));display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 18px rgba(77,214,219,.28);color:#fff;font-weight:700}
.logo-name{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.035em;color:var(--text);line-height:1}
.logo-img{height:28px;width:auto;display:block;flex-shrink:0;user-select:none;-webkit-user-drag:none}
.logo-badge{font-size:9px;font-weight:700;letter-spacing:.18em;padding:2.5px 7px;background:rgba(77,214,219,.10);border:1px solid rgba(77,214,219,.32);border-radius:20px;color:var(--arc2);font-family:var(--mono);line-height:1.2}
.nav-tabs{display:flex;align-items:center;gap:4px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.nav-tab{padding:8px 14px;border-radius:10px;font-size:13px;font-weight:500;color:var(--muted);transition:all .2s}
.nav-tab:hover{color:var(--text);background:var(--surface)}
.nav-tab.active{color:var(--text);background:var(--surface2)}
.nav-tab.new-pill{position:relative}
.nav-tab.new-pill::after{content:'NEW';position:absolute;top:-3px;right:-12px;font-size:8px;font-family:var(--mono);font-weight:700;letter-spacing:.06em;background:linear-gradient(135deg,#A78BFA,#4A7BEC);color:#fff;padding:2px 5px;border-radius:6px}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:100px;font-size:11px;font-weight:600;font-family:var(--mono);color:var(--arc4);background:rgba(0,255,178,.08);border:1px solid rgba(0,255,178,.2)}
.nav-pill .dot{width:5px;height:5px;border-radius:50%;background:var(--arc4);animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.5}}
@media(max-width:820px){.nav-tabs{display:none}}

/* Buttons */
.btn-ghost{padding:9px 14px;border-radius:10px;font-size:13px;font-weight:500;color:var(--muted);background:none;border:1px solid var(--border);transition:all .2s;white-space:nowrap}
.btn-ghost:hover{color:var(--text);border-color:var(--border2)}
.btn-primary{padding:10px 20px;border-radius:10px;font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--text);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);transition:all .2s;white-space:nowrap}
.btn-primary:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);transform:translateY(-1px)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-lg{padding:14px 24px;font-size:15px;border-radius:14px}
.btn-block{width:100%;display:block}

/* Wallet button */
.wallet-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;background:var(--surface2);border:1px solid var(--border);color:var(--text);font-weight:600;font-size:13px;transition:all .2s}
.wallet-btn:hover{border-color:var(--border2);background:rgba(255,255,255,.08)}
.wallet-btn .dot{width:7px;height:7px;border-radius:50%;background:var(--arc4);box-shadow:0 0 8px var(--arc4)}
.wallet-btn.disconnected{background:rgba(255,255,255,.08);color:var(--text);border-color:rgba(255,255,255,.2)}
.wallet-btn.disconnected:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32)}

/* Toast */
.toast-stack{position:fixed;top:90px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:10000;max-width:360px}
.toast{background:rgba(12,6,24,.94);backdrop-filter:blur(20px);border:1px solid var(--border2);border-left:3px solid var(--arc2);border-radius:12px;padding:12px 14px;box-shadow:0 12px 40px rgba(0,0,0,.4);animation:toast-in .25s ease;display:flex;gap:10px;align-items:flex-start}
.toast.success{border-left-color:var(--arc4)}
.toast.error{border-left-color:var(--red)}
.toast.warn{border-left-color:var(--yellow)}
.toast-icon{font-size:18px;line-height:1;flex-shrink:0}
.toast-body{flex:1;min-width:0}
.toast-title{font-weight:600;font-size:13px;margin-bottom:2px}
.toast-sub{font-size:11.5px;color:var(--muted);line-height:1.45;word-break:break-word}
.toast-close{background:none;border:none;color:var(--muted);font-size:18px;line-height:1;padding:0 0 0 6px;cursor:pointer}
.toast-close:hover{color:var(--text)}
@keyframes toast-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* Skeleton */
.skel{background:linear-gradient(90deg,var(--surface) 0%,var(--surface2) 50%,var(--surface) 100%);background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:6px;color:transparent !important}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* Spinner */
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--text);border-radius:50%;animation:sp 0.7s linear infinite;vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}

/* Modal */
.arc-modal-bg{position:fixed;inset:0;background:rgba(3,1,10,.72);backdrop-filter:blur(8px);z-index:9500;display:none;align-items:center;justify-content:center;padding:20px}
.arc-modal-bg.show{display:flex;animation:fade-in .2s ease}
.arc-modal{background:var(--bg2);border:1px solid var(--border2);border-radius:20px;width:100%;max-width:440px;max-height:82vh;display:flex;flex-direction:column;overflow:hidden;animation:pop .25s cubic-bezier(.2,.9,.3,1.3)}
.arc-modal-head{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.arc-modal-title{font-weight:700;font-size:16px}
.arc-modal-close{background:none;border:none;color:var(--muted);font-size:22px;line-height:1;padding:4px 8px;border-radius:8px}
.arc-modal-close:hover{color:var(--text);background:var(--surface)}
.arc-modal-body{padding:16px 20px 20px;overflow:auto}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.94);opacity:0}100%{transform:scale(1);opacity:1}}

/* Confirm dialog (security review modals) */
.arc-confirm-msg{font-size:13.5px;line-height:1.55;color:var(--text)}
.arc-confirm-msg .row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--border)}
.arc-confirm-msg .row:last-of-type{border-bottom:none}
.arc-confirm-msg .row .k{color:var(--muted);flex-shrink:0}
.arc-confirm-msg .row .v{color:var(--text);font-weight:500;text-align:right;word-break:break-all}
.arc-confirm-msg .row .v.warn{color:var(--red)}
.arc-confirm-msg .lede{margin-bottom:10px;color:var(--muted);font-size:12.5px}
.arc-confirm-msg .footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
.arc-confirm-msg ol{margin:6px 0 0 18px;padding:0;font-size:12.5px;color:var(--muted)}
.arc-confirm-msg ol li{margin-bottom:3px}

/* Token selector row */
.token-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:all .15s}
.token-row:hover{background:var(--surface);border-color:var(--border)}
.token-row.active{background:var(--surface2);border-color:var(--border2)}
.token-ico{width:32px;height:32px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#333,#555);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;overflow:hidden}
.token-ico img{width:100%;height:100%;object-fit:cover}
.token-meta{flex:1;min-width:0}
.token-sym{font-weight:700;font-size:14px}
.token-name{font-size:11px;color:var(--muted)}
.token-bal{font-family:var(--mono);font-size:12.5px;color:var(--muted);text-align:right}

/* Chain chip */
.chain-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;background:var(--surface2);border:1px solid var(--border)}
.chain-chip .cdot{width:6px;height:6px;border-radius:50%}
.chain-chip.arc .cdot{background:linear-gradient(135deg,var(--arc1),var(--arc2))}
.chain-chip.sepolia .cdot{background:#627EEA}

/* Utility */
.row{display:flex;align-items:center}
.gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px}
.hidden{display:none !important}

/* ─────────────────────────────────────────────────────────
   APP SHELL - left sidebar variant (used by ArcUI.bootApp).
   Marketing pages still use the top nav from boot(). Sidebar
   is fixed left, content area shifts right via body padding.
   Collapse state persists in localStorage('arc.side.collapsed').
───────────────────────────────────────────────────────── */
:root{ --side-w:240px; --side-w-c:68px; }

body.arc-app{padding-left:var(--side-w);transition:padding-left .26s cubic-bezier(.2,.9,.3,1.1)}
body.arc-app.arc-side-collapsed{padding-left:var(--side-w-c)}

aside.arc-side{
  position:fixed;left:0;top:0;bottom:0;width:var(--side-w);z-index:1000;
  display:flex;flex-direction:column;
  background:rgba(8,18,34,.78);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border-right:1px solid var(--border);
  transition:width .26s cubic-bezier(.2,.9,.3,1.1), transform .26s cubic-bezier(.2,.9,.3,1.1);
  overflow:hidden;
}
body.arc-side-collapsed aside.arc-side{width:var(--side-w-c)}

/* Sidebar HEAD - brand + toggle.
   Brand is "Oneliq" big + small TESTNET pill stacked. No mark glyph -
   the sidebar itself is the brand. When collapsed, brand hides and the
   toggle button takes center stage. */
.arc-side-head{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 16px 18px 22px;border-bottom:1px solid var(--border);min-height:84px;gap:10px}
.arc-side-brand{display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-decoration:none;color:var(--text);overflow:hidden;min-width:0;flex:1;transition:opacity .12s}
.arc-side-name{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.035em;line-height:.95;color:var(--text)}
.arc-side-logo{height:30px;width:auto;display:block;flex-shrink:0;user-select:none;-webkit-user-drag:none}
body.arc-side-collapsed .arc-side-logo{display:none}
.arc-side-pill{font-size:8.5px;font-family:var(--mono);font-weight:700;letter-spacing:.18em;color:var(--arc2);padding:2px 7px;border:1px solid rgba(77,214,219,.32);border-radius:20px;background:rgba(77,214,219,.10);line-height:1.2}
body.arc-side-collapsed .arc-side-brand{opacity:0;pointer-events:none;width:0;height:0;overflow:hidden}
body.arc-side-collapsed .arc-side-head{justify-content:center;padding:20px 0 18px;min-height:64px}

.arc-side-toggle{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .18s;padding:0}
.arc-side-toggle:hover{color:var(--text);background:var(--surface2);border-color:var(--border2)}
.arc-side-toggle svg{transition:transform .25s cubic-bezier(.2,.9,.3,1.1)}
body.arc-side-collapsed .arc-side-toggle svg{transform:rotate(180deg)}
.arc-side-close{display:none;width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--muted);align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:all .18s}
.arc-side-close:hover{color:var(--text);background:var(--surface2);border-color:var(--border2)}

/* Sidebar NAV */
.arc-side-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 12px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.arc-side-nav::-webkit-scrollbar{width:6px}
.arc-side-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.arc-side-section + .arc-side-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.arc-side-sectitle{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-soft);padding:0 12px 8px;transition:opacity .12s}
body.arc-side-collapsed .arc-side-sectitle{opacity:0;pointer-events:none;height:0;padding:0 12px;overflow:hidden}

.arc-side-item{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:11px;color:var(--muted);font-size:15px;font-weight:500;letter-spacing:-.005em;text-decoration:none;border:none;background:none;cursor:pointer;width:100%;text-align:left;font-family:inherit;transition:color .15s, background .15s;margin-bottom:3px;position:relative}
.arc-side-item:hover{color:var(--text);background:var(--surface)}
.arc-side-item.active{color:var(--text);background:var(--surface2);box-shadow:inset 0 0 0 1px var(--border)}
.arc-side-item.active::before{content:'';position:absolute;left:-12px;top:10px;bottom:10px;width:3px;background:linear-gradient(180deg,var(--arc1),var(--arc2));border-radius:0 3px 3px 0}
.arc-side-item.soon{opacity:.65}
.arc-side-item.soon:hover{opacity:.95}

.arc-side-ico{width:24px;font-size:17px;text-align:center;flex-shrink:0;color:var(--muted);transition:color .15s;line-height:1}
.arc-side-item:hover .arc-side-ico{color:var(--text)}
.arc-side-item.active .arc-side-ico{color:var(--arc1)}
.arc-side-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .12s}
body.arc-side-collapsed .arc-side-label{opacity:0;pointer-events:none;width:0}

.arc-side-badge{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;padding:2.5px 6.5px;border-radius:5px;flex-shrink:0;transition:opacity .12s;line-height:1.1}
.arc-side-badge.new{background:linear-gradient(135deg,#A78BFA,#4A7BEC);color:#fff;border:1px solid transparent}
.arc-side-badge.soon{background:rgba(255,179,71,.12);border:1px solid rgba(255,179,71,.32);color:var(--gold)}
body.arc-side-collapsed .arc-side-badge{opacity:0;pointer-events:none;width:0;padding:0;margin:0;border-width:0}

/* Collapsed-mode: center icons */
body.arc-side-collapsed .arc-side-item{justify-content:center;padding:12px 0;gap:0}
body.arc-side-collapsed .arc-side-item.active::before{left:0;top:12px;bottom:12px}

/* Sidebar FOOT - chain pill + wallet button */
.arc-side-foot{padding:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.arc-side-chain{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:100px;font-size:11px;font-weight:600;font-family:var(--mono);color:var(--arc4);background:rgba(123,228,149,.08);border:1px solid rgba(123,228,149,.22);justify-content:center;transition:all .15s;line-height:1;letter-spacing:.04em}
.arc-side-chain .dot{width:6px;height:6px;border-radius:50%;background:var(--arc4);animation:pulse-dot 2s infinite;flex-shrink:0;box-shadow:0 0 6px var(--arc4)}
.arc-side-chain-label{transition:opacity .12s,width .12s,margin .12s;white-space:nowrap;overflow:hidden}
body.arc-side-collapsed .arc-side-chain{padding:8px 0;gap:0}
body.arc-side-collapsed .arc-side-chain-label{opacity:0;width:0;margin:0;pointer-events:none}
body.arc-side-collapsed .arc-side-foot .wallet-btn{padding:9px 0;justify-content:center;font-size:0;letter-spacing:0;position:relative;min-height:36px}
/* Disconnected → render a wallet glyph via mask. Connected → just the dot (set inline in JS). */
body.arc-side-collapsed .arc-side-foot .wallet-btn.disconnected::after{content:'';display:inline-block;width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 4.5h11a2 2 0 012 2v5a2 2 0 01-2 2H3.5a2 2 0 01-2-2v-7zm0 0V4a2 2 0 012-2h7a2 2 0 012 2v.5m-1.5 5h.01' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 4.5h11a2 2 0 012 2v5a2 2 0 01-2 2H3.5a2 2 0 01-2-2v-7zm0 0V4a2 2 0 012-2h7a2 2 0 012 2v.5m-1.5 5h.01' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;color:var(--text);font-size:14px;line-height:1}
body.arc-side-collapsed .arc-side-foot .wallet-btn .dot{font-size:initial;width:8px;height:8px;flex-shrink:0}

/* Mobile hamburger (only visible <900px) */
.arc-side-hamb{display:none;position:fixed;top:14px;left:14px;z-index:1001;width:40px;height:40px;border-radius:11px;background:rgba(10,22,40,.85);backdrop-filter:blur(20px);border:1px solid var(--border);color:var(--text);align-items:center;justify-content:center;cursor:pointer;padding:0}
.arc-side-hamb:hover{background:rgba(15,30,54,.95);border-color:var(--border2)}

/* Top-right wallet CTA - always visible on all viewports */
.arc-mob-wallet{display:inline-flex;position:fixed;top:14px;right:14px;z-index:1002;height:44px;padding:0 18px;border-radius:999px}

/* Mobile drawer backdrop */
.arc-side-backdrop{position:fixed;inset:0;background:rgba(3,8,16,.66);backdrop-filter:blur(4px);z-index:999;opacity:0;pointer-events:none;transition:opacity .22s}
body.arc-side-open .arc-side-backdrop{opacity:1;pointer-events:auto}

/* Mobile breakpoint - sidebar becomes drawer, collapsed state ignored */
@media(max-width:900px){
  body.arc-app{padding-left:0}
  body.arc-app.arc-side-collapsed{padding-left:0}
  aside.arc-side{transform:translateX(-100%);width:var(--side-w) !important;box-shadow:18px 0 60px rgba(0,0,0,.4)}
  body.arc-side-open aside.arc-side{transform:translateX(0)}
  .arc-side-hamb{display:flex}
  /* Force-expand drawer regardless of collapsed class */
  body.arc-side-collapsed .arc-side-brand{opacity:1;pointer-events:auto;width:auto;height:auto;overflow:visible}
  body.arc-side-collapsed .arc-side-head{justify-content:space-between;padding:20px 16px 18px 22px;min-height:84px}
  body.arc-side-collapsed .arc-side-label,
  body.arc-side-collapsed .arc-side-badge,
  body.arc-side-collapsed .arc-side-chain-label{opacity:1;pointer-events:auto;width:auto;padding:0;margin:0}
  body.arc-side-collapsed .arc-side-badge{padding:2.5px 6.5px;border-width:1px}
  body.arc-side-collapsed .arc-side-sectitle{opacity:1;height:auto;padding:0 12px 8px}
  body.arc-side-collapsed .arc-side-item{justify-content:flex-start;padding:12px 14px;gap:13px}
  body.arc-side-collapsed .arc-side-item.active::before{left:-12px;top:10px;bottom:10px}
  body.arc-side-collapsed .arc-side-chain{padding:7px 12px;gap:7px}
  body.arc-side-collapsed .arc-side-foot .wallet-btn{padding:9px 14px;font-size:13px;letter-spacing:normal}
  body.arc-side-collapsed .arc-side-foot .wallet-btn::after{display:none}
  /* Toggle button can hide on mobile - drawer just slides */
  .arc-side-toggle{display:none}
  /* Show X close button in sidebar header; hide hamburger while sidebar is open */
  .arc-side-close{display:flex}
  body.arc-side-open .arc-side-hamb{display:none}
}