/* Compressed on 2026-04-07 22:51:09 */
#app{ min-height:100vh; background:var(--color-bg)} #page-container{ min-height:calc(100vh - 60px); padding-bottom:70px} .home-page{ min-height:100vh; background:var(--color-bg); padding-bottom:80px} .home-header{ background:var(--gradient-header); padding:var(--spacing-lg) var(--spacing-base); position:sticky; top:0; z-index:100} .search-bar{ display:flex; align-items:center; gap:var(--spacing-sm); background:rgba(255,255,255,0.18); backdrop-filter:blur(10px); border-radius:var(--radius-full); padding:12px 18px; border:1px solid rgba(255,255,255,0.15); cursor:pointer; transition:all var(--transition-base)} .search-bar:hover{ background:rgba(255,255,255,0.25); transform:translateY(-1px)} .search-bar svg{ color:rgba(255,255,255,0.9); flex-shrink:0} .search-bar span{ color:rgba(255,255,255,0.85); font-size:var(--font-size-md); flex:1} .welcome-card{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-lg); margin:var(--spacing-base); box-shadow:var(--shadow-lg); border:1px solid var(--color-border)} .welcome-card h2{ font-size:var(--font-size-xl); font-weight:var(--font-weight-bold); color:var(--color-text); margin:0 0 var(--spacing-xs); letter-spacing:-0.5px} .welcome-card p{ font-size:var(--font-size-base); color:var(--color-text-muted); margin:0 0 var(--spacing-lg)} .home-stats{ display:flex; justify-content:space-around; padding:var(--spacing-lg) 0 0; border-top:1px solid var(--color-border)} .home-stat-item{ text-align:center; cursor:pointer; transition:transform var(--transition-base)} .home-stat-item:hover{ transform:translateY(-2px)} .home-stat-value{ font-size:var(--font-size-3xl); font-weight:var(--font-weight-bold); color:var(--color-primary); line-height:1; margin-bottom:var(--spacing-xs)} .home-stat-label{ font-size:var(--font-size-sm); color:var(--color-text-muted)} .quick-entry-section{ padding:var(--spacing-base)} .quick-entry-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--spacing-lg)} .quick-entry-item{ display:flex; flex-direction:column; align-items:center; padding:var(--spacing-sm); cursor:pointer; border-radius:var(--radius-xl); transition:all var(--transition-base)} .quick-entry-item:hover{ background:var(--color-primary-bg); transform:translateY(-2px)} .quick-entry-item:active{ transform:scale(0.96)} .quick-entry-icon{ width:64px; height:64px; border-radius:var(--radius-xl); display:flex; align-items:center; justify-content:center; margin-bottom:var(--spacing-sm); background:var(--gradient-primary); color:var(--color-text-white); font-size:28px; box-shadow:var(--shadow-primary); transition:all var(--transition-base)} .quick-entry-item:nth-child(2) .quick-entry-icon{ background:var(--gradient-accent); box-shadow:var(--shadow-accent)} .quick-entry-item:nth-child(3) .quick-entry-icon{ background:var(--gradient-purple); box-shadow:0 4px 16px rgba(139,92,246,0.3)} .quick-entry-item:nth-child(4) .quick-entry-icon{ background:var(--gradient-yellow); box-shadow:0 4px 16px rgba(251,191,36,0.3)} .quick-entry-item:hover .quick-entry-icon{ transform:scale(1.05)} .quick-entry-text{ font-size:var(--font-size-sm); color:var(--color-text-light); font-weight:var(--font-weight-medium)} .section-card{ background:var(--color-bg-white); border-radius:var(--radius-xl); margin:var(--spacing-base); padding:var(--spacing-lg); box-shadow:var(--shadow-md); border:1px solid var(--color-border)} .section-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--spacing-base)} .section-title{ font-size:var(--font-size-lg); font-weight:var(--font-weight-bold); color:var(--color-text); position:relative; padding-left:var(--spacing-sm); letter-spacing:-0.3px} .section-title::before{ content:""; position:absolute; left:0; width:4px; height:20px; background:var(--color-primary); border-radius:var(--radius-full)} .section-more{ font-size:var(--font-size-base); color:var(--color-primary); cursor:pointer; transition:color var(--transition-base); font-weight:var(--font-weight-medium)} .section-more:hover{ color:var(--color-primary-light)} .task-list,.line-list{ padding:0} .task-card,.line-card{ background:var(--color-bg-white); border-radius:var(--radius-xl); margin-bottom:var(--spacing-base); overflow:hidden; box-shadow:var(--shadow-sm); cursor:pointer; transition:all var(--transition-base); border:1px solid var(--color-border)} .task-card:hover,.line-card:hover{ box-shadow:var(--shadow-lg); border-color:var(--color-primary-bg); transform:translateY(-2px)} .task-card:active,.line-card:active{ transform:translateY(0)} .task-card-cover{ height:160px; background:var(--gradient-card); overflow:hidden; position:relative} .task-card-cover img{ width:100%; height:100%; object-fit:cover; transition:transform var(--transition-slow)} .task-card:hover .task-card-cover img{ transform:scale(1.05)} .task-badge{ position:absolute; top:var(--spacing-base); left:var(--spacing-base); padding:6px 14px; background:var(--gradient-primary); color:var(--color-text-white); font-size:var(--font-size-sm); font-weight:var(--font-weight-semibold); border-radius:var(--radius-full); box-shadow:var(--shadow-primary)} .task-card-body{ padding:var(--spacing-base)} .task-card-body h3{ font-size:var(--font-size-lg); font-weight:var(--font-weight-semibold); margin:0 0 var(--spacing-sm); color:var(--color-text); line-height:var(--line-height-tight)} .task-card-meta{ display:flex; gap:var(--spacing-lg); font-size:var(--font-size-sm); color:var(--color-text-muted)} .task-card-meta .points{ color:var(--color-text-light)} .task-price{ font-size:var(--font-size-xl); font-weight:var(--font-weight-bold); color:var(--color-primary)} .line-card-body{ padding:var(--spacing-base)} .line-card-title{ font-size:var(--font-size-lg); font-weight:var(--font-weight-semibold); margin:0 0 var(--spacing-sm); color:var(--color-text)} .line-card-meta{ display:flex; gap:var(--spacing-lg); font-size:var(--font-size-sm); color:var(--color-text-muted)} .user-page{ min-height:100vh; background:var(--color-bg); padding-bottom:80px} .user-header{ background:var(--gradient-header); padding:var(--spacing-2xl) var(--spacing-lg); display:flex; align-items:center; gap:var(--spacing-base); position:relative; overflow:hidden} .user-header::before{ content:""; position:absolute; top:-50%; right:-20%; width:200px; height:200px; background:rgba(255,255,255,0.1); border-radius:50%} .user-avatar{ width:80px; height:80px; border-radius:50%; background:var(--color-bg-white); display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:var(--shadow-lg); position:relative; z-index:1; flex-shrink:0} .user-avatar img{ width:100%; height:100%; object-fit:cover} .user-info{ position:relative; z-index:1; flex:1; min-width:0} .user-info h2{ font-size:var(--font-size-xl); font-weight:var(--font-weight-bold); color:var(--color-text-white); margin:0 0 var(--spacing-xs)} .user-info p{ font-size:var(--font-size-sm); color:rgba(255,255,255,0.8); margin:0} .user-stats{ display:flex; background:var(--color-bg-white); margin:calc(var(--spacing-base) * -1) var(--spacing-base) var(--spacing-base); border-radius:var(--radius-xl); padding:var(--spacing-base); box-shadow:var(--shadow-lg); position:relative; z-index:2} .user-stat-item{ flex:1; text-align:center; padding:var(--spacing-sm); cursor:pointer; transition:transform var(--transition-base)} .user-stat-item:hover{ transform:scale(1.05)} .user-stat-value{ font-size:var(--font-size-xl); font-weight:var(--font-weight-bold); background:var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text} .user-stat-label{ font-size:var(--font-size-xs); color:var(--color-text-muted); margin-top:var(--spacing-xs)} .menu-list{ background:var(--color-bg-white); margin:var(--spacing-base); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .menu-item{ display:flex; align-items:center; gap:var(--spacing-base); padding:var(--spacing-base) var(--spacing-lg); cursor:pointer; transition:all var(--transition-base); border-bottom:1px solid var(--color-border-light)} .menu-item:last-child{ border-bottom:none} .menu-item:hover{ background:var(--color-primary-bg)} .menu-item:active{ background:var(--color-primary-100)} .menu-item svg{ width:24px; height:24px; color:var(--color-primary); flex-shrink:0} .menu-item span{ font-size:var(--font-size-base); color:var(--color-text); flex:1} .menu-item .arrow{ color:var(--color-text-muted); font-size:var(--font-size-sm)} .task-page,.lines-page,.activity-page,.achievements-page,.messages-page,.mall-page,.team-page,.game-page,.guide-page,.answer-page,.payment-page,.vip-page,.share-page,.invite-page,.progress-page,.profile-page{ min-height:100vh; background:var(--color-bg)} .page-header{ display:flex; align-items:center; justify-content:space-between; padding:var(--spacing-base); background:var(--color-bg-white); border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:var(--z-sticky)} .page-header h1{ font-size:var(--font-size-lg); font-weight:var(--font-weight-semibold); color:var(--color-text); margin:0} .back-btn{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-md); color:var(--color-text); transition:all var(--transition-base)} .back-btn:hover{ background:var(--color-primary-bg); color:var(--color-primary)} .loading-spinner{ display:flex; justify-content:center; align-items:center; padding:var(--spacing-xl)} .loading-spinner::after{ content:""; width:32px; height:32px; border:3px solid var(--color-border); border-top-color:var(--color-primary); border-radius:50%; animation:spin 1s linear infinite} @keyframes spin{ to{ transform:rotate(360deg)} } .empty-state{ text-align:center; padding:var(--spacing-2xl); color:var(--color-text-muted)} .empty-state .empty-icon{ font-size:48px; margin-bottom:var(--spacing-sm); opacity:0.6} .empty-state p{ font-size:var(--font-size-sm); margin:0} .bottom-nav{ position:fixed; bottom:0; left:0; right:0; background:var(--color-bg-white); display:flex; justify-content:space-around; padding:var(--spacing-sm) 0; padding-bottom:calc(var(--spacing-sm) + env(safe-area-inset-bottom)); box-shadow:0 -4px 20px rgba(0,0,0,0.15); z-index:var(--z-fixed); border-top:1px solid var(--color-border)} .nav-item{ display:flex; flex-direction:column; align-items:center; padding:var(--spacing-xs) var(--spacing-base); color:var(--color-text-muted); text-decoration:none; font-size:var(--font-size-xs); transition:all var(--transition-base); border-radius:var(--radius-lg); cursor:pointer} .nav-item svg{ width:26px; height:26px; margin-bottom:var(--spacing-xs); transition:transform var(--transition-base)} .nav-item:hover svg{ transform:scale(1.1)} .nav-item.active{ color:var(--color-primary)} .nav-item.active svg{ color:var(--color-primary)} .filter-bar{ display:flex; gap:var(--spacing-sm); padding:var(--spacing-base); overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--color-bg-white); border-bottom:1px solid var(--color-border-light)} .filter-bar::-webkit-scrollbar{ display:none} .filter-item{ padding:var(--spacing-sm) var(--spacing-base); background:var(--color-bg-light); border-radius:var(--radius-full); font-size:var(--font-size-sm); white-space:nowrap; cursor:pointer; border:1px solid var(--color-border); transition:all var(--transition-base); font-weight:var(--font-weight-medium); color:var(--color-text-light)} .filter-item:hover{ border-color:var(--color-primary); color:var(--color-primary)} .filter-item.active{ background:var(--gradient-primary); color:var(--color-text-white); border-color:transparent; box-shadow:var(--shadow-primary)} .activity-list{ padding:var(--spacing-base)} .activity-card{ background:var(--color-bg-white); border-radius:var(--radius-xl); margin-bottom:var(--spacing-base); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--color-border); transition:all var(--transition-base); cursor:pointer} .activity-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px)} .activity-banner{ width:100%; height:140px; object-fit:cover; display:block} .activity-card h3{ font-size:var(--font-size-lg); font-weight:var(--font-weight-semibold); color:var(--color-text); margin:0; padding:var(--spacing-base) var(--spacing-base) var(--spacing-xs)} .activity-card p{ font-size:var(--font-size-sm); color:var(--color-text-muted); margin:0; padding:0 var(--spacing-base); line-height:1.5} .activity-reward{ display:inline-block; margin:var(--spacing-sm) var(--spacing-base) var(--spacing-base); padding:6px 12px; background:var(--color-primary-bg); color:var(--color-primary); font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); border-radius:var(--radius-full)} .activity-detail-page{ min-height:100vh; background:var(--color-bg); padding-bottom:100px} .activity-detail-content{ padding:var(--spacing-base)} .activity-detail-card{ background:var(--color-bg-white); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .activity-detail-banner{ width:100%; height:200px; object-fit:cover; display:block} .activity-detail-body{ padding:var(--spacing-lg)} .activity-status-badge{ display:inline-block; padding:4px 12px; border-radius:var(--radius-full); font-size:var(--font-size-xs); font-weight:var(--font-weight-medium); margin-bottom:var(--spacing-sm)} .activity-status-badge.active{ background:var(--color-success-bg); color:var(--color-success)} .activity-status-badge.joined{ background:var(--color-primary-bg); color:var(--color-primary)} .activity-status-badge.completed{ background:var(--color-bg-light); color:var(--color-text-muted)} .activity-status-badge.ended{ background:var(--color-danger-bg); color:var(--color-danger)} .activity-detail-title{ font-size:var(--font-size-xl); font-weight:var(--font-weight-bold); color:var(--color-text); margin:0 0 var(--spacing-sm)} .activity-detail-desc{ font-size:var(--font-size-base); color:var(--color-text-muted); line-height:1.6; margin:0 0 var(--spacing-lg)} .activity-detail-info{ background:var(--color-bg); border-radius:var(--radius-lg); padding:var(--spacing-base)} .activity-detail-info .info-item{ display:flex; justify-content:space-between; align-items:center; padding:var(--spacing-sm) 0; border-bottom:1px solid var(--color-border)} .activity-detail-info .info-item:last-child{ border-bottom:none} .activity-detail-info .info-label{ font-size:var(--font-size-sm); color:var(--color-text-muted)} .activity-detail-info .info-value{ font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--color-text)} .activity-detail-info .info-value.reward{ color:var(--color-primary)} .activity-detail-actions{ position:fixed; bottom:0; left:0; right:0; padding:var(--spacing-base); background:var(--color-bg-white); border-top:1px solid var(--color-border); box-shadow:var(--shadow-lg)} .signin-page,.streak-page,.gift-page,.newbie-task-page{ min-height:100vh; background:var(--color-bg); padding-bottom:100px} .signin-content,.streak-content,.newbie-content{ padding:var(--spacing-base)} .signin-stats,.streak-stats{ display:flex; gap:var(--spacing-base); margin-bottom:var(--spacing-lg)} .stat-card{ flex:1; background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-lg); text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .stat-num{ display:block; font-size:32px; font-weight:var(--font-weight-bold); color:var(--color-primary)} .stat-label{ font-size:var(--font-size-sm); color:var(--color-text-muted)} .signin-calendar,.streak-calendar{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-base); margin-bottom:var(--spacing-lg); box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .calendar-header{ text-align:center; margin-bottom:var(--spacing-base); font-weight:var(--font-weight-semibold); color:var(--color-text)} .calendar-header .month{ font-size:var(--font-size-xl); margin-right:var(--spacing-xs)} .calendar-header .year{ font-size:var(--font-size-base); color:var(--color-text-muted)} .calendar-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:var(--font-size-xs); color:var(--color-text-muted); margin-bottom:var(--spacing-sm)} .calendar-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px} .calendar-days span{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:var(--font-size-sm); border-radius:var(--radius-md); color:var(--color-text)} .calendar-days span.empty{ background:transparent} .calendar-days span.today{ background:var(--color-primary); color:var(--color-text-white); font-weight:var(--font-weight-bold)} .calendar-days span.checked{ background:var(--color-success-bg); color:var(--color-success)} .signin-rewards h3{ font-size:var(--font-size-base); font-weight:var(--font-weight-semibold); color:var(--color-text); margin:0 0 var(--spacing-sm)} .reward-list{ display:flex; flex-direction:column; gap:var(--spacing-sm)} .reward-item{ display:flex; justify-content:space-between; align-items:center; background:var(--color-bg-white); padding:var(--spacing-sm) var(--spacing-base); border-radius:var(--radius-lg); border:1px solid var(--color-border)} .reward-item .days{ font-weight:var(--font-weight-medium); color:var(--color-text)} .reward-item .points{ color:var(--color-primary); font-weight:var(--font-weight-bold)} .signin-action,.gift-action{ position:fixed; bottom:0; left:0; right:0; padding:var(--spacing-base); background:var(--color-bg-white); border-top:1px solid var(--color-border)} .streak-calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px} .streak-day{ aspect-ratio:1; border-radius:var(--radius-sm); background:var(--color-bg-light)} .streak-day.checked{ background:var(--color-success)} .streak-legend{ display:flex; justify-content:center; gap:var(--spacing-lg); margin-top:var(--spacing-base); font-size:var(--font-size-sm); color:var(--color-text-muted)} .legend-box{ display:inline-block; width:12px; height:12px; border-radius:2px; background:var(--color-bg-light); margin-right:4px; vertical-align:middle} .legend-box.checked{ background:var(--color-success)} .streak-info{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-lg); text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .streak-info p{ color:var(--color-text-muted); margin:0 0 var(--spacing-sm)} .streak-reward{ font-size:var(--font-size-lg); color:var(--color-text)} .streak-reward strong{ color:var(--color-primary)} .gift-content{ padding:var(--spacing-xl); text-align:center} .gift-box{ margin-bottom:var(--spacing-lg)} .gift-icon{ font-size:80px; animation:bounce 2s infinite} @keyframes bounce{ 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-10px)} } .gift-title{ font-size:var(--font-size-xl); font-weight:var(--font-weight-bold); color:var(--color-text); margin:0 0 var(--spacing-sm)} .gift-desc{ color:var(--color-text-muted); margin:0 0 var(--spacing-lg)} .gift-items{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-base); box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .gift-item{ display:flex; align-items:center; justify-content:center; gap:var(--spacing-base); padding:var(--spacing-base)} .gift-item .item-icon{ font-size:24px} .gift-item .item-name{ color:var(--color-text-muted)} .gift-item .item-value{ font-size:var(--font-size-lg); font-weight:var(--font-weight-bold); color:var(--color-primary)} .newbie-desc{ text-align:center; color:var(--color-text-muted); margin:var(--spacing-base) 0} .daily-task-list{ padding:var(--spacing-base)} .daily-task-card{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-base); margin-bottom:var(--spacing-base); box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .daily-task-card .task-info h4{ font-size:var(--font-size-base); font-weight:var(--font-weight-semibold); color:var(--color-text); margin:0 0 4px} .daily-task-card .task-info p{ font-size:var(--font-size-sm); color:var(--color-text-muted); margin:0 0 var(--spacing-sm)} .daily-task-card .task-progress{ display:flex; align-items:center; gap:var(--spacing-sm); margin-bottom:var(--spacing-sm)} .daily-task-card .progress-bar{ flex:1; height:6px; background:var(--color-bg-light); border-radius:3px; overflow:hidden} .daily-task-card .progress-fill{ height:100%; background:var(--gradient-primary); border-radius:3px; transition:width var(--transition-base)} .daily-task-card .progress-text{ font-size:var(--font-size-xs); color:var(--color-text-muted); white-space:nowrap} .daily-task-card .task-reward{ font-size:var(--font-size-sm); color:var(--color-primary); font-weight:var(--font-weight-medium)} .daily-task-card .task-done{ color:var(--color-success); font-size:18px} .activity-info h3{ font-size:var(--font-size-base); font-weight:var(--font-weight-semibold); color:var(--color-text); margin:0 0 var(--spacing-xs)} .activity-info p{ font-size:var(--font-size-sm); color:var(--color-text-muted); margin:0} .achievement-list,.message-list,.product-list,.team-list{ padding:var(--spacing-base)} .achievement-card,.message-card,.product-card,.team-card{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-base); margin-bottom:var(--spacing-base); display:flex; align-items:center; gap:var(--spacing-base); box-shadow:var(--shadow-sm); border:1px solid var(--color-border); transition:all var(--transition-base)} .achievement-card:hover,.message-card:hover,.product-card:hover,.team-card:hover{ box-shadow:var(--shadow-md)} .achievement-card.locked{ opacity:0.6} .achievement-icon,.product-image{ width:50px; height:50px; border-radius:var(--radius-lg); background:var(--gradient-primary); display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0} .achievement-info,.product-info{ flex:1; min-width:0} .achievement-info h3,.product-info h3{ font-size:var(--font-size-base); font-weight:var(--font-weight-semibold); color:var(--color-text); margin:0 0 var(--spacing-xs)} .achievement-info p,.product-info p{ font-size:var(--font-size-sm); color:var(--color-text-muted); margin:0} .achievement-reward,.product-price{ font-size:var(--font-size-sm); font-weight:var(--font-weight-semibold); color:var(--color-primary)} .message-card.unread{ border-left:3px solid var(--color-primary)} .message-title{ font-size:var(--font-size-base); font-weight:var(--font-weight-semibold); color:var(--color-text); margin-bottom:var(--spacing-xs)} .message-content{ font-size:var(--font-size-sm); color:var(--color-text-light); margin-bottom:var(--spacing-xs)} .message-time{ font-size:var(--font-size-xs); color:var(--color-text-muted)} .vip-header{ background:var(--gradient-header); padding:var(--spacing-2xl) var(--spacing-lg); text-align:center; color:var(--color-text-white)} .vip-header h2{ font-size:var(--font-size-xl); margin:0 0 var(--spacing-xs)} .vip-header p{ font-size:var(--font-size-sm); opacity:0.8; margin:0} .vip-levels{ display:flex; flex-direction:column; gap:var(--spacing-base); padding:var(--spacing-base)} .vip-level-card{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-lg); text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .vip-level-card h3{ font-size:var(--font-size-lg); color:var(--color-text); margin:0 0 var(--spacing-sm)} .vip-price{ font-size:var(--font-size-2xl); font-weight:var(--font-weight-bold); background:var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:var(--spacing-sm)} .vip-benefits{ font-size:var(--font-size-sm); color:var(--color-text-muted); margin-bottom:var(--spacing-base)} .login-page{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--spacing-xl); background:var(--gradient-header); position:relative; overflow:hidden} .login-page::before{ content:""; position:absolute; top:-30%; right:-20%; width:300px; height:300px; background:rgba(255,255,255,0.1); border-radius:50%} .login-logo{ font-size:64px; margin-bottom:var(--spacing-base); position:relative; z-index:1} .login-page h1{ font-size:var(--font-size-2xl); font-weight:var(--font-weight-bold); color:var(--color-text-white); margin:0 0 var(--spacing-xs); position:relative; z-index:1} .login-subtitle{ font-size:var(--font-size-sm); color:rgba(255,255,255,0.8); margin:0 0 var(--spacing-xl); position:relative; z-index:1} .login-tabs{ display:flex; background:rgba(255,255,255,0.2); border-radius:var(--radius-lg); padding:4px; margin-bottom:var(--spacing-base); position:relative; z-index:1} .login-tab{ flex:1; padding:var(--spacing-sm) var(--spacing-base); text-align:center; font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:rgba(255,255,255,0.8); border-radius:var(--radius-md); cursor:pointer; transition:all var(--transition-base)} .login-tab:hover{ color:var(--color-text-white)} .login-tab.active{ background:var(--color-bg-white); color:var(--color-primary); box-shadow:var(--shadow-sm)} .login-form{ width:100%; max-width:320px; background:var(--color-bg-white); padding:var(--spacing-xl); border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); position:relative; z-index:1} .tab-content{ display:flex; flex-direction:column; gap:var(--spacing-base)} .login-form .form-group{ margin-bottom:0} .login-form input{ width:100%; padding:var(--spacing-md); border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:var(--font-size-base); box-sizing:border-box; transition:all var(--transition-base); background:var(--color-bg-white); color:var(--color-text)} .login-form input:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-bg)} .code-group{ display:flex; gap:var(--spacing-sm)} .code-group input{ flex:1} .code-btn{ padding:var(--spacing-sm) var(--spacing-base); background:var(--gradient-primary); color:var(--color-text-white); border:none; border-radius:var(--radius-md); font-size:var(--font-size-sm); cursor:pointer; white-space:nowrap; transition:all var(--transition-base); box-shadow:var(--shadow-primary)} .code-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-primary-lg)} .code-btn:disabled{ opacity:0.6; cursor:not-allowed; transform:none} .login-footer{ text-align:center; margin-top:var(--spacing-lg); position:relative; z-index:1} .login-footer p{ font-size:var(--font-size-sm); color:rgba(255,255,255,0.7); margin:0} .profile-page{ min-height:100vh; background:var(--color-bg)} .profile-content{ padding:var(--spacing-base)} .avatar-section{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-xl); margin-bottom:var(--spacing-base); text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .avatar-preview{ width:100px; height:100px; border-radius:50%; background:var(--color-bg-light); margin:0 auto var(--spacing-base); overflow:hidden; display:flex; align-items:center; justify-content:center} .avatar-preview img{ width:100%; height:100%; object-fit:cover} .form-section{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-lg); box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .form-section .form-group{ margin-bottom:var(--spacing-base)} .form-section .form-group:last-child{ margin-bottom:0} .form-section label{ display:block; font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--color-text); margin-bottom:var(--spacing-xs)} .form-section input,.form-section textarea{ width:100%; padding:var(--spacing-md); border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:var(--font-size-base); color:var(--color-text); background:var(--color-bg-white); transition:all var(--transition-base); box-sizing:border-box} .form-section input:focus,.form-section textarea:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-bg)} .form-section textarea{ resize:vertical; min-height:80px} .profile-avatar-section{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-xl); margin-bottom:var(--spacing-base); text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .profile-avatar{ width:100px; height:100px; border-radius:50%; background:var(--color-bg-light); margin:0 auto var(--spacing-base); overflow:hidden; display:flex; align-items:center; justify-content:center; border:3px solid var(--color-primary)} .profile-avatar img{ width:100%; height:100%; object-fit:cover} .profile-form{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-lg); margin-bottom:var(--spacing-base); box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .profile-form .form-group{ margin-bottom:var(--spacing-base)} .profile-form label{ display:block; font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--color-text); margin-bottom:var(--spacing-xs)} .profile-form input{ width:100%; padding:var(--spacing-md); border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:var(--font-size-base); color:var(--color-text); background:var(--color-bg-white); transition:all var(--transition-base); box-sizing:border-box} .profile-form input:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-bg)} .profile-form input:disabled{ background:var(--color-bg-light); color:var(--color-text-muted); cursor:not-allowed} .profile-section{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-lg); box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .profile-section h3{ font-size:var(--font-size-base); font-weight:var(--font-weight-semibold); color:var(--color-text); margin:0 0 var(--spacing-base) 0; padding-bottom:var(--spacing-sm); border-bottom:1px solid var(--color-border)} .password-modal{ background:var(--color-bg-white) !important; border-radius:var(--radius-xl)} .password-modal .modal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--spacing-base)} .password-modal .modal-title{ font-size:var(--font-size-lg); font-weight:var(--font-weight-semibold); color:var(--color-text)} .password-modal .modal-close{ font-size:24px; color:var(--color-text-muted); cursor:pointer; line-height:1} .password-modal .modal-body{ margin-bottom:var(--spacing-lg)} .password-form-group{ margin-bottom:var(--spacing-base)} .password-form-group:last-child{ margin-bottom:0} .password-form-group label{ display:block; font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--color-text); margin-bottom:var(--spacing-xs)} .password-form-group input{ width:100%; padding:var(--spacing-md); border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:var(--font-size-base); color:var(--color-text); background:var(--color-bg); box-sizing:border-box; transition:all var(--transition-base)} .password-form-group input:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-bg)} .password-modal .modal-footer{ display:flex; gap:var(--spacing-sm)} .password-modal .modal-footer .btn{ flex:1} .share-page{ min-height:100vh; background:var(--color-bg)} .share-content{ padding:var(--spacing-base)} .share-preview{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-base); margin-bottom:var(--spacing-base); box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .share-poster{ width:100%; border-radius:var(--radius-lg); overflow:hidden; background:var(--gradient-primary); min-height:200px; display:flex; align-items:center; justify-content:center} .share-poster img{ width:100%; height:auto} .share-info{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-base); margin-bottom:var(--spacing-base); box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .share-info h3{ font-size:var(--font-size-lg); font-weight:var(--font-weight-semibold); color:var(--color-text); margin:0 0 var(--spacing-xs)} .share-info p{ font-size:var(--font-size-sm); color:var(--color-text-muted); margin:0} .share-qrcode{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-lg); margin-bottom:var(--spacing-base); text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .share-qrcode img{ width:150px; height:150px; border-radius:var(--radius-lg); margin-bottom:var(--spacing-sm)} .share-qrcode p{ font-size:var(--font-size-sm); color:var(--color-text-muted); margin:0} .share-platforms{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--spacing-base); padding:var(--spacing-base); background:var(--color-bg-white); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .share-platform-item{ display:flex; flex-direction:column; align-items:center; gap:var(--spacing-xs); cursor:pointer; padding:var(--spacing-sm); border-radius:var(--radius-lg); transition:all var(--transition-base)} .share-platform-item:hover{ background:var(--color-primary-bg); transform:translateY(-2px)} .platform-icon{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--color-text-white)} .platform-icon.wechat{ background:#07c160} .platform-icon.moments{ background:#07c160} .platform-icon.weibo{ background:#e6162d} .platform-icon.link{ background:var(--gradient-primary)} .share-platform-item span{ font-size:var(--font-size-xs); color:var(--color-text-light)} .invite-page{ min-height:100vh; background:var(--color-bg)} .invite-content{ padding:var(--spacing-base)} .invite-stats{ display:flex; background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-base); margin-bottom:var(--spacing-base); box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .invite-stat-item{ flex:1; text-align:center} .invite-stat-item .stat-num{ font-size:var(--font-size-xl); font-weight:var(--font-weight-bold); background:var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text} .invite-stat-item .stat-label{ font-size:var(--font-size-xs); color:var(--color-text-muted); margin-top:var(--spacing-xs)} .invite-qrcode{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-lg); margin-bottom:var(--spacing-base); text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .invite-qrcode img{ width:150px; height:150px; border-radius:var(--radius-lg); margin-bottom:var(--spacing-sm)} .invite-qrcode p{ font-size:var(--font-size-sm); color:var(--color-text-muted); margin:0} .invite-code-section{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-lg); margin-bottom:var(--spacing-base); text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .invite-code-label{ font-size:var(--font-size-sm); color:var(--color-text-muted); margin-bottom:var(--spacing-sm)} .invite-code-value{ font-size:var(--font-size-2xl); font-weight:var(--font-weight-bold); color:var(--color-primary); letter-spacing:4px; margin-bottom:var(--spacing-base)} .invite-records{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-lg); box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .invite-records h3{ font-size:var(--font-size-md); font-weight:var(--font-weight-semibold); color:var(--color-text); margin:0 0 var(--spacing-base)} .invite-record-item{ display:flex; align-items:center; padding:var(--spacing-sm) 0; border-bottom:1px solid var(--color-border-light)} .invite-record-item:last-child{ border-bottom:none} .invite-record-item .phone{ flex:1; font-size:var(--font-size-sm); color:var(--color-text)} .invite-record-item .status{ font-size:var(--font-size-xs); padding:var(--spacing-xs) var(--spacing-sm); border-radius:var(--radius-full); background:var(--color-primary-bg); color:var(--color-primary)} .invite-record-item .time{ font-size:var(--font-size-xs); color:var(--color-text-muted); margin-left:var(--spacing-sm)} .progress-page{ min-height:100vh; background:var(--color-bg)} .progress-content{ padding:var(--spacing-base)} .progress-stats{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-lg); margin-bottom:var(--spacing-base); display:flex; align-items:center; gap:var(--spacing-lg); box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .progress-circle{ width:100px; height:100px; position:relative; flex-shrink:0} .progress-circle svg{ transform:rotate(-90deg)} .progress-circle circle{ fill:none; stroke-linecap:round} #progressArc{ transition:stroke-dashoffset 0.5s ease} .progress-text{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center} .progress-text span{ font-size:var(--font-size-xl); font-weight:var(--font-weight-bold); color:var(--color-primary)} .progress-info{ flex:1} .progress-item{ display:flex; justify-content:space-between; padding:var(--spacing-sm) 0; border-bottom:1px solid var(--color-border-light)} .progress-item:last-child{ border-bottom:none} .progress-item .label{ font-size:var(--font-size-sm); color:var(--color-text-muted)} .progress-item .value{ font-size:var(--font-size-sm); font-weight:var(--font-weight-semibold); color:var(--color-text)} .point-timeline{ background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-lg); box-shadow:var(--shadow-sm); border:1px solid var(--color-border)} .timeline-item{ display:flex; align-items:flex-start; gap:var(--spacing-base); padding:var(--spacing-sm) 0; position:relative} .timeline-item:not(:last-child)::after{ content:""; position:absolute; left:14px; top:36px; width:2px; height:calc(100% - 20px); background:var(--color-border)} .timeline-item.completed::after{ background:var(--color-primary)} .timeline-marker{ width:28px; height:28px; border-radius:50%; background:var(--color-bg-light); border:2px solid var(--color-border); display:flex; align-items:center; justify-content:center; font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); color:var(--color-text-muted); flex-shrink:0; z-index:1} .timeline-item.completed .timeline-marker{ background:var(--gradient-primary); border-color:transparent; color:var(--color-text-white)} .timeline-item.current .timeline-marker{ border-color:var(--color-primary); color:var(--color-primary)} .timeline-content h4{ font-size:var(--font-size-base); font-weight:var(--font-weight-medium); color:var(--color-text); margin:0 0 var(--spacing-xs)} .timeline-content p{ font-size:var(--font-size-sm); color:var(--color-text-muted); margin:0} .map-page{ height:100vh; position:relative} #map-container{ width:100%; height:100%} .map-controls{ position:absolute; right:var(--spacing-base); bottom:100px; display:flex; flex-direction:column; gap:var(--spacing-sm)} .map-control-btn{ width:44px; height:44px; border-radius:50%; background:var(--color-bg-white); border:none; box-shadow:var(--shadow-md); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--transition-base)} .map-control-btn:hover{ background:var(--color-primary-bg); color:var(--color-primary)} .point-card{ position:absolute; bottom:var(--spacing-base); left:var(--spacing-base); right:var(--spacing-base); background:var(--color-bg-white); border-radius:var(--radius-xl); padding:var(--spacing-base); box-shadow:var(--shadow-lg); border:1px solid var(--color-border)} @media (min-width:769px){ body:has(.bottom-nav) #app{ max-width:480px; margin:0 auto; position:relative; min-height:100vh; box-shadow:var(--shadow-xl)} body:has(.bottom-nav){ background:var(--color-bg-dark)} .bottom-nav{ display:none} #page-container{ padding-bottom:0} .home-header{ border-radius:0} .section-card,.task-card,.line-card,.activity-card,.welcome-card{ border-radius:var(--radius-lg)} .user-header{ border-radius:0} .login-page{ border-radius:var(--radius-xl); margin:var(--spacing-xl) auto; max-width:400px; min-height:auto} } @media (max-width:768px){ .quick-entry-grid{ grid-template-columns:repeat(4,1fr)} .quick-entry-icon{ width:56px; height:56px; font-size:24px} .section-card{ margin:var(--spacing-sm); padding:var(--spacing-base)} .user-stats{ margin:calc(var(--spacing-base) * -1) var(--spacing-sm) var(--spacing-sm)} .menu-list{ margin:var(--spacing-sm)} }