* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Inter', -apple-system, sans-serif; background:#0a0e1a; color:#fff; min-height:100vh; max-width:390px; margin:0 auto; position:relative; overflow-x:hidden; }

/* Hex background */
body::before { content:''; position:fixed; inset:0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 34L0 84V50l28-16 28 16v34L28 100z' fill='none' stroke='%231a2540' stroke-width='0.8'/%3E%3C/svg%3E"); opacity:0.6; z-index:0; pointer-events:none; }

.content { position:relative; z-index:1; }

/* Top nav */
.nav { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; }
.nav-left { display:flex; gap:12px; align-items:center; }
.nav-left span { font-size:20px; color:#fff; cursor:pointer; opacity:0.8; }
.nav-center { text-align:center; }
.nav-title { font-size:15px; font-weight:600; color:#fff; }
.nav-sub { font-size:12px; color:#6b7280; }
.nav-right { width:36px; height:36px; border-radius:50%; background:#2a2f3a; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; }

/* Logo bar */
.logo-bar { display:flex; justify-content:space-between; align-items:center; padding:16px 16px 0; }
.logo { font-size:28px; font-weight:800; color:#fff; letter-spacing:2px; }
.logo-actions { display:flex; gap:10px; }
.logo-btn { height:44px; border-radius:22px; background:#1e2333; border:1px solid #2a3045; display:flex; align-items:center; justify-content:center; padding:0 14px; color:#fff; font-size:16px; position:relative; }
.logo-btn.circle { width:44px; padding:0; }
.notif-dot { position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:#00aaff; }

/* Banner */
.banner { margin:16px; padding:16px; background:#161b2e; border:1px solid rgba(255,255,255,0.08); border-radius:12px; display:flex; align-items:center; gap:14px; }
.banner-icon { width:40px; height:40px; background:#252b40; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.banner-text h3 { font-size:15px; font-weight:600; }
.banner-text p { font-size:12px; color:#6b7280; margin-top:2px; }
.banner-gear { font-size:24px; color:#3a4055; margin-left:auto; }
.dots { display:flex; justify-content:center; gap:6px; margin-top:10px; }
.dot { width:6px; height:6px; border-radius:3px; background:#3a4055; }
.dot.active { width:16px; background:#00aaff; }

/* Avatar */
.avatar-section { text-align:center; padding:24px 0 8px; }
.avatar-img { width:220px; height:200px; margin:0 auto; background: radial-gradient(ellipse at center, rgba(0,170,255,0.15) 0%, transparent 70%); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:80px; }

/* Username */
.username-section { text-align:center; padding:8px 0; }
.username { font-size:30px; font-weight:700; display:inline-flex; align-items:center; gap:8px; }
.copy-icon { font-size:16px; color:#6b7280; cursor:pointer; }
.handle { font-size:15px; color:#6b7280; margin-top:2px; }

/* Stats */
.stats { display:flex; gap:10px; padding:20px 16px; }
.stat-card { flex:1; background:#141929; border:1px solid rgba(100,140,200,0.15); border-radius:12px; padding:16px 8px; text-align:center; }
.stat-icon { font-size:22px; margin-bottom:4px; }
.stat-label { font-size:11px; color:#8899bb; margin-top:4px; }
.stat-value { font-size:20px; font-weight:700; margin-top:4px; }

/* Play button */
.play-btn { margin:24px 20px; height:56px; background:linear-gradient(135deg, #00aaff, #00ccff); border-radius:28px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:18px; font-weight:700; color:#fff; box-shadow:0 4px 20px rgba(0,170,255,0.3); cursor:pointer; }

/* Bottom tab */
.tab-bar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:390px; height:70px; background:#0a0e17; border-top:1px solid rgba(255,255,255,0.06); display:flex; justify-content:space-around; align-items:center; padding-bottom:8px; }
.tab { text-align:center; position:relative; }
.tab-icon { font-size:22px; color:#8899aa; }
.tab-label { font-size:10px; color:#8899aa; margin-top:2px; }
.tab .notif-dot { top:-2px; right:-4px; }

/* Level badge styles */
.level-badge { display:inline-block; padding:3px 10px; border-radius:8px; font-size:13px; font-weight:600; }
.level-badge.cyan { background:rgba(0,170,255,0.15); color:#00ccff; border:1px solid rgba(0,170,255,0.3); }
.level-badge.gold { background:rgba(255,180,30,0.15); color:#ffb41e; border:1px solid rgba(255,180,30,0.3); }
.level-badge.purple { background:rgba(160,80,255,0.15); color:#c080ff; border:1px solid rgba(160,80,255,0.3); }

/* Spacer for fixed tab bar */
.spacer { height:90px; }