:root {
  --primary: #2B7A78;
  --primary-dark: #17252A;
  --accent: #DEF2F1;
  --bg: #F7F9FA;
  --text-dark: #1A1A2E;
  --text-secondary: #4A5568;
  --text-light: #A0AEC0;
  --border: #E2E8F0;
  --success: #38A169;
  --danger: #E53E3E;
  --warning: #ECC94B;
  --card-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; background:var(--bg); color:var(--text-dark); -webkit-font-smoothing:antialiased; }
.page-container { max-width:480px; margin:0 auto; min-height:100vh; background:var(--bg); padding-bottom:80px; }



/* Enhanced activity cards */
.activity-card { display:flex; background:white; border-radius:16px; overflow:hidden; margin-bottom:12px; box-shadow:0 2px 12px rgba(0,0,0,0.06); transition:transform .2s,box-shadow .2s; cursor:pointer; }
.activity-card:active { transform:scale(0.98); }
.activity-card .cover { width:120px; height:120px; object-fit:cover; flex-shrink:0; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); }
.activity-card .info { flex:1; padding:12px 14px; display:flex; flex-direction:column; justify-content:space-between; min-width:0; }
.activity-card .title { font-size:15px; font-weight:600; color:var(--text-dark); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.activity-card .meta { display:flex; gap:8px; align-items:center; font-size:12px; color:var(--text-light); flex-wrap:wrap; }
.activity-card .price-row { display:flex; justify-content:space-between; align-items:center; }
.activity-card .price { font-size:17px; font-weight:700; color:var(--primary); }
.activity-card .price small { font-size:11px; font-weight:400; color:var(--text-light); }

/* Tags */
.tag { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; }
.tag-online { background:rgba(43,122,120,0.1); color:var(--primary); }
.tag-offline { background:rgba(230,126,34,0.1); color:#e67e22; }

/* Empty state */
.empty-state { text-align:center; padding:60px 20px; }
.empty-icon { font-size:48px; margin-bottom:12px; }
.empty-text { font-size:14px; color:var(--text-light); }

/* Header improvements */
.header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:white; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; backdrop-filter:blur(10px); background:rgba(255,255,255,0.95); }
.header-title { font-size:17px; font-weight:700; color:var(--text-dark); }
.header-back { font-size:20px; color:var(--text-dark); cursor:pointer; padding:4px 12px 4px 0; }

/* Bottom bar */
.bottom-bar { position:fixed; bottom:0; left:0; right:0; display:flex; gap:12px; padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); background:rgba(255,255,255,0.98); border-top:1px solid var(--border); backdrop-filter:blur(10px); }

/* Filter bar */
.filter-bar { display:flex; gap:8px; padding:12px 16px; overflow-x:auto; }
.filter-btn { padding:6px 16px; border-radius:20px; font-size:13px; color:var(--text-secondary); background:var(--bg); cursor:pointer; white-space:nowrap; transition:all .2s; border:1px solid transparent; }
.filter-btn.active { background:rgba(43,122,120,0.1); color:var(--primary); border-color:var(--primary); font-weight:600; }

/* Tab bar */
.tab-bar { position:fixed; bottom:0; left:0; right:0; display:flex; background:rgba(255,255,255,0.98); border-top:1px solid var(--border); padding:6px 0; padding-bottom:calc(6px + env(safe-area-inset-bottom)); backdrop-filter:blur(10px); }
.tab-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px; text-decoration:none; color:var(--text-light); font-size:11px; transition:color .2s; }
.tab-item.active { color:var(--primary); }
.tab-item .tab-icon { font-size:20px; }

/* Form inputs */
.form-input { width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; font-size:14px; outline:none; transition:border-color .2s; box-sizing:border-box; }
.form-input:focus { border-color:var(--primary); }

/* Buttons */
.btn { padding:10px 20px; border-radius:10px; font-size:14px; font-weight:600; border:none; cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; justify-content:center; }
.btn:active { transform:scale(0.96); }
.btn-primary { background:var(--primary); color:white; }
.btn-primary:active { background:var(--primary-dark); }
.btn-outline { background:white; color:var(--primary); border:1px solid var(--primary); }
.btn-block { display:flex; width:100%; }
.btn-danger { background:#e74c3c; color:white; }
.btn-sm { padding:6px 12px; font-size:12px; border-radius:8px; }

/* List items */
.list-item { display:flex; align-items:center; padding:14px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .2s; }
.list-item:active { background:var(--bg); }
.list-item .list-icon { font-size:20px; margin-right:12px; }
.list-item .list-text { flex:1; }
.list-item .list-title { font-size:14px; color:var(--text-dark); }
.list-item .list-desc { font-size:12px; color:var(--text-light); margin-top:2px; }
.list-item .list-arrow { color:var(--text-light); font-size:14px; }

/* Toast */
.toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.8); background:rgba(0,0,0,0.75); color:white; padding:12px 24px; border-radius:10px; font-size:14px; opacity:0; transition:all .3s; z-index:9999; pointer-events:none; }
.toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); }