/* ============================================================================
   GROVEBOUND — dashboard styles
   forest-night palette · pixel display type · chunky arcade framing
   ==========================================================================*/
:root{
  --bark:#0b1410; --bark2:#0e1c14; --panel:#102218; --panel2:#14291d; --panel3:#173220;
  --line:#1d3a28; --line2:#27502f;
  --leaf:#7ec850; --leaf2:#b6e36a; --leaf-dim:#4f7d39;
  --bone:#eaf2d8; --mute:#8aa07e; --faint:#5f7a57;
  --gold:#ffd34a; --amber:#f7a83a;
  --blight:#b15cff; --blight2:#d49bff;
  --danger:#ff6b5c; --ok:#7ee08a;
  --pixel:'Press Start 2P', ui-monospace, monospace;
  --mono:'VT323', ui-monospace, monospace;
  --body:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --r:14px; --r-sm:9px;
  --shadow:0 12px 34px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--body); color:var(--bone); background:var(--bark);
  background-image:
    radial-gradient(1100px 600px at 78% -10%, rgba(126,200,80,.10), transparent 60%),
    radial-gradient(900px 500px at -5% 110%, rgba(177,92,255,.10), transparent 60%),
    linear-gradient(180deg,#0c1610,#0a140d 60%,#091410);
  background:var(--bark);
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button{font-family:inherit}
a{color:var(--leaf2);text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ---------------------------------------------------------------- layout */
#app{display:grid;grid-template-columns:212px 1fr;grid-template-rows:100%;height:100vh;height:100dvh}
#sidebar{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border-right:2px solid var(--line); display:flex;flex-direction:column;min-height:0;
}
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px 14px}
.brand img{width:38px;height:38px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.brand .bt{display:flex;flex-direction:column;line-height:1}
.brand .bn{font-family:var(--pixel);font-size:12.5px;color:var(--leaf2);letter-spacing:.5px}
.brand .bs{font-size:10.5px;color:var(--faint);margin-top:5px;letter-spacing:.2px}
nav{display:flex;flex-direction:column;gap:3px;padding:8px 10px;overflow-y:auto;flex:1;min-height:0}
.navitem{
  display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;color:var(--mute);
  cursor:pointer;border:1px solid transparent;font-size:14px;font-weight:600;letter-spacing:.2px;
  transition:background .12s,color .12s,border-color .12s;
}
.navitem .ico{width:20px;text-align:center;font-size:15px;opacity:.92}
.navitem:hover{background:var(--panel3);color:var(--bone)}
.navitem.active{background:linear-gradient(90deg,rgba(126,200,80,.18),rgba(126,200,80,.04));color:var(--leaf2);border-color:var(--line2)}
.navitem.active .ico{filter:drop-shadow(0 0 6px rgba(126,200,80,.6))}
.sidefoot{padding:10px 12px;border-top:1px solid var(--line);font-size:11px;color:var(--faint)}

/* topbar + main */
#mainwrap{display:flex;flex-direction:column;min-width:0;min-height:0}
#topbar{
  display:flex;align-items:center;gap:14px;padding:12px 20px;border-bottom:2px solid var(--line);
  background:linear-gradient(180deg,rgba(20,41,29,.7),rgba(16,34,24,.4));backdrop-filter:blur(4px);
}
.page-title{font-family:var(--pixel);font-size:13px;color:var(--bone);letter-spacing:.5px;margin-right:auto}
.page-title small{display:block;font-family:var(--body);font-weight:500;font-size:11.5px;color:var(--faint);margin-top:6px;letter-spacing:0}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line2);font-weight:700;font-size:13px;
}
.chip .v{font-family:var(--mono);font-size:19px;line-height:1;letter-spacing:.5px}
.chip.gold{color:var(--gold)} .chip.gold .ic{filter:drop-shadow(0 0 5px rgba(255,211,74,.5))}
.chip.lvl{color:var(--leaf2)}
.chip.chips{color:var(--blight2)}
.userbtn{display:flex;align-items:center;gap:9px;padding:6px 9px 6px 6px;border-radius:999px;background:var(--panel);border:1px solid var(--line2);cursor:pointer;color:var(--bone)}
.userbtn:hover{border-color:var(--leaf-dim)}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--panel3);border:1px solid var(--line2)}
.userbtn .un{font-weight:700;font-size:13px}
.userbtn .ad{font-family:var(--mono);font-size:14px;color:var(--faint);margin-top:-2px}

#main{flex:1;overflow-y:auto;padding:22px 24px 40px;min-height:0}
.view{display:none;animation:fade .18s ease}
.view.show{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- pieces */
.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.eyebrow{font-family:var(--pixel);font-size:10px;color:var(--leaf);letter-spacing:1px;text-transform:uppercase}
.h2{font-size:20px;font-weight:800;letter-spacing:.2px;margin:2px 0 0}
.muted{color:var(--mute)} .faint{color:var(--faint)}
.grid{display:grid;gap:16px}
.row{display:flex;gap:12px;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:7px;background:var(--panel3);border:1px solid var(--line2);color:var(--mute)}
.tag.lock{color:var(--amber);border-color:#5a4420;background:#241a0e}
.tag.own{color:var(--ok);border-color:#26502c;background:#0f240f}
.tag.eq{color:var(--blight2);border-color:#3a2a52;background:#1a1226}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  padding:11px 18px;border-radius:11px;font-weight:800;font-size:14px;letter-spacing:.3px;
  background:var(--panel3);color:var(--bone);border:1px solid var(--line2);
  transition:transform .08s,filter .12s,background .12s;
}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,#9fe05a,#6fb53a);color:#0c1510;border-color:#bff07a;box-shadow:0 6px 16px rgba(126,200,80,.25)}
.btn.gold{background:linear-gradient(180deg,#ffe07a,#f3a52f);color:#2a1c05;border-color:#ffe79a;box-shadow:0 6px 16px rgba(247,168,58,.25)}
.btn.violet{background:linear-gradient(180deg,#c98bff,#9a4ad0);color:#1a0a26;border-color:#dcb6ff}
.btn.ghost{background:transparent}
.btn.sm{padding:8px 12px;font-size:12.5px;border-radius:9px}
.btn.block{width:100%}
.btn.big{padding:15px 26px;font-size:15px}

/* stat bars */
.bar{height:9px;border-radius:6px;background:#0c1c12;border:1px solid var(--line);overflow:hidden}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--leaf2),var(--leaf));border-radius:6px}
.bar.gold > i{background:linear-gradient(90deg,#ffe07a,var(--amber))}
.bar.hp > i{background:linear-gradient(90deg,#ff9b6b,#e0543e)}

/* ---------------------------------------------------------------- HOME */
.hero{display:grid;grid-template-columns:300px 1fr;gap:18px}
.hero .stage{
  position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(120% 90% at 50% 10%,#16361f,#0c1c12 70%);min-height:320px;display:grid;place-items:center;
}
.hero .stage canvas{image-rendering:pixelated;width:230px;height:230px}
.hero .nameplate{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;background:linear-gradient(0deg,rgba(8,16,11,.92),transparent);text-align:center}
.hero .nameplate .cn{font-family:var(--pixel);font-size:12px;color:var(--leaf2)}
.hero .nameplate .cd{font-size:12px;color:var(--mute);margin-top:6px}
.statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;margin-top:6px}
.stat{display:flex;flex-direction:column;gap:5px}
.stat .sl{display:flex;justify-content:space-between;font-size:12px;color:var(--mute)}
.stat .sl b{color:var(--bone);font-family:var(--mono);font-size:16px;font-weight:400}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px}
.kpi .v{font-family:var(--mono);font-size:26px;color:var(--leaf2);line-height:1}
.kpi .l{font-size:11.5px;color:var(--faint);margin-top:5px;letter-spacing:.3px}

/* ---------------------------------------------------------------- CAMPAIGN map */
.mapwrap{position:relative;border-radius:var(--r);border:1px solid var(--line);overflow:hidden}
.bandlabel{display:flex;align-items:center;gap:10px;margin:18px 2px 10px}
.bandlabel .bx{width:14px;height:14px;border-radius:4px;border:1px solid rgba(255,255,255,.2)}
.bandlabel .bn{font-weight:800;font-size:14px}
.bandlabel .br{font-size:11.5px;color:var(--faint)}
.levelrow{display:grid;grid-template-columns:repeat(10,1fr);gap:9px}
.node{
  aspect-ratio:1;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid var(--line2);background:var(--panel);cursor:pointer;position:relative;transition:transform .08s,filter .12s;
}
.node:hover{filter:brightness(1.12)} .node:active{transform:translateY(1px)}
.node .ln{font-family:var(--mono);font-size:20px;line-height:1}
.node .lt{font-size:9px;color:var(--faint);margin-top:2px}
.node.locked{opacity:.4;cursor:not-allowed;filter:grayscale(.6)}
.node.cleared{border-color:var(--leaf-dim);background:linear-gradient(180deg,#16321d,#0f2415)}
.node.cleared .ln{color:var(--leaf2)}
.node.current{border-color:var(--gold);box-shadow:0 0 0 2px rgba(255,211,74,.25),0 0 18px rgba(255,211,74,.18)}
.node.current .ln{color:var(--gold)}
.node.boss{border-color:var(--blight);box-shadow:inset 0 0 14px rgba(177,92,255,.18)}
.node.boss .lt{color:var(--blight2)}
.node .crown{position:absolute;top:-7px;right:-5px;font-size:12px}

/* ---------------------------------------------------------------- MARKET / cards */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tab{padding:8px 14px;border-radius:10px;background:var(--panel);border:1px solid var(--line);color:var(--mute);cursor:pointer;font-weight:700;font-size:13px}
.tab:hover{color:var(--bone)} .tab.active{background:var(--panel3);color:var(--leaf2);border-color:var(--line2)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(218px,1fr));gap:14px}
.card{
  background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);
  padding:14px;display:flex;flex-direction:column;gap:10px;position:relative;transition:transform .1s,border-color .12s;
}
.card:hover{transform:translateY(-2px);border-color:var(--line2)}
.card .icon{height:96px;border-radius:var(--r-sm);background:radial-gradient(90% 80% at 50% 25%,#16331e,#0c1c12 80%);display:grid;place-items:center;border:1px solid var(--line)}
.card .icon canvas{image-rendering:pixelated;width:72px;height:72px}
.card .nm{font-weight:800;font-size:15px}
.card .ds{font-size:12px;color:var(--mute);line-height:1.45;min-height:34px}
.card .mods{display:flex;flex-wrap:wrap;gap:5px}
.mod{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;background:#0f2415;border:1px solid var(--line2);color:var(--leaf2)}
.mod.neg{color:#ff9b6b;border-color:#4a2a20;background:#241210}
.card .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.price{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:19px;color:var(--gold)}
.card.equipped{border-color:var(--blight);box-shadow:0 0 0 1px rgba(177,92,255,.25)}
.cardbadges{position:absolute;top:10px;right:10px;display:flex;gap:5px}

/* ---------------------------------------------------------------- LOADOUT */
.loadout{display:grid;grid-template-columns:1fr 320px;gap:18px}
.slots{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.slot{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;display:flex;gap:11px;align-items:center;cursor:pointer}
.slot:hover{border-color:var(--line2)}
.slot .si{width:54px;height:54px;border-radius:9px;background:radial-gradient(80% 80% at 50% 25%,#16331e,#0c1c12);display:grid;place-items:center;border:1px solid var(--line)}
.slot .si canvas{image-rendering:pixelated;width:44px;height:44px}
.slot .st{font-size:11px;color:var(--faint);letter-spacing:.4px;text-transform:uppercase}
.slot .sv{font-weight:800;font-size:14px;margin-top:3px}
.slot .se{font-size:11px;color:var(--mute);margin-top:2px}

/* ---------------------------------------------------------------- CASINO */
.casino-games{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.reels{display:flex;gap:12px;justify-content:center;padding:22px;background:radial-gradient(120% 100% at 50% 0%,#1c1230,#0c1c12 75%);border-radius:var(--r);border:1px solid var(--line)}
.reel{width:84px;height:104px;border-radius:12px;background:#0a140d;border:2px solid var(--line2);display:grid;place-items:center;font-size:46px;overflow:hidden;position:relative}
.reel.spin{animation:reelpulse .5s linear infinite}
@keyframes reelpulse{50%{border-color:var(--gold)}}
.reel.win{border-color:var(--gold);box-shadow:0 0 22px rgba(255,211,74,.4)}
.betbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;justify-content:center}
.betinput{display:flex;align-items:center;background:var(--panel);border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.betinput button{background:var(--panel3);border:0;color:var(--bone);padding:10px 13px;font-size:16px;cursor:pointer}
.betinput input{width:84px;background:transparent;border:0;color:var(--gold);font-family:var(--mono);font-size:20px;text-align:center;outline:none}
.coin{width:120px;height:120px;border-radius:50%;margin:8px auto;display:grid;place-items:center;font-size:54px;background:radial-gradient(circle at 35% 30%,#ffe79a,#f3a52f);border:4px solid #c9851f;color:#2a1c05;transition:transform .5s}
.wheel-wrap{display:grid;place-items:center;gap:10px}
.spinresult{text-align:center;font-family:var(--mono);font-size:22px;min-height:28px;margin-top:8px}
.spinresult.win{color:var(--gold)} .spinresult.lose{color:var(--faint)}

/* ---------------------------------------------------------------- TABLE */
.lb{width:100%;border-collapse:collapse;font-size:14px}
.lb th{text-align:left;font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.5px;padding:10px 12px;border-bottom:1px solid var(--line)}
.lb td{padding:11px 12px;border-bottom:1px solid var(--line)}
.lb tr:hover td{background:var(--panel3)}
.lb .rk{font-family:var(--mono);font-size:18px;color:var(--mute);width:46px}
.lb tr.me td{background:rgba(126,200,80,.08)}
.lb .val{font-family:var(--mono);font-size:17px;color:var(--leaf2);text-align:right}
.miniava{display:inline-flex;align-items:center;gap:8px}
.miniava canvas{image-rendering:pixelated;width:26px;height:26px;border-radius:6px;background:#0c1c12}

/* ---------------------------------------------------------------- modal/toast */
.scrim{position:fixed;inset:0;background:rgba(6,12,8,.74);backdrop-filter:blur(3px);display:none;place-items:center;z-index:60;padding:18px}
.scrim.show{display:grid;animation:fade .15s}
.modal{width:min(460px,94vw);max-height:88vh;overflow:auto;background:linear-gradient(180deg,var(--panel2),var(--panel));border:2px solid var(--line2);border-radius:18px;box-shadow:var(--shadow);padding:22px}
.modal h3{margin:0 0 4px;font-family:var(--pixel);font-size:14px;color:var(--leaf2)}
.modal p.sub{color:var(--mute);font-size:13px;margin:0 0 16px}
.wlist{display:flex;flex-direction:column;gap:9px}
.wopt{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:11px;background:var(--panel3);border:1px solid var(--line2);cursor:pointer}
.wopt:hover{border-color:var(--leaf-dim)} .wopt img{width:26px;height:26px;border-radius:6px}
.wopt .wn{font-weight:700} .wopt .wk{font-size:11px;color:var(--faint);margin-left:auto}
.field{width:100%;padding:13px 14px;border-radius:11px;background:#0a140d;border:1px solid var(--line2);color:var(--bone);font-size:15px;font-family:var(--mono);letter-spacing:.5px;outline:none}
.field:focus{border-color:var(--leaf-dim)}
.modal .err{color:var(--danger);font-size:12.5px;min-height:16px;margin-top:8px}
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;max-height:50vh;overflow:auto}
.pickitem{padding:10px;border-radius:10px;background:var(--panel3);border:1px solid var(--line2);cursor:pointer;text-align:center;font-size:12.5px}
.pickitem:hover{border-color:var(--leaf-dim)} .pickitem.sel{border-color:var(--gold)}
.pickitem .pf{font-size:24px}

#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:9px;z-index:80}
.toast{padding:12px 16px;border-radius:11px;background:var(--panel2);border:1px solid var(--line2);box-shadow:var(--shadow);font-weight:600;font-size:13.5px;animation:tin .2s;max-width:340px}
.toast.good{border-color:#2c5a32} .toast.bad{border-color:#5a2c2c;color:#ffb3aa} .toast.gold{border-color:#5a4420;color:var(--gold)}
@keyframes tin{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- GATE (logged-out) */
#gate{position:fixed;inset:0;display:grid;place-items:center;z-index:50;
  background:
   radial-gradient(900px 520px at 70% -5%,rgba(126,200,80,.14),transparent 60%),
   radial-gradient(800px 480px at 10% 110%,rgba(177,92,255,.12),transparent 60%),
   linear-gradient(180deg,#0c1610,#091410);}
.gatecard{width:min(560px,94vw);text-align:center;padding:40px 34px}
.gatecard img{width:92px;height:92px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}
.gatecard .gtitle{font-family:var(--pixel);font-size:30px;color:var(--leaf2);letter-spacing:1px;margin:18px 0 0;text-shadow:0 3px 0 #2c5320}
.gatecard .gtag{color:var(--mute);font-size:15px;margin:14px 0 4px}
.gatecard .steps{display:flex;justify-content:center;gap:18px;margin:22px 0 26px;flex-wrap:wrap}
.gatecard .step{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint)}
.gatecard .step b{color:var(--bone)}
.gatefoot{margin-top:18px;font-size:11.5px;color:var(--faint)}
.firefly{position:fixed;width:4px;height:4px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px 2px rgba(255,211,74,.6);pointer-events:none;z-index:1}

/* ---------------------------------------------------------------- GAME overlay */
#gamewrap{position:fixed;inset:0;z-index:70;background:#05090a;display:none;place-items:center}
#gamewrap.show{display:grid}
#gameStage{position:relative;width:min(96vw,calc(96vh*1.3333));aspect-ratio:4/3;max-height:96vh}

/* ---------------------------------------------------------------- responsive */
@media (max-width:880px){
  #app{grid-template-columns:1fr;grid-template-rows:1fr auto}
  #sidebar{grid-row:2;flex-direction:row;border-right:0;border-top:2px solid var(--line);overflow-x:auto}
  .brand,.sidefoot{display:none}
  nav{flex-direction:row;padding:6px 8px}
  .navitem{flex-direction:column;gap:4px;font-size:10px;padding:8px 10px;min-width:64px;text-align:center}
  .navitem .ico{font-size:18px}
  .hero{grid-template-columns:1fr}
  .loadout,.casino-games{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .levelrow{grid-template-columns:repeat(5,1fr)}
  #topbar{padding:10px 14px;gap:8px;flex-wrap:wrap}
  .page-title{font-size:11px;width:100%;margin-bottom:4px}
  #main{padding:16px 14px 30px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===================== $GROVE ticker (topbar) ===================== */
.chip.ticker{display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:1px solid var(--line2);background:linear-gradient(180deg,#13241a,#0e1c14)}
.chip.ticker:hover{border-color:var(--leaf-dim)}
.chip.ticker .tk{font-family:var(--pixel);font-size:8px;color:var(--gold);letter-spacing:.5px}
.chip.ticker .tp{font-family:var(--mono);font-size:17px;color:var(--bone);line-height:1}
.chip.ticker .tc{font-family:var(--mono);font-size:14px}
.tc.up,.tv.up,.val.up{color:var(--ok)} .tc.down,.tv.down,.val.down{color:var(--danger)}

/* ===================== Token page ===================== */
.tokgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.tokcard{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.tokcard .tl{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--mute);font-weight:700}
.tokcard .tv{font-family:var(--mono);font-size:24px;color:var(--bone);margin-top:4px;line-height:1}
#tokContract:hover{color:var(--leaf2)}
.claimcard{padding:18px;display:flex;flex-direction:column}
.claimbig{font-family:var(--pixel);font-size:26px;color:var(--gold);margin:10px 0 2px;line-height:1.1}
.claimbig span{font-size:14px}
.claimsub{color:var(--mute);font-size:13px;margin-bottom:14px}
.claimrate{font-size:11.5px;margin-top:10px}
.claimtotal{font-size:12.5px;color:var(--mute);margin-top:8px}
.claimtotal b{color:var(--gold);font-family:var(--mono);font-size:15px}
.claimmsg{margin-top:10px;font-size:13px}
.claimmsg.ok{color:var(--ok)} .claimmsg.bad{color:var(--danger)}
.claimmsg a{color:var(--leaf2)}
.holderrow{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line);font-size:13px}
.holderrow .hr{width:18px;color:var(--mute);font-family:var(--mono);font-size:13px}
.holderrow .ha{flex:1;font-family:var(--mono);color:var(--body)}
.holderrow .hv{font-family:var(--mono);color:var(--leaf2)}
.htag{font-size:10px;color:var(--amber);border:1px solid var(--line2);border-radius:6px;padding:1px 5px;margin-left:6px}

/* ===================== Chat ===================== */
.chatwrap{display:grid;grid-template-columns:230px 1fr;gap:16px;height:calc(100vh - 168px);min-height:420px}
.chatside{overflow:auto}
.chanlist{display:flex;flex-direction:column;gap:8px}
.chan{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);cursor:pointer;transition:.12s}
.chan:hover{border-color:var(--leaf-dim)}
.chan.active{background:rgba(126,200,80,.12);border-color:var(--leaf-dim)}
.chan .ci{font-size:20px}
.chan .cnm{font-weight:700;font-size:14px;color:var(--bone)}
.chan .cds{font-size:11px;color:var(--mute);margin-top:1px}
.chatmain{display:flex;flex-direction:column;padding:0;overflow:hidden}
.chathead{padding:14px 16px;border-bottom:1px solid var(--line);font-weight:800;color:var(--bone)}
.chatlog{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.msg{display:flex;gap:10px;align-items:flex-start}
.msg .mava{width:26px;height:26px;border-radius:8px;flex:none;margin-top:2px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.msg .mb{flex:1;min-width:0}
.msg .mh{font-size:12px;color:var(--mute);display:flex;align-items:center;gap:6px}
.msg .mh b{font-size:13.5px}
.msg .mt{font-size:11px;color:var(--faint)}
.msg .mtxt{font-size:14px;color:var(--body);margin-top:2px;word-wrap:break-word;overflow-wrap:anywhere}
.msg.mine .mtxt{color:var(--bone)}
.chatbar{display:flex;gap:10px;padding:12px 14px;border-top:1px solid var(--line)}
.chatbar .field{flex:1}

@media (max-width:900px){
  .chatwrap{grid-template-columns:1fr;height:auto}
  .chatside{order:2}
  .chanlist{flex-direction:row;overflow:auto;gap:8px}
  .chan{min-width:160px}
  .chatmain{order:1;height:60vh}
  .chip.ticker .tp{font-size:15px}
}

/* ===================== Gate contract + social links ===================== */
.gateca{margin-top:16px;padding:10px 12px;border:1px solid var(--line2);border-radius:12px;background:#0e1c14;cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;transition:.12s}
.gateca:hover{border-color:var(--leaf-dim)}
.gateca .cal{font-family:var(--pixel);font-size:7.5px;color:var(--gold);letter-spacing:.6px}
.gateca code{font-family:var(--mono);font-size:11px;color:var(--leaf2);word-break:break-all;line-height:1.3}
.gateca .cacopy{font-size:11px;color:var(--mute);white-space:nowrap}
.gatelinks{display:flex;gap:10px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.gatelinks a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--bone);text-decoration:none;padding:8px 14px;border:1px solid var(--line2);border-radius:999px;background:var(--panel2);transition:.12s}
.gatelinks a:hover{border-color:var(--leaf-dim);color:var(--leaf2);transform:translateY(-1px)}

/* sidebar footer links */
.sidefoot{margin-top:auto;padding-top:12px}
.sflinks{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.sflinks a{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--body);text-decoration:none;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);transition:.12s}
.sflinks a:hover{border-color:var(--leaf-dim);color:var(--leaf2);background:rgba(126,200,80,.10)}
.sfnote{font-size:10.5px;color:var(--faint);text-align:center;line-height:1.4}