* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f0f0f1; color: #333; line-height: 1.5; font-size: 14px; }
a { text-decoration: none; color: inherit; }
ul, li { list-style: none; }
input, textarea, select { font-family: inherit; font-size: 14px; outline: none; }
.bg-gray { background-color: #f0f0f1; }
.pb-70 { padding-bottom: 70px; }
.card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 12px; overflow: hidden; border: 1px solid #e5e5e5; }
.text-danger { color: #d63638; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; height: 40px; border-radius: 6px; border: 1px solid transparent; font-size: 14px; cursor: pointer; background: #fff; color: #333; }
.btn-primary { background: #2271b1; color: #fff; border-color: #2271b1; }
.btn-outline { background: #fff; color: #2271b1; border-color: #2271b1; }
.btn-gray { background: #f0f0f1; color: #666; border-color: #ccc; }
.btn-block { width: 100%; display: flex; }
.btn-sm { height: 32px; font-size: 13px; padding: 0 12px; }

/* 登录注册 */
.auth-page { background: #fff; display: flex; align-items: center; justify-content: center; height: 100vh; }
.auth-card { width: 90%; max-width: 360px; padding: 30px 20px; }
.auth-card h2 { text-align: center; margin-bottom: 25px; font-size: 22px; color: #2271b1; }
.auth-card .form-group { margin-bottom: 15px; }
.auth-card input { width: 100%; height: 44px; padding: 0 15px; border: 1px solid #ccc; border-radius: 6px; background: #f9f9f9; }
.auth-card .btn { margin-top: 10px; }
.auth-link { text-align: center; margin-top: 20px; color: #666; }
.auth-link a { color: #2271b1; }
.error-msg { color: #d63638; background: #fcf0f1; padding: 10px; border-radius: 6px; margin-bottom: 15px; font-size: 13px; border: 1px solid #facfd2; }
.success-msg { color: #00a32a; background: #edfaef; padding: 10px; border-radius: 6px; margin-bottom: 15px; font-size: 13px; border: 1px solid #b8e6bf; }

/* 首页 */
.header-tabs { display: flex; background: #fff; position: sticky; top: 0; z-index: 10; border-bottom: 1px solid #e5e5e5; }
.header-tabs .tab { flex: 1; text-align: center; padding: 12px 0; font-size: 15px; color: #666; cursor: pointer; position: relative; }
.header-tabs .tab.active { color: #2271b1; font-weight: bold; }
.header-tabs .tab.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 2px; background: #2271b1; border-radius: 2px; }
.list-container { padding: 12px; }
.user-card { display: flex; background: #fff; padding: 15px; border-radius: 8px; margin-bottom: 12px; border: 1px solid #e5e5e5; }
.user-card .avatar { width: 100px; height: 100px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #eee; }
.user-card .info { flex: 1; margin-left: 15px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.user-card .top-row { display: flex; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.user-card .nickname { font-size: 16px; font-weight: bold; color: #222; margin-right: 8px; }
.user-card .region { font-size: 12px; color: #888; margin-left: auto; }
.user-card .intro { font-size: 13px; color: #555; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gender-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; font-size: 12px; color: #fff; }
.gender-icon.male { background: #3b82f6; }
.gender-icon.female { background: #ec4899; }
.loading-text { text-align: center; padding: 20px; color: #999; font-size: 13px; }

/* 底部导航 */
.bottom-nav { position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; background: #fff; display: flex; border-top: 1px solid #e5e5e5; z-index: 100; padding-bottom: env(safe-area-inset-bottom); }
.nav-item { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #666; }
.nav-item.active { color: #2271b1; font-weight: bold; }

/* 用户中心 */
.ucenter-header { background: #2271b1; padding: 30px 20px; display: flex; align-items: center; color: #fff; }
.avatar-large { width: 70px; height: 70px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); object-fit: cover; }
.user-info { margin-left: 15px; }
.user-info h2 { font-size: 18px; margin-bottom: 4px; }
.user-info p { font-size: 13px; opacity: 0.8; }
.ucenter-stats { display: flex; background: #fff; margin: -20px 12px 12px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); position: relative; z-index: 2; padding: 15px 0; text-align: center; }
.stat-item { flex: 1; display: flex; flex-direction: column; }
.stat-item:first-child { border-right: 1px solid #eee; }
.stat-item .num { font-size: 18px; font-weight: bold; color: #2271b1; }
.stat-item .label { font-size: 12px; color: #888; margin-top: 4px; }
.ucenter-menu { margin: 0 12px 12px; }
.menu-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #f0f0f1; font-size: 15px; }
.menu-item:last-child { border-bottom: none; }
.menu-item .arrow { color: #ccc; }
.badge { background: #d63638; color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 10px; margin-left: 8px; }
.recent-follows { margin: 0 12px; padding: 15px; }
.recent-follows h3 { font-size: 14px; margin-bottom: 12px; color: #333; }
.follow-list { display: flex; flex-wrap: wrap; gap: 15px; }
.follow-item { display: flex; flex-direction: column; align-items: center; width: 55px; }
.avatar-small { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; margin-bottom: 6px; background: #eee; }
.follow-item span { font-size: 12px; color: #555; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; }
.empty-text { color: #999; font-size: 13px; text-align: center; }

/* 资料页 */
.header-bar { display: flex; justify-content: space-between; align-items: center; height: 44px; background: #fff; padding: 0 15px; font-size: 16px; border-bottom: 1px solid #e5e5e5; position: sticky; top: 0; z-index: 10; }
.back-btn { color: #2271b1; font-size: 15px; width: 60px; }
.header-bar > span:nth-child(2) { font-weight: bold; flex: 1; text-align: center; }
.form-container { padding: 12px; }
.form-group { padding: 15px; border-bottom: 1px solid #f0f0f1; margin-bottom: 0; border-radius: 0; }
.form-container .card:first-child .form-group { border-radius: 8px 8px 0 0; }
.form-container .card:last-child .form-group { border-bottom: none; border-radius: 0 0 8px 8px; }
.form-group label { display: block; font-size: 14px; color: #333; margin-bottom: 10px; font-weight: bold; }
.form-group input[type="text"], .form-group textarea, .form-group select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; background: #f9f9f9; }
.avatar-upload-wrapper { display: flex; align-items: center; gap: 15px; }
.avatar-upload-wrapper .avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; background: #eee; }
.radio-group { display: flex; gap: 20px; }
.radio-group label { display: flex; align-items: center; gap: 6px; font-weight: normal; margin-bottom: 0; }
.region-selects { display: flex; gap: 10px; }
.region-selects select { flex: 1; }
.form-container .btn-block { margin-top: 20px; border-radius: 8px; height: 44px; font-size: 16px; }

/* 个人主页 */
.profile-top { background: #fff; padding: 30px 20px; text-align: center; border-bottom: 1px solid #e5e5e5; }
.avatar-xl { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; background: #eee; border: 3px solid #f0f0f1; }
.profile-top h2 { font-size: 20px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.profile-top .region { color: #888; font-size: 13px; margin-bottom: 4px; }
.profile-top .view-count { color: #aaa; font-size: 12px; }
.intro-card { margin: 12px; padding: 15px; }
.intro-card h3 { font-size: 14px; margin-bottom: 10px; color: #2271b1; border-left: 3px solid #2271b1; padding-left: 8px; }
.intro-card p { font-size: 14px; color: #333; line-height: 1.6; }
.bottom-action-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; background: #fff; display: flex; align-items: center; padding: 0 15px; gap: 10px; border-top: 1px solid #e5e5e5; box-sizing: border-box; padding-bottom: env(safe-area-inset-bottom); z-index: 100; }
.bottom-action-bar .btn { flex: 1; height: 40px; border-radius: 20px; }
.bottom-action-bar .btn-complaint { flex: 0.5; border-color: #ddd; color: #888; }

/* 弹窗 */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; display: flex; align-items: center; justify-content: center; }
.modal-content { background: #fff; width: 85%; max-width: 320px; border-radius: 12px; padding: 20px; }
.modal-content h3 { margin-bottom: 15px; text-align: center; font-size: 16px; }
.modal-content textarea { width: 100%; height: 100px; padding: 10px; border: 1px solid #ddd; border-radius: 6px; resize: none; margin-bottom: 15px; background: #f9f9f9; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; height: 36px; border-radius: 6px; }

/* 消息列表 */
.chat-list { background: #fff; margin-top: 10px; }
.chat-item { display: flex; padding: 12px 15px; border-bottom: 1px solid #f0f0f1; align-items: center; }
.chat-item:active { background: #f9f9f9; }
.avatar-wrapper { position: relative; margin-right: 12px; }
.avatar-wrapper .avatar-small { width: 50px; height: 50px; border-radius: 8px; margin: 0; }
.avatar-wrapper .dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; background: #d63638; border-radius: 50%; border: 2px solid #fff; }
.chat-info { flex: 1; overflow: hidden; }
.chat-top { display: flex; justify-content: space-between; margin-bottom: 4px; align-items: center; }
.chat-top .nickname { font-size: 16px; font-weight: bold; color: #333; }
.chat-top .time { font-size: 12px; color: #999; }
.chat-msg { display: flex; justify-content: space-between; align-items: center; }
.chat-msg .preview { font-size: 13px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.chat-msg .badge { background: #d63638; color: #fff; font-size: 12px; padding: 1px 5px; border-radius: 10px; }

/* 聊天页 */
.chat-page { display: flex; flex-direction: column; height: 100vh; background: #f0f0f1; }
.fixed-top { position: fixed; top: 0; width: 100%; z-index: 10; }
.chat-container { flex: 1; padding: 60px 15px 70px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }
.chat-bubble-wrapper { display: flex; align-items: flex-start; gap: 10px; max-width: 85%; }
.chat-bubble-wrapper.me { align-self: flex-end; flex-direction: row-reverse; }
.chat-bubble-wrapper .avatar-mini { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #eee; }
.chat-bubble-wrapper .bubble { padding: 10px 14px; border-radius: 8px; font-size: 15px; line-height: 1.4; word-break: break-all; position: relative; }
.chat-bubble-wrapper.other .bubble { background: #fff; color: #333; border-top-left-radius: 2px; border: 1px solid #e5e5e5; }
.chat-bubble-wrapper.me .bubble { background: #2271b1; color: #fff; border-top-right-radius: 2px; }
.chat-input-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; padding: 10px 15px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 10px; border-top: 1px solid #e5e5e5; z-index: 10; }
.chat-input-bar input { flex: 1; height: 40px; border: 1px solid #ddd; border-radius: 20px; padding: 0 15px; background: #f9f9f9; }
.chat-input-bar button { width: 60px; height: 40px; border: none; background: #2271b1; color: #fff; border-radius: 20px; font-size: 14px; }

/* 后台管理 */
.admin-container { padding: 15px; }
.admin-header { display: flex; background: #fff; margin-bottom: 15px; border-radius: 8px; overflow: hidden; }
.admin-tab { flex: 1; text-align: center; padding: 12px; font-weight: bold; cursor: pointer; color: #666; }
.admin-tab.active { background: #2271b1; color: #fff; }
.table-wrapper { background: #fff; border-radius: 8px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
th, td { padding: 12px 10px; border-bottom: 1px solid #f0f0f1; white-space: nowrap; }
th { background: #f9f9f9; color: #666; font-weight: normal; }
/* 注册成功提示 */
.success-box { text-align: center; padding: 20px 0; }
.success-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: #00a32a; color: #fff; border-radius: 50%; font-size: 30px; margin-bottom: 15px; }
.success-box h3 { font-size: 20px; color: #333; margin-bottom: 10px; }
.success-box p { font-size: 14px; color: #888; }
/* 密码小眼睛容器 */
.pwd-wrapper { position: relative; width: 100%; }
.pwd-wrapper input { padding-right: 40px !important; }
.eye-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; cursor: pointer; fill: #999; display: flex; align-items: center; justify-content: center; }
.eye-icon svg { width: 100%; height: 100%; }

/* 个人主页操作行（居中修复版） */
.action-row {
    display: flex;
    justify-content: center; /* 居中 */
    align-items: center;
    gap: 10px;
    padding: 0 15px;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
}
.action-row .btn {
    flex: 1; /* 按钮均分宽度 */
    height: 40px;
    border-radius: 6px;
    font-size: 14px;
    padding: 0; /* 防止文字撑破 */
    margin: 0;
    box-sizing: border-box;
    text-align: center;
    line-height: 40px; /* 文字垂直居中 */
}
.action-row .btn-complaint {
    flex: 0.6; /* 投诉按钮稍微窄一点 */
    background: #fff;
}
/* 针对只有一个按钮的情况 */
.action-row .btn-single {
    flex: 0 1 200px; /* 最大宽度200，居中 */
}
/* 后台多Tab适配 */
.admin-header { display: flex; background: #fff; margin-bottom: 15px; border-radius: 8px; overflow: hidden; border: 1px solid #e5e5e5; }
.admin-tab { flex: 1; text-align: center; padding: 12px 0; font-weight: bold; cursor: pointer; color: #666; font-size: 13px; }
.admin-tab.active { background: #2271b1; color: #fff; }
.pagination { display: flex; justify-content: center; align-items: center; padding: 15px; gap: 15px; font-size: 14px; background: #fff; border-top: 1px solid #f0f0f1; }
.pagination a { color: #2271b1; text-decoration: none; padding: 5px 10px; border: 1px solid #2271b1; border-radius: 4px; }
.pagination span { color: #666; }