/* ===========================================================================
   美丝宝藏 - Mobile CSS
   设计理念：现代简约商务质感 | 8px栅格 | 单一主色 | 柔和阴影
   =========================================================================== */

/* ===== Design Tokens ===== */
:root {
  --c-primary: #10B981;
  --c-primary-dark: #059669;
  --c-primary-light: #D1FAE5;
  --c-primary-bg: #F0FDF4;

  --c-bg: #F7F8FA;
  --c-surface: #FFFFFF;

  --c-text-1: #111827;
  --c-text-2: #6B7280;
  --c-text-3: #9CA3AF;
  --c-text-4: #C4C8CF;

  --c-border: #E5E7EB;
  --c-border-light: #F3F4F6;

  --c-warning: #F59E0B;
  --c-warning-bg: #FFFBEB;
  --c-danger: #EF4444;
  --c-danger-bg: #FEF2F2;
  --c-info: #3B82F6;
  --c-info-bg: #EFF6FF;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -2px rgba(0,0,0,0.03);

  --transition: 0.2s ease;
}

/* ===== Global Reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: #E5E7EB; color: var(--c-text-1); -webkit-font-smoothing: antialiased; }
button { border: none; outline: none; cursor: pointer; font-family: inherit; }
input, select { outline: none; font-family: inherit; }
a { text-decoration: none; }

/* 通用 SVG 图标尺寸（在 icon 容器内的 svg 自动继承父级字号行高） */
.home-card-title .icon svg, .order-flow-icon svg,
.verify-card-icon svg, .verify-notice-icon svg,
.team-benefit-icon svg, .announcement-icon svg, .daily-order-icon svg,
.invite-card-icon svg, .user-avatar svg, .step-icon-large svg,
.home-user-info svg { width: 1em; height: 1em; display: block; }
.order-flow-icon svg { width: 16px; height: 16px; }
.verify-card-icon svg { width: 22px; height: 22px; color: var(--c-primary); }
.verify-notice-icon svg { width: 18px; height: 18px; color: var(--c-warning); }
.team-benefit-icon svg { width: 18px; height: 18px; color: var(--c-text-2); }
.team-benefit-desc svg { width: 12px; height: 12px; vertical-align: -2px; color: var(--c-text-2); }
.announcement-icon svg { width: 16px; height: 16px; color: var(--c-warning); }
.daily-order-icon svg { width: 16px; height: 16px; color: var(--c-info); }
.invite-card-icon svg { width: 20px; height: 20px; color: var(--c-primary); }
.user-avatar svg { width: 28px; height: 28px; color: var(--c-text-3); }
.step-icon-large svg { width: 48px; height: 48px; color: var(--c-primary); }
.home-card-title .icon svg { width: 18px; height: 18px; color: var(--c-primary); }

/* 新增 SVG 图标尺寸（第二轮 emoji 清理） */
.verify-reminder-icon svg { width: 16px; height: 16px; color: var(--c-warning); flex-shrink: 0; }
.team-banner-icon svg { width: 28px; height: 28px; color: var(--c-primary); }
.partner-stats-icon svg { width: 20px; height: 20px; color: var(--c-primary); }
.team-members-entry-icon svg { width: 18px; height: 18px; color: var(--c-text-2); }
.follow-empty-icon svg { width: 48px; height: 48px; color: var(--c-text-3); }
.user-edit-icon svg { width: 16px; height: 16px; color: var(--c-text-3); }
.exp-level-icon svg { width: 16px; height: 16px; }
.exp-rule-icon svg { width: 16px; height: 16px; color: var(--c-text-2); }
.modal-close svg { width: 16px; height: 16px; display: block; }
.follow-card-title svg { width: 18px; height: 18px; color: var(--c-primary); vertical-align: -3px; margin-right: 4px; }
.modal-header svg { width: 18px; height: 18px; color: var(--c-warning); flex-shrink: 0; }

/* ===== App Container ===== */
/* 小程序版：在桌面浏览器中显示为手机外观（最大 430px 居中），手机上全屏 */
#app { width: 100%; max-width: 430px; margin: 0 auto; height: 100vh; min-height: 100vh; background: var(--c-bg); display: flex; flex-direction: column; position: relative; box-shadow: 0 0 24px rgba(0,0,0,0.08); }
@media (max-width: 430px) { #app { box-shadow: none; } }

/* ===== Page System ===== */
.page-container { flex: 1; overflow: hidden; position: relative; min-height: 0; }
.page { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; display: flex; flex-direction: column; opacity: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.page.active { opacity: 1; pointer-events: auto; z-index: 2; }
#page-task-detail { transform: translateX(100%); transition: transform 0.25s ease, opacity 0.25s ease; }
#page-task-detail.active { transform: translateX(0); opacity: 1; }
#page-task-detail.closing { transform: translateX(100%); opacity: 0; }
#page-task-detail.closing { transform: translateX(100%); opacity: 0; }

/* ===== Header ===== */
.header { background: var(--c-surface); padding: 36px 16px 10px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; position: relative; border-bottom: 1px solid var(--c-border-light); }
.header-title { font-size: 17px; font-weight: 600; color: var(--c-text-1); }
.header-user { font-size: 12px; color: var(--c-text-2); }
.header-back { font-size: 22px; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--c-text-1); }
.header-tutorial-btn { font-size: 13px; font-weight: 500; color: var(--c-primary); padding: 6px 14px; cursor: pointer; border-radius: var(--radius-md); transition: background var(--transition); }
.header-tutorial-btn:active { background: var(--c-primary-bg); }

/* ===== Page Content ===== */
.page-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; position: relative; background: var(--c-bg); }

/* ===== Pull Refresh ===== */
.pull-refresh-indicator { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--c-surface); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; z-index: 10; transition: top 0.2s ease, opacity 0.2s ease; opacity: 0; }
.pull-refresh-indicator.visible { opacity: 1; }
.pull-refresh-indicator svg { width: 20px; height: 20px; color: var(--c-primary); transition: transform 0.2s ease; }
.pull-refresh-indicator.refreshing svg { animation: refresh-spin 0.8s linear infinite; }
.pull-refresh-text { display: none; }
@keyframes refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ===== Home Cards ===== */
.home-cards-row { display: flex; gap: 12px; margin-bottom: 16px; }
.home-card { flex: 1; border-radius: var(--radius-lg); padding: 16px; background: var(--c-surface); box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); transition: box-shadow var(--transition); }
.home-card:active { box-shadow: var(--shadow-sm); }
.submit-card { border-left: 3px solid var(--c-primary); }
.gift-card { cursor: pointer; border-left: 3px solid var(--c-text-3); }
.home-card-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--c-text-1); }
.home-card-title .icon { font-size: 18px; }
.home-card-desc { font-size: 12px; color: var(--c-text-2); margin-bottom: 12px; line-height: 1.4; }
.home-card-btn { width: 100%; padding: 8px 12px; background: var(--c-primary); border: none; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; color: #fff; cursor: pointer; transition: background var(--transition); }
.home-card-btn:active { background: var(--c-primary-dark); }
.gift-card .home-card-btn { background: var(--c-text-1); }
.gift-card .home-card-btn:active { background: #2D3138; }

/* ===== Section Title ===== */
.section-title { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; margin: 20px 0 12px; color: var(--c-text-1); }
.section-count { font-size: 13px; color: var(--c-text-3); font-weight: 400; }

/* ===== Flow Steps ===== */
.order-flow-steps { display: flex; align-items: center; justify-content: space-between; background: var(--c-surface); border: 1px solid var(--c-border-light); border-radius: var(--radius-lg); padding: 12px 12px; margin-bottom: 8px; }
.order-flow-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.order-flow-num { width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--c-primary); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.order-flow-icon { font-size: 16px; line-height: 1; }
.order-flow-text { font-size: 10px; color: var(--c-text-2); font-weight: 500; text-align: center; line-height: 1.3; }
.order-flow-arrow { color: var(--c-text-4); font-size: 10px; letter-spacing: -1px; padding: 0 2px; }

/* ===== Banners ===== */
.daily-order-banner { display: flex; align-items: center; gap: 8px; background: var(--c-info-bg); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 10px; font-size: 13px; color: var(--c-text-1); border: 1px solid #DBEAFE; }
.daily-order-banner .daily-order-icon { font-size: 16px; }
.daily-order-banner.daily-order-exhausted { background: var(--c-danger-bg); border-color: #FECACA; color: var(--c-danger); }

.verify-reminder-banner { display: flex; align-items: center; gap: 8px; background: var(--c-warning-bg); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 10px; font-size: 13px; color: #92400E; border: 1px solid #FDE68A; }
.verify-reminder-banner .verify-reminder-icon { font-size: 16px; flex-shrink: 0; }
.verify-reminder-banner .verify-reminder-text { flex: 1; line-height: 1.4; }
.verify-reminder-banner .verify-reminder-btn { flex-shrink: 0; background: var(--c-warning); color: #fff; padding: 4px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; cursor: pointer; }

/* ===== Store List / Task Cards ===== */
.store-list { display: flex; flex-direction: column; gap: 12px; }
.store-item { background: var(--c-surface); border-radius: var(--radius-lg); padding: 16px; display: flex; align-items: flex-start; gap: 12px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); transition: box-shadow var(--transition); }
.store-item:active { box-shadow: var(--shadow-sm); }
.store-item-img { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--c-bg); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; overflow: hidden; }
.store-item-img img { width: 100%; height: 100%; object-fit: contain; }
.store-item-info { flex: 1; min-width: 0; }
.store-item-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--c-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-item-shop { font-size: 12px; color: var(--c-primary); margin-bottom: 4px; }
.store-item-desc { font-size: 12px; color: var(--c-text-3); margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store-item-price { display: flex; gap: 12px; font-size: 12px; flex-wrap: wrap; align-items: baseline; }
.store-item-price .display-price { color: var(--c-text-2); font-weight: 500; }
.store-item-price .price { color: var(--c-text-1); font-weight: 600; }
.store-item-price .commission { color: var(--c-primary); font-weight: 700; font-size: 16px; }
.store-item-btn { padding: 8px 20px; background: var(--c-primary); color: #fff; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; flex-shrink: 0; transition: background var(--transition); align-self: center; }
.store-item-btn:active { background: var(--c-primary-dark); }

/* ===== Badges ===== */
.store-item-badges { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.interval-badge { font-size: 10px; color: var(--c-info); background: var(--c-info-bg); padding: 2px 8px; border-radius: var(--radius-sm); }
.cooldown-badge { font-size: 10px; color: var(--c-danger); background: var(--c-danger-bg); padding: 2px 8px; border-radius: var(--radius-sm); }
.stock-badge { font-size: 10px; color: var(--c-primary); background: var(--c-primary-bg); padding: 2px 8px; border-radius: var(--radius-sm); }
.stock-badge.sold-out { color: var(--c-danger); background: var(--c-danger-bg); }
.claimed-badge { font-size: 10px; color: #fff; background: var(--c-warning); padding: 2px 8px; border-radius: var(--radius-sm); }
.store-item-btn.cooldown, .store-item-btn.disabled { background: var(--c-text-4) !important; cursor: not-allowed; }
.store-item-btn.claimed { background: var(--c-text-4) !important; color: #fff !important; cursor: pointer; opacity: 0.85; }
.store-item-cooldown { opacity: 0.65; }
.store-item-soldout { opacity: 0.55; }

/* ===== Commission Overview ===== */
.commission-overview { display: flex; background: var(--c-surface); border-radius: var(--radius-lg); padding: 20px 16px; margin-bottom: 16px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.commission-item { flex: 1; text-align: center; }
.commission-item:not(:last-child) { border-right: 1px solid var(--c-border-light); }
.commission-value { font-size: 20px; font-weight: 700; color: var(--c-text-1); }
.commission-label { font-size: 12px; color: var(--c-text-3); margin-top: 4px; }

/* ===== Order Tabs ===== */
.order-tabs { display: flex; background: var(--c-surface); border-radius: var(--radius-lg); margin-bottom: 8px; overflow: hidden; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.order-tab { flex: 1; padding: 12px; text-align: center; font-size: 13px; color: var(--c-text-2); position: relative; transition: color var(--transition); }
.order-tab.active { color: var(--c-primary); font-weight: 600; }
.order-tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: var(--c-primary); border-radius: 1px; }

/* ===== Time Filter ===== */
.order-time-filter { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.order-time-filter::-webkit-scrollbar { display: none; }
.time-filter-item { padding: 6px 14px; font-size: 12px; color: var(--c-text-2); background: var(--c-surface); border-radius: var(--radius-full); white-space: nowrap; flex-shrink: 0; transition: all var(--transition); border: 1px solid var(--c-border-light); }
.time-filter-item.active { background: var(--c-primary); color: #fff; font-weight: 600; border-color: transparent; }
.time-filter-item:active { transform: scale(0.96); }

/* ===== Order List ===== */
.order-list { display: flex; flex-direction: column; gap: 12px; }
.order-item { background: var(--c-surface); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.order-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--c-border-light); }
.order-store-name { font-size: 14px; font-weight: 600; color: var(--c-text-1); }
.order-status { font-size: 12px; padding: 3px 10px; border-radius: var(--radius-sm); font-weight: 500; }
.order-status.pending { background: var(--c-warning-bg); color: #92400E; }
.order-status.confirmed { background: var(--c-primary-bg); color: var(--c-primary-dark); }
.order-status.frozen { background: var(--c-warning-bg); color: var(--c-warning); }
.order-status.rejected { background: var(--c-danger-bg); color: var(--c-danger); }
.order-item-body { display: flex; justify-content: space-between; align-items: center; }
.order-number { font-size: 13px; color: var(--c-text-2); }
.order-number .label { color: var(--c-text-3); }
.order-amount { text-align: right; }
.order-price { font-size: 16px; font-weight: 600; color: var(--c-text-1); }
.order-commission { font-size: 13px; color: var(--c-primary); font-weight: 600; margin-top: 2px; }
.order-date { font-size: 12px; color: var(--c-text-3); margin-top: 8px; }
.order-level-tip { font-size: 11px; color: var(--c-info); margin-top: 4px; }

/* ===== Task Detail ===== */
.task-detail-card { background: var(--c-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); margin-bottom: 16px; }
.task-detail-img { width: 100%; min-height: 120px; max-height: 500px; background: var(--c-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.task-detail-img img { display: block; max-width: 100%; max-height: 500px; width: auto; height: auto; }
.task-detail-img-placeholder { font-size: 48px; color: var(--c-text-4); }
.task-detail-titles { padding: 16px; }
.task-detail-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.task-detail-field-label { font-size: 12px; color: var(--c-text-3); font-weight: 500; }
.copy-btn { font-size: 12px; color: var(--c-primary); padding: 4px 12px; border: 1px solid var(--c-primary); border-radius: var(--radius-full); cursor: pointer; transition: all var(--transition); }
.copy-btn.copied { background: var(--c-primary); color: #fff; }
.task-detail-full-title { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--c-text-1); }
.task-detail-short-title { font-size: 14px; color: var(--c-text-2); }
.task-detail-shop-name { font-size: 15px; color: var(--c-text-1); font-weight: 600; }
.task-detail-prices { padding: 0 16px 16px; }
.task-price-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--c-border-light); }
.task-price-row:first-child { border-top: none; }
.task-price-label { font-size: 14px; color: var(--c-text-2); }
.task-price-value { font-size: 16px; font-weight: 600; color: var(--c-text-1); }
.task-detail-desc { padding: 0 16px 16px; font-size: 13px; color: var(--c-text-2); line-height: 1.6; }
.task-submit-area { background: var(--c-surface); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.task-submit-btn { width: 100%; padding: 14px; border-radius: var(--radius-md); font-size: 16px; font-weight: 600; margin-top: 8px; background: var(--c-primary); color: #fff; transition: background var(--transition); }
.task-submit-btn:active { background: var(--c-primary-dark); }
.submit-level-tip { background: var(--c-primary-bg); border-radius: var(--radius-md); padding: 8px 12px; font-size: 12px; margin-bottom: 12px; color: var(--c-primary-dark); }

/* ===== Task Detail Warning ===== */
.task-detail-warning { display: flex; align-items: flex-start; gap: 10px; background: #FEF2F2; border: 2px solid #EF4444; border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 12px; animation: warning-pulse 2s ease-in-out infinite; }
@keyframes warning-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }
.task-detail-warning svg { width: 22px; height: 22px; color: #DC2626; flex-shrink: 0; margin-top: 1px; }
.task-detail-warning-text { font-size: 15px; color: #DC2626; font-weight: 700; line-height: 1.5; }
.task-detail-warning-text .task-detail-warning-sub { font-size: 13px; font-weight: 500; color: #B91C1C; display: block; margin-top: 2px; }
.task-submit-warning { font-size: 13px; color: #DC2626; text-align: center; margin-bottom: 10px; font-weight: 600; padding: 8px 12px; background: #FEF2F2; border-radius: var(--radius-sm); border: 1px solid #FECACA; }

/* ===== Cooldown / Claim Info ===== */
.task-detail-interval { padding: 10px 14px; font-size: 12px; color: var(--c-info); background: var(--c-info-bg); border-radius: var(--radius-md); margin: 0 0 12px; }
.cooldown-info-box { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: var(--c-warning-bg); border-radius: var(--radius-md); margin-top: 8px; font-size: 14px; color: var(--c-warning); }
.cooldown-info-box span:last-child { font-weight: 700; font-size: 16px; }
.task-detail-stock { padding: 10px 14px; font-size: 12px; color: var(--c-primary); background: var(--c-primary-bg); border-radius: var(--radius-md); margin: 0 0 12px; }

.claim-info-box { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; background: var(--c-warning-bg); border-radius: var(--radius-md); margin-top: 8px; font-size: 13px; color: #92400E; flex-wrap: wrap; }
.claim-info-box #detail-claim-countdown { font-weight: 700; font-size: 18px; color: var(--c-danger); }

/* ===== Balance Card ===== */
.balance-card { background: var(--c-surface); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.balance-label { font-size: 13px; color: var(--c-text-2); }
.balance-amount { font-size: 36px; font-weight: 700; margin: 8px 0 16px; color: var(--c-text-1); }
.balance-info { display: flex; gap: 16px; font-size: 12px; color: var(--c-text-3); margin-bottom: 16px; }
.balance-info span { font-weight: 600; color: var(--c-text-1); }
.btn-withdraw { width: 100%; padding: 13px; background: var(--c-primary); color: #fff; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; transition: background var(--transition); }
.btn-withdraw:active { background: var(--c-primary-dark); }

/* ===== Withdraw List ===== */
.withdraw-list { display: flex; flex-direction: column; gap: 12px; }
.withdraw-item { background: var(--c-surface); border-radius: var(--radius-lg); padding: 16px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.withdraw-amount { font-size: 18px; font-weight: 600; color: var(--c-text-1); }
.withdraw-date { font-size: 12px; color: var(--c-text-3); margin-top: 2px; }
.withdraw-status { font-size: 12px; padding: 4px 12px; border-radius: var(--radius-sm); font-weight: 500; }
.withdraw-status.pending { background: var(--c-warning-bg); color: #92400E; }
.withdraw-status.processing { background: var(--c-info-bg); color: var(--c-info); }
.withdraw-status.approved { background: var(--c-primary-bg); color: var(--c-primary-dark); }
.withdraw-status.rejected { background: var(--c-danger-bg); color: var(--c-danger); }

/* ===== Account Verify Cards ===== */
.account-verify-card { background: var(--c-surface); border-radius: var(--radius-lg); padding: 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.verify-card-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--c-bg); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.verify-card-info { flex: 1; min-width: 0; }
.verify-card-title { font-size: 15px; font-weight: 600; color: var(--c-text-1); }
.verify-card-desc { font-size: 12px; color: var(--c-text-3); margin-top: 3px; line-height: 1.4; }
.verify-card-status { font-size: 13px; font-weight: 600; padding: 6px 16px; border-radius: var(--radius-full); cursor: pointer; flex-shrink: 0; transition: all var(--transition); }
.verify-card-status.unverified { background: var(--c-warning-bg); color: var(--c-warning); }
.verify-card-status.verified, .verify-card-status.bound { background: var(--c-primary-bg); color: var(--c-primary-dark); }
.verify-card-status.locked { background: var(--c-bg); color: var(--c-text-4); cursor: not-allowed; }

/* ===== Verify Modal ===== */
.verify-notice { background: var(--c-info-bg); border-radius: var(--radius-md); padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.verify-notice-icon { font-size: 18px; flex-shrink: 0; }
.verify-notice-text { font-size: 13px; color: var(--c-text-2); line-height: 1.5; }
.verify-tip { font-size: 12px; color: var(--c-text-3); margin-top: 8px; line-height: 1.5; }
.verify-locked-info { background: var(--c-warning-bg); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 16px; }
.verify-locked-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; }
.verify-locked-row:not(:last-child) { border-bottom: 1px solid var(--c-border-light); }
.verify-locked-label { color: var(--c-text-3); }
.verify-locked-value { font-weight: 600; color: var(--c-text-1); }

/* ===== User Card (Mine) ===== */
.user-card { background: var(--c-surface); border-radius: var(--radius-lg); padding: 20px; display: flex; align-items: center; gap: 14px; margin-bottom: 16px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.user-avatar { width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--c-bg); display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-info { flex: 1; }
.user-name { font-size: 16px; font-weight: 600; color: var(--c-text-1); }
.user-phone { font-size: 13px; color: var(--c-text-2); margin-top: 4px; }
.user-edit-icon { font-size: 16px; color: var(--c-text-3); flex-shrink: 0; }

/* ===== Profile Edit ===== */
.profile-avatar-section { display: flex; justify-content: center; margin-bottom: 20px; }

/* ===== Menu Groups ===== */
.menu-group { background: var(--c-surface); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.menu-item { display: flex; align-items: center; padding: 16px; cursor: pointer; transition: background var(--transition); }
.menu-item:active { background: var(--c-bg); }
.menu-item:not(:last-child) { border-bottom: 1px solid var(--c-border-light); }
.menu-icon { font-size: 20px; margin-right: 12px; width: 24px; text-align: center; }
.menu-text { flex: 1; font-size: 15px; color: var(--c-text-1); }
.menu-arrow { color: var(--c-text-4); font-size: 18px; }

/* ===== Logout ===== */
.logout-group { margin-top: 20px; }
.logout-item { justify-content: center; }
.logout-item .menu-text { flex: none; color: var(--c-danger); font-weight: 600; text-align: center; }
.logout-item .menu-icon { margin-right: 8px; }

/* ===== Level Info ===== */
.level-info-card { background: var(--c-surface); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.level-info-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.level-info-title { font-size: 15px; font-weight: 600; color: var(--c-text-1); }
.level-info-mult { font-size: 13px; font-weight: 600; padding: 2px 12px; border-radius: var(--radius-full); color: #fff; background: var(--c-primary); }
.level-info-desc { font-size: 13px; color: var(--c-text-2); line-height: 1.5; }

/* ===== Daily Order Card ===== */
.daily-order-card { background: var(--c-surface); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.daily-order-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.daily-order-card-title { font-size: 15px; font-weight: 600; color: var(--c-text-1); }
.daily-order-card-remaining { font-size: 20px; font-weight: 700; color: var(--c-primary); }
.daily-order-card-remaining.exhausted { color: var(--c-danger); }
.daily-order-card-bar { height: 6px; background: var(--c-border-light); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.daily-order-card-bar-fill { height: 100%; background: var(--c-primary); border-radius: 3px; transition: width 0.3s; }
.daily-order-card-desc { font-size: 13px; color: var(--c-text-3); }

/* ===== Exp Card ===== */
.exp-card { background: var(--c-surface); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.exp-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.exp-level-badge { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-full); color: #fff; font-size: 13px; font-weight: 600; background: var(--c-primary); }
.exp-level-icon { font-size: 16px; }
.exp-level-name { font-size: 13px; }
.exp-points-display { display: flex; align-items: baseline; gap: 4px; }
.exp-points-value { font-size: 24px; font-weight: 700; color: var(--c-primary); }
.exp-points-label { font-size: 12px; color: var(--c-text-3); }
.exp-bar-container { margin-bottom: 8px; }
.exp-bar-track { position: relative; height: 8px; background: var(--c-border-light); border-radius: 4px; overflow: hidden; }
.exp-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; background: var(--c-primary); }
.exp-bar-glow { position: absolute; top: 0; left: 0; right: 0; height: 100%; border-radius: 4px; display: none; }
.exp-bar-info { display: flex; justify-content: flex-end; gap: 4px; font-size: 12px; color: var(--c-text-3); margin-bottom: 6px; }
.exp-bar-info #exp-bar-current { font-weight: 600; color: var(--c-primary); }
.exp-bar-hint { font-size: 12px; color: var(--c-text-3); margin-bottom: 14px; }
.exp-rules { display: flex; gap: 12px; margin-bottom: 14px; }
.exp-rule-item { flex: 1; display: flex; align-items: center; gap: 6px; background: var(--c-bg); border-radius: var(--radius-md); padding: 8px 10px; font-size: 12px; color: var(--c-text-2); }
.exp-rule-icon { font-size: 16px; }
.exp-levels-preview { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px 4px; }
.exp-level-dot { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.exp-level-dot > span:first-child { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; filter: grayscale(1); opacity: 0.4; transition: all 0.3s; }
.exp-level-dot > span:first-child svg { width: 20px; height: 20px; }
.exp-level-dot-name { font-size: 10px; color: var(--c-text-3); }
.exp-level-dot-pts { font-size: 9px; color: var(--c-text-4); }
.exp-level-dot.active > span:first-child { filter: none; opacity: 1; transform: scale(1.3); }
.exp-level-dot.active .exp-level-dot-name { color: var(--c-primary); font-weight: 600; }
.exp-level-dot.active .exp-level-dot-pts { color: var(--c-primary); }
.exp-level-dot.passed > span:first-child { filter: none; opacity: 0.7; }
.exp-level-dot.passed .exp-level-dot-name { color: var(--c-primary); }
.exp-level-dot.passed .exp-level-dot-pts { color: var(--c-primary); }
.exp-level-line { flex: 1; height: 2px; background: var(--c-border-light); margin: 0 2px; margin-top: -18px; }
.exp-level-line:first-child { display: none; }

/* ===== Invite Card ===== */
.invite-card { background: var(--c-surface); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 12px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.invite-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.invite-card-icon { font-size: 20px; }
.invite-card-title { font-size: 16px; font-weight: 600; color: var(--c-text-1); }
.invite-card-desc { font-size: 12px; color: var(--c-text-2); margin-bottom: 14px; line-height: 1.5; }
.invite-code-box { background: var(--c-bg); border-radius: var(--radius-md); padding: 14px; margin-bottom: 12px; }
.invite-code-label { font-size: 12px; color: var(--c-text-3); margin-bottom: 6px; }
.invite-code-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.invite-code-value { font-size: 20px; font-weight: 700; letter-spacing: 1px; font-family: 'SF Mono', 'Courier New', monospace; color: var(--c-text-1); }
.invite-copy-btn { padding: 6px 16px; background: var(--c-primary); color: #fff; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; flex-shrink: 0; transition: background var(--transition); }
.invite-copy-btn:active { background: var(--c-primary-dark); }
.invite-stats { display: flex; align-items: center; }
.invite-stat-item { flex: 1; text-align: center; }
.invite-stat-value { font-size: 24px; font-weight: 700; color: var(--c-text-1); }
.invite-stat-label { font-size: 12px; color: var(--c-text-3); margin-top: 2px; }
.invite-stat-divider { width: 1px; height: 30px; background: var(--c-border); }

/* ===== User Badges ===== */
.user-level-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 500; color: #fff; margin-left: 6px; vertical-align: middle; }
.user-group-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 500; color: #fff; margin-left: 4px; vertical-align: middle; }

/* ===== Tabbar ===== */
.tabbar { display: flex; background: var(--c-surface); border-top: 1px solid var(--c-border-light); padding: 6px 0; padding-bottom: env(safe-area-inset-bottom, 6px); flex-shrink: 0; position: sticky; bottom: 0; z-index: 50; box-shadow: 0 -2px 8px rgba(0,0,0,0.04); }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; cursor: pointer; transition: opacity var(--transition); }
.tab-icon { font-size: 22px; color: var(--c-text-4); transition: color var(--transition); }
.tab-icon svg { width: 24px; height: 24px; }
.tab-text { font-size: 10px; color: var(--c-text-3); transition: color var(--transition); }
.tab-item.active .tab-text { color: var(--c-primary); font-weight: 600; }
.tab-item.active .tab-icon { color: var(--c-primary); }
.tab-item.active .tab-icon svg path,
.tab-item.active .tab-icon svg rect,
.tab-item.active .tab-icon svg circle { stroke: var(--c-primary); }

/* ===== Modals ===== */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(17,24,39,0.45); z-index: 1000; align-items: center; justify-content: center; }
.modal-overlay.show { display: flex; }
.modal { background: var(--c-surface); border-radius: var(--radius-xl); width: 88%; max-width: 380px; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--c-border-light); font-size: 16px; font-weight: 600; color: var(--c-text-1); }
.modal-close { cursor: pointer; font-size: 18px; color: var(--c-text-3); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-footer { display: flex; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--c-border-light); }
.modal-footer button { flex: 1; padding: 12px; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; }

/* ===== Forms ===== */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 14px; color: var(--c-text-2); margin-bottom: 6px; font-weight: 500; }
.form-input { width: 100%; padding: 12px; border: 1px solid var(--c-border); border-radius: var(--radius-md); font-size: 15px; background: var(--c-surface); color: var(--c-text-1); transition: border-color var(--transition); }
.form-input:focus { border-color: var(--c-primary); }

.store-info-preview { background: var(--c-bg); border-radius: var(--radius-md); padding: 12px; margin-top: 8px; }
.preview-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.preview-row:last-child { margin-bottom: 0; }
.display-price-tag { color: var(--c-text-2); font-weight: 600; }
.price-tag { color: var(--c-text-1); font-weight: 600; }
.commission-tag { color: var(--c-primary); font-weight: 600; }

.available-amount { font-size: 28px; font-weight: 700; color: var(--c-text-1); }
.withdraw-tip { font-size: 12px; color: var(--c-text-3); margin-top: 8px; }

/* ===== Buttons ===== */
.btn-primary { background: var(--c-primary); color: #fff; transition: background var(--transition); }
.btn-primary:active { background: var(--c-primary-dark); }
.btn-cancel { background: var(--c-bg); color: var(--c-text-2); }

/* ===== Chat Modal ===== */
.chat-modal { max-width: 420px; }
.chat-modal .modal-body { padding: 0; }
.chat-window { display: flex; flex-direction: column; height: 60vh; max-height: 500px; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--c-bg); }
.chat-loading { text-align: center; padding: 20px; color: var(--c-text-3); font-size: 14px; }
.chat-welcome { text-align: center; padding: 40px 20px; color: var(--c-text-3); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chat-welcome p { font-size: 14px; }
.chat-msg { display: flex; flex-direction: column; max-width: 75%; }
.chat-msg-me { align-self: flex-end; align-items: flex-end; }
.chat-msg-them { align-self: flex-start; align-items: flex-start; }
.chat-msg-bubble { padding: 8px 12px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.5; word-break: break-word; }
.chat-msg-me .chat-msg-bubble { background: var(--c-primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg-them .chat-msg-bubble { background: var(--c-surface); color: var(--c-text-1); border: 1px solid var(--c-border); border-bottom-left-radius: 4px; }
.chat-msg-time { font-size: 11px; color: var(--c-text-3); margin-top: 3px; padding: 0 4px; }
.chat-input-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--c-border); background: var(--c-surface); }
.chat-input { flex: 1; padding: 8px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-md); font-size: 14px; outline: none; }
.chat-input:focus { border-color: var(--c-primary); }
.chat-send { min-width: 36px; height: 36px; border: none; border-radius: var(--radius-md); background: var(--c-primary); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-send:active { opacity: 0.8; }

/* ===== Loading / Empty ===== */
.loading { text-align: center; padding: 40px; color: var(--c-text-3); font-size: 14px; }
.empty { text-align: center; padding: 40px 20px; color: var(--c-text-4); font-size: 14px; }
.empty-icon { font-size: 48px; margin-bottom: 12px; }

/* ===== Toast ===== */
.toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(17,24,39,0.85); color: #fff; padding: 12px 24px; border-radius: var(--radius-md); font-size: 14px; z-index: 2000; opacity: 0; pointer-events: none; transition: opacity 0.3s; max-width: 280px; text-align: center; }
.toast.show { opacity: 1; }

/* ===== Announcement Bar ===== */
.announcement-bar { display: flex; align-items: center; gap: 8px; background: var(--c-warning-bg); border: 1px solid #FDE68A; border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 12px; cursor: pointer; overflow: hidden; }
.announcement-icon { font-size: 16px; flex-shrink: 0; }
.announcement-scroll { flex: 1; overflow: hidden; white-space: nowrap; }
.announcement-text { display: inline-block; animation: announcement-marquee 20s linear infinite; font-size: 13px; color: #92400E; font-weight: 500; }
.announcement-arrow { font-size: 18px; color: var(--c-warning); flex-shrink: 0; }
@keyframes announcement-marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
.announcement-detail-item { background: var(--c-bg); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 10px; }
.announcement-detail-title { font-size: 15px; font-weight: 600; color: var(--c-text-1); margin-bottom: 6px; }
.announcement-detail-content { font-size: 14px; color: var(--c-text-2); line-height: 1.7; white-space: pre-wrap; }
.announcement-detail-image { width: 100%; border-radius: var(--radius-md); margin: 8px 0; cursor: pointer; }
.announcement-detail-time { font-size: 12px; color: var(--c-text-4); margin-top: 6px; }

/* ===== Tutorial ===== */
.tutorial-video-card { background: var(--c-surface); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 12px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.tutorial-video-card video { width: 100%; display: block; }
.tutorial-video-tip { padding: 12px 16px; background: var(--c-primary-bg); border-radius: var(--radius-md); margin-bottom: 12px; font-size: 13px; color: var(--c-primary-dark); line-height: 1.6; }
.tutorial-video-tip a { color: var(--c-primary); text-decoration: underline; }
.tutorial-text-card { background: var(--c-surface); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.tutorial-text-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 10px; color: var(--c-text-1); }
.tutorial-text-content { font-size: 14px; color: var(--c-text-2); line-height: 1.8; white-space: pre-wrap; word-wrap: break-word; }
.tutorial-empty { text-align: center; padding: 60px 20px; color: var(--c-text-3); font-size: 14px; }

/* ===== Team Page ===== */
.team-banner { display: flex; align-items: center; gap: 14px; background: var(--c-surface); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 14px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.team-banner-icon { font-size: 32px; flex-shrink: 0; }
.team-banner-text { flex: 1; }
.team-banner-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; color: var(--c-text-1); }
.team-banner-desc { font-size: 12px; color: var(--c-text-2); line-height: 1.5; }

/* ===== Partner Stats ===== */
.partner-stats-card { background: var(--c-surface); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 14px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.partner-stats-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.partner-stats-icon { font-size: 22px; }
.partner-stats-title { font-size: 16px; font-weight: 600; color: var(--c-text-1); flex: 1; }
.partner-stats-per { font-size: 13px; background: var(--c-primary-bg); color: var(--c-primary-dark); padding: 3px 10px; border-radius: var(--radius-full); font-weight: 500; }
.partner-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.partner-stat-item { background: var(--c-bg); border-radius: var(--radius-md); padding: 12px; text-align: center; }
.partner-stat-value { font-size: 18px; font-weight: 700; margin-bottom: 2px; color: var(--c-text-1); }
.partner-stat-label { font-size: 12px; color: var(--c-text-3); }
.partner-withdraw-btn { width: 100%; padding: 13px; border: none; border-radius: var(--radius-md); background: var(--c-primary); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: background var(--transition); }
.partner-withdraw-btn:active { background: var(--c-primary-dark); }
.partner-member-card { background: var(--c-surface); border-radius: var(--radius-md); padding: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.partner-member-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--c-bg); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; overflow: hidden; }
.partner-member-info { flex: 1; min-width: 0; }
.partner-member-name { font-size: 14px; font-weight: 600; color: var(--c-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.partner-member-phone { font-size: 12px; color: var(--c-text-3); }
.partner-member-stats { text-align: right; flex-shrink: 0; }
.partner-member-orders { font-size: 12px; color: var(--c-text-2); }
.partner-member-commission { font-size: 15px; font-weight: 700; color: var(--c-primary); }

/* Team Members Entry */
.team-members-entry { background: var(--c-surface); border-radius: var(--radius-lg); padding: 16px 18px; margin: 10px 0; display: flex; align-items: center; justify-content: space-between; cursor: pointer; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); transition: background var(--transition); }
.team-members-entry:active { background: var(--c-bg); }
.team-members-entry-left { display: flex; align-items: center; gap: 10px; }
.team-members-entry-icon { font-size: 20px; }
.team-members-entry-text { font-size: 15px; font-weight: 600; color: var(--c-text-1); }
.team-members-entry-right { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--c-text-3); }
.team-members-entry-arrow { font-size: 18px; color: var(--c-text-4); }

/* Member Stats Bar */
.member-stats-bar { display: flex; align-items: center; background: var(--c-surface); border-radius: var(--radius-lg); padding: 16px 0; margin-bottom: 10px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.member-stat-tab { flex: 1; text-align: center; cursor: pointer; transition: opacity var(--transition); }
.member-stat-tab.active { opacity: 1; }
.member-stat-tab:not(.active) { opacity: 0.5; }
.member-stat-num { font-size: 24px; font-weight: 700; color: var(--c-primary); display: block; }
.member-stat-label { font-size: 13px; color: var(--c-text-2); }
.member-stat-divider { width: 1px; height: 36px; background: var(--c-border); }

.member-card { background: var(--c-surface); border-radius: var(--radius-md); padding: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.member-card-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--c-bg); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; overflow: hidden; }
.member-card-info { flex: 1; min-width: 0; }
.member-card-name { font-size: 14px; font-weight: 600; color: var(--c-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-card-phone { font-size: 12px; color: var(--c-text-3); }
.member-card-inviter { font-size: 11px; color: var(--c-text-4); margin-top: 2px; }
.member-card-stats { text-align: right; flex-shrink: 0; }
.member-card-orders { font-size: 12px; color: var(--c-text-2); }
.member-card-commission { font-size: 15px; font-weight: 700; color: var(--c-primary); }
.member-empty { text-align: center; padding: 40px 20px; color: var(--c-text-3); font-size: 14px; }

/* Team Benefits */
.team-benefits-card { background: var(--c-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.team-benefit-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.team-benefit-row:not(:last-child) { border-bottom: 1px solid var(--c-border-light); }
.team-benefit-level { display: flex; align-items: center; gap: 6px; min-width: 64px; flex-shrink: 0; }
.team-benefit-icon { font-size: 18px; }
.team-benefit-name { font-size: 14px; font-weight: 600; color: var(--c-text-1); }
.team-benefit-desc { flex: 1; font-size: 12px; color: var(--c-text-2); }
.team-benefit-pts { font-size: 13px; font-weight: 600; color: var(--c-primary); flex-shrink: 0; }

/* ===== Follow Page ===== */
.follow-card { background: var(--c-surface); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-xs); border: 1px solid var(--c-border-light); }
.follow-card-title { font-size: 16px; font-weight: 600; color: var(--c-text-1); margin-bottom: 12px; }
.follow-info-row { display: flex; align-items: center; margin-bottom: 8px; }
.follow-label { color: var(--c-text-3); font-size: 14px; min-width: 60px; flex-shrink: 0; }
.follow-value { color: var(--c-text-1); font-size: 14px; flex: 1; word-break: break-all; }
.follow-link { color: var(--c-primary); }
.follow-copy-btn { background: var(--c-primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 4px 12px; font-size: 12px; cursor: pointer; flex-shrink: 0; margin-left: 8px; transition: background var(--transition); }
.follow-copy-btn:active { background: var(--c-primary-dark); }
.follow-qrcode-wrap { text-align: center; margin-top: 12px; }
.follow-qrcode-img { width: 200px; height: 200px; border-radius: var(--radius-md); object-fit: cover; }
.follow-qrcode-tip { font-size: 12px; color: var(--c-text-3); margin-top: 8px; }
.follow-app-actions { display: flex; gap: 10px; margin-top: 8px; }
.follow-open-btn { flex: 1; background: var(--c-primary); color: #fff; border: none; border-radius: var(--radius-md); padding: 10px; font-size: 14px; cursor: pointer; transition: background var(--transition); }
.follow-open-btn:active { background: var(--c-primary-dark); }
.follow-empty { text-align: center; padding: 60px 0; }
.follow-empty-icon { font-size: 48px; }
.follow-empty-text { font-size: 14px; color: var(--c-text-3); margin-top: 12px; }

/* ===== Onboarding ===== */
.onboarding-overlay { background: rgba(17,24,39,0.55); }
.onboarding-modal { width: 92%; max-width: 400px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--radius-xl); }
.onboarding-header { background: var(--c-surface); padding: 32px 20px 20px; text-align: center; border-bottom: 1px solid var(--c-border-light); }
.onboarding-logo { font-size: 40px; margin-bottom: 8px; }
.onboarding-title { font-size: 20px; font-weight: 700; color: var(--c-text-1); }
.onboarding-subtitle { font-size: 13px; color: var(--c-text-2); margin-top: 4px; }

/* Steps */
.onboarding-steps { display: flex; align-items: center; justify-content: center; padding: 16px 20px 8px; background: var(--c-surface); gap: 0; }
.onboarding-step-indicator { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.step-dot { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--c-border-light); color: var(--c-text-3); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; transition: all var(--transition); }
.step-label { font-size: 11px; color: var(--c-text-3); transition: color var(--transition); white-space: nowrap; }
.onboarding-step-indicator.active .step-dot { background: var(--c-primary); color: #fff; }
.onboarding-step-indicator.active .step-label { color: var(--c-primary); font-weight: 600; }
.onboarding-step-indicator.completed .step-dot { background: var(--c-primary); color: #fff; }
.onboarding-step-indicator.completed .step-label { color: var(--c-primary); }
.step-line { width: 40px; height: 2px; background: var(--c-border-light); margin: 0 4px; margin-bottom: 18px; transition: background var(--transition); }
.step-line.filled { background: var(--c-primary); }

/* Step Content */
.onboarding-body { flex: 1; overflow-y: auto; padding: 20px; background: var(--c-surface); }
.onboarding-step-content { display: none; text-align: center; }
.onboarding-step-content.active { display: block; }

.step-icon-large { font-size: 48px; margin-bottom: 12px; }
.step-title-large { font-size: 18px; font-weight: 600; color: var(--c-text-1); margin-bottom: 8px; }
.step-desc-large { font-size: 13px; color: var(--c-text-2); line-height: 1.6; margin-bottom: 20px; padding: 0 16px; }

.btn-wechat-auth { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; background: #07c160; color: #fff; border-radius: var(--radius-md); font-size: 16px; font-weight: 600; transition: opacity var(--transition); }
.btn-wechat-auth:active { opacity: 0.85; }
.btn-wechat-auth:disabled { opacity: 0.6; }
.wechat-icon { font-size: 20px; }
.wechat-auth-info { display: flex; align-items: center; gap: 12px; background: var(--c-primary-bg); border: 1px solid var(--c-primary-light); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 16px; }
.wechat-avatar-placeholder { width: 44px; height: 44px; border-radius: var(--radius-full); background: #07c160; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.wechat-name-display { flex: 1; text-align: left; font-size: 15px; font-weight: 600; color: var(--c-text-1); }
.wechat-bound-badge { font-size: 12px; color: var(--c-primary-dark); background: var(--c-primary-light); padding: 3px 10px; border-radius: var(--radius-full); font-weight: 600; }

.phone-tip { font-size: 12px; margin-top: 6px; text-align: left; min-height: 16px; }
.phone-tip.error { color: var(--c-danger); }

.invite-verify-info { font-size: 12px; text-align: left; margin-top: 6px; padding: 8px 12px; border-radius: var(--radius-md); }
.invite-verify-info.error { background: var(--c-danger-bg); color: var(--c-danger); }
.invite-verify-info.success { background: var(--c-primary-bg); color: var(--c-primary-dark); }
.invite-code-tip { font-size: 12px; color: var(--c-text-3); margin-top: 8px; line-height: 1.5; text-align: left; }

.onboarding-btn-row { display: flex; gap: 10px; margin-top: 24px; }
.btn-prev { flex: 1; padding: 13px; background: var(--c-bg); color: var(--c-text-2); border-radius: var(--radius-md); font-size: 15px; font-weight: 600; transition: background var(--transition); }
.btn-prev:active { background: var(--c-border-light); }
.btn-next { flex: 2; padding: 13px; background: var(--c-primary); color: #fff; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; transition: background var(--transition); }
.btn-next:active { background: var(--c-primary-dark); }
.btn-complete { flex: 2; padding: 13px; background: var(--c-primary); color: #fff; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; transition: background var(--transition); }
.btn-complete:active { background: var(--c-primary-dark); }
.btn-complete:disabled { opacity: 0.6; }

/* SMS Code */
.sms-code-row { display: flex; gap: 8px; align-items: stretch; }
.btn-send-sms { white-space: nowrap; padding: 12px 16px; background: var(--c-surface); color: var(--c-primary); border: 1px solid var(--c-primary); border-radius: var(--radius-md); font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--transition); min-width: 100px; }
.btn-send-sms:active { background: var(--c-primary-bg); }
.btn-send-sms:disabled { color: var(--c-text-4); border-color: var(--c-border); cursor: not-allowed; background: var(--c-bg); }

/* Login */
.login-tip { font-size: 12px; color: var(--c-danger); margin-top: 8px; min-height: 16px; }
.login-bottom-link { text-align: center; margin-top: 16px; font-size: 13px; color: var(--c-text-3); }
.login-bottom-link a { color: var(--c-primary); font-weight: 600; }
.set-password-hint { background: var(--c-warning-bg); border: 1px solid #FDE68A; border-radius: var(--radius-md); padding: 10px 12px; margin: 10px 0; font-size: 12px; color: #92400E; line-height: 1.5; }

#step1-next-btn { width: 100%; padding: 13px; background: var(--c-primary); color: #fff; border-radius: var(--radius-md); font-size: 15px; font-weight: 600; transition: background var(--transition); margin-top: 16px; }
#step1-next-btn:active { background: var(--c-primary-dark); }

/* ===== Daily Popup ===== */
.daily-popup-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(17,24,39,0.5); z-index: 9999; align-items: center; justify-content: center; }
.daily-popup-overlay.show { display: flex; }
.daily-popup-box { background: var(--c-surface); border-radius: var(--radius-xl); width: 80%; max-width: 340px; padding: 36px 28px 20px; text-align: center; position: relative; box-shadow: var(--shadow-lg); }
.daily-popup-content { font-size: 16px; line-height: 1.8; color: var(--c-text-1); white-space: pre-wrap; word-break: break-word; max-height: 50vh; overflow-y: auto; }
.daily-popup-countdown { position: absolute; top: -12px; right: -12px; width: 32px; height: 32px; background: var(--c-primary); color: #fff; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; box-shadow: var(--shadow-sm); }

/* ===== Gift Mode: 隐藏主平台 Tabbar ===== */
body.gift-mode .tabbar { display: none; }