/* Neon Arcade (wallet + market): dark violet panels, 12px 45° cut corners, bright flat accent outlines, no glow/gradients */
body{background:var(--ink);color:var(--white);font-family:'Rubik',system-ui,sans-serif;font-weight:500;min-height:100%;
  background-image:linear-gradient(#22222f 2px,transparent 2px),linear-gradient(90deg,#22222f 2px,transparent 2px);background-size:40px 40px}
.h,h1,h2,h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.5px;line-height:1}
a{color:inherit;text-decoration:none}
.cut{--c:14px;--a:var(--yellow);background:var(--a);padding:3px;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.cut>.in{--ci:calc(var(--c) - 1px);background:var(--violet);height:100%;
  clip-path:polygon(var(--ci) 0,100% 0,100% calc(100% - var(--ci)),calc(100% - var(--ci)) 100%,0 100%,0 var(--ci))}
.cut.deep>.in{background:#2a2148}
.shd{filter:drop-shadow(5px 5px 0 #000)}

header{height:68px;display:flex;align-items:center;gap:28px;padding:0 28px;background:#14141c;border-bottom:3px solid var(--violet)}
.logo{display:flex;align-items:center;gap:10px;font-family:'Barlow Condensed';font-weight:800;font-size:28px;letter-spacing:1px}
.logo b{color:var(--yellow)}
nav.tabs{display:flex;gap:6px}
nav.tabs a{font-family:'Barlow Condensed';font-weight:700;font-size:20px;text-transform:uppercase;padding:6px 16px;color:#b9b3d6;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
nav.tabs a.on{background:var(--yellow);color:var(--ink)}
nav.tabs a:hover:not(.on){background:var(--violet);color:var(--white)}
nav.tabs span.soon{font-family:'Barlow Condensed';font-weight:700;font-size:20px;text-transform:uppercase;padding:6px 16px;color:#8e88b0;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);cursor:default;opacity:.85;pointer-events:none;user-select:none}
nav.tabs span.soon small{font-family:'Rubik';font-size:10px;font-weight:700;letter-spacing:.4px;margin-left:6px;color:var(--pink);text-transform:uppercase}
.btn.soon,.btn[aria-disabled="true"]{background:var(--gray);box-shadow:none;cursor:not-allowed;color:#d0cdd8;pointer-events:none;opacity:.7}
.spacer{flex:1}
.wchip{--c:10px;--a:var(--sky)}
.wchip .in{display:flex;align-items:center;gap:10px;padding:6px 14px;font-size:15px;font-weight:700}
.dot{width:10px;height:10px;background:var(--grass);border:2px solid var(--ink);border-radius:50%}
.ph{font-family:'Rubik';font-size:10px;font-weight:700;text-transform:uppercase;background:var(--pink);color:var(--ink);padding:2px 6px;letter-spacing:.5px;white-space:nowrap}

.btn{--c:8px;display:inline-block;border:0;cursor:pointer;font-family:'Barlow Condensed';font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:.5px;
  padding:7px 18px;background:var(--yellow);color:var(--ink);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  box-shadow:inset 0 -4px 0 var(--gold)}
.btn:hover{background:#fff07a}
.btn:active{transform:translateY(2px);box-shadow:none}
.btn.ghost{background:transparent;color:var(--sky);box-shadow:inset 0 0 0 3px var(--sky)}
.btn.pink{background:var(--pink);box-shadow:inset 0 -4px 0 #c94f7a}
.btn.blue{background:var(--sky);box-shadow:inset 0 -4px 0 var(--water)}
.btn[disabled]{background:var(--gray);box-shadow:none;cursor:not-allowed;color:#d0cdd8}

.tile{position:relative;display:grid;place-items:center;overflow:hidden;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.tile img{width:82%;height:82%;object-fit:contain}
.tile::before{content:'';position:absolute;left:0;right:0;bottom:0;height:28%;background:rgba(26,26,36,.18)}
.tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;padding:2px 7px;color:var(--ink);letter-spacing:.4px}
.coin{display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);box-shadow:inset 0 0 0 2px var(--gold);vertical-align:-3px}
.muted{color:#b9b3d6}

/* Trade gate + mock bar (Arc mainnet foundation) */
.trade-gate-banner{
  margin:10px 28px 0;padding:8px 14px;font:700 13px Rubik;color:var(--ink);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.trade-gate-banner.ok{background:var(--grass)}
.trade-gate-banner.blocked{background:var(--pink)}
.mock-bar{
  margin:8px 28px 0;padding:8px 14px;background:#1e1833;border:3px solid #5b4a9a;color:#d7d2ee;
  font:500 13px Rubik;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.mock-bar b{color:var(--yellow);margin-right:6px}
.mock-bar input{background:var(--ink);border:2px solid #5b4a9a;color:#fff;font:500 13px Rubik;padding:4px 8px}
.trade-locked{opacity:.55;pointer-events:none}
button[data-trade-buy]:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.3)}