:root{--bg: #101214;--bg-soft: #15181b;--fg: #e6e8eb;--muted: #9aa3ad;--gold: #d7b75c;--silver: #aeb7c2;--accent: #b43b3b;--card: #161a1e;--elev: 0 8px 24px rgba(0, 0, 0, .25);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-top: env(safe-area-inset-top, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;padding:0;font:14px/1.4 Inter,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Arial,sans-serif;color:var(--fg);background:radial-gradient(circle at 20% -20%,rgba(180,59,59,.18),transparent 45%),radial-gradient(circle at 90% -10%,rgba(215,183,92,.18),transparent 50%),var(--bg);-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}.app{min-height:100%;display:flex;flex-direction:column;padding:calc(var(--safe-top) + 0px) calc(var(--safe-right) + 0px) calc(var(--safe-bottom) + 0px) calc(var(--safe-left) + 0px)}.content{flex:1 1 auto;min-height:0}.header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,#101214fa,#10121499 60%,#10121400);padding:10px 12px 6px;box-shadow:0 1px #ffffff0a}.header-row{display:flex;align-items:center;gap:12px}.header-left{display:flex;align-items:center;gap:10px;min-width:0;padding:4px 6px;border-radius:12px;transition:background .2s ease}.header-left:active{background:#d7b75c14}.header-left[role=button]{cursor:pointer}.back-control{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);transition:transform .2s ease,background .2s ease}.back-control svg{width:18px;height:18px}.back-control:active{transform:translate(-2px);background:#d7b75c1f}.avatar{position:relative;width:36px;height:36px;border-radius:50%;overflow:hidden;flex:0 0 36px;box-shadow:0 0 0 1px #d7b75c3d,0 4px 14px #00000052}.avatar img,.avatar svg{width:100%;height:100%;display:block}.ring{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:50%;border:2px solid rgba(215,183,92,.6);opacity:.9;pointer-events:none}.name-wrap{display:flex;flex-direction:column;min-width:0}.name-line{display:flex;align-items:center;gap:8px;min-width:0}.name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}.level{font-size:12px;padding:2px 8px;border-radius:999px;background:#d7b75c1f;color:var(--gold);border:1px solid rgba(215,183,92,.35);letter-spacing:.02em}.xp{position:relative;height:6px;border-radius:999px;background:#ffffff12;overflow:hidden;margin-top:4px}.xp>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#d7b75ce6,#ffdf8f);transition:width .25s cubic-bezier(.32,.72,0,1)}.header-center{flex:1 1 auto;text-align:center;font-weight:600;opacity:.9;letter-spacing:.02em}.header-right{display:flex;gap:8px;margin-left:auto}.pill{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#ffffff0f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px #ffffff0a;font-weight:500;line-height:1;transition:transform .2s ease,box-shadow .2s ease}.pill b{font-weight:600}.pill.gold{color:var(--gold);border-color:#d7b75c59;box-shadow:inset 0 0 0 1px #d7b75c3d,0 0 12px #d7b75c1f}.pill.silver{color:var(--silver);border-color:#aeb7c259;box-shadow:inset 0 0 0 1px #aeb7c23d,0 0 12px #aeb7c21a}.pill.is-updated{animation:pillGlow .2s ease}@keyframes pillGlow{0%{box-shadow:0 0 #fff0,0 0 #fff0}to{box-shadow:0 0 #fff0,0 0 24px #d7b75c59}}.tabbar{position:sticky;bottom:0;z-index:10;background:#101214c7;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--elev);padding-bottom:calc(var(--safe-bottom) + 0px)}.tabrow{display:flex;align-items:center;justify-content:space-around;padding:8px 6px}.tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 10px;border-radius:12px;color:var(--muted);transition:color .2s ease,background .2s ease,transform .2s ease;min-width:64px}.tab:active{transform:translateY(1px)}.tab--active{color:var(--gold);background:#d7b75c14;box-shadow:inset 0 0 0 1px #d7b75c3d}.tab svg{width:22px;height:22px}.tab--active svg{color:var(--gold)}.badge{position:absolute;right:-2px;top:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.4)}.icon-wrap{position:relative}.page{padding:16px 16px 96px}.page h2{margin-top:0;font-size:20px;letter-spacing:.02em}.page p{opacity:.8;line-height:1.5}.app-splash,.app-error{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;gap:12px}.app-splash{color:var(--muted);font-size:18px}.app-error{color:#ff6b6b;font-weight:600;background:linear-gradient(180deg,#b43b3b1f,#101214eb)}.app-error p{margin:0;opacity:.82}@media (min-width: 640px){.app{max-width:420px;margin:0 auto;border-radius:24px;border:1px solid rgba(255,255,255,.04);overflow:hidden}}