*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root {
  --color-primary:#3DB54A;
  --color-primary-dark:#2E7D32;
  --color-primary-light:#E8F5E9;
  --color-accent:#FFD100;
  --color-danger:#E8272A;
  --color-bg:#F5F5F3;
  --color-text:#1A1A1A;
  --color-text-secondary:#6B6B6B;
  --color-white:#FFFFFF;
  --font-heading:'Poppins',sans-serif;
  --font-body:'Inter',sans-serif;
  --radius-card:16px;
  --radius-pill:20px;
  --shadow-card:0 4px 16px rgba(0,0,0,0.07);
  --nav-height:68px;
}

html,body{height:100%;background:var(--color-bg);font-family:var(--font-body);color:var(--color-text);-webkit-font-smoothing:antialiased}
.app{max-width:430px;min-height:100%;margin:0 auto;position:relative;background:var(--color-bg)}

.header{position:sticky;top:0;z-index:20;background:var(--color-white);border-bottom:1px solid rgba(0,0,0,0.06);padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.header-title{font-family:var(--font-heading);font-weight:800;font-size:20px}
.header-link{text-decoration:none;font-size:12px;font-weight:600;color:var(--color-primary)}

.content{padding:16px 20px;padding-bottom:calc(var(--nav-height) + 36px);display:flex;flex-direction:column;gap:14px}
.card{background:var(--color-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:16px}
.section-title{font-family:var(--font-heading);font-weight:700;font-size:15px;margin-bottom:12px}

.profile-hero{background:linear-gradient(135deg,#2E7D32,#3DB54A);color:#fff;position:relative;overflow:hidden}
.profile-hero::after{content:'';position:absolute;top:-35px;right:-35px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,0.08)}
.profile-top{display:flex;align-items:center;gap:12px;position:relative}
.profile-avatar{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.profile-meta{min-width:0;flex:1}
.profile-nick{font-family:var(--font-heading);font-weight:800;font-size:18px;line-height:1.2}
.profile-rank{font-size:12px;opacity:0.9;margin-top:2px}
.profile-points{font-family:var(--font-heading);font-weight:800;font-size:28px;margin-top:12px;line-height:1}
.profile-sub{font-size:12px;line-height:1.4;opacity:0.9;margin-top:8px}

.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat-card{background:#F8F8F7;border:1px solid rgba(0,0,0,0.06);border-radius:12px;padding:10px 12px}
.stat-label{font-size:11px;color:var(--color-text-secondary);margin-bottom:2px}
.stat-value{font-family:var(--font-heading);font-weight:700;font-size:16px;line-height:1.2}

.achievements{display:flex;flex-direction:column;gap:8px}
.achievement{display:flex;align-items:center;gap:10px;background:#F8F8F7;border:1px solid rgba(0,0,0,0.05);border-radius:12px;padding:10px 12px}
.achievement.done{border-color:rgba(61,181,74,0.4);background:#F2FAF3}
.achievement-icon{width:34px;height:34px;border-radius:10px;background:#E8EAF6;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.achievement.done .achievement-icon{background:#E8F5E9}
.achievement-body{min-width:0;flex:1}
.achievement-name{font-family:var(--font-heading);font-size:13px;font-weight:700}
.achievement-desc{font-size:11px;color:var(--color-text-secondary);line-height:1.35}
.achievement-status{font-size:11px;font-weight:700;color:#9E9E9E;flex-shrink:0}
.achievement.done .achievement-status{color:var(--color-primary-dark)}

.history-list{display:flex;flex-direction:column}
.history-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(0,0,0,0.05)}
.history-item:last-child{border-bottom:none}
.history-tag{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.history-tag .ui-icon{width:16px;height:16px}
.tag-purchase{background:var(--color-primary-light)}
.tag-spotlight{background:#FFF3CC}
.tag-game{background:#F3E5F5}
.tag-streak{background:#FBE9E7}
.history-info{flex:1;min-width:0}
.history-desc{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-date{font-size:11px;color:var(--color-text-secondary)}
.history-points{font-family:var(--font-heading);font-size:13px;font-weight:700;color:var(--color-primary);flex-shrink:0}
.history-more{display:block;margin-top:8px;text-align:center;text-decoration:none;font-size:13px;font-weight:600;color:var(--color-primary);padding:6px 4px}

.receipt-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,0.05)}
.receipt-row:last-child{border-bottom:none}
.receipt-date{font-size:11px;color:var(--color-text-secondary);width:70px;flex-shrink:0}
.receipt-amount{font-size:12px;font-weight:500;flex:1}
.receipt-source{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px}
.rs-sweet{background:var(--color-primary-light);color:#2E7D32}
.rs-steam{background:#FFF3CC;color:#8B6914}
.receipt-pts{font-family:var(--font-heading);font-weight:700;font-size:12px;color:var(--color-primary);flex-shrink:0}

.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;height:var(--nav-height);background:var(--color-white);border-top:1px solid rgba(0,0,0,0.06);display:flex;align-items:center;z-index:30;padding-bottom:env(safe-area-inset-bottom,0)}
.nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 6px;cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;text-decoration:none}
.nav-icon{display:flex;align-items:center;justify-content:center;line-height:1;opacity:0.35;transition:all 0.2s ease}
.nav-icon .ui-icon{width:18px;height:18px}
.nav-label{font-family:var(--font-body);font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;color:#9E9E9E;transition:all 0.2s ease;text-align:center;line-height:1.1}
.nav-tab.active .nav-icon{opacity:1}
.nav-tab.active .nav-label{color:var(--color-primary)}
.nav-tab.active::after{content:'';position:absolute;top:4px;width:4px;height:4px;border-radius:50%;background:var(--color-primary)}

@media(orientation:landscape)and(max-height:500px){.landscape-warning{display:flex!important}.app{display:none}}
.landscape-warning{display:none;position:fixed;inset:0;background:var(--color-bg);align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:999;font-family:var(--font-body);color:var(--color-text-secondary);text-align:center;padding:20px}
.landscape-warning .rotate-icon{display:flex;align-items:center;justify-content:center}
.landscape-warning .rotate-icon .ui-icon{width:48px;height:48px}

@media(max-width:374px){
  .profile-points{font-size:24px}
  .stat-value{font-size:15px}
  .achievement-status{font-size:10px}
}