/* ========== 全局样式 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif; background: linear-gradient(135deg, #ffe5e5 0%, #f5f5f5 100%); color: #333; overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
body { font-size: 17px; margin: 0 auto; position: relative; height: 100vh; overflow: hidden; }
/* 中老年适配 - 全局加大字体 */
input, select, textarea, button { font-size: 16px; }

/* ========== 应用容器（手机屏幕模拟） ========== */
.app-container { width: 100%; max-width: 480px; height: 100vh; margin: 0 auto; position: relative; background: #f5f5f5; box-shadow: 0 0 40px rgba(0,0,0,0.08); overflow: hidden; }

/* ========== 页面容器 ========== */
.page { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #f5f5f5; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; opacity: 0; }
.page.active { display: block; animation: pageEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.tab-page { bottom: 60px; }
/* 首页用 flex 三段式布局：header / 卡片区 / 按钮区 */
#home-page.active { display: flex !important; flex-direction: column; }

/* ========== 页面切换动画 ========== */
@keyframes pageEnter {
  from { opacity: 0; transform: translateX(20px) scale(0.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes pageEnterLeft {
  from { opacity: 0; transform: translateX(-20px) scale(0.98); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* Tab 切换方向动画 */
.tab-page.slide-left { animation: pageEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.tab-page.slide-right { animation: pageEnterLeft 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* ========== 按钮 ========== */
.btn { display: inline-block; padding: 14px 40px; border: none; border-radius: 30px; font-size: 16px; font-weight: bold; cursor: pointer; text-align: center; letter-spacing: 1px; transition: all 0.25s ease; }
.btn:active { transform: scale(0.96); }
.btn-primary { background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: #fff; box-shadow: 0 4px 15px rgba(238,90,36,0.4); width: 100%; }
.btn-primary:hover { box-shadow: 0 6px 20px rgba(238,90,36,0.5); transform: translateY(-2px); }
.btn-outline { background: #fff; color: #ff6b6b; border: 2px solid #ff6b6b; }
.btn-sm { padding: 8px 20px; font-size: 14px; border-radius: 20px; }

/* ========== 登录页 ========== */
.login-page { background: linear-gradient(180deg, #ff9a9e 0%, #fecfef 50%, #fff 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; }
.login-logo { width: 80px; height: 80px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.login-logo text { font-size: 36px; }
.login-title { font-size: 28px; font-weight: bold; color: #d63031; margin-bottom: 5px; }
.login-subtitle { font-size: 15px; color: #999; margin-bottom: 25px; }
.login-form { width: 100%; background: #fff; border-radius: 16px; padding: 30px 25px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); }
.input-group { margin-bottom: 18px; }
.input-group label { display: block; font-size: 15px; color: #555; margin-bottom: 8px; font-weight: bold; }
.input-group input { width: 100%; padding: 15px 16px; border: 2px solid #eee; border-radius: 12px; font-size: 17px; outline: none; background: #fafafa; }
.input-group input:focus { border-color: #ff6b6b; background: #fff; }
.phone-row { display: flex; gap: 10px; }
.phone-row input { flex: 1; }
.code-btn { white-space: nowrap; padding: 14px 16px; background: #ff6b6b; color: #fff; border: none; border-radius: 12px; font-size: 14px; cursor: pointer; min-width: 110px; }
.code-btn:disabled { background: #ccc; }
.login-btn { margin-top: 10px; }
.agreement { font-size: 12px; color: #999; text-align: center; margin-top: 15px; }
.agreement span { color: #ff6b6b; }

/* ========== 注册补充信息 ========== */
.register-page { background: #fff; padding: 25px; }
.register-page h2 { font-size: 22px; color: #333; margin-bottom: 25px; text-align: center; }
.avatar-upload { display: flex; flex-direction: column; align-items: center; margin-bottom: 25px; }
.avatar-preview { width: 80px; height: 80px; border-radius: 50%; background: #eee; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 10px; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload .tips { font-size: 13px; color: #ff6b6b; }
.select-group { margin-bottom: 18px; }
.select-group label { display: block; font-size: 14px; color: #666; margin-bottom: 6px; font-weight: bold; }
.select-group select, .select-group textarea { width: 100%; padding: 12px 16px; border: 2px solid #eee; border-radius: 12px; font-size: 16px; outline: none; background: #fafafa; }
.select-group textarea { height: 80px; resize: none; }
.select-group select:focus, .select-group textarea:focus { border-color: #ff6b6b; }

/* ========== 底部导航 ========== */
.tab-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; background: rgba(255,255,255,0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; border-top: 1px solid rgba(238,238,238,0.8); z-index: 100; box-shadow: 0 -2px 15px rgba(0,0,0,0.06); }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; color: #999; font-size: 11px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; padding-top: 4px; }
.tab-item .icon { font-size: 22px; margin-bottom: 2px; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.tab-item.active { color: #ff6b6b; }
.tab-item.active .icon { transform: translateY(-3px) scale(1.15); }
.tab-item.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: linear-gradient(90deg, #ff6b6b, #ee5a24); border-radius: 0 0 3px 3px; animation: slideDown 0.3s ease; }
.tab-item .badge { position: absolute; top: 4px; right: 50%; margin-right: -25px; background: #ff4757; color: #fff; font-size: 10px; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; animation: bounceIn 0.4s ease; }

/* ========== 首页 - 推荐卡片 ========== */
.home-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #fff; animation: slideDown 0.4s ease; flex: 0 0 auto; }
.home-header .logo { font-size: 19px; font-weight: bold; color: #ff6b6b; }
.home-header .filter-btn { font-size: 14px; color: #666; cursor: pointer; padding: 6px 12px; background: #f5f5f5; border-radius: 20px; transition: all 0.2s; }
.home-header .filter-btn:active { background: #ff6b6b; color: #fff; }
.filter-bar { display: flex; padding: 0 20px 12px; gap: 10px; background: #fff; }
.filter-chip { padding: 8px 16px; border-radius: 20px; background: #f0f0f0; font-size: 13px; cursor: pointer; white-space: nowrap; }
.filter-chip.active { background: #ff6b6b; color: #fff; }

/* 首页整体布局（flex 三段式：header / 卡片区 / 按钮区） */
.card-container { flex: 1; padding: 12px 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.card-stack { position: relative; width: 100%; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.card { background: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); overflow: hidden; flex: 1; display: flex; flex-direction: column; transition: transform 0.3s, opacity 0.3s; cursor: pointer; animation: slideUp 0.45s cubic-bezier(0.16, 1, 0.3, 1); min-height: 0; }
.card.swiping-left { transform: translateX(-120%) rotate(-20deg); opacity: 0; }
.card.swiping-right { transform: translateX(120%) rotate(20deg); opacity: 0; }
.card-photo { width: 100%; height: 30vh; max-height: 220px; min-height: 160px; background: #eee; position: relative; overflow: hidden; flex: 0 0 auto; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-photo .photo-index { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; }
.card-photo .photo-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.card-photo .photo-dot.active { background: #fff; width: 20px; border-radius: 3px; }
.card-info { padding: 12px 15px; flex: 1; overflow-y: auto; min-height: 0; }
.card-info .name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.card-info .name { font-size: 22px; font-weight: bold; }
.card-info .age { font-size: 20px; color: #ff6b6b; }
.card-info .verify { background: #ff6b6b; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; }
.card-info .tags { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.card-info .tag { padding: 4px 12px; background: #fff3f3; color: #ff6b6b; border-radius: 12px; font-size: 12px; }
.card-info .basic { display: flex; gap: 12px; font-size: 13px; color: #666; margin-bottom: 8px; flex-wrap: wrap; }
.card-info .basic span { display: inline-flex; align-items: center; gap: 4px; }
.card-info .desc { font-size: 14px; color: #666; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.card-actions { display: flex; justify-content: center; gap: 30px; padding: 10px 0 18px; animation: fadeIn 0.5s ease 0.1s both; flex: 0 0 auto; background: #f5f5f5; }
.action-btn { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 26px; border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.12); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.action-btn:active { transform: scale(0.85); }
.action-btn:hover { transform: translateY(-3px); }
.btn-dislike { background: #fff; color: #333; }
.btn-superlike { background: linear-gradient(135deg, #00b894, #00cec9); color: #fff; width: 44px; height: 44px; font-size: 18px; }
.btn-like { background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: #fff; }
.empty-state { text-align: center; padding: 60px 20px; color: #999; }
.empty-state .icon { font-size: 60px; margin-bottom: 15px; }
.empty-state p { font-size: 15px; }

/* ========== 匹配弹窗 ========== */
.match-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 200; flex-direction: column; align-items: center; justify-content: center; }
.match-overlay.show { display: flex; animation: fadeIn 0.3s ease; }
.match-overlay.show .match-card { animation: bounceIn 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.match-card { background: #fff; border-radius: 20px; padding: 30px; text-align: center; width: 85%; max-width: 350px; }
.match-title { font-size: 24px; font-weight: bold; color: #ff6b6b; margin-bottom: 5px; }
.match-subtitle { font-size: 14px; color: #999; margin-bottom: 20px; }
.match-avatars { display: flex; justify-content: center; align-items: center; gap: -15px; margin-bottom: 20px; }
.match-avatar { width: 80px; height: 80px; border-radius: 50%; border: 4px solid #ff6b6b; overflow: hidden; }
.match-avatar img { width: 100%; height: 100%; object-fit: cover; }
.match-heart { font-size: 30px; z-index: 1; }
.match-actions { display: flex; gap: 15px; justify-content: center; }
.match-actions .btn { padding: 12px 30px; font-size: 15px; }

/* ========== 喜欢列表 ========== */
.likes-page { padding: 20px; }
.likes-header { font-size: 20px; font-weight: bold; margin-bottom: 20px; color: #333; }
.like-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.like-item { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.06); transition: all 0.25s; animation: fadeIn 0.4s ease both; }
.like-item:active { transform: scale(0.97); }
.like-item img { width: 100%; height: 160px; object-fit: cover; }
.like-item .info { padding: 10px; }
.like-item .name { font-size: 15px; font-weight: bold; }
.like-item .age { font-size: 13px; color: #666; }
.likes-tabs { display: flex; margin-bottom: 15px; gap: 10px; }
.likes-tab { padding: 8px 20px; border-radius: 20px; cursor: pointer; font-size: 14px; background: #f0f0f0; color: #666; }
.likes-tab.active { background: #ff6b6b; color: #fff; }

/* ========== 消息页 ========== */
.msg-header { padding: 15px 20px; font-size: 20px; font-weight: bold; background: #fff; }
.msg-list { background: #fff; }
.msg-item { display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid #f5f5f5; cursor: pointer; transition: background 0.2s; animation: fadeIn 0.35s ease both; }
.msg-item:active { background: #f9f9f9; }
.msg-avatar { width: 55px; height: 55px; border-radius: 50%; overflow: hidden; margin-right: 12px; flex-shrink: 0; }
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-content { flex: 1; min-width: 0; }
.msg-name { font-size: 16px; font-weight: bold; margin-bottom: 3px; }
.msg-preview { font-size: 13px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-extra { text-align: right; flex-shrink: 0; }
.msg-time { font-size: 12px; color: #bbb; margin-bottom: 4px; }
.msg-unread { display: inline-block; background: #ff4757; color: #fff; font-size: 11px; min-width: 20px; height: 20px; border-radius: 10px; text-align: center; line-height: 20px; }
.msg-empty { text-align: center; padding: 60px 20px; color: #999; }
.msg-empty .icon { font-size: 50px; margin-bottom: 10px; }

/* ========== 聊天详情 ========== */
.chat-page { background: #f0f0f0; }
.chat-header { position: sticky; top: 0; display: flex; align-items: center; padding: 12px 16px; background: #fff; border-bottom: 1px solid #eee; z-index: 10; }
.chat-back { font-size: 20px; padding: 6px 10px; cursor: pointer; }
.chat-title { flex: 1; text-align: center; font-size: 17px; font-weight: bold; }
.chat-messages { padding: 15px; padding-bottom: 80px; }
.chat-msg { display: flex; margin-bottom: 18px; animation: slideUp 0.3s ease; }
.chat-msg.self { flex-direction: row-reverse; }
.chat-bubble { max-width: 70%; padding: 12px 16px; border-radius: 18px; font-size: 15px; line-height: 1.6; position: relative; word-break: break-all; }
.chat-msg.other .chat-bubble { background: #fff; border-top-left-radius: 4px; }
.chat-msg.self .chat-bubble { background: #ff6b6b; color: #fff; border-top-right-radius: 4px; }
.chat-time { text-align: center; font-size: 12px; color: #bbb; margin: 15px 0; }
.chat-input-bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; padding: 10px 15px; background: #fff; border-top: 1px solid #eee; gap: 10px; z-index: 100; animation: slideUp 0.3s ease; }
.chat-input-bar input { flex: 1; padding: 12px 16px; border: none; border-radius: 24px; background: #f5f5f5; font-size: 15px; outline: none; transition: background 0.2s; }
.chat-input-bar input:focus { background: #f0f0f0; }
.chat-input-bar .send-btn { padding: 10px 20px; background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: #fff; border: none; border-radius: 24px; font-size: 15px; cursor: pointer; transition: transform 0.2s; }
.chat-input-bar .send-btn:active { transform: scale(0.95); }

/* ========== 个人中心 ========== */
.profile-header { background: linear-gradient(135deg, #ff6b6b, #ee5a24); padding: 30px 20px; color: #fff; text-align: center; }
.profile-avatar { width: 80px; height: 80px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.5); overflow: hidden; margin: 0 auto 10px; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-name { font-size: 20px; font-weight: bold; }
.profile-id { font-size: 13px; opacity: 0.7; margin-top: 3px; }
.profile-stats { display: flex; justify-content: space-around; padding: 20px; background: #fff; margin-bottom: 10px; }
.stat-item { text-align: center; }
.stat-num { font-size: 20px; font-weight: bold; color: #ff6b6b; }
.stat-label { font-size: 12px; color: #999; margin-top: 3px; }
.profile-menu { background: #fff; margin-bottom: 10px; }
.menu-item { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #f5f5f5; cursor: pointer; font-size: 15px; transition: background 0.2s; }
.menu-item:active { background: #f9f9f9; }
.menu-item:last-child { border-bottom: none; }
.menu-item .left { display: flex; align-items: center; gap: 12px; }
.menu-item .icon { font-size: 20px; }
.menu-item .arrow { color: #ccc; }
.logout-btn { margin: 30px 20px; }
.logout-btn .btn { background: #fff; color: #ff6b6b; border: 1px solid #ff6b6b; box-shadow: none; }

/* ========== 编辑资料 ========== */
.edit-page { background: #fff; padding: 20px; }
.edit-page h3 { font-size: 18px; margin-bottom: 20px; text-align: center; }
.edit-avatar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; }
.edit-avatar img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; }
.edit-field { margin-bottom: 15px; }
.edit-field label { display: block; font-size: 14px; color: #666; margin-bottom: 5px; font-weight: bold; }
.edit-field input, .edit-field textarea, .edit-field select { width: 100%; padding: 12px; border: 2px solid #eee; border-radius: 10px; font-size: 15px; outline: none; }
.edit-field textarea { height: 80px; resize: none; }
.edit-field input:focus, .edit-field textarea:focus, .edit-field select:focus { border-color: #ff6b6b; }
.edit-save { margin-top: 20px; }

/* ========== 搜索/筛选弹窗 ========== */
.filter-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 150; }
.filter-modal.show { display: block; animation: fadeIn 0.25s ease; }
.filter-modal.show .filter-panel { animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.filter-panel { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-radius: 20px 20px 0 0; padding: 25px 20px 35px; max-height: 70vh; overflow-y: auto; }
.filter-panel h3 { font-size: 18px; text-align: center; margin-bottom: 20px; }
.filter-close-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.filter-close-row span { font-size: 22px; cursor: pointer; color: #999; padding: 4px 8px; }
.filter-row { margin-bottom: 15px; }
.filter-row label { display: block; font-size: 14px; color: #666; margin-bottom: 8px; font-weight: bold; }
.filter-options { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-opt { padding: 8px 16px; background: #f5f5f5; border-radius: 20px; font-size: 13px; cursor: pointer; }
.filter-opt.active { background: #ff6b6b; color: #fff; }
.filter-close { text-align: right; font-size: 24px; cursor: pointer; margin-bottom: 10px; color: #999; }
.filter-actions { display: flex; gap: 10px; margin-top: 20px; }
.filter-actions .btn { flex: 1; padding: 12px; }

/* ========== Toast ========== */
.toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,0.8); color: #fff; padding: 14px 28px; border-radius: 10px; font-size: 16px; z-index: 300; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.toast.show { opacity: 1; }

/* ========== 中老年适老优化 ========== */
/* 健康贴士卡片 */
.health-tips { background: linear-gradient(135deg, #a8e6cf, #dcedc1); border-radius: 12px; padding: 16px; margin: 12px 20px; font-size: 14px; color: #2d6a4f; line-height: 1.8; }
.health-tips .tip-title { font-size: 16px; font-weight: bold; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.health-tips .tip-item { padding: 3px 0; }
.health-tips .tip-item::before { content: '🌸 '; }
/* 每日寄语 */
.daily-greeting { background: linear-gradient(135deg, #ffecd2, #fcb69f); border-radius: 12px; padding: 14px 18px; margin: 12px 20px 0; text-align: center; }
.daily-greeting .greeting-text { font-size: 15px; color: #6b4226; line-height: 1.6; }
.daily-greeting .greeting-date { font-size: 12px; color: #8d6e63; margin-top: 4px; }
/* 热门话题 */
.hot-topics { padding: 10px 20px; }
.hot-topic-title { font-size: 15px; font-weight: bold; color: #666; margin-bottom: 8px; }
.hot-topic-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hot-topic-tag { padding: 6px 14px; background: #fff; border: 1px solid #ffcccc; border-radius: 16px; font-size: 13px; color: #ff6b6b; cursor: pointer; transition: all 0.2s; }
.hot-topic-tag:active { background: #ff6b6b; color: #fff; }
/* 大按钮适配 */
.action-btn { width: 68px; height: 68px; font-size: 30px; }
.btn-superlike { width: 52px; height: 52px; font-size: 20px; }
.card-actions { gap: 36px; }
/* 更高对比度的文字 */
.card-info .desc { color: #777; font-size: 14px; }
.card-info .basic { font-size: 14px; }
.tag { font-size: 13px; padding: 5px 14px; }
/* 会员中心金卡 */
.vip-badge { display: inline-block; background: linear-gradient(135deg, #ffd700, #ffaa00); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; vertical-align: middle; margin-left: 4px; }

/* ========== 编辑页公用 ========== */
.edit-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #fff; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 10; }
.edit-header span:first-child { font-size: 18px; cursor: pointer; }
.edit-header span:nth-child(2) { font-weight: bold; font-size: 17px; }
.edit-page-inner { padding: 20px; background: #fff; min-height: 100%; }
.edit-field { margin-bottom: 15px; }
.edit-field label { display: block; font-size: 14px; color: #666; margin-bottom: 6px; font-weight: bold; }
.edit-field input, .edit-field textarea, .edit-field select { width: 100%; padding: 12px; border: 2px solid #eee; border-radius: 10px; font-size: 15px; outline: none; }
.edit-field textarea { height: 80px; resize: none; }
.edit-field input:focus, .edit-field textarea:focus, .edit-field select:focus { border-color: #ff6b6b; }
.edit-avatar-wrap { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 20px; }
.edit-avatar-wrap .change-btn { font-size: 13px; color: #ff6b6b; cursor: pointer; text-decoration: underline; }
.hobby-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hobby-chip { padding: 6px 14px; background: #f5f5f5; border-radius: 16px; font-size: 13px; cursor: pointer; transition: all 0.2s; user-select: none; }
.hobby-chip.active { background: #ff6b6b; color: #fff; }
.card-placeholder { text-align: center; padding: 60px 20px; color: #bbb; font-size: 14px; }

/* 兼容小屏 */
@media (max-height: 600px) {
  .card-stack { height: 340px; }
  .card { height: 320px; }
  .card-photo { height: 200px; }
}