/* NP Miner - style.css */
:root{
  --bg:#150f33;--s1:#1e1545;--s2:#2b1f5e;
  --line:rgba(196,170,255,.15);--line2:rgba(196,170,255,.3);
  --p:#b26bff;--pk:#ff5fa8;--ac:#34f5d6;--gd:#ffd166;
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.45,.5,1);
  color-scheme:dark}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100dvh;overflow:hidden;background:#07040f;color:#fff;font-family:'Poppins',system-ui,sans-serif;overscroll-behavior:none;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
input{user-select:text;-webkit-user-select:text}
::selection{background:rgba(178,107,255,.4)}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

#root{max-width:480px;height:100dvh;margin:0 auto;position:relative;overflow:hidden;
  background:radial-gradient(120% 55% at 100% -8%,rgba(139,92,246,.34),transparent 62%),radial-gradient(90% 45% at -10% 104%,rgba(255,95,168,.17),transparent 62%),var(--bg)}
#auth,#app{background:transparent}
#auth{z-index:50;background:radial-gradient(75% 38% at 50% 36%,rgba(178,107,255,.24),transparent 70%)}
#auth .blur-\[95px\]{display:none}
.nb::-webkit-scrollbar{display:none}.nb{scrollbar-width:none;-ms-overflow-style:none}

/* brighter palette over the Tailwind tokens */
#root .text-primary{color:var(--p)}#root .text-secondary{color:var(--pk)}#root .text-accent{color:var(--ac)}
#root .text-gold{color:var(--gd)}#root .text-diamond{color:#5ec8ff}#root .bg-accent{background-color:var(--ac)}
#root .bg-panelDark{background-color:var(--s1)}#root .bg-panelLight{background-color:var(--s2)}

/* press feedback */
.btn{cursor:pointer;touch-action:manipulation;transition:transform .2s var(--spring),filter .15s,opacity .15s}
.btn:active{transform:scale(.95);filter:brightness(.92);transition-duration:.07s}
@media(hover:hover){.btn:hover{filter:brightness(1.1)}}

/* surfaces */
.glass{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),var(--s1);border:1px solid var(--line);border-radius:1rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
#root .from-panelLight{background-image:linear-gradient(135deg,var(--s2),var(--s1));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.row{display:flex;align-items:center;gap:.65rem;padding:.65rem .7rem;border-radius:.8rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}
.row2{display:flex;align-items:center;gap:.7rem;padding:.75rem;border-radius:1rem}
.ic{width:1.9rem;height:1.9rem;border-radius:.6rem;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;background:rgba(255,255,255,.08);background:color-mix(in srgb,currentColor 15%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 24%,transparent)}
.row2 .ic{width:2.4rem;height:2.4rem;font-size:1.05rem;border-radius:.75rem}

/* brand gradient */
.grad{color:#fff;font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,.14);background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 55%),linear-gradient(135deg,#9a5cff,#d04bf0 54%,#ff5fa8);box-shadow:0 8px 20px -9px rgba(208,75,240,.75),inset 0 1px 0 rgba(255,255,255,.32)}
.bal-card{background:radial-gradient(90% 120% at 100% 0%,rgba(255,255,255,.2),transparent 55%),linear-gradient(135deg,#6a3cff,#b83cf5 55%,#ff5fa8);box-shadow:0 20px 44px -16px rgba(184,60,245,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.bal-card .bal{letter-spacing:-.02em;text-shadow:0 0 28px rgba(255,255,255,.4)}

/* type */
h2{letter-spacing:-.015em}
h4{font-size:12px;font-weight:600;color:rgba(255,255,255,.7);margin:.4rem 0 -.1rem}
.lb{display:block;font-size:11px;font-weight:500;margin-left:2px;color:rgba(255,255,255,.62)}
small{display:block;font-size:10px;font-weight:500;color:rgba(255,255,255,.55);margin-top:1px}
#root .uppercase{text-transform:none}
#root .tracking-\[0\.15em\]{letter-spacing:.02em}
#root #ml{letter-spacing:.04em;text-transform:none;font-size:10px;font-weight:700;color:rgba(255,255,255,.7)}

/* inputs */
.inp{width:100%;margin-top:3px;padding:.62rem .8rem;font:inherit;font-size:13px;color:#fff;background:rgba(10,6,28,.55);border:1px solid var(--line);border-radius:.8rem;outline:0;transition:border-color .15s,box-shadow .15s,background .15s}
.inp::placeholder{color:rgba(255,255,255,.28)}
.inp:focus{border-color:var(--p);background:rgba(10,6,28,.75);box-shadow:0 0 0 3px rgba(178,107,255,.22)}
.inp:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #170f3a inset;-webkit-text-fill-color:#fff}
.inp[type=number]{-moz-appearance:textfield}.inp::-webkit-outer-spin-button,.inp::-webkit-inner-spin-button{-webkit-appearance:none}

/* views: one quick entrance per tab switch (inner content re-renders live, so no per-row animation) */
.view{display:none;min-height:100%}
.view.on{display:flex;flex-direction:column;gap:.8rem;animation:enter .22s var(--ease)}
@keyframes enter{from{opacity:0;transform:translateY(6px)}}

/* mining button */
#root #mine{background:radial-gradient(circle at 50% 26%,#3a2b86,#1b1342 72%);border-color:var(--bg);box-shadow:0 0 0 1px rgba(196,170,255,.28),inset 0 2px 0 rgba(255,255,255,.12),inset 0 -14px 26px rgba(0,0,0,.35),0 14px 30px -10px rgba(0,0,0,.7)}
#root #mine.glow{animation:minepulse 2.2s ease-in-out infinite}
@keyframes minepulse{
  0%,100%{box-shadow:0 0 0 1px rgba(255,95,168,.5),inset 0 2px 0 rgba(255,255,255,.14),0 0 26px rgba(178,107,255,.5),0 0 54px rgba(255,95,168,.2)}
  50%{box-shadow:0 0 0 1px rgba(255,95,168,.85),inset 0 2px 0 rgba(255,255,255,.2),0 0 40px rgba(178,107,255,.8),0 0 84px rgba(255,95,168,.42)}}
#ring{filter:drop-shadow(0 0 5px rgba(255,95,168,.7))}
.icon-hit{animation:hit 1.1s ease-in-out infinite;transform-origin:bottom right}
@keyframes hit{20%{transform:rotate(-24deg)}45%{transform:rotate(16deg)}65%{transform:rotate(-6deg)}}
#sd.bg-accent{animation:ping 1.6s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(52,245,214,.7)}100%{box-shadow:0 0 0 7px rgba(52,245,214,0)}}
#nitro{box-shadow:inset 0 0 0 1px rgba(255,209,102,.4),0 0 20px -4px rgba(255,209,102,.5);animation:nitro 1.8s ease-in-out infinite}
@keyframes nitro{50%{box-shadow:inset 0 0 0 1px rgba(255,209,102,.7),0 0 28px -2px rgba(255,209,102,.75)}}

/* market */
.buy{padding:.45rem .8rem;border-radius:.8rem;text-align:center;flex-shrink:0;min-width:4.2rem}
.buy b{display:block;font-size:12px;font-weight:700}
.buy small{font-size:9px;font-weight:600;color:rgba(255,255,255,.85);margin:0}
.tg{padding:.45rem .8rem;border-radius:.8rem;font-size:10px;font-weight:700;flex-shrink:0;border:1px solid var(--line2);background:rgba(255,255,255,.05);color:rgba(255,255,255,.5);transition:background .15s,color .15s,box-shadow .15s,border-color .15s}
.tg.on{border-color:var(--ac);background:rgba(52,245,214,.16);color:var(--ac);box-shadow:0 0 16px -4px rgba(52,245,214,.65)}

/* avatars */
.av{display:inline-block;flex-shrink:0;padding:2px;border-radius:9999px;background:linear-gradient(135deg,#a56bff,#ff5fa8)}
.av img{display:block;width:100%;height:100%;object-fit:cover;border-radius:9999px;background:var(--s1)}
.av.sel{outline:2px solid var(--ac);outline-offset:2px;box-shadow:0 0 16px rgba(52,245,214,.55)}
.golden-aura{background:linear-gradient(135deg,#ffe08a,#f5a623);box-shadow:0 0 14px rgba(255,209,102,.75);animation:aura 2.6s ease-in-out infinite}
@keyframes aura{50%{box-shadow:0 0 24px rgba(255,209,102,1)}}

/* leaderboard */
#v-rank>.glass.items-end{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0)),var(--s1)}
#v-rank .rounded-t-xl.grad{box-shadow:none;text-shadow:none;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 70%),linear-gradient(180deg,#b26bff,rgba(139,92,246,.35))}
#v-rank>.glass.items-end>:nth-child(2) .rounded-t-xl.grad{background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 70%),linear-gradient(180deg,#ffd166,rgba(245,166,35,.35));box-shadow:0 -10px 26px -10px rgba(255,209,102,.6)}
#v-rank>.glass.items-end>:nth-child(1) .rounded-t-xl.grad{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 70%),linear-gradient(180deg,#cfd6e6,rgba(160,172,196,.3))}
#v-rank>.glass.items-end>:nth-child(3) .rounded-t-xl.grad{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 70%),linear-gradient(180deg,#e0955c,rgba(196,120,70,.3))}
.stick{position:sticky;bottom:.5rem;z-index:5;box-shadow:0 12px 28px -10px rgba(0,0,0,.65),0 8px 20px -9px rgba(208,75,240,.75),inset 0 1px 0 rgba(255,255,255,.32)}

/* tabs + nav */
.tabb{color:rgba(255,255,255,.5);transition:background .15s,color .15s,box-shadow .15s}
.tabb.act{color:#fff;background:linear-gradient(135deg,#9a5cff,#d04bf0);box-shadow:0 4px 14px -4px rgba(178,107,255,.85)}
#root nav.bg-panelDark{background:rgba(24,16,56,.85);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-top:1px solid var(--line);box-shadow:0 -10px 30px -12px rgba(0,0,0,.7)}
.nv{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:3.25rem;opacity:.5;font-size:9.5px;font-weight:500;transition:opacity .15s}
.nv i{font-size:1.2rem;transition:transform .22s var(--spring),color .15s}
.nv.act{opacity:1}
.nv.act i{color:var(--p);transform:translateY(-1px) scale(1.12);filter:drop-shadow(0 0 7px rgba(178,107,255,.75))}
.nv.act::before{content:"";position:absolute;top:-8px;width:20px;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--p),var(--pk));box-shadow:0 2px 10px rgba(178,107,255,.9)}

/* auth */
.afa{max-height:90px;overflow:hidden;transition:max-height .25s var(--ease),opacity .2s}
.afa.off{max-height:0;opacity:0;pointer-events:none}
.auth-glow{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),var(--s1);animation:authglow 4s ease-in-out infinite}
@keyframes authglow{0%,100%{box-shadow:0 0 0 1px rgba(178,107,255,.2),0 18px 50px -18px rgba(178,107,255,.45)}50%{box-shadow:0 0 0 1px rgba(255,95,168,.3),0 22px 60px -16px rgba(255,95,168,.5)}}
.float{animation:fl 3.2s ease-in-out infinite;filter:drop-shadow(0 0 16px rgba(178,107,255,.6))}
@keyframes fl{50%{transform:translateY(-5px) rotate(1.5deg)}}

/* modal + toasts */
#modal{animation:fade .16s ease-out}
#root #modal>.glass{background:var(--s1);border-color:var(--line2);box-shadow:0 30px 70px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08);animation:pop .24s var(--spring)}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}}
.toast{padding:.65rem .9rem;font-size:12px;font-weight:500;background:var(--s2);border-color:var(--line2);box-shadow:0 12px 30px -8px rgba(0,0,0,.7),inset 3px 0 0 var(--p);animation:ti .28s var(--spring),to .22s ease-in 2.15s forwards}
@keyframes ti{from{transform:translateY(-120%) scale(.96);opacity:0}}
@keyframes to{to{transform:translateY(-30%) scale(.96);opacity:0}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}