/* 分现鑫 H5 会员端 - 品牌设计系统 */
:root {
  --brand: #E02020;      /* 财神红 */
  --brand-dark: #B01010;
  --gold: #D4AF37;       /* 元宝金 */
  --gold-light: #F5E6A3;
  --bg: #F7F8FA;
  --card: #FFFFFF;
  --text: #1A1A1A;
  --text-2: #666666;
  --text-3: #999999;
  --success: #07C160;
  --warning: #FA5151;
  --radius: 16px;
  --shadow: 0 4px 16px rgba(0,0,0,0.06);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; padding:0; height:100%; background:#EBECF0; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif; color: var(--text); }

#app { max-width:430px; min-height:100vh; margin:0 auto; background: var(--bg); position:relative; overflow:hidden; box-shadow: 0 0 40px rgba(0,0,0,0.08); }

/* Header */
.app-header { position:sticky; top:0; z-index:20; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color:#fff; padding:12px 16px 16px; }
.brand-bar { display:flex; align-items:center; gap:10px; }
.brand-logo { width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--gold-light); background:#fff; }
.brand-name { font-size:20px; font-weight:800; letter-spacing:1px; }
.brand-tag { font-size:11px; opacity:.9; margin-top:2px; }

/* Tab nav */
.tabbar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px; background:#fff; border-top:1px solid #EEE; display:flex; justify-content:space-around; padding:6px 0 calc(6px + env(safe-area-inset-bottom)); z-index:30; }
.tabbar a { text-decoration:none; color: var(--text-3); font-size:11px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 10px; transition:.2s; }
.tabbar a .icon { font-size:22px; line-height:1; }
.tabbar a.active { color: var(--brand); font-weight:700; }

/* Content */
.page { padding:16px 16px 90px; }
.section-title { font-size:18px; font-weight:800; margin:20px 0 12px; display:flex; align-items:center; gap:8px; }
.section-title .dot { width:6px; height:18px; background: var(--brand); border-radius:3px; }

/* Cards */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding:16px; margin-bottom:12px; }
.glass { background: linear-gradient(135deg, rgba(224,32,32,0.95) 0%, rgba(176,16,16,0.95) 100%); color:#fff; }
.gold-card { background: linear-gradient(135deg, #FFF9E6 0%, #FFF0B3 100%); border:1px solid var(--gold-light); }

/* Hero / 荣耀会员卡 */
.hero { position:relative; overflow:hidden; }
.hero-bg { position:absolute; right:-20px; top:-20px; opacity:.15; font-size:120px; }
.hero-top { display:flex; align-items:center; gap:14px; position:relative; z-index:2; }
.avatar-ring { width:64px; height:64px; border-radius:50%; border:3px solid var(--gold); display:flex; align-items:center; justify-content:center; font-size:28px; background:rgba(255,255,255,0.15); }
.hero-info { flex:1; }
.hero-level { display:inline-flex; align-items:center; gap:4px; background:rgba(255,255,255,0.2); padding:4px 10px; border-radius:20px; font-size:12px; }
.hero-name { font-size:18px; font-weight:700; margin-top:6px; }
.hero-id { font-size:11px; opacity:.8; margin-top:2px; }
.hero-balance { text-align:right; }
.hero-balance .label { font-size:12px; opacity:.85; }
.hero-balance .num { font-size:28px; font-weight:800; }
.hero-progress { margin-top:16px; position:relative; z-index:2; }
.hp-bar { height:8px; background:rgba(255,255,255,0.25); border-radius:4px; overflow:hidden; }
.hp-fill { height:100%; background: linear-gradient(90deg, var(--gold-light), var(--gold)); border-radius:4px; transition:width .5s ease; }
.hp-text { display:flex; justify-content:space-between; font-size:11px; margin-top:6px; opacity:.9; }

/* Buttons */
.btn { display:flex; align-items:center; justify-content:center; gap:6px; border:none; border-radius:24px; padding:12px 20px; font-size:15px; font-weight:700; cursor:pointer; transition:.2s; }
.btn-primary { background: linear-gradient(90deg, var(--brand), var(--brand-dark)); color:#fff; box-shadow:0 4px 12px rgba(224,32,32,0.3); }
.btn-primary:active { transform:scale(0.98); }
.btn-gold { background: linear-gradient(90deg, var(--gold), #B8962E); color:#4A3000; box-shadow:0 4px 12px rgba(212,175,55,0.3); }
.btn-block { width:100%; }
.btn-sm { padding:6px 12px; font-size:12px; border-radius:16px; }

/* Earn card */
.earn-card { display:flex; justify-content:space-between; align-items:center; }
.earn-main .earn-title { font-size:14px; color: var(--text-2); }
.earn-main .earn-num { font-size:32px; font-weight:800; color: var(--brand); margin-top:4px; }
.earn-main .earn-note { font-size:12px; color: var(--text-3); margin-top:4px; }
.earn-side { text-align:right; }
.earn-side .earn-tag { display:inline-block; background: rgba(224,32,32,0.1); color: var(--brand); padding:4px 10px; border-radius:12px; font-size:11px; font-weight:700; margin-bottom:8px; }

/* Stats grid */
.stats-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.stat-item { background:#fff; border-radius:12px; padding:12px 8px; text-align:center; box-shadow: var(--shadow); }
.stat-num { font-size:18px; font-weight:800; color: var(--brand); }
.stat-label { font-size:11px; color: var(--text-2); margin-top:4px; }

/* Signin */
.signin-hero { text-align:center; padding:24px 16px; }
.signin-hero .day { font-size:14px; opacity:.9; }
.signin-hero .streak { font-size:56px; font-weight:900; margin:8px 0; text-shadow:0 4px 12px rgba(0,0,0,0.2); }
.signin-hero .streak-label { font-size:13px; opacity:.9; }
.signin-btn-wrap { margin:16px 0 8px; }
.signin-btn { width:160px; height:160px; border-radius:50%; border:6px solid rgba(255,255,255,0.3); background: linear-gradient(135deg, var(--gold-light), var(--gold)); color:#4A3000; font-size:22px; font-weight:900; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 auto; box-shadow:0 8px 24px rgba(0,0,0,0.2); animation:pulse 2s infinite; }
.signin-btn .sub { font-size:12px; font-weight:600; margin-top:4px; }
@keyframes pulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.03); } }
.calendar { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; text-align:center; }
.cal-head { font-size:12px; color: var(--text-3); padding:8px 0; }
.cal-day { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:12px; font-size:13px; background:#fff; box-shadow: var(--shadow); }
.cal-day.signed { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color:#fff; }
.cal-day.today { border:2px solid var(--brand); }
.cal-day .pts { font-size:10px; opacity:.85; margin-top:2px; }
.milestone-list { display:flex; gap:10px; overflow-x:auto; padding:4px 0; }
.mile { flex:0 0 110px; background:#fff; border-radius:12px; padding:12px; text-align:center; box-shadow: var(--shadow); }
.mile.active { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color:#4A3000; }
.mile .icon { font-size:28px; }
.mile .name { font-size:12px; font-weight:700; margin-top:6px; }
.mile .desc { font-size:10px; opacity:.8; margin-top:2px; }

/* Reward page */
.level-line { display:flex; justify-content:space-between; position:relative; margin:20px 0 10px; }
.level-line::before { content:''; position:absolute; top:14px; left:10%; right:10%; height:4px; background:#EEE; border-radius:2px; z-index:0; }
.level-node { position:relative; z-index:1; text-align:center; width:48px; }
.level-node .badge { width:32px; height:32px; border-radius:50%; background:#EEE; color: var(--text-3); display:flex; align-items:center; justify-content:center; margin:0 auto; font-size:12px; font-weight:700; }
.level-node.current .badge { background: var(--brand); color:#fff; box-shadow:0 0 0 4px rgba(224,32,32,0.15); }
.level-node .name { font-size:10px; margin-top:6px; color: var(--text-3); }
.level-node.current .name { color: var(--brand); font-weight:700; }
.timeline { border-left:2px solid #EEE; margin-left:8px; padding-left:16px; }
.timeline-item { position:relative; padding:12px 0; }
.timeline-item::before { content:''; position:absolute; left:-21px; top:16px; width:10px; height:10px; border-radius:50%; background: var(--gold); border:2px solid #fff; box-shadow:0 0 0 2px var(--gold-light); }
.tl-title { font-size:14px; font-weight:700; }
.tl-time { font-size:11px; color: var(--text-3); margin-top:2px; }
.tl-amt { position:absolute; right:0; top:12px; font-weight:800; color: var(--brand); }

/* Mall */
.product-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.product { background:#fff; border-radius:14px; overflow:hidden; box-shadow: var(--shadow); }
.product-img { height:130px; display:flex; align-items:center; justify-content:center; font-size:60px; background:#f8f8f8; }
.product-info { padding:12px; }
.product-name { font-size:14px; font-weight:700; }
.product-price { color: var(--brand); font-size:18px; font-weight:800; margin-top:6px; }
.product-price .unit { font-size:12px; }
.product-btn { margin-top:8px; }

/* Detail */
.detail-hero { height:220px; display:flex; align-items:center; justify-content:center; font-size:100px; background:#f8f8f8; border-radius: var(--radius); }
.detail-bar { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.detail-name { font-size:18px; font-weight:800; }
.detail-price { font-size:24px; font-weight:900; color: var(--brand); }

/* Invite */
.invite-card { text-align:center; padding:24px 16px; }
.invite-card .slogan { font-size:16px; font-weight:700; }
.invite-card .tip { font-size:12px; opacity:.85; margin-top:8px; line-height:1.6; }
.invite-code { background:rgba(255,255,255,0.2); border-radius:12px; padding:14px; margin:16px 0; font-size:24px; font-weight:900; letter-spacing:2px; }
.invite-list .row { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid #f0f0f0; }
.invite-list .row:last-child { border-bottom:none; }
.disclaimer { font-size:11px; color: var(--text-3); line-height:1.6; background:#f8f8f8; border-radius:10px; padding:12px; margin-top:12px; }

/* Modal */
.modal-mask { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:50; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:.25s; }
.modal-mask.show { opacity:1; pointer-events:auto; }
.modal { background:#fff; border-radius:24px; width:80%; max-width:320px; padding:28px 22px; text-align:center; transform:translateY(20px); transition:.25s; }
.modal-mask.show .modal { transform:translateY(0); }
.modal-icon { font-size:64px; }
.modal-title { font-size:20px; font-weight:800; margin-top:10px; }
.modal-desc { font-size:14px; color: var(--text-2); margin-top:8px; line-height:1.5; }
.modal-btn { margin-top:20px; }

/* Toast */
.toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9); background:rgba(0,0,0,0.78); color:#fff; padding:12px 20px; border-radius:20px; font-size:14px; z-index:60; opacity:0; pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* loading / empty */
.loading { text-align:center; padding:40px; color: var(--text-3); }
.empty { text-align:center; padding:40px; color: var(--text-3); }
.empty .icon { font-size:48px; opacity:.5; }

/* safe footer */
body.has-tabbar .page { padding-bottom:90px; }