/* ===== 鱼获墙 v20260702x3 - 全页面超大字体 ===== */
/* 所有页面: 基础20px起, 关键文字22-26px */

html { font-size: 20px !important; }
body { font-size: 20px !important; line-height: 1.7 !important; padding-bottom: 100px !important; }

/* === 首页瀑布流 === */
#waterfall { display: flex !important; flex-wrap: nowrap !important; gap: 14px !important; padding: 14px !important; align-items: flex-start !important; }
.waterfall-column { width: calc(50% - 7px) !important; min-width: calc(50% - 7px) !important; max-width: calc(50% - 7px) !important; flex: 0 0 calc(50% - 7px) !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }

/* === 卡片 === */
.fish-card { background: #fff !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 3px 16px rgba(0,0,0,0.1) !important; width: 100% !important; }
.fish-card:active { transform: scale(0.98) !important; }
.fish-card-image { width: 100% !important; display: block !important; }
.fish-card-images { position: relative !important; overflow: hidden !important; }
.fish-card-img-badge { position: absolute !important; bottom: 10px !important; right: 10px !important; background: rgba(0,0,0,0.7) !important; color: #fff !important; padding: 4px 12px !important; border-radius: 12px !important; font-size: 16px !important; }
.fish-card-img-placeholder { width: 100% !important; height: 160px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #f5f5f5 !important; color: #ccc !important; font-size: 18px !important; }

/* 标题 22px */
.fish-card-title { padding: 14px 14px 6px !important; font-size: 22px !important; font-weight: 600 !important; color: #1a1a1a !important; line-height: 1.4 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
/* 位置 18px */
.fish-card-location { padding: 0 14px 6px !important; display: flex !important; align-items: center !important; gap: 5px !important; font-size: 18px !important; color: #555 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.fish-card-location svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; fill: #888 !important; }
/* Meta */
.fish-card-meta { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 6px 14px 14px !important; font-size: 17px !important; color: #888 !important; }
.fish-card-meta-left { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
.fish-card-meta-right { display: flex !important; align-items: center !important; gap: 4px !important; flex-shrink: 0 !important; }
.fish-card-time { font-size: 17px !important; color: #999 !important; }
.fish-card-group { background: #e8f4fd !important; color: #2d5a87 !important; padding: 4px 10px !important; border-radius: 8px !important; font-size: 15px !important; }

/* === 点赞/分享按钮 - 超大点击区域 === */
.fish-card-like, .fish-card-share {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important;
    min-width: 52px !important; min-height: 52px !important; padding: 10px 8px !important;
    border: none !important; background: transparent !important; color: #888 !important;
    font-size: 18px !important; cursor: pointer !important; border-radius: 14px !important;
    -webkit-tap-highlight-color: transparent !important; outline: none !important;
    appearance: none !important; -webkit-appearance: none !important;
}
.fish-card-like:active, .fish-card-share:active { background: rgba(0,0,0,0.06) !important; }
.fish-card-like.liked { color: #ff4d4f !important; }
.fish-card-like.liked .heart-icon { fill: #ff4d4f !important; stroke: #ff4d4f !important; }
.like-count { font-size: 18px !important; font-weight: 600 !important; }

/* 点赞动画 */
.heart-icon.animate { animation: heartBeat 0.6s ease-in-out !important; }
@keyframes heartBeat { 0%{transform:scale(1)} 25%{transform:scale(1.4)} 50%{transform:scale(1)} 75%{transform:scale(1.2)} 100%{transform:scale(1)} }
.like-plus { position: absolute !important; color: #ff4d4f !important; font-size: 17px !important; font-weight: bold !important; animation: floatUp 0.7s ease-out forwards !important; pointer-events: none !important; }
@keyframes floatUp { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-22px)} }

/* === 底部导航 - 超大 === */
.bottom-nav { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 85px !important; background: #fff !important; display: flex !important; justify-content: space-around !important; align-items: center !important; box-shadow: 0 -3px 16px rgba(0,0,0,0.1) !important; z-index: 1000 !important; padding-bottom: env(safe-area-inset-bottom, 0) !important; }
.nav-item { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; color: #666 !important; text-decoration: none !important; padding: 8px 0 !important; gap: 5px !important; -webkit-tap-highlight-color: transparent !important; }
.nav-item.active { color: #2d5a87 !important; }
.nav-icon { font-size: 40px !important; line-height: 1 !important; }
.nav-item.active .nav-icon { transform: scale(1.1) !important; }
.nav-text { font-size: 18px !important; font-weight: 600 !important; }
.nav-publish { width: 36px !important; height: 36px !important; background: linear-gradient(135deg, #2d5a87 0%, #1e3a5f 100%) !important; border-radius: 50% !important; color: #fff !important; font-size: 22px !important; line-height: 36px !important; text-align: center !important; margin-top: 0 !important; box-shadow: 0 2px 8px rgba(45,90,135,0.35) !important; }
.nav-publish-text { font-size: 18px !important; font-weight: 600 !important; color: #2d5a87 !important; margin-top: 2px !important; }

/* === 公告 === */
#announcementBar { font-size: 18px !important; padding: 12px 18px !important; }

/* === 空状态 === */
.empty-state { text-align: center !important; padding: 60px 20px !important; }
.empty-state-title { font-size: 24px !important; font-weight: 600 !important; color: #333 !important; margin-top: 16px !important; }
.empty-state-text { font-size: 19px !important; color: #999 !important; margin-top: 10px !important; }
.empty-state-btn { display: inline-block !important; margin-top: 22px !important; padding: 16px 40px !important; font-size: 20px !important; background: #2d5a87 !important; color: #fff !important; border-radius: 14px !important; text-decoration: none !important; }

/* === 加载 === */
#loading, #noMore { font-size: 18px !important; padding: 22px !important; color: #999 !important; }
#lightboxCounter { font-size: 20px !important; }

/* === 分享面板 === */
#sharePanel { font-size: 20px !important; }
#shareWechatTip { font-size: 20px !important; padding: 18px !important; }
#saveShareImg, #shareNativeBtn, #closeSharePanel { font-size: 20px !important; padding: 16px 28px !important; min-height: 54px !important; border-radius: 14px !important; }

/* === 发布页 === */
.publish-page, .publish-container { font-size: 20px !important; }
.publish-page h1, .publish-container h1, .page-title { font-size: 28px !important; font-weight: 700 !important; }
.publish-page h2, .publish-container h2 { font-size: 24px !important; }
.publish-page h3, .publish-container h3 { font-size: 22px !important; }
.publish-page p, .publish-container p, .publish-page label, .publish-container label, .publish-page span, .publish-container span { font-size: 20px !important; }
.publish-page input, .publish-container input, .publish-page textarea, .publish-container textarea, .publish-page select, .publish-container select, .form-input, .form-select, .form-textarea { font-size: 20px !important; padding: 16px 18px !important; min-height: 54px !important; border-radius: 12px !important; }
.publish-page textarea, .publish-container textarea { min-height: 130px !important; }
.publish-page button, .publish-container button, .btn, .submit-btn, .upload-btn { font-size: 22px !important; font-weight: 600 !important; padding: 18px 36px !important; min-height: 60px !important; border-radius: 14px !important; }
.form-group { margin-bottom: 22px !important; }
.form-label { font-size: 20px !important; font-weight: 600 !important; margin-bottom: 10px !important; }
.form-help, .form-hint { font-size: 17px !important; color: #888 !important; }

/* === 鱼王榜 === */
.kings-page, .kings-container { font-size: 20px !important; }
.kings-page h1, .kings-container h1, .kings-title { font-size: 28px !important; font-weight: 700 !important; }
.kings-page h2, .kings-container h2 { font-size: 24px !important; }
.kings-page h3, .kings-container h3 { font-size: 22px !important; }
.kings-page p, .kings-container p, .kings-page span, .kings-container span, .kings-page li, .kings-container li { font-size: 20px !important; }
.king-item, .rank-item { font-size: 20px !important; padding: 18px !important; margin-bottom: 14px !important; }
.king-name, .rank-name { font-size: 22px !important; font-weight: 600 !important; }
.king-score, .rank-score { font-size: 20px !important; }
.king-rank, .rank-number { font-size: 26px !important; font-weight: 700 !important; }
.king-img, .rank-img, .avatar { width: 60px !important; height: 60px !important; }

/* === 我的页面 === */
.mine-page, .mine-container { font-size: 20px !important; }
.mine-page h1, .mine-container h1, .mine-title { font-size: 28px !important; font-weight: 700 !important; }
.mine-page h2, .mine-container h2 { font-size: 24px !important; }
.mine-page h3, .mine-container h3 { font-size: 22px !important; }
.mine-page p, .mine-container p, .mine-page span, .mine-container span { font-size: 20px !important; }
.menu-item, .list-item { font-size: 20px !important; padding: 18px 22px !important; min-height: 60px !important; }
.menu-icon { font-size: 28px !important; width: 40px !important; height: 40px !important; }
.user-name, .nickname { font-size: 24px !important; font-weight: 600 !important; }
.user-info { font-size: 18px !important; }
.stat-value { font-size: 26px !important; font-weight: 700 !important; }
.stat-label { font-size: 17px !important; color: #888 !important; }
.mine-page button, .mine-container button, .mine-page .btn { font-size: 20px !important; padding: 16px 30px !important; min-height: 56px !important; border-radius: 14px !important; }

/* === 通用 === */
.toast, #toast { font-size: 20px !important; padding: 16px 26px !important; border-radius: 14px !important; }
.modal, .dialog, .popup { font-size: 20px !important; }
.modal-title, .dialog-title { font-size: 24px !important; font-weight: 600 !important; }
.modal-content, .dialog-content { font-size: 20px !important; }
.modal-btn, .dialog-btn { font-size: 20px !important; padding: 16px 30px !important; min-height: 54px !important; }
.tag, .badge, .label { font-size: 16px !important; padding: 5px 12px !important; }
button, .btn, input[type="button"], input[type="submit"] { font-size: 20px !important; min-height: 52px !important; }
input, textarea, select { font-size: 20px !important; min-height: 52px !important; padding: 14px 18px !important; }
.header, .page-header, .top-bar { font-size: 22px !important; font-weight: 600 !important; min-height: 56px !important; padding: 14px 18px !important; }
#pullIndicator { font-size: 18px !important; padding: 14px !important; }
a { font-size: inherit !important; }

/* 小屏适配 */
@media (max-width: 375px) {
    html { font-size: 18px !important; }
    .fish-card-title { font-size: 20px !important; }
    .fish-card-location { font-size: 16px !important; }
    .nav-icon { font-size: 34px !important; }
    .nav-text { font-size: 16px !important; }
}

/* 卡片详情行：昵称+定位 */
.fish-card-detail-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 6px 8px 2px !important; min-height: 0 !important; }
.fish-card-detail-nick { font-size: 13px !important; font-weight: 600 !important; color: #1a1a1a !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; flex: 1 !important; min-width: 0 !important; }
.fish-card-detail-loc { font-size: 11px !important; color: #999 !important; display: flex !important; align-items: center !important; gap: 3px !important; flex-shrink: 0 !important; margin-left: 6px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 40% !important; }
.fish-card-detail-loc svg { width: 11px !important; height: 11px !important; flex-shrink: 0 !important; }

/* 卡片操作行：点赞+分享+评论 */
.fish-card-actions-row { display: flex !important; justify-content: flex-start !important; align-items: center !important; padding: 2px 8px 4px !important; gap: 16px !important; border-top: 1px solid #f5f5f5 !important; margin-top: 2px !important; }

/* 评论按钮 */
.fish-card-comment { display: inline-flex !important; align-items: center !important; gap: 3px !important; min-width: 0 !important !important; min-height: 0 !important !important; padding: 0 !important; margin: 0 !important; background: none !important; border: none !important; cursor: pointer !important; font-size: 12px !important; color: #999 !important; appearance: none !important; -webkit-appearance: none !important; outline: none !important; -webkit-tap-highlight-color: transparent !important; line-height: 1 !important; }
.fish-card-comment:active { opacity: 0.7 !important; }
.fish-card-comment svg { width: 14px !important; height: 14px !important; min-width: 0 !important; min-height: 0 !important; stroke: #999 !important; }
.fish-card-comment .comment-count { font-size: 12px !important; line-height: 1 !important; font-weight: 500 !important; color: #999 !important; }
button.fish-card-comment { min-height: 0 !important; min-width: 0 !important; }

/* 分享按钮加文字 */
.fish-card-share { display: inline-flex !important; align-items: center !important; gap: 3px !important; }
.fish-card-share svg { width: 14px !important; height: 14px !important; }

/* 点赞按钮调整 */
.fish-card-like .heart-icon { width: 14px !important; height: 14px !important; }
.fish-card-like .like-count { font-size: 12px !important; }

/* 评论弹窗 */
.comment-modal-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(0,0,0,0.5) !important; z-index: 10000 !important; align-items: flex-end !important; justify-content: center !important; }
.comment-modal { width: 100% !important; max-height: 70vh !important; background: #fff !important; border-radius: 16px 16px 0 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; }
.comment-modal-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 16px 20px !important; border-bottom: 1px solid #f0f0f0 !important; }
.comment-modal-title { font-size: 16px !important; font-weight: 600 !important; color: #1a1a1a !important; }
.comment-modal-close { cursor: pointer !important; padding: 8px !important; position: relative !important; z-index: 100 !important; }
.comment-modal-close svg { width: 24px !important; height: 24px !important; stroke: #999 !important; }
.comment-list { flex: 1 !important; overflow-y: auto !important; padding: 12px 20px !important; min-height: 100px !important; max-height: 40vh !important; }
.comment-item { padding: 10px 0 !important; border-bottom: 1px solid #f5f5f5 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
.comment-item-header { display: flex !important; justify-content: space-between !important; align-items: center !important; }
.comment-item-nick { font-size: 13px !important; font-weight: 600 !important; color: #333 !important; }
.comment-item-time { font-size: 11px !important; color: #bbb !important; }
.comment-item-content { font-size: 14px !important; color: #555 !important; line-height: 1.5 !important; }
.comment-empty { text-align: center !important; padding: 20px !important; color: #ccc !important; font-size: 14px !important; }
.comment-input-bar { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 20px 28px !important; border-top: 1px solid #f0f0f0 !important; background: #fff !important; }
.comment-input { flex: 1 !important; border: 1px solid #e0e0e0 !important; border-radius: 20px !important; padding: 10px 16px !important; font-size: 14px !important; outline: none !important; -webkit-appearance: none !important; }
.comment-input:focus { border-color: var(--brand-color) !important; }
.comment-submit { background: var(--brand-color) !important; color: #fff !important; border: none !important; border-radius: 20px !important; padding: 10px 20px !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; white-space: nowrap !important; }
.comment-submit:active { opacity: 0.8 !important; }

/* ========== 一级卡片补充样式 ========== */
.fish-card-nick-species {
    font-size: 12px!important;
    font-weight: 500!important;
    color: #333!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
    white-space: nowrap!important;
    flex: 1!important;
    min-width: 0!important;
}
.fish-card-time-text {
    font-size: 10px!important;
    color: #bbb!important;
    white-space: nowrap!important;
    flex-shrink: 0!important;
    margin-left: 8px!important;
}

/* ========== 二级详情界面 ========== */
.fish-detail-modal {
    position: fixed!important;
    top: 0!important;
    left: 0!important;
    right: 0!important;
    bottom: 0!important;
    z-index: 9999!important;
    align-items: flex-end!important;
    justify-content: center!important;
}
.fish-detail-overlay {
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    right: 0!important;
    bottom: 0!important;
    background: rgba(0,0,0,0.5)!important;
}
.fish-detail-container {
    position: relative!important;
    z-index: 1!important;
    width: 100%!important;
    max-width: 500px!important;
    max-height: 90vh!important;
    background: #fff!important;
    border-radius: 16px 16px 0 0!important;
    overflow: hidden!important;
    display: flex!important;
    flex-direction: column!important;
    animation: slideUp 0.3s ease!important;
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.fish-detail-header {
    display: flex!important;
    align-items: center!important;
    justify-content: space-between!important;
    padding: 14px 16px!important;
    border-bottom: 1px solid #f0f0f0!important;
    flex-shrink: 0!important;
}
.fish-detail-title {
    font-size: 16px!important;
    font-weight: 600!important;
    color: #333!important;
}
.fish-detail-close {
    cursor: pointer!important;
    padding: 4px!important;
    color: #999!important;
}
.fish-detail-body {
    overflow-y: auto!important;
    flex: 1!important;
    -webkit-overflow-scrolling: touch!important;
}
/* 详情大图 */
.detail-images {
    position: relative!important;
    width: 100%!important;
    background: #f0f2f5!important;
}
.detail-main-img {
    width: 100%!important;
    display: block!important;
    max-height: 65vh!important;
    object-fit: contain!important;
    cursor: pointer!important;
    background: #f8f8f8!important;
}
.detail-img-badge {
    position: absolute!important;
    top: 10px!important;
    right: 10px!important;
    background: rgba(0,0,0,0.55)!important;
    color: #fff!important;
    font-size: 11px!important;
    padding: 3px 8px!important;
    border-radius: 10px!important;
}
/* 详情内容区 */
.detail-content {
    padding: 14px 16px!important;
}
.detail-header-row {
    display: flex!important;
    align-items: center!important;
    justify-content: space-between!important;
    margin-bottom: 8px!important;
}
.detail-user-info {
    display: flex!important;
    align-items: center!important;
    gap: 0!important;
    min-width: 0!important;
    flex: 1!important;
}
.detail-nick {
    font-size: 15px!important;
    font-weight: 600!important;
    color: #333!important;
    overflow: hidden!important;
    text-overflow: ellipsis!important;
    white-space: nowrap!important;
}
.detail-dot {
    font-size: 15px!important;
    color: #ccc!important;
    margin: 0 4px!important;
}
.detail-species {
    font-size: 15px!important;
    color: #666!important;
}
.detail-time {
    font-size: 12px!important;
    color: #bbb!important;
    flex-shrink: 0!important;
    margin-left: 8px!important;
}
.detail-location {
    display: flex!important;
    align-items: center!important;
    gap: 4px!important;
    font-size: 13px!important;
    color: #888!important;
    margin-bottom: 8px!important;
}
.detail-location svg { flex-shrink: 0!important; stroke: var(--brand-color, #0ea5a0)!important; }
.detail-desc {
    font-size: 14px!important;
    color: #555!important;
    line-height: 1.6!important;
    margin-bottom: 10px!important;
}
.detail-group {
    font-size: 12px!important;
    color: #999!important;
    margin-bottom: 12px!important;
}
/* 详情操作栏 */
.detail-actions {
    display: flex!important;
    align-items: center!important;
    gap: 24px!important;
    padding: 12px 0!important;
    border-top: 1px solid #f0f0f0!important;
    border-bottom: 1px solid #f0f0f0!important;
    margin-bottom: 12px!important;
}
.detail-action-btn {
    display: flex!important;
    align-items: center!important;
    gap: 6px!important;
    cursor: pointer!important;
    color: #666!important;
    font-size: 14px!important;
    transition: color 0.2s!important;
}
.detail-action-btn:active { opacity: 0.7!important; }
.detail-action-btn svg { flex-shrink: 0!important; }
.detail-like-btn .heart-icon.liked { fill: #ff6b6b!important; stroke: #ff6b6b!important; }
.detail-like-btn .heart-icon:not(.liked) { fill: none!important; stroke: #999!important; }
/* 评论区 */
.detail-comment-section { padding-bottom: 16px!important; }
.detail-comment-title {
    font-size: 15px!important;
    font-weight: 600!important;
    color: #333!important;
    margin-bottom: 10px!important;
}
.detail-comment-list {
    min-height: 60px!important;
    margin-bottom: 12px!important;
}
.detail-comment-input-bar {
    display: flex!important;
    align-items: center!important;
    gap: 8px!important;
}
.detail-comment-input {
    flex: 1!important;
    height: 36px!important;
    border: 1px solid #e0e0e0!important;
    border-radius: 18px!important;
    padding: 0 14px!important;
    font-size: 14px!important;
    outline: none!important;
    background: #f8f8f8!important;
}
.detail-comment-input:focus {
    border-color: var(--brand-color, #0ea5a0)!important;
    background: #fff!important;
}
.detail-comment-submit {
    height: 36px!important;
    padding: 0 16px!important;
    border: none!important;
    border-radius: 18px!important;
    background: var(--brand-color, #0ea5a0)!important;
    color: #fff!important;
    font-size: 14px!important;
    font-weight: 500!important;
    cursor: pointer!important;
    flex-shrink: 0!important;
    min-height: 0!important;
    min-width: 0!important;
}
.detail-comment-submit:disabled {
    opacity: 0.6!important;
    cursor: not-allowed!important;
}


/* ========== 图片轮播 ========== */
.detail-images {
    position: relative!important;
    width: 100%!important;
    background: #000!important;
    overflow: hidden!important;
}
.detail-img-track {
    display: flex!important;
    transition: transform 0.3s ease!important;
    will-change: transform!important;
}
.detail-img-slide {
    min-width: 100%!important;
    flex-shrink: 0!important;
}
.detail-img-slide .detail-main-img {
    max-height: 60vh!important;
    object-fit: contain!important;
    cursor: pointer!important;
}
.detail-img-dots {
    position: absolute!important;
    bottom: 12px!important;
    left: 50%!important;
    transform: translateX(-50%)!important;
    display: flex!important;
    gap: 6px!important;
    z-index: 5!important;
}
.detail-img-dot {
    width: 6px!important;
    height: 6px!important;
    border-radius: 50%!important;
    background: rgba(255,255,255,0.5)!important;
    transition: all 0.2s!important;
}
.detail-img-dot.active {
    background: #fff!important;
    width: 16px!important;
    border-radius: 3px!important;
}
.detail-img-prev, .detail-img-next {
    position: absolute!important;
    top: 50%!important;
    transform: translateY(-50%)!important;
    width: 36px!important;
    height: 36px!important;
    background: rgba(0,0,0,0.4)!important;
    border-radius: 50%!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    z-index: 5!important;
    cursor: pointer!important;
}
.detail-img-prev { left: 10px!important; }
.detail-img-next { right: 10px!important; }

/* ========== 用户头像样式 ========== */
.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    font-weight: 600;
    color: #fff;
    user-select: none;
}

.user-avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-avatar .avatar-char {
    font-weight: 600;
    line-height: 1;
}

/* 头像尺寸 */
.avatar-small {
    width: 24px;
    height: 24px;
    font-size: 12px;
}

.avatar-medium {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.avatar-large {
    width: 48px;
    height: 48px;
    font-size: 20px;
}

.avatar-xlarge {
    width: 64px;
    height: 64px;
    font-size: 28px;
}

/* 卡片左上角头像 */
.fish-card-avatar-wrap {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
}

.fish-card-avatar-wrap .user-avatar {
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* 详情页用户信息区头像 */
.detail-user-avatar {
    margin-right: 10px;
}

/* 评论区头像 */
.comment-item-avatar {
    margin-right: 10px;
    flex-shrink: 0;
}

.comment-item-with-avatar {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.comment-item-with-avatar .comment-item-body {
    flex: 1;
    min-width: 0;
}

/* 我的页面头像 */
.mine-avatar-section {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
}

.mine-avatar-section .user-avatar {
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* ========== 表情面板样式 ========== */
.emoji-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.emoji-btn:active {
    background: rgba(0,0,0,0.06);
}

.emoji-panel {
    position: absolute;
    bottom: 52px;
    left: 10px;
    right: 10px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.12);
    z-index: 100;
    display: none;
    padding: 10px;
}

.emoji-panel.show {
    display: block;
    animation: emojiPanelSlideUp 0.2s ease;
}

@keyframes emojiPanelSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.emoji-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.emoji-item {
    width: calc(100% / 8 - 2px);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.emoji-item:active {
    background: rgba(0,0,0,0.08);
    transform: scale(0.9);
}

/* 详情页表情按钮适配 */
.detail-comment-input-bar {
    position: relative;
}

/* 评论弹窗表情按钮适配 */
.comment-input-bar {
    position: relative;
}