/* xRoom - 全局样式 (v3: 浅色清新风格) */
:root {
  --primary: #6C5CE7; --primary-light: #A29BFE;
  --green: #00B894; --green-light: #55EFC4;
  --yellow: #FDCB6E; --red: #FF7675;
  --bg: #F8F9FA; --card: #FFFFFF;
  --text: #2D3436; --text2: #636E72; --text3: #B2BEC3;
  --border: #E8ECF0; --shadow: 0 2px 12px rgba(0,0,0,0.06);
  --radius: 12px; --radius-sm: 8px;
  --accent: #6C5CE7; --surface: #F1F3F5;
}

/* 暗色模式 */
[data-theme="dark"] {
  --bg: #0a0a1a; --card: #1a1a2e;
  --text: #E8E8F0; --text2: #A0A0BB; --text3: #666688;
  --border: #2a2a44; --shadow: 0 2px 12px rgba(0,0,0,0.3);
  --surface: #15152a;
}
[data-theme="dark"] body { background: var(--bg); }
[data-theme="dark"] .listing-card { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .detail-header { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .bottom-nav { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .compare-row { border-color: var(--border); }
[data-theme="dark"] .compare-label { color: var(--text3); }
[data-theme="dark"] .filter-chip { background: var(--surface); color: var(--text2); border-color: var(--border); }
[data-theme="dark"] .filter-chip.active { background: var(--primary); color: #fff; }
[data-theme="dark"] .search-box { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .search-box input { color: var(--text); background: transparent; }
[data-theme="dark"] .tag { background: rgba(108,92,231,0.15); color: var(--text2); }
[data-theme="dark"] .tag-green { background: rgba(0,184,148,0.15); color: #55EFC4; }
[data-theme="dark"] .tag-purple { background: rgba(108,92,231,0.15); color: #A29BFE; }
[data-theme="dark"] .tag-yellow { background: rgba(253,203,110,0.15); color: #FDCB6E; }
[data-theme="dark"] .section-title { color: var(--text); }
[data-theme="dark"] .city-picker-overlay .city-picker { background: var(--card); }
[data-theme="dark"] .search-suggestions { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .search-sug-item { border-color: var(--border); }
[data-theme="dark"] .info-card, [data-theme="dark"] .cost-card, [data-theme="dark"] .ratio-card { background: var(--card); }
[data-theme="dark"] .fengshui-card { background: var(--card); }
[data-theme="dark"] .tab-btn { color: var(--text3); }
[data-theme="dark"] .tab-btn.active { color: var(--primary); }
[data-theme="dark"] .empty { color: var(--text3); }
[data-theme="dark"] .chat-input-area { background: var(--card); border-color: var(--border); }
[data-theme="dark"] .chat-input-area input { color: var(--text); background: transparent; }
[data-theme="dark"] .msg.bot .bubble { background: var(--surface); color: var(--text); }
[data-theme="dark"] .recommend-card { background: var(--card) !important; }
[data-theme="dark"] .price-row .price { color: var(--primary); }
[data-theme="dark"] .map-fallback { background: var(--surface); color: var(--text3); }
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', sans-serif;
  background: var(--bg); color: var(--text); max-width: 430px;
  margin: 0 auto; min-height: 100vh; position: relative;
  overflow-x: hidden;
}
/* 页面容器 */
.page { display:none; padding:16px 16px 80px; animation: fadeIn .25s ease; }
.page.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* 顶部栏 */
.top-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; margin-bottom:12px;
}
.top-bar .city { font-size:15px; color:var(--primary); font-weight:600; }
.top-bar .logo { font-size:20px; font-weight:700; }
.top-bar .logo span { color:var(--primary); }

/* 搜索框 */
.search-box {
  background:var(--card); border-radius:var(--radius); padding:12px 16px;
  display:flex; align-items:center; gap:8px; box-shadow:var(--shadow); margin-bottom:16px;
  border:1px solid var(--border);
}
.search-box input {
  border:none; outline:none; flex:1; font-size:14px; color:var(--text); background:transparent;
}
.search-box input::placeholder { color:var(--text3); }
.search-box .icon { font-size:18px; }

/* 大入口卡片 */
.hero-card {
  background: linear-gradient(135deg, #6C5CE7, #A29BFE);
  border-radius:var(--radius); padding:20px; color:#fff; margin-bottom:16px;
  position:relative; overflow:hidden; cursor:pointer;
  transition: transform .2s; border:none;
}
.hero-card:active { transform:scale(0.98); }
.hero-card h2 { font-size:18px; margin-bottom:6px; }
.hero-card p { font-size:13px; opacity:.85; margin-bottom:12px; }
.hero-card .btn {
  background:rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.4);
  border-radius:20px; padding:8px 20px; color:#fff; font-size:13px;
  font-weight:600; display:inline-block; backdrop-filter:blur(4px);
}
.hero-card .cat { position:absolute; right:16px; bottom:12px; font-size:48px; opacity:.3; }

/* 板块标题 */
.section-title {
  font-size:16px; font-weight:700; margin:16px 0 10px; display:flex;
  align-items:center; gap:6px;
}

/* 房源卡片 */
.listing-card {
  background:var(--card); border-radius:var(--radius); padding:14px;
  margin-bottom:12px; box-shadow:var(--shadow); cursor:pointer;
  transition: transform .15s, box-shadow .15s;
  border:1px solid var(--border);
}
.listing-card:active { transform:scale(0.98); box-shadow:0 1px 6px rgba(0,0,0,.2); }
.listing-img {
  width:100%; height:140px; border-radius:var(--radius-sm);
  margin-bottom:10px; position:relative; overflow:hidden;
}
.listing-img .img-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:32px;
}
.listing-card .title { font-size:15px; font-weight:600; margin-bottom:4px; }
.listing-card .meta { font-size:12px; color:var(--text2); margin-bottom:6px; }
.listing-card .price-row {
  display:flex; align-items:baseline; justify-content:space-between;
}
.listing-card .price { font-size:20px; font-weight:700; color:var(--red); }
.listing-card .price small { font-size:12px; font-weight:400; }
.listing-card .real-cost { font-size:12px; color:var(--text2); }
.listing-card .tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.tag {
  font-size:11px; padding:3px 8px; border-radius:6px; font-weight:500;
}
.tag-green { background:rgba(48,209,88,0.15); color:var(--green); }
.tag-purple { background:rgba(108,92,231,0.15); color:var(--accent); }
.tag-yellow { background:rgba(255,214,10,0.15); color:var(--yellow); }
.tag-red { background:rgba(255,69,58,0.15); color:var(--red); }

/* 通勤标签 */
.commute-badge {
  font-size:11px; padding:3px 8px; border-radius:6px; font-weight:600; display:inline-flex; align-items:center; gap:3px;
}
.commute-green { background:rgba(48,209,88,0.15); color:var(--green); }
.commute-yellow { background:rgba(255,214,10,0.15); color:var(--yellow); }
.commute-red { background:rgba(255,69,58,0.15); color:var(--red); }

/* 匹配度 */
.match-score {
  font-size:12px; color:var(--accent); font-weight:600;
  background:rgba(108,92,231,0.12); padding:3px 10px; border-radius:10px;
}

/* 底部 Tab 栏 */
.tab-bar {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px; background:var(--card);
  display:flex; justify-content:space-around; padding:8px 0 env(safe-area-inset-bottom, 8px);
  border-top:1px solid var(--border); z-index:100;
}
.tab-item {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:10px; color:var(--text3); cursor:pointer; padding:4px 12px;
  transition: color .15s;
}
.tab-item.active { color:var(--primary); }
.tab-item .tab-icon { font-size:22px; }

/* 滑块 */
.slider-group { margin-bottom:16px; }
.slider-group label { font-size:13px; color:var(--text2); display:block; margin-bottom:6px; }
.slider-group .value { font-size:15px; font-weight:600; color:var(--primary); float:right; }
input[type=range] {
  -webkit-appearance:none; width:100%; height:6px; border-radius:3px;
  background:var(--border); outline:none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--primary); cursor:pointer; box-shadow:0 2px 6px rgba(108,92,231,.3);
}

/* 按钮 */
.btn-primary {
  width:100%; padding:14px; background:var(--primary); color:#fff;
  border:none; border-radius:var(--radius); font-size:15px; font-weight:600;
  cursor:pointer; transition:background .15s;
}
.btn-primary:active { background:#5A4BD1; }
.btn-outline {
  width:100%; padding:12px; background:transparent; color:var(--primary);
  border:2px solid var(--primary); border-radius:var(--radius); font-size:14px;
  font-weight:600; cursor:pointer;
}

/* 详情页 */
.detail-header {
  display:flex; align-items:center; gap:10px; padding:12px 0; margin-bottom:8px;
}
.detail-header .back { font-size:22px; cursor:pointer; }
.detail-header .title { font-size:16px; font-weight:600; flex:1; }

.img-carousel {
  width:100%; height:200px; border-radius:var(--radius); margin-bottom:14px;
  position:relative; overflow:hidden;
}
.carousel-slides { display:flex; transition:transform .3s ease; height:100%; }
.carousel-slide {
  min-width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:40px;
}
.carousel-dots {
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px;
}
.carousel-dot {
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5);
}
.carousel-dot.active { background:#fff; }

.info-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:14px;
}
.info-item { text-align:center; }
.info-item .label { font-size:11px; color:var(--text3); }
.info-item .val { font-size:14px; font-weight:600; margin-top:2px; }

/* 费用卡片 */
.cost-card {
  background:var(--surface);
  border-radius:var(--radius); padding:16px; margin-bottom:14px;
  border:1px solid var(--border);
}
.cost-card h3 { font-size:14px; margin-bottom:10px; }
.cost-row { display:flex; justify-content:space-between; padding:4px 0; font-size:13px; }
.cost-row.total { border-top:2px solid var(--primary); margin-top:8px; padding-top:8px; font-weight:700; color:var(--primary); font-size:15px; }

/* 通勤卡片 */
.commute-card {
  background:var(--card); border:2px solid var(--green-light); border-radius:var(--radius);
  padding:14px; margin-bottom:14px;
}
.commute-card h3 { font-size:14px; color:var(--green); margin-bottom:8px; }

/* 评分 */
.rating-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.rating-item {
  background:var(--card); border-radius:var(--radius-sm); padding:10px;
  box-shadow:var(--shadow);
}
.rating-item .label { font-size:12px; color:var(--text2); }
.rating-bar {
  height:6px; background:var(--border); border-radius:3px; margin-top:6px; overflow:hidden;
}
.rating-bar .fill { height:100%; border-radius:3px; background:var(--primary); transition:width .5s; }
.rating-item .score { font-size:13px; font-weight:600; color:var(--primary); float:right; }

/* Checklist */
.checklist { margin-bottom:14px; }
.checklist-item { padding:8px 0; font-size:13px; border-bottom:1px solid var(--border); }

/* 室友卡片 */
.roommate-card {
  background:var(--card); border-radius:var(--radius); padding:14px;
  margin-bottom:12px; box-shadow:var(--shadow);
}
.roommate-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.roommate-avatar { font-size:36px; }
.roommate-info .name { font-size:15px; font-weight:600; }
.roommate-info .job { font-size:12px; color:var(--text2); }
.compatibility {
  font-size:22px; font-weight:700; color:var(--primary);
  margin-left:auto;
}
.compatibility small { font-size:11px; color:var(--text2); font-weight:400; }
.trait-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }

/* 测试卡片 */
.quiz-card {
  background:var(--card); border-radius:var(--radius); padding:16px;
  margin-bottom:12px; box-shadow:var(--shadow);
}
.quiz-card h3 { font-size:14px; margin-bottom:10px; }
.quiz-options { display:flex; flex-wrap:wrap; gap:8px; }
.quiz-option {
  padding:8px 14px; border:2px solid var(--border); border-radius:20px;
  font-size:13px; cursor:pointer; transition:all .15s;
}
.quiz-option.selected { border-color:var(--primary); background:rgba(108,92,231,0.12); color:var(--primary); font-weight:600; }

/* 个人中心 */
.profile-header {
  text-align:center; padding:20px 0; background:linear-gradient(135deg, #6C5CE7, #A29BFE);
  border-radius:var(--radius); color:#fff; margin-bottom:16px;
}
.profile-avatar { font-size:48px; margin-bottom:6px; }
.profile-name { font-size:18px; font-weight:600; }
.profile-menu .menu-item {
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  background:var(--card); border-radius:var(--radius-sm); margin-bottom:8px;
  box-shadow:var(--shadow); cursor:pointer; font-size:14px;
}
.menu-item .menu-icon { font-size:20px; }
.menu-item .arrow { margin-left:auto; color:var(--text3); }

/* Loading */
.loading { text-align:center; padding:40px 0; }
.loading .spinner {
  width:32px; height:32px; border:3px solid var(--border);
  border-top-color:var(--primary); border-radius:50%;
  animation:spin .8s linear infinite; margin:0 auto 10px;
}
@keyframes spin { to{transform:rotate(360deg)} }
.loading p { font-size:13px; color:var(--text2); }

/* 空状态 */
.empty { text-align:center; padding:40px 0; color:var(--text3); }
.empty .emoji { font-size:48px; margin-bottom:10px; }

/* ===== Phase 2: New Styles ===== */

/* Page slide animations */
@keyframes slideInRight {
  from { opacity:0; transform:translateX(30px); }
  to { opacity:1; transform:translateX(0); }
}
@keyframes slideOutRight {
  from { opacity:0; transform:translateX(-30px); }
  to { opacity:1; transform:translateX(0); }
}
.slide-in-right { animation: slideInRight .25s ease-out; }
.slide-out-right { animation: slideOutRight .25s ease-out; }

/* Fade up animation for cards */
.fade-up {
  opacity:0; transform:translateY(20px);
  transition: opacity .4s ease, transform .4s ease;
}
.fade-up-visible {
  opacity:1; transform:translateY(0);
}

/* Fade in */
.fade-in { animation: fadeIn .3s ease; }

/* Tab bounce */
@keyframes tabBounce {
  0% { transform:scale(1); }
  40% { transform:scale(1.15); }
  70% { transform:scale(0.95); }
  100% { transform:scale(1); }
}
.tab-bounce { animation: tabBounce .35s ease; }

/* Stagger cards in search results */
.stagger-card {
  opacity:0; animation: fadeUpStagger .4s ease forwards;
}
@keyframes fadeUpStagger {
  from { opacity:0; transform:translateY(16px); }
  to { opacity:1; transform:translateY(0); }
}

/* ===== Compare button (corner badge) ===== */
.compare-btn {
  position:absolute; top:8px; right:8px; z-index:5;
  width:32px; height:32px; border-radius:50%;
  background:rgba(108,92,231,0.85); color:#fff; border:none;
  font-size:11px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:all .2s;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.compare-btn:active { transform:scale(0.9); }
.compare-btn.active { background:var(--green); }

/* Fav mini button on card */
.fav-btn-mini {
  position:absolute; top:8px; right:46px; z-index:5;
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,0.85); border:none;
  font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:all .2s;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.fav-btn-mini:active { transform:scale(0.9); }

/* Heartbeat animation for favorite */
@keyframes heartbeat {
  0% { transform:scale(1); }
  25% { transform:scale(1.3); }
  50% { transform:scale(1); }
  75% { transform:scale(1.2); }
  100% { transform:scale(1); }
}
.heartbeat-anim { animation: heartbeat .5s ease; }

/* Favorite button on detail */
.btn-fav.active { border-color:var(--red); color:var(--red); background:rgba(255,118,117,.08); }

/* ===== Compare bar ===== */
.compare-bar {
  position:fixed; bottom:56px; left:50%; transform:translateX(-50%);
  width:calc(100% - 32px); max-width:398px;
  background:var(--primary); color:#fff; border-radius:var(--radius);
  padding:10px 16px; display:flex; align-items:center; justify-content:space-between;
  z-index:99; box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.compare-bar span { font-size:14px; font-weight:600; }
.compare-bar button {
  background:rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.4);
  color:#fff; border-radius:20px; padding:6px 16px; font-size:13px;
  font-weight:600; cursor:pointer; backdrop-filter:blur(4px);
}
.compare-bar button:active { background:rgba(255,255,255,.35); }
@keyframes slideInBottom {
  from { transform:translateX(-50%) translateY(100%); opacity:0; }
  to { transform:translateX(-50%) translateY(0); opacity:1; }
}
.slide-in-bottom { animation: slideInBottom .3s ease; }

/* ===== Toast ===== */
.app-toast {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.8);
  background:rgba(45,52,54,.9); border:1px solid var(--border); color:#fff; padding:10px 20px;
  border-radius:20px; font-size:13px; z-index:200;
  opacity:0; transition:all .25s ease; pointer-events:none;
}
.app-toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ===== AI Chat Card (Home) ===== */
.ai-chat-card {
  background:var(--card); border-radius:var(--radius); padding:14px 16px;
  margin-bottom:16px; box-shadow:var(--shadow); cursor:pointer;
  border:1px solid var(--border);
  transition: transform .15s, box-shadow .15s;
}
.ai-chat-card:active { transform:scale(0.98); }
.ai-chat-card-inner {
  display:flex; align-items:center; gap:10px;
}
.ai-chat-icon { font-size:28px; }
.ai-chat-text h3 { font-size:15px; font-weight:600; color:var(--primary); margin-bottom:2px; }
.ai-chat-text p { font-size:12px; color:var(--text2); }
.ai-chat-arrow { margin-left:auto; font-size:20px; color:var(--text3); }
.ai-chat-examples {
  display:flex; gap:6px; flex-wrap:wrap; margin-top:10px;
}
.ai-chat-tag {
  font-size:11px; background:rgba(108,92,231,0.12); color:var(--primary); padding:4px 10px;
  border-radius:12px;
}

/* ===== Chat Page ===== */
.chat-container {
  height:calc(100vh - 160px); overflow-y:auto; padding-bottom:16px;
  scroll-behavior:smooth;
}
.chat-bubble {
  margin-bottom:12px; padding:10px 14px; border-radius:var(--radius);
  font-size:14px; line-height:1.6; max-width:85%;
  animation: fadeIn .25s ease;
}
.chat-bubble.user {
  background:var(--primary); color:#fff; margin-left:auto;
  border-bottom-right-radius:4px;
}
.chat-bubble.ai { border:1px solid var(--border);
  background:var(--card); color:var(--text); box-shadow:var(--shadow);
  border-bottom-left-radius:4px; display:flex; gap:8px; max-width:92%;
}
.chat-ai-avatar { font-size:24px; flex-shrink:0; margin-top:2px; }
.chat-ai-content { flex:1; min-width:0; }

/* Thinking dots animation */
.thinking-dots { color:var(--text2); font-size:13px; }
@keyframes dotPulse {
  0%,80%,100% { opacity:0.3; }
  40% { opacity:1; }
}
.dot-anim { display:inline-block; animation: dotPulse 1.2s ease infinite; }

/* Chat listing card */
.chat-cards { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.chat-listing-card {
  background:var(--surface); border-radius:var(--radius-sm); padding:10px 12px;
  cursor:pointer; transition:transform .15s;
  border:1px solid var(--border);
}
.chat-listing-card:active { transform:scale(0.98); }
.chat-card-title { font-size:14px; font-weight:600; margin-bottom:3px; }
.chat-card-meta { font-size:12px; color:var(--text2); margin-bottom:4px; }
.chat-card-price { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.chat-card-price .price-num { font-size:16px; font-weight:700; color:var(--red); }
.chat-card-price .cost-num { font-size:11px; color:var(--text2); }
.chat-card-tags { display:flex; gap:6px; }

/* Chat input bar */
.chat-input-bar {
  position:fixed; bottom:56px; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px; background:var(--card);
  display:flex; gap:8px; padding:10px 16px;
  border-top:1px solid var(--border); z-index:50;
}
.chat-input-bar input {
  flex:1; border:2px solid var(--border); border-radius:20px;
  padding:8px 16px; font-size:14px; outline:none;
  transition:border-color .2s;
}
.chat-input-bar input:focus { border-color:var(--primary-light); }
.chat-send-btn {
  background:var(--primary); color:#fff; border:none;
  border-radius:20px; padding:8px 18px; font-size:14px;
  font-weight:600; cursor:pointer; white-space:nowrap;
}
.chat-send-btn:active { background:#5A4BD1; }

/* ===== Search Tab Bar ===== */
.search-tab-bar {
  display:flex; gap:0; background:var(--card); border-radius:var(--radius);
  padding:4px; margin-bottom:16px; box-shadow:var(--shadow);
}
.search-tab {
  flex:1; text-align:center; padding:10px 0; font-size:14px;
  font-weight:600; color:var(--text2); cursor:pointer;
  border-radius:var(--radius-sm); transition:all .2s;
}
.search-tab.active {
  background:var(--primary); color:#fff;
  box-shadow:0 2px 8px rgba(108,92,231,.3);
}

/* ===== Compare Page ===== */
.compare-table { overflow-x:auto; }
.compare-row {
  display:flex; align-items:center; border-bottom:1px solid var(--border);
  min-height:44px;
}
.compare-header-row {
  border-bottom:2px solid var(--primary-light);
  padding-bottom:8px; margin-bottom:4px; min-height:auto;
}
.compare-label {
  width:70px; flex-shrink:0; font-size:12px; color:var(--text2);
  padding:8px 4px; font-weight:500;
}
.compare-cell {
  flex:1; text-align:center; font-size:13px; font-weight:500;
  padding:8px 4px; transition:all .2s;
}
.compare-best {
  color:var(--green); font-weight:700;
  background:rgba(48,209,88,.1); border-radius:6px;
}
.compare-house {
  cursor:pointer; padding:8px 4px;
}
.compare-house-img {
  width:48px; height:48px; border-radius:10px; margin:0 auto 6px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
}
.compare-house-title {
  font-size:12px; font-weight:600; margin-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.compare-house-district { font-size:10px; color:var(--text2); }
.compare-section-title {
  font-size:13px; font-weight:700; color:var(--primary);
  padding:10px 4px 4px; background:var(--surface);
}

/* ===== Metro Page ===== */
.metro-container { }
.metro-line-item {
  background:var(--card); border-radius:var(--radius); margin-bottom:10px;
  box-shadow:var(--shadow); overflow:hidden;
}
.metro-line-header {
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  cursor:pointer; transition:background .15s;
}
.metro-line-header:active { background:var(--surface); }
.metro-line-badge {
  color:#fff; font-size:13px; font-weight:700; padding:4px 12px;
  border-radius:20px; white-space:nowrap;
}
.metro-line-info { flex:1; font-size:12px; color:var(--text2); }
.metro-line-arrow { font-size:12px; color:var(--text3); }

.metro-stations {
  position:relative; padding:0 16px 14px 16px;
}
.metro-line-track {
  position:absolute; left:30px; top:0; bottom:14px;
  width:4px; border-radius:2px; opacity:0.3;
}
.metro-station-item {
  display:flex; align-items:center; gap:10px; padding:6px 0 6px 24px;
  position:relative; font-size:13px; color:var(--text3);
  transition:all .15s;
}
.metro-station-item.has-listings {
  color:var(--text); cursor:pointer; font-weight:500;
}
.metro-station-item.has-listings:active { background:var(--surface); }
.metro-station-item.selected {
  color:var(--primary); font-weight:600;
}
.metro-station-dot {
  width:12px; height:12px; border-radius:50%;
  border:3px solid var(--border); background:#fff;
  flex-shrink:0; position:relative; z-index:1;
  transition:all .15s;
}
.metro-station-item.has-listings .metro-station-dot {
  width:14px; height:14px;
}
.metro-station-item.selected .metro-station-dot {
  transform:scale(1.3);
  box-shadow:0 0 0 4px rgba(108,92,231,.2);
}
.metro-station-name { flex:1; }
.metro-station-badge {
  font-size:10px; background:rgba(108,92,231,0.12); color:var(--primary);
  padding:2px 8px; border-radius:8px;
}

/* ===== Listing image relative for badges ===== */
.listing-img { position:relative; }

/* ===== Phase 2.5: Real Images ===== */
.listing-real-img {
  width:100%; height:140px; object-fit:cover; border-radius:var(--radius-sm);
  display:block;
}
.carousel-real-img {
  width:100%; height:100%; object-fit:cover;
}
.carousel-slide {
  min-width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:40px; overflow:hidden;
}

/* Chat card thumbnail */
.chat-card-img {
  width:100%; height:80px; object-fit:cover; border-radius:8px;
  margin-bottom:6px; display:block;
}

/* Compare house real img */
.compare-house-real-img {
  width:48px; height:48px; border-radius:10px; object-fit:cover;
  margin:0 auto 6px; display:block;
}

/* ===== Phase 2.5: Maps ===== */
.map-container {
  width:100%; height:200px; border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:14px; overflow:hidden;
  position:relative; background:var(--surface);
}
.home-map-container {
  width:100%; height:160px; border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:16px; overflow:hidden;
  position:relative; background:var(--surface);
}
.map-fallback {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--text3); background:var(--surface);
}

/* Map markers */
.map-price-label {
  background:var(--primary); color:#fff; font-size:11px; font-weight:700;
  padding:4px 8px; border-radius:10px; white-space:nowrap;
  box-shadow:0 2px 6px rgba(108,92,231,.3); cursor:pointer;
  transition:transform .15s;
}
.map-price-label:hover { transform:scale(1.1); }
.map-marker {
  display:flex; align-items:center; gap:6px;
}
.map-marker-dot {
  width:16px; height:16px; border-radius:50%; background:var(--primary);
  border:3px solid #fff; box-shadow:0 2px 6px rgba(108,92,231,.4);
}
.map-marker-label {
  background:#fff; font-size:11px; font-weight:600; color:var(--primary);
  padding:3px 8px; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.1);
  white-space:nowrap;
}
.map-poi-marker {
  width:24px; height:24px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; box-shadow:0 1px 4px rgba(0,0,0,.15);
}

/* ===== POI Grid ===== */
.poi-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px;
}
.poi-card {
  display:flex; align-items:center; gap:8px;
  background:var(--card); border-radius:var(--radius-sm); padding:10px 12px;
  box-shadow:var(--shadow);
}
.poi-icon { font-size:20px; flex-shrink:0; }
.poi-info { min-width:0; }
.poi-name { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.poi-distance { font-size:11px; color:var(--text3); }

/* ===== Phase 4: Login / Landlord / Admin ===== */

/* Login */
.login-card {
  background:var(--card); border-radius:var(--radius); padding:24px 20px;
  box-shadow:var(--shadow); margin-top:20px;
}
.login-avatar { font-size:48px; text-align:center; margin-bottom:8px; }

/* Form */
.form-group { margin-bottom:14px; }
.form-group label { font-size:13px; color:var(--text2); display:block; margin-bottom:4px; font-weight:500; }
.form-group input, .form-group select, .form-group textarea { color:var(--text);
  width:100%; padding:10px 14px; border:2px solid var(--border); border-radius:var(--radius-sm);
  font-size:14px; outline:none; transition:border-color .2s; background:var(--card);
  font-family:inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color:var(--primary-light);
}
.form-row { display:flex; gap:10px; }
.form-group.half { flex:1; }

/* Role picker */
.role-picker { display:flex; gap:10px; }
.role-option {
  flex:1; display:flex; align-items:center; gap:8px; padding:12px;
  border:2px solid var(--border); border-radius:var(--radius-sm);
  cursor:pointer; transition:all .15s; font-size:14px;
}
.role-option.active { border-color:var(--primary); background:rgba(108,92,231,0.12); color:var(--primary); font-weight:600; }
.role-icon { font-size:22px; }

/* Stats grid */
.stats-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
}
.stat-card {
  background:var(--card); border-radius:var(--radius-sm); padding:12px;
  text-align:center; box-shadow:var(--shadow);
}
.stat-num { font-size:22px; font-weight:700; color:var(--primary); }
.stat-label { font-size:11px; color:var(--text2); margin-top:2px; }
.stat-pending .stat-num { color:var(--yellow); }
.stat-approved .stat-num { color:var(--green); }
.stat-rejected .stat-num { color:var(--red); }

/* Landlord tabs */
.landlord-tabs {
  display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;
}
.landlord-tab {
  padding:6px 14px; border-radius:20px; font-size:13px;
  background:var(--card); border:1px solid var(--border);
  cursor:pointer; transition:all .15s;
}
.landlord-tab.active {
  background:var(--primary); color:#fff; border-color:var(--primary);
}

/* Small buttons */
.btn-sm {
  padding:6px 14px; border-radius:8px; font-size:12px; font-weight:600;
  cursor:pointer; border:none; transition:all .15s;
}
.btn-sm-primary { background:var(--primary); color:#fff; }
.btn-sm-green { background:var(--green); color:#fff; }
.btn-sm-red { background:var(--red); color:#fff; }
.btn-sm-outline { background:transparent; color:var(--primary); border:1.5px solid var(--primary); }
.btn-sm:active { transform:scale(0.95); }

/* Publish form */
.publish-form { margin-top:8px; }

/* ===== P0: Type Labels ===== */
.tag-type-residential { background:rgba(255,214,10,0.12); color:var(--yellow); font-weight:600; }
.tag-type-apartment { background:rgba(108,92,231,0.12); color:var(--primary); font-weight:600; }
.tag-type-affordable { background:rgba(48,209,88,0.12); color:var(--green); font-weight:600; }

/* ===== Type Guide Page ===== */
.type-compare-card { border:1px solid var(--border);
  background:var(--card); border-radius:var(--radius); padding:16px;
  margin-bottom:12px; box-shadow:var(--shadow);
}
.type-card-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.type-pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.type-item { font-size:12px; color:var(--text2); padding:2px 0; line-height:1.5; }
.type-listing-mini {
  display:flex; align-items:center; gap:8px; padding:8px 0;
  border-bottom:1px solid var(--border); cursor:pointer; font-size:13px;
}
.type-listing-mini:last-child { border-bottom:none; }
.type-mini-price { font-weight:700; color:var(--red); min-width:55px; }
.type-mini-title { flex:1; color:var(--text); }
.type-mini-arrow { color:var(--text3); }

/* ===== Community Profile ===== */
.community-profile {
  background:var(--card); border-radius:var(--radius); padding:14px;
  margin-bottom:14px; box-shadow:var(--shadow);
}
.community-header { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.community-vibe-tag {
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff; font-size:12px; font-weight:600; padding:4px 12px;
  border-radius:12px;
}
.community-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.community-tag {
  background:var(--surface); color:var(--text2); font-size:12px; padding:4px 10px;
  border-radius:8px; border:1px solid var(--border);
}
.community-bars { display:flex; flex-direction:column; gap:6px; }
.community-bar-item { display:flex; align-items:center; gap:8px; }
.community-bar-label { font-size:12px; color:var(--text2); min-width:60px; }
.community-bar {
  flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden;
}
.community-bar-fill { height:100%; border-radius:3px; transition:width .5s; }
.community-bar-val { font-size:11px; color:var(--text3); min-width:24px; text-align:right; }

/* ===== Fengshui ===== */
.fengshui-card {
  background:var(--card); border-radius:var(--radius); padding:16px;
  margin-bottom:14px; box-shadow:var(--shadow);
}
.fengshui-main { display:flex; gap:16px; align-items:center; margin-bottom:12px; }
.fengshui-score-ring {
  width:72px; height:72px; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; flex-shrink:0;
  border:4px solid var(--border);
}
.fs-good { border-color:var(--green); background:rgba(48,209,88,.1); }
.fs-mid { border-color:var(--yellow); background:rgba(253,203,110,.08); }
.fs-bad { border-color:var(--red); background:rgba(255,118,117,.06); }
.fengshui-score-num { font-size:24px; font-weight:800; line-height:1; }
.fs-good .fengshui-score-num { color:var(--green); }
.fs-mid .fengshui-score-num { color:var(--yellow); }
.fs-bad .fengshui-score-num { color:var(--red); }
.fengshui-score-label { font-size:12px; font-weight:600; }
.fs-good .fengshui-score-label { color:var(--green); }
.fs-mid .fengshui-score-label { color:var(--yellow); }
.fs-bad .fengshui-score-label { color:var(--red); }
.fengshui-dims { flex:1; display:flex; flex-direction:column; gap:5px; }
.fengshui-dim { display:flex; align-items:center; gap:6px; }
.fengshui-dim-name { font-size:12px; color:var(--text2); min-width:28px; }
.fengshui-dim-bar { flex:1; height:5px; background:var(--border); border-radius:3px; overflow:hidden; }
.fengshui-dim-fill { height:100%; border-radius:3px; transition:width .6s; }
.fengshui-dim-val { font-size:11px; font-weight:600; min-width:22px; text-align:right; }
.fengshui-section { margin-bottom:8px; }
.fengshui-section-title { font-size:13px; font-weight:600; margin-bottom:4px; }
.fengshui-item { font-size:12px; color:var(--text2); padding:2px 0; line-height:1.5; }
.fengshui-good::before { content:'✅ '; }
.fengshui-warn::before { content:'⚠️ '; }
.fengshui-tips-card {
  background:var(--surface); border-radius:var(--radius-sm);
  padding:10px 12px; margin-top:8px; border:1px solid var(--border);
}
.fengshui-tip { font-size:12px; color:var(--text); padding:3px 0; line-height:1.5; }

/* ===== Time Cost ===== */
.time-cost-row { color:var(--primary); font-weight:500; background:rgba(108,92,231,.04); border-radius:6px; padding:6px 0 !important; }
.time-cost-explain { margin-top:8px; border-top:1px dashed var(--border); padding-top:8px; }

/* ===== Verify Code ===== */
.verify-row { display:flex; gap:8px; }
.btn-send-code {
  white-space:nowrap; padding:10px 14px; background:var(--primary); color:#fff;
  border:none; border-radius:var(--radius-sm); font-size:13px; font-weight:600;
  cursor:pointer; transition:all .15s;
}
.btn-send-code:disabled { background:var(--text3); cursor:not-allowed; }
.form-group-divider {
  text-align:center; margin:16px 0 12px; font-size:13px; color:var(--text2);
  border-top:1px dashed var(--border); padding-top:14px;
}

/* ===== Colleagues Nearby ===== */
.colleagues-card {
  background:var(--card); border-radius:var(--radius); padding:14px;
  margin-bottom:14px; box-shadow:var(--shadow);
}
.colleague-area-row { display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.colleague-rank {
  width:20px; height:20px; border-radius:50%; background:var(--primary);
  color:#fff; font-size:11px; font-weight:700; display:flex;
  align-items:center; justify-content:center; flex-shrink:0;
}
.colleague-area-name { font-size:13px; font-weight:500; min-width:80px; }
.colleague-bar { flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.colleague-bar-fill { height:100%; background:var(--primary); border-radius:3px; transition:width .5s; }
.colleague-pct { font-size:12px; font-weight:600; color:var(--primary); min-width:30px; text-align:right; }

/* ===== Slogan Banner ===== */
.slogan-banner {
  text-align:center; padding:24px 16px 20px;
  background:linear-gradient(135deg, #6C5CE7 0%, #A29BFE 50%, #DFE6E9 100%);
  border-radius:var(--radius); margin-bottom:16px; color:#fff;
  border:none; position:relative; overflow:hidden;
}
.slogan-banner::before {
  content:''; position:absolute; top:-50%; right:-30%; width:200px; height:200px;
  background:radial-gradient(circle, rgba(255,255,255,0.2), transparent 70%);
  pointer-events:none;
}
.slogan-main { font-size:26px; font-weight:800; margin-bottom:4px; letter-spacing:1px; }
.slogan-sub { font-size:15px; font-weight:600; opacity:.9; margin-bottom:6px; color:var(--accent); }
.slogan-desc { font-size:12px; opacity:.5; letter-spacing:0.5px; }

/* ===== Feature Grid ===== */
.feature-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
  margin-bottom:16px;
}
.feature-item {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--card); border-radius:var(--radius-sm); padding:12px 4px;
  box-shadow:var(--shadow); cursor:pointer; transition:transform .15s;
  border:1px solid var(--border);
}
.feature-item:active { transform:scale(0.95); }
.feature-icon { font-size:24px; }
.feature-name { font-size:11px; font-weight:600; color:var(--text2); }

/* ===== Home Filters ===== */
.home-filters { margin-bottom:12px; }
.filter-row {
  display:flex; align-items:center; gap:6px; margin-bottom:8px;
  overflow-x:auto; white-space:nowrap; scrollbar-width:none;
}
.filter-row::-webkit-scrollbar { display:none; }
.filter-label {
  font-size:12px; color:var(--text3); font-weight:600; min-width:32px; flex-shrink:0;
}
.filter-chip {
  font-size:12px; padding:5px 12px; border-radius:16px;
  background:var(--card); border:1.5px solid var(--border); color:var(--text2);
  cursor:pointer; transition:all .15s; flex-shrink:0;
}
.filter-chip.active {
  background:var(--primary); color:#fff; border-color:var(--primary);
}
.filter-chip:active { transform:scale(0.95); }

/* Fengshui score chips on listing cards */
.fs-chip-good { background:rgba(48,209,88,0.12) !important; color:var(--green) !important; font-weight:600; }
.fs-chip-mid { background:rgba(255,214,10,0.12) !important; color:var(--yellow) !important; font-weight:600; }
.fs-chip-bad { background:rgba(255,69,58,0.12) !important; color:var(--red) !important; font-weight:600; }

/* ===== Fengshui Theory ===== */
.fengshui-dim { margin-bottom:8px; }
.fengshui-dim-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2px; }
.fengshui-dim-theory { font-size:10px; color:var(--text3); margin-top:2px; font-style:italic; }

.fengshui-theory-box {
  background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:12px; margin:12px 0;
}
.fengshui-theory-title {
  font-size:13px; font-weight:700; color:var(--accent); margin-bottom:8px;
}
.fengshui-theory-content { }
.fengshui-theory-item {
  font-size:12px; color:var(--text2); line-height:1.7; margin-bottom:6px;
  padding-left:8px; border-left:2px solid var(--accent);
}
.fengshui-theory-item b { color:var(--text); }
.fengshui-theory-item:last-child { margin-bottom:0; }

.fengshui-disclaimer {
  display:flex; align-items:center; gap:4px;
  font-size:11px; color:var(--text3); text-align:center;
  margin-top:10px; justify-content:center;
  padding-top:8px; border-top:1px dashed var(--border);
}

/* ===== 合租广场 ===== */
.plaza-filter-row {
  display:flex; gap:8px; margin-bottom:14px;
}
.plaza-post {
  background:var(--card); border-radius:var(--radius); padding:14px;
  margin-bottom:12px; border:1px solid var(--border);
}
.plaza-post-header {
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
}
.plaza-avatar { font-size:28px; }
.plaza-author-info { display:flex; flex-direction:column; }
.plaza-author { font-size:14px; font-weight:600; }
.plaza-time { font-size:11px; color:var(--text3); }
.plaza-post-title { font-size:15px; font-weight:600; margin-bottom:6px; }
.plaza-post-content {
  font-size:13px; color:var(--text2); line-height:1.6; margin-bottom:8px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.plaza-post-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.plaza-post-footer {
  display:flex; align-items:center; gap:16px;
  padding-top:10px; border-top:1px solid var(--border);
  font-size:13px; color:var(--text2);
}
.plaza-action { cursor:pointer; transition:color .15s; }
.plaza-action:active { color:var(--primary); }

/* ===== 租金收入比分析卡片 ===== */
.rent-ratio-card { margin-top:12px; }
.rent-ratio-card h3 { margin-bottom:12px; }
.rent-ratio-main {
  display:flex; align-items:center; gap:16px;
  margin-bottom:12px;
}
.rent-ratio-circle {
  position:relative; width:120px; height:120px; flex-shrink:0;
}
.rent-ratio-circle svg { display:block; }
.rent-ratio-pct {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-55%);
  font-size:22px; font-weight:800; color:var(--text);
  transition: color 0.3s ease;
}
.rent-ratio-label {
  position:absolute; top:50%; left:50%; transform:translate(-50%, 55%);
  font-size:10px; color:var(--text3); white-space:nowrap;
}
.rent-ratio-detail { flex:1; }
.ratio-row {
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color:var(--text2); padding:4px 0;
}
.ratio-divider {
  border-top:1px dashed var(--border); margin-top:4px; padding-top:8px;
  font-size:14px; color:var(--text);
}
.rent-ratio-status {
  display:flex; align-items:center; gap:4px;
  padding:10px 0 8px; border-top:1px solid var(--border);
}
.rent-ratio-tips { margin-bottom:14px; }
.rent-ratio-peers { border-top:1px solid var(--border); padding-top:12px; }
.rent-ratio-peers h4 { font-size:14px; margin-bottom:10px; color:var(--text); }
.peer-rent-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
}
.peer-stat {
  text-align:center; padding:10px 4px;
  background:var(--surface); border-radius:var(--radius-sm);
}
.peer-stat-val { font-size:18px; font-weight:700; color:var(--primary); margin-bottom:4px; }
.peer-stat-label { font-size:10px; color:var(--text3); line-height:1.4; }

/* ===== 增强风水功能样式 ===== */
.fengshui-enhanced { margin-top:16px; }
.fengshui-enhanced .fengshui-section { margin-bottom:16px; }
.fengshui-enhanced .fengshui-section-title { font-size:14px; font-weight:700; margin-bottom:10px; }

/* 户型格局分析 */
.fengshui-detail-grid { display:flex; flex-direction:column; gap:8px; }
.fs-detail-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--surface); border-left:3px solid var(--border);
}
.fs-detail-item.fs-good { border-left-color:var(--green); }
.fs-detail-item.fs-mid { border-left-color:var(--yellow); }
.fs-detail-item.fs-warn { border-left-color:var(--red); }
.fs-detail-icon { font-size:20px; flex-shrink:0; margin-top:1px; }
.fs-detail-content { flex:1; }
.fs-detail-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; }
.fs-detail-desc { font-size:11px; color:var(--text2); line-height:1.5; }

/* 楼层五行 */
.fengshui-floor-card { background:var(--surface); border-radius:var(--radius); padding:14px; }
.fs-floor-wuxing { text-align:center; margin-bottom:12px; }
.fs-wuxing-badge {
  display:inline-flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 24px; border-radius:16px; margin-bottom:8px;
}
.fs-wuxing-desc { font-size:12px; color:var(--text2); line-height:1.5; }
.fs-floor-advice {
  background:var(--card); border-radius:var(--radius-sm); padding:10px 12px;
  border:1px solid var(--border);
}

/* 周围环境风水 */
.fengshui-env-list { display:flex; flex-direction:column; gap:8px; }
.fs-env-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px; border-radius:var(--radius-sm); background:var(--surface);
}
.fs-env-item.fs-env-good { border-left:3px solid var(--green); }
.fs-env-item.fs-env-mid { border-left:3px solid var(--yellow); }
.fs-env-item.fs-env-warn { border-left:3px solid var(--red); }
.fs-env-icon { font-size:22px; flex-shrink:0; }
.fs-env-content { flex:1; }
.fs-env-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; }
.fs-env-desc { font-size:11px; color:var(--text2); line-height:1.5; }

/* 家具摆放建议 */
.fengshui-furniture-grid { display:flex; flex-direction:column; gap:10px; }
.fs-furniture-card {
  background:var(--surface); border-radius:var(--radius); padding:12px;
}
.fs-furniture-header {
  display:flex; align-items:center; gap:8px; margin-bottom:8px;
  padding-bottom:6px; border-bottom:1px solid var(--border);
}
.fs-furniture-room { font-size:14px; font-weight:600; color:var(--text); }
.fs-furniture-tips { display:flex; flex-direction:column; gap:4px; }
.fs-furniture-tip { font-size:12px; color:var(--text2); line-height:1.6; padding:2px 0; }

/* 拍照问风水 */
.fengshui-photo-section {
  margin-top:16px; padding:16px; background:linear-gradient(135deg, #f8f0ff, #f0f4ff);
  border-radius:var(--radius); border:1px dashed var(--primary);
}
.fengshui-photo-desc { font-size:12px; color:var(--text2); margin-bottom:12px; }
.fengshui-upload-area { text-align:center; }
.fengshui-upload-options { display:flex; gap:12px; justify-content:center; margin-bottom:10px; }
.fengshui-upload-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 24px; border-radius:var(--radius);
  background:var(--card); border:2px solid var(--border);
  cursor:pointer; transition:all 0.2s; font-size:13px; color:var(--text);
  font-family:inherit;
}
.fengshui-upload-btn:active { border-color:var(--primary); background:var(--primary); color:white; transform:scale(0.97); }
.fengshui-upload-icon { font-size:28px; }
.fengshui-photo-types {
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
}
.fengshui-type-tag {
  font-size:11px; color:var(--text2); background:var(--card);
  padding:4px 8px; border-radius:12px; border:1px solid var(--border);
}

/* Photo preview */
.fengshui-preview-card { margin-top:12px; }
.fengshui-preview-img {
  width:100%; border-radius:var(--radius); margin-bottom:10px;
  max-height:300px; object-fit:cover;
}
.fengshui-preview-actions { display:flex; gap:10px; }
.fengshui-analyze-btn {
  flex:1; padding:12px; border-radius:var(--radius-sm);
  background:var(--primary); color:white; border:none;
  font-size:14px; font-weight:600; cursor:pointer; font-family:inherit;
  transition:transform 0.15s;
}
.fengshui-analyze-btn:active { transform:scale(0.97); }
.fengshui-cancel-btn {
  padding:12px 20px; border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text2); border:1px solid var(--border);
  font-size:13px; cursor:pointer; font-family:inherit;
}

/* AI analysis result */
.fengshui-analyzing {
  text-align:center; padding:30px 16px;
}
.fengshui-analyzing-spinner {
  width:40px; height:40px; border:3px solid var(--border);
  border-top-color:var(--primary); border-radius:50%;
  animation:spin 0.8s linear infinite; margin:0 auto 12px;
}
@keyframes spin { to { transform:rotate(360deg); } }
.fengshui-analyzing-text { font-size:15px; font-weight:600; color:var(--text); margin-bottom:4px; }
.fengshui-analyzing-sub { font-size:12px; color:var(--text3); }

.fengshui-ai-analysis { margin-top:12px; }
.fengshui-ai-header {
  display:flex; align-items:center; gap:10px;
  padding:12px; background:var(--surface); border-radius:var(--radius);
  margin-bottom:12px;
}
.fengshui-ai-header > div:nth-child(2) { flex:1; }
.fengshui-ai-score {
  padding:6px 12px; border-radius:var(--radius-sm);
  font-size:16px; font-weight:800;
}
.fengshui-ai-body { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.fengshui-ai-section {
  background:var(--card); border-radius:var(--radius-sm); padding:10px 12px;
  border:1px solid var(--border);
}
.fengshui-ai-section-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.fengshui-ai-section-content { font-size:12px; color:var(--text2); line-height:1.7; }
.fengshui-ai-suggestions {
  background:rgba(108,92,231,0.05); border-radius:var(--radius);
  padding:12px; border:1px solid rgba(108,92,231,0.15);
}
.fengshui-ai-suggestion {
  font-size:12px; color:var(--text); line-height:1.6; padding:3px 0;
}

/* ===== 智能定价工具 ===== */
.pricing-tool-card { background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.pricing-tool-desc { font-size:12px; color:var(--text2); margin-bottom:12px; }
.pricing-form { margin-bottom:16px; }
.pricing-section { margin-bottom:16px; }
.pricing-header { font-size:14px; font-weight:700; color:var(--text); margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.pricing-range { margin-bottom:16px; }
.pricing-range-bar { height:12px; background:linear-gradient(90deg, #55EFC4, #FDCB6E, #FF7675); border-radius:6px; position:relative; margin-bottom:8px; }
.pricing-range-fill { position:absolute; height:100%; border-radius:6px; }
.pricing-marker { position:absolute; top:-28px; transform:translateX(-50%); text-align:center; }
.pricing-marker-label { font-size:10px; color:var(--primary); font-weight:600; }
.pricing-marker-val { font-size:14px; font-weight:800; color:var(--primary); background:var(--card); padding:2px 8px; border-radius:8px; box-shadow:var(--shadow); }
.pricing-range-labels { display:flex; justify-content:space-between; font-size:12px; color:var(--text2); }
.pricing-range-labels small { display:block; font-size:10px; color:var(--text3); }
.pricing-recommend { background:var(--surface); border-radius:var(--radius); padding:14px; text-align:center; }
.pricing-rec-label { font-size:13px; color:var(--text2); margin-bottom:4px; }
.pricing-rec-price { font-size:32px; font-weight:800; color:var(--primary); }
.pricing-rec-price span { font-size:14px; font-weight:400; }
.pricing-rec-note { font-size:12px; margin-top:4px; }
.pricing-roi-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.pricing-roi-card { text-align:center; background:var(--surface); border-radius:var(--radius-sm); padding:12px 6px; }
.pricing-roi-val { font-size:20px; font-weight:800; color:var(--primary); margin-bottom:4px; }
.pricing-roi-label { font-size:11px; color:var(--text2); margin-bottom:2px; }
.pricing-roi-note { font-size:10px; color:var(--text3); }
.pricing-strategies { display:flex; flex-direction:column; gap:8px; }
.pricing-strategy-card { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; background:var(--surface); border-radius:var(--radius-sm); }
.pricing-strategy-icon { font-size:22px; flex-shrink:0; }
.pricing-strategy-content { flex:1; }
.pricing-strategy-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; }
.pricing-strategy-desc { font-size:11px; color:var(--text2); line-height:1.5; }
.pricing-comp-list { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.pricing-comp-item { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; background:var(--surface); border-radius:var(--radius-sm); flex-wrap:wrap; }
.pricing-comp-name { font-size:13px; font-weight:600; color:var(--text); }
.pricing-comp-meta { font-size:11px; color:var(--text3); }
.pricing-comp-price { font-size:13px; font-weight:600; color:var(--primary); }
.pricing-comp-summary { font-size:11px; color:var(--text3); text-align:center; padding:6px; background:var(--surface); border-radius:var(--radius-sm); }
.pricing-season-cal { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.season-month { text-align:center; padding:8px 4px; border-radius:var(--radius-sm); background:var(--surface); border:2px solid transparent; }
.season-hot { background:#FFF5F5; }
.season-cold { background:#F0F8FF; }
.season-mid { background:var(--surface); }
.season-current { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary-light); }
.season-m { font-size:12px; font-weight:600; color:var(--text); }
.season-tag { font-size:14px; margin:2px 0; }
.season-note { font-size:9px; color:var(--text3); line-height:1.3; }

/* ===== 合同避坑指南 ===== */
.contract-hero { text-align:center; padding:20px 16px; background:linear-gradient(135deg, #667eea, #764ba2); border-radius:var(--radius); margin-bottom:16px; color:white; }
.contract-hero-icon { font-size:48px; margin-bottom:8px; }
.contract-hero-title { font-size:20px; font-weight:800; margin-bottom:4px; }
.contract-hero-sub { font-size:13px; opacity:0.85; }
.contract-tabs { display:flex; gap:4px; margin-bottom:16px; overflow-x:auto; }
.contract-tab { padding:8px 14px; border-radius:20px; font-size:13px; background:var(--surface); color:var(--text2); white-space:nowrap; cursor:pointer; border:none; transition:all 0.15s; }
.contract-tab.active { background:var(--primary); color:white; font-weight:600; }
.contract-section-card { background:var(--card); border-radius:var(--radius); padding:14px; margin-bottom:10px; box-shadow:var(--shadow); }
.contract-section-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.contract-section-title { font-size:14px; font-weight:700; color:var(--text); }
.contract-checklist-items { display:flex; flex-direction:column; gap:6px; }
.contract-check-item { display:flex; align-items:flex-start; gap:8px; cursor:pointer; padding:4px 0; }
.contract-checkbox { width:18px; height:18px; margin-top:1px; flex-shrink:0; accent-color:var(--primary); }
.contract-check-text { font-size:12px; color:var(--text2); line-height:1.5; }
.contract-check-item:has(input:checked) .contract-check-text { text-decoration:line-through; color:var(--text3); }
.contract-trap-card { background:var(--card); border-radius:var(--radius); padding:14px; margin-bottom:10px; box-shadow:var(--shadow); border-left:4px solid var(--border); }
.contract-trap-card.trap-danger { border-left-color:var(--red); }
.contract-trap-card.trap-warning { border-left-color:var(--yellow); }
.contract-trap-card.trap-info { border-left-color:var(--primary); }
.contract-trap-header { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.contract-trap-title { font-size:14px; font-weight:700; color:var(--text); flex:1; }
.contract-trap-level { font-size:10px; padding:2px 8px; border-radius:10px; font-weight:600; }
.trap-danger .contract-trap-level { background:#FDECEA; color:var(--red); }
.trap-warning .contract-trap-level { background:#FFF8E1; color:#F39C12; }
.trap-info .contract-trap-level { background:#E8EAF6; color:var(--primary); }
.contract-trap-desc { font-size:12px; color:var(--text2); margin-bottom:8px; line-height:1.5; }
.contract-trap-solution { font-size:12px; color:var(--green); background:rgba(0,184,148,0.06); padding:8px 10px; border-radius:var(--radius-sm); line-height:1.6; }
.contract-template-intro { background:var(--surface); border-radius:var(--radius); padding:12px; margin-bottom:12px; }
.contract-tpl-section { background:var(--card); border-radius:var(--radius); padding:14px; margin-bottom:10px; box-shadow:var(--shadow); }
.contract-tpl-title { font-size:14px; font-weight:700; color:var(--primary); margin-bottom:8px; }
.contract-tpl-content { font-size:12px; color:var(--text); line-height:1.8; margin-bottom:6px; }
.contract-tpl-tip { font-size:11px; color:var(--green); background:rgba(0,184,148,0.06); padding:6px 10px; border-radius:var(--radius-sm); }
.contract-tpl-footer { margin-top:8px; }
.contract-rights-item { display:flex; justify-content:space-between; align-items:center; padding:8px 8px; border-bottom:1px solid var(--border); }
.contract-rights-item:last-child { border-bottom:none; }
.contract-rights-label { font-size:12px; color:var(--text2); }
.contract-rights-val { font-size:13px; font-weight:600; color:var(--primary); text-decoration:none; }

/* ===== 风水引擎 v2 样式 ===== */
.fengshui-user-input { background:linear-gradient(135deg, #f0e6ff, #e6f0ff); border-radius:var(--radius); padding:12px; margin-bottom:14px; }
.fengshui-mingua-card { background:var(--surface); border-radius:var(--radius); padding:12px; margin-bottom:12px; }
.fs-mingua-badge { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.fs-mingua-icon { font-size:28px; }
.fs-match-indicator { display:inline-block; padding:4px 12px; border-radius:12px; font-size:12px; font-weight:600; }
.fs-match-good { background:rgba(0,184,148,0.1); color:var(--green); }
.fs-match-bad { background:rgba(255,118,117,0.1); color:var(--red); }
.fs-door-star { display:flex; align-items:flex-start; gap:10px; padding:10px; background:var(--surface); border-radius:var(--radius-sm); }
.fs-star-badge { padding:6px 12px; border-radius:var(--radius-sm); font-size:14px; font-weight:700; white-space:nowrap; text-align:center; }
.fs-star-badge span { display:block; font-size:10px; font-weight:400; }
.fs-floor-wuxing-v2 { display:flex; align-items:center; gap:10px; padding:10px; background:var(--surface); border-radius:var(--radius-sm); }
.fs-floor-score { font-size:16px; font-weight:800; margin-left:auto; }
.fs-sanyao-item { display:flex; align-items:flex-start; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); }
.fs-sanyao-item:last-child { border-bottom:none; }
.fs-sanyao-aspect { font-size:12px; font-weight:700; padding:3px 8px; border-radius:8px; white-space:nowrap; }
.fs-sanyao-good { background:rgba(0,184,148,0.1); color:var(--green); }
.fs-sanyao-mid { background:rgba(253,203,110,0.15); color:#c59000; }
.fs-sanyao-bad { background:rgba(255,118,117,0.1); color:var(--red); }

/* ===== 风水堂 Hub ===== */
.fs-hub-hero { text-align:center; padding:20px; background:linear-gradient(135deg, #2d1b69, #1a1a2e); border-radius:var(--radius); margin-bottom:16px; color:white; }
.fs-hub-title { font-size:22px; font-weight:800; margin-bottom:4px; }
.fs-hub-sub { font-size:12px; opacity:0.7; }
.fs-hub-tools { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.fs-hub-card { display:flex; align-items:center; gap:12px; padding:14px; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); cursor:pointer; transition:transform 0.15s; }
.fs-hub-card:active { transform:scale(0.98); }
.fs-hub-card-icon { font-size:28px; flex-shrink:0; }
.fs-hub-card-info { flex:1; }
.fs-hub-card-title { font-size:14px; font-weight:700; color:var(--text); }
.fs-hub-card-desc { font-size:11px; color:var(--text2); margin-top:2px; }
.fs-hub-arrow { font-size:16px; color:var(--text3); }
.fs-hub-wiki { display:flex; flex-direction:column; gap:8px; }
.fs-wiki-item { background:var(--card); border-radius:var(--radius); padding:12px; box-shadow:var(--shadow); }
.fs-wiki-title { font-size:13px; font-weight:700; color:var(--primary); margin-bottom:6px; }
.fs-wiki-content { font-size:12px; color:var(--text2); line-height:1.7; }

/* 命卦测试 */
.fs-test-card { background:var(--card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.fs-test-result { margin-top:8px; }
.fs-result-badge { text-align:center; padding:20px; border-radius:var(--radius); margin-bottom:12px; }
.fs-star-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.fs-star-cell { text-align:center; padding:8px 4px; border-radius:var(--radius-sm); }
.fs-star-good { background:rgba(0,184,148,0.08); }
.fs-star-bad { background:rgba(255,118,117,0.08); }
.fs-star-dir { font-size:11px; color:var(--text2); }
.fs-star-name { font-size:13px; font-weight:700; color:var(--text); }
.fs-star-luck { font-size:10px; color:var(--text3); }
.fs-gua-table { display:flex; flex-direction:column; gap:4px; }
.fs-gua-row { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--card); border-radius:var(--radius-sm); box-shadow:var(--shadow); }
.fs-gua-icon { font-size:18px; }
.fs-gua-name { font-size:13px; font-weight:600; min-width:60px; }
.fs-gua-dir { font-size:12px; color:var(--text2); min-width:36px; }
.fs-gua-wx { font-size:12px; color:var(--text2); min-width:24px; }
.fs-gua-type { font-size:11px; padding:2px 8px; border-radius:10px; font-weight:600; margin-left:auto; }
.fs-east { background:rgba(0,184,148,0.1); color:var(--green); }
.fs-west { background:rgba(108,92,231,0.1); color:var(--primary); }

/* ===== 资讯页面 ===== */
.news-tabs { display:flex; gap:6px; margin-bottom:14px; overflow-x:auto; }
.news-tab { padding:6px 14px; border-radius:16px; font-size:13px; background:var(--surface); color:var(--text2); cursor:pointer; white-space:nowrap; border:none; }
.news-tab.active { background:var(--primary); color:white; font-weight:600; }
.news-card { background:var(--card); border-radius:var(--radius); padding:14px; margin-bottom:10px; box-shadow:var(--shadow); }
.news-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.news-date { font-size:11px; color:var(--text3); }
.news-title { font-size:14px; font-weight:700; color:var(--text); margin-bottom:6px; line-height:1.5; }
.news-summary { font-size:12px; color:var(--text2); line-height:1.6; margin-bottom:6px; }
.news-source { font-size:11px; color:var(--text3); }

/* ===== 搜索建议 ===== */
.search-suggestions { position:absolute; left:0; right:0; top:100%; background:var(--card); border-radius:0 0 var(--radius) var(--radius); box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:100; max-height:300px; overflow-y:auto; }
.search-box { position:relative; }
.search-sug-item { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--border); cursor:pointer; }
.search-sug-item:active { background:var(--surface); }
.search-sug-title { font-size:13px; color:var(--text); }
.search-sug-meta { font-size:11px; color:var(--text3); white-space:nowrap; margin-left:8px; }
.search-sug-footer { text-align:center; padding:10px; font-size:13px; color:var(--primary); font-weight:600; cursor:pointer; }
.search-sug-footer:active { background:var(--surface); }
.search-sug-empty { text-align:center; padding:16px; font-size:13px; color:var(--text3); }

/* ===== 个人中心菜单 ===== */
.profile-menu { display:flex; flex-direction:column; gap:2px; }
.profile-menu-item { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--card); cursor:pointer; font-size:14px; color:var(--text); }
.profile-menu-item:first-child { border-radius:var(--radius) var(--radius) 0 0; }
.profile-menu-item:last-child { border-radius:0 0 var(--radius) var(--radius); }
.profile-menu-item span:first-child { font-size:18px; }
.profile-menu-item span:last-child { margin-left:auto; color:var(--text3); }
.profile-menu-item:active { background:var(--surface); }

/* ===== 风水好物推荐 ===== */
.fs-products-section { margin-top:16px; padding-top:12px; border-top:1px solid var(--border); }
.fs-products-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fs-product-card { display:flex; flex-direction:column; background:var(--card); border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow); text-decoration:none; color:var(--text); transition:transform 0.15s; border:1px solid var(--border); }
.fs-product-card:active { transform:scale(0.97); }
.fs-product-img { width:100%; height:100px; object-fit:cover; }
.fs-product-placeholder { width:100%; height:100px; display:flex; align-items:center; justify-content:center; background:var(--surface); font-size:36px; }
.fs-product-info { padding:8px 10px; }
.fs-product-name { font-size:12px; font-weight:600; color:var(--text); margin-bottom:2px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fs-product-desc { font-size:10px; color:var(--text3); margin-bottom:4px; }
.fs-product-price { font-size:14px; font-weight:700; color:var(--red); }
.fs-product-price span { font-size:10px; font-weight:400; color:var(--primary); float:right; margin-top:3px; }

/* ===== 私信对话 ===== */
.dm-container { flex:1; overflow-y:auto; padding:12px; padding-bottom:70px; display:flex; flex-direction:column; gap:10px; min-height:calc(100vh - 160px); }
.dm-system { text-align:center; font-size:11px; color:var(--text3); padding:6px 12px; background:var(--surface); border-radius:12px; align-self:center; }
.dm-bubble { display:flex; align-items:flex-end; gap:6px; max-width:80%; }
.dm-other { align-self:flex-start; }
.dm-self { align-self:flex-end; flex-direction:row-reverse; }
.dm-avatar { font-size:24px; flex-shrink:0; margin-bottom:2px; }
.dm-text { padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.5; }
.dm-other .dm-text { background:var(--card); color:var(--text); border-bottom-left-radius:4px; box-shadow:var(--shadow); }
.dm-self .dm-text { background:var(--primary); color:white; border-bottom-right-radius:4px; }

/* ===== 城市选择器 ===== */
.city-picker-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:999; display:flex; align-items:flex-end; justify-content:center; }
.city-picker-modal { background:var(--card); border-radius:20px 20px 0 0; width:100%; max-width:430px; padding:20px 16px; padding-bottom:calc(20px + env(safe-area-inset-bottom)); animation:slideUp 0.25s ease; }
@keyframes slideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
.city-picker-title { font-size:16px; font-weight:700; text-align:center; margin-bottom:16px; color:var(--text); }
.city-picker-grid { display:flex; gap:10px; margin-bottom:16px; }
.city-picker-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 8px; background:var(--surface); border-radius:var(--radius); cursor:pointer; border:2px solid transparent; transition:all 0.15s; }
.city-picker-item:active { transform:scale(0.97); }
.city-picker-item.active { border-color:var(--primary); background:rgba(108,92,231,0.08); }
.city-picker-item span:first-child { font-size:28px; }
.city-picker-item span:nth-child(2) { font-size:14px; font-weight:600; color:var(--text); }
.city-count { font-size:11px; color:var(--text3); }
.city-picker-close { text-align:center; padding:12px; font-size:14px; color:var(--text2); cursor:pointer; }

/* ===== 室友邀请按钮 ===== */
.roommate-actions { display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.rm-btn { flex:1; padding:10px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; border:none; cursor:pointer; font-family:inherit; transition:all 0.15s; }
.rm-btn:active { transform:scale(0.97); }
.rm-btn-invite { background:var(--primary); color:white; }
.rm-btn-pending { background:var(--surface); color:var(--text3); cursor:default; }
.rm-btn-matched { background:var(--green); color:white; }
.rm-btn-small { padding:8px 12px; border-radius:var(--radius-sm); font-size:12px; background:var(--surface); color:var(--text2); border:none; cursor:pointer; font-family:inherit; }
.rm-match-badge { font-size:12px; color:var(--green); font-weight:600; }

/* ===== 匹配动画 ===== */
.match-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:1000; display:flex; align-items:center; justify-content:center; animation:fadeIn 0.3s; }
.match-modal { background:var(--card); border-radius:20px; padding:32px 24px; text-align:center; max-width:320px; width:90%; animation:bounceIn 0.5s; }
@keyframes bounceIn { 0%{transform:scale(0.5);opacity:0} 60%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }
.match-animation { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:16px; }
.match-avatar-left, .match-avatar-right { font-size:48px; animation:slideInMatch 0.5s ease; }
.match-avatar-right { animation-delay:0.2s; }
.match-heart { font-size:32px; animation:heartBeat 0.8s ease 0.4s both; }
@keyframes slideInMatch { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
@keyframes heartBeat { 0%{transform:scale(0)} 50%{transform:scale(1.3)} 100%{transform:scale(1)} }
.match-title { font-size:22px; font-weight:800; color:var(--text); }
.match-subtitle { font-size:14px; color:var(--text2); margin-top:4px; }
.match-skip { font-size:13px; color:var(--text3); margin-top:12px; cursor:pointer; }