:root{
  --bg:#0E0B14; --card:#1A1526; --card2:#241D33;
  --purple:#7C4DFF; --volt:#F5E14B; --pink:#FF5C8A;
  --text:#EDEAF5; --muted:#8B85A0; --ok:#3DD68C;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  min-height:100vh;padding-bottom:72px}
.center{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.spinner{width:32px;height:32px;border:3px solid var(--card2);border-top-color:var(--purple);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.muted{color:var(--muted);font-size:13px}
.small{font-size:12px}
.err{color:var(--pink);font-size:15px}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.logo{font-weight:800;letter-spacing:.5px}
.chip{background:var(--card);border-radius:999px;padding:6px 14px;font-size:14px}
.chip.volt b{color:var(--volt);font-size:15px}

main{padding:0 16px;display:flex;flex-direction:column;gap:12px}

.stage{background:radial-gradient(120% 80% at 50% 15%,#2A2140 0%,#150F22 60%,#0F0B18 100%);
  border-radius:20px;padding:16px 16px 18px;display:flex;flex-direction:column;align-items:center;gap:4px}
.bubble{background:var(--card2);border-radius:14px;padding:9px 14px;font-size:13px;line-height:1.4;
  align-self:flex-start;max-width:88%}
.avatar{width:172px;height:258px;display:block;margin:4px 0}
.nameplate{display:flex;align-items:center;gap:8px}
.nameplate h1{font-size:19px;font-weight:700}
.badge{background:var(--card2);color:var(--muted);font-size:11px;font-weight:700;
  border-radius:999px;padding:3px 9px;letter-spacing:.5px}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{background:var(--card);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px}
.stat b{font-size:20px;font-weight:700}
.volt-text{color:var(--volt)}

.card{background:var(--card);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.refrow{display:flex;align-items:center;justify-content:space-between}
.refrow b{font-size:20px;letter-spacing:3px;font-family:ui-monospace,monospace}
.refrow button{background:var(--purple);color:#fff;border:0;border-radius:10px;
  padding:8px 16px;font-size:13px;font-weight:600}

.foot{text-align:center;padding:8px 0 4px}

.tabbar{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);
  background:#120E1B;border-top:1px solid #221B31;padding:8px 0 max(8px,env(safe-area-inset-bottom))}
.tab{background:none;border:0;color:var(--muted);font-size:12px;padding:6px 0}
.tab.active{color:var(--purple);font-weight:700}

.toast{position:fixed;left:16px;right:16px;bottom:88px;background:var(--card2);
  border:1px solid var(--purple);border-radius:12px;padding:12px 14px;text-align:center;font-size:14px}