@charset "UTF-8";
/* ============================================================================
   🚨 架构师终极救场：全局页面路由引擎 (强制覆盖一切冲突)
   ============================================================================ */
/* 1. 强制隐藏所有未激活的页面，无视任何内联样式！ */
.page-section {
    display: none !important; 
}

/* 2. 只有被激活的页面才允许出现，并带有高级淡入动画！ */
.page-section.active {
    display: block !important; 
    animation: pageFadeIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

/* 3. 防止容器塌陷：确保加载数据前，列表有最小高度撑起页面 */
#homeTrendingListLikes, #homeTrendingListDislikes, #communityPostList, #conversationList {
    min-height: 50vh; 
}
/* ==========================================================================
   荷包管家 - 终极精调版 Design System
   ========================================================================== */

:root {
    /* 背景色 */
    --bg-base: #F7F8FA;
    --bg-card: #FFFFFF;
    --bg-hover: #F9FAFB;
    --bg-muted: #F3F4F6;
    /* 品牌色 */
    --brand-primary: #10B981;
    --brand-primary-hover: #059669;
    --brand-primary-light: #ECFDF5;
    --brand-dark: #111827;
    /* 辅助色 */
    --color-danger: #EF4444;
    --color-warning: #F59E0B;
    --color-info: #3B82F6;
    /* 文本色 */
    --text-primary: #111827;
    --text-regular: #374151;
    --text-secondary: #4B5563;
    --text-muted: #9CA3AF;
    /* 边框与圆角 */
    --border-light: #F3F4F6;
    --border-base: #E5E7EB;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-modal: 24px;
    /* 顶级弥散阴影 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 8px 24px rgba(17, 24, 39, 0.08);
    --shadow-float: 0 10px 30px rgba(17, 24, 39, 0.15);
    --shadow-colored: 0 8px 20px rgba(16, 185, 129, 0.25);
    --transition-fast: 0.2s ease;
}

/* ================= 1. 全局基础 ================= */
body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: var(--bg-base); color: var(--text-primary); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.container { max-width: 600px; margin: 0 auto; padding: 20px; min-height: 100vh; position: relative;}
.header { text-align: center; margin-bottom: 20px; margin-top: calc(15px + env(safe-area-inset-top)); }
.title { font-size: 26px; font-weight: 900; margin: 0; letter-spacing: 0.5px; color: var(--text-primary);}
.subtitle { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.page-section { display: none; padding-bottom: 90px; animation: fadeIn 0.3s ease; }
.page-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ================= 2. 底部导航与发布 ================= */
/* ============================================================================
   🎨 架构师重构：苹果级毛玻璃底栏 & 悬浮加号 (替换原有的 tab-bar 样式)
   ============================================================================ */

/* 1. 底部导航栏基础美化：毛玻璃 + 空气感阴影 */
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65px; /* 设定固定高度，增加内部呼吸感 */
    background: rgba(255, 255, 255, 0.92); /* 半透明纯白背景 */
    backdrop-filter: blur(15px); /* 苹果 iOS 核心：毛玻璃背景虚化 */
    -webkit-backdrop-filter: blur(15px); /* 兼容 Safari */
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.04); /* 极其柔和的顶部阴影 */
    padding-bottom: env(safe-area-inset-bottom); /* 完美兼容全面屏底部小黑条 */
    z-index: 9999;
    border-top: 1px solid rgba(0,0,0,0.03);
}

/* 2. 优化普通 Tab 按钮：增加点击放大动画与字体对比度 */
.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9CA3AF; /* 未选中时的浅灰色 */
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s ease;
    width: 60px;
}
.tab-item.active {
    color: #111827; /* 选中时变成极致深藏青色 */
    font-weight: 900;
}
.tab-item .tab-icon {
    font-size: 22px;
    margin-bottom: 3px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Q弹动画曲线 */
}
.tab-item.active .tab-icon {
    transform: scale(1.15) translateY(-2px); /* 选中时图标微微放大并上浮 */
}

/* 3. 🚨 重塑加号的包裹层：让它“突破”导航栏的顶部界限 */
.tab-item-publish {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 65px;
    top: -12px; /* 核心魔法：整体向上偏移，产生悬浮突破感 */
    cursor: pointer;
}

/* 4. 🚨 核心：把薄荷绿换成高级暗色质感按钮 */
.btn-publish {
    width: 52px;
    height: 52px;
    /* 高级深邃渐变背景 */
    background: linear-gradient(135deg, #374151 0%, #111827 100%); 
    color: #FFF;
    border-radius: 50%; /* 完美的圆形 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 300;
    /* 双层阴影：外层空气悬浮阴影 + 内层微光高光（模拟真实立体质感） */
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.3), inset 0 1px 1px rgba(255,255,255,0.2); 
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

/* 5. 交互反馈：按下去时的物理挤压感 */
.tab-item-publish:active .btn-publish {
    transform: scale(0.92); /* 点击时内凹缩小 */
    box-shadow: 0 4px 10px rgba(17, 24, 39, 0.4);
}

/* 6. 发布文字适配：位置微调，不与圆形打架 */
.tab-item-publish .tab-text {
    position: absolute;
    bottom: -6px; /* 紧贴底栏底部 */
    color: #9CA3AF;
    font-size: 11px;
    font-weight: bold;
}

/* ================= 3. 首页顶部导航 & 悬浮菜单 ================= */
.home-top-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px 5px 15px; margin-top: calc(15px + env(safe-area-inset-top)); margin-bottom: 15px; }
.header-titles { text-align: center; flex: 1; padding: 0 10px; }
.header-titles .title { font-size: 20px; font-weight: 900; margin: 0; white-space: nowrap; color: var(--text-primary);}
.header-titles .subtitle { font-size: 11px; color: var(--text-muted); margin-top: 4px; white-space: nowrap; }
.top-btn-left { background: var(--bg-card); padding: 6px 12px; border-radius: var(--radius-pill); font-weight: 900; font-size: 12px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 4px; border: 1px solid var(--border-base); cursor: pointer; color: var(--text-primary); flex-shrink: 0; transition: var(--transition-fast);}
.top-btn-left:active { transform: scale(0.95); background: var(--bg-hover); }
.top-scan-container { position: relative; z-index: 2000; flex-shrink: 0; }
.top-scan-btn { width: 38px; height: 38px; background: var(--brand-dark); color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: var(--shadow-md); font-size: 16px; cursor: pointer; transition: transform var(--transition-fast); }
.top-scan-container.active .top-scan-btn { background: var(--text-regular); transform: scale(0.95); }
.top-fab-menu { position: absolute; top: 48px; right: 0; display: none; flex-direction: column; gap: 8px; width: 140px; animation: fadeIn 0.2s; }
.top-scan-container.active .top-fab-menu { display: flex; }
.top-fab-menu .fab-menu-item { background: var(--bg-card); color: var(--text-primary); padding: 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 900; box-shadow: var(--shadow-md); border: 1px solid var(--border-base); text-align: center; cursor: pointer; transition: var(--transition-fast);}
.top-fab-menu .fab-menu-item:active { background: var(--bg-hover); }

/* ================= 💎 大厂级红宝书 UI 重构 ================= */

/* 1. iOS 原生级分段控制器 (Mode Switcher) */
.rb-mode-switcher {
    background: #E5E7EB;
    border-radius: 12px;
    padding: 3px;
    display: flex;
    margin: 10px 20px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}
.rb-mode-btn {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 13px;
    font-weight: bold;
    color: #6B7280;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.rb-mode-btn.active {
    background: #FFFFFF;
    color: #111827;
    font-weight: 900;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* 2. 现代标题排版 */
.section-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    margin-bottom: 12px;
}
.st-icon { font-size: 18px; }
.st-text { font-size: 16px; font-weight: 900; color: #111827; letter-spacing: 0.5px;}

/* 3. 控制中心风格：紧急避难所 */
.emergency-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 20px;
}
.em-card {
    background: #FFF;
    border-radius: 16px;
    padding: 12px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    border: 1px solid rgba(255,255,255,0.5);
    transition: transform 0.2s;
}
.em-card:active { transform: scale(0.95); }
.em-icon { font-size: 24px; }
.em-text { font-size: 11px; font-weight: bold; color: #374151; }

/* 微渐变背景增强质感 */
.pulse-red { background: linear-gradient(145deg, #FEF2F2, #FEE2E2); border-color: #FECACA; }
.pulse-orange { background: linear-gradient(145deg, #FFF7ED, #FFEDD5); border-color: #FED7AA; }
.pulse-yellow { background: linear-gradient(145deg, #FEFCE8, #FEF08A); border-color: #FDE047; }
.pulse-blue { background: linear-gradient(145deg, #F0F9FF, #E0F2FE); border-color: #BAE6FD; }

/* 4. 优雅的任务滑动 Tabs */
.task-tabs-scroll {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 0 20px 5px;
    scrollbar-width: none; /* Firefox */
}
.task-tabs-scroll::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.tt-tab {
    white-space: nowrap;
    padding: 8px 16px;
    background: #F3F4F6;
    color: #4B5563;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}
.tt-tab.active {
    background: #111827;
    color: #FFF;
    box-shadow: 0 4px 10px rgba(17, 24, 39, 0.2);
}

/* 5. 苹果风高级进度条 */
.premium-progress-box {
    margin: 15px 20px;
    background: #FFF;
    padding: 15px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid #F3F4F6;
}
.pp-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    align-items: center;
}
.pp-title { font-size: 13px; font-weight: bold; color: #4B5563; }
.pp-count { font-size: 14px; font-weight: 900; color: #10B981; }
.pp-bar-bg {
    height: 8px;
    background: #E5E7EB;
    border-radius: 99px;
    overflow: hidden;
}
.pp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #34D399 0%, #10B981 100%);
    border-radius: 99px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 6. 重构任务卡片：高级微拟物 */
.task-card {
    background: #FFF;
    border-radius: 20px;
    padding: 16px;
    margin: 0 20px 15px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    box-shadow: 0 6px 16px rgba(0,0,0,0.03);
    border: 1px solid #F3F4F6;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}
.task-card.done {
    opacity: 0.6;
    background: #F9FAFB;
}
.task-card.done::after {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: #10B981;
}

/* 高级打勾框 */
.custom-checkbox-task {
    appearance: none;
    width: 24px; height: 24px;
    border: 2px solid #D1D5DB;
    border-radius: 50%;
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: 0.2s;
}
.custom-checkbox-task:checked {
    background: #10B981;
    border-color: #10B981;
}
.custom-checkbox-task:checked::after {
    content: '✔';
    position: absolute; color: white; font-size: 12px; font-weight: bold;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}

.task-content { flex: 1; }
.task-title { font-size: 15px; font-weight: 900; color: #111827; margin-bottom: 4px; line-height: 1.3;}
.task-desc { font-size: 12px; color: #6B7280; line-height: 1.5; margin-bottom: 12px;}

/* 融为一体的行动按钮，而不是狗皮膏药 */
.task-hook-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ECFDF5;
    color: #059669;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.2s;
}
.task-hook-action:active { transform: scale(0.95); background: #D1FAE5; }

/* ================= 5. 集市大厅 (完美铺满一行) ================= */
.market-tabs { display: flex; justify-content: space-between; background: var(--bg-card); padding: 6px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 20px; gap: 8px;}
.m-tab { flex: 1; text-align: center; font-size: 14px; font-weight: 900; color: var(--text-muted); cursor: pointer; padding: 10px 0; border-radius: var(--radius-md); transition: var(--transition-fast); white-space: nowrap;}
.m-tab.active { color: var(--text-primary); background: var(--bg-hover); box-shadow: var(--shadow-sm); }
.market-content { display: none; animation: fadeIn 0.3s ease; }
.market-content.active { display: block; }
.filter-bar { display: flex; gap: 10px; padding: 0 5px 10px; align-items: center; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.filter-bar::-webkit-scrollbar { display: none; }
.filter-select { background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 12px; font-weight: 900; color: var(--text-regular); outline: none; appearance: none; cursor: pointer; box-shadow: var(--shadow-sm); white-space: nowrap; flex-shrink: 0;}
.filter-select:focus { border-color: var(--brand-primary); }
.filter-pill { background: var(--bg-muted); color: var(--text-muted); font-size: 12px; font-weight: bold; padding: 8px 14px; border-radius: var(--radius-pill); cursor: pointer; transition: 0.2s; border: 1px solid transparent; white-space: nowrap; flex-shrink: 0;}
.filter-pill.active { background: var(--color-warning-light); color: var(--color-warning); border-color: #FDE68A; }

.waterfall-container { column-count: 2; column-gap: 12px; padding: 0 5px; margin-top: 10px; }
.waterfall-item { break-inside: avoid; background: var(--bg-card); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); cursor: pointer; transition: transform var(--transition-fast); position: relative;}
.waterfall-item:active { transform: scale(0.98); }
.wf-img-box { width: 100%; position: relative; background: var(--bg-muted); }
.wf-img { width: 100%; display: block; object-fit: cover; }
.wf-info { padding: 10px 12px; }
.wf-title { font-size: 13px; font-weight: 900; color: var(--text-primary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
.wf-price-row { display: flex; align-items: baseline; gap: 4px; margin-bottom: 10px; }
.wf-currency { font-size: 11px; color: var(--color-danger); font-weight: bold; }
.wf-price { font-size: 18px; font-weight: 900; color: var(--color-danger); }
.wf-user-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--border-base); padding-top: 8px;}
.wf-user { display: flex; align-items: center; gap: 6px; }
.wf-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-muted); font-size: 12px; display: flex; justify-content: center; align-items: center; border: 1px solid #FFF; box-shadow: 0 1px 3px rgba(0,0,0,0.1);}
.wf-name { font-size: 11px; color: var(--text-muted); max-width: 65px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: bold;}
.wf-sold-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 2;}
.wf-sold-text { background: rgba(0,0,0,0.7); color: #FFF; font-size: 14px; font-weight: 900; padding: 6px 16px; border-radius: 20px; letter-spacing: 1px; border: 1px solid rgba(255,255,255,0.3);}
.waterfall-count-badge { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.65); color: #FFF; padding: 2px 6px; border-radius: 8px; font-size: 10px; font-weight: bold; backdrop-filter: blur(4px); }

/* 悬赏、搭子、问答卡片 */
.help-list-container, .partner-list-container, .question-list-container { column-count: 2; column-gap: 12px; padding: 0 5px; display: block; margin-top: 10px;}
.help-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 15px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); cursor: pointer; transition: transform var(--transition-fast); break-inside: avoid; margin-bottom: 12px; }
.help-card:active { transform: scale(0.98); background: var(--bg-hover); }
.hc-top-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; gap: 4px;}
.hc-type-tag { font-size: 10px; padding: 3px 8px; border-radius: 6px; font-weight: 900; background: var(--color-info-light); color: var(--color-info); border: 1px solid #BFDBFE; white-space: nowrap;}
.hc-type-tag.urgent { background: var(--color-danger-light); color: var(--color-danger); border-color: #FECACA; }
.hc-reward-compact { color: var(--color-warning); font-weight: 900; background: var(--color-warning-light); padding: 3px 8px; border-radius: 6px; font-size: 12px; border: 1px dashed #FDE68A; white-space: nowrap;}
.hc-title { font-size: 14px; font-weight: 900; color: var(--text-primary); line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.hc-details { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; background: var(--bg-hover); padding: 8px 10px; border-radius: var(--radius-sm);}
.hc-detail-item { font-size: 11px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hc-footer { display: flex; flex-direction: column; gap: 10px; border-top: 1px dashed var(--border-base); padding-top: 12px; }
.hc-user { display: flex; align-items: center; gap: 6px; width: 100%; overflow: hidden;}
.hc-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-muted); font-size: 11px; display: flex; justify-content: center; align-items: center; flex-shrink: 0;}
.hc-name { font-size: 12px; color: var(--text-muted); font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hc-action-btn { background: var(--brand-dark); color: #FFF; font-size: 13px; font-weight: 900; padding: 8px 0; border-radius: var(--radius-md); width: 100%; text-align: center;}

.partner-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 15px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); cursor: pointer; transition: transform var(--transition-fast); break-inside: avoid; margin-bottom: 12px; }
.partner-card:active { transform: scale(0.98); background: var(--bg-hover); }
.pc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.pc-user { display: flex; align-items: center; gap: 8px; overflow: hidden;}
.pc-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-muted); font-size: 16px; display: flex; justify-content: center; align-items: center; border: 2px solid #FFF; box-shadow: var(--shadow-sm); flex-shrink: 0;}
.pc-info { display: flex; flex-direction: column; gap: 2px; min-width: 0;}
.pc-name-row { display: flex; align-items: center; gap: 4px; }
.pc-name { font-size: 13px; font-weight: 900; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pc-gender { font-size: 9px; width: 14px; height: 14px; display: flex; justify-content: center; align-items: center; border-radius: 50%; color: #FFF; }
.pc-gender.f { background: #F472B6; }
.pc-gender.m { background: #60A5FA; }
.pc-mbti { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 900; background: #F3E8FF; color: #7E22CE; align-self: flex-start;}
.pc-title { font-size: 14px; font-weight: 900; color: var(--text-primary); line-height: 1.4; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.pc-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.pc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;}
.pc-tag { font-size: 10px; color: var(--brand-primary-hover); background: var(--brand-primary-light); padding: 4px 8px; border-radius: 6px; font-weight: bold; border: 1px solid #A7F3D0;}
.pc-footer { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--border-base); padding-top: 10px; font-size: 11px; color: var(--text-muted); font-weight: bold;}
.pc-dist { display: flex; align-items: center; gap: 4px; }
.pc-action { background: var(--brand-dark); color: #FFF; padding: 8px 0; width: 100%; text-align: center; border-radius: var(--radius-md); font-size: 13px; font-weight: 900;}

.question-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 15px; margin-bottom: 12px; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); break-inside: avoid;}
.qc-header { display: flex; justify-content: space-between; margin-bottom: 10px; align-items: center; }
.qc-tag { background: var(--brand-primary-light); color: var(--brand-primary); padding: 4px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 900; border: 1px solid #A7F3D0;}
.qc-title { font-size: 15px; font-weight: 900; color: var(--text-primary); margin-bottom: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.qc-desc { font-size: 12px; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 12px; line-height: 1.5;}
.qc-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed var(--border-base); padding-top: 12px; }
.qc-user { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); font-weight: bold; }
.qc-answer-btn { background: var(--bg-hover); color: var(--text-regular); padding: 6px 14px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 900; border: 1px solid var(--border-dark); }

/* 信任徽章 (通用) */
.trust-badge { font-size: 10px; padding: 2px 6px; border-radius: 6px; margin-left: 6px; font-weight: 900; display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; transform: translateY(-1px); }
.badge-edu { background: var(--color-info-light); color: var(--color-info); border: 1px solid #BFDBFE; }
.badge-work { background: var(--brand-primary-light); color: var(--brand-primary); border: 1px solid #A7F3D0; }
.badge-none { background: var(--bg-muted); color: var(--text-muted); border: 1px solid var(--border-base); }

/* ================= 6. 消息页面 (全新重构) ================= */
#page-messages { padding-top: 10px; }
.empty-state { text-align: center; padding: 80px 20px; color: var(--text-muted); font-size: 14px; font-weight: bold; background: var(--bg-card); border-radius: var(--radius-lg); margin-top: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);}
.empty-state-icon { font-size: 56px; margin-bottom: 15px; opacity: 0.8;}

/* 预留好的高级消息列表样式 */
.msg-list-item { display: flex; align-items: center; gap: 15px; padding: 15px; background: var(--bg-card); border-radius: var(--radius-lg); margin-bottom: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); cursor: pointer; transition: var(--transition-fast); }
.msg-list-item:active { transform: scale(0.98); background: var(--bg-hover); }
.msg-avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--bg-muted); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; box-shadow: var(--shadow-sm); border: 2px solid #FFF;}
.msg-content { flex: 1; overflow: hidden; }
.msg-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.msg-name { font-size: 16px; font-weight: 900; color: var(--text-primary); }
.msg-time { font-size: 11px; color: var(--text-muted); font-weight: bold;}
.msg-text { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================= 7. 我的主页 (深度 App 化) ================= */
#page-profile { padding-top: 10px; }
.profile-header-card { display: flex; justify-content: space-between; align-items: center; padding: 15px 5px 30px;}
.p-user-wrap { display: flex; align-items: center; gap: 18px; }
.p-avatar { width: 80px; height: 80px; background: var(--border-base); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 36px; overflow: hidden; position: relative; cursor: pointer; box-shadow: var(--shadow-md); border: 3px solid #FFF;}
.p-avatar-img { width: 100%; height: 100%; object-fit: cover; display: none; }
.p-info { display: flex; flex-direction: column; gap: 6px; }
.p-name-row { display: flex; align-items: center; gap: 8px; }
.p-name { font-size: 22px; font-weight: 900; color: var(--text-primary); letter-spacing: 0.5px;}
.credit-badge { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%); color: #FFF; font-size: 11px; padding: 3px 8px; border-radius: 12px; font-weight: 900; display: none; box-shadow: 0 2px 8px rgba(16,185,129,0.3);}
.p-uid { font-size: 12px; color: var(--text-muted); font-weight: bold;}
.p-bio { font-size: 13px; color: var(--text-secondary); margin-top: 4px; display: none; line-height: 1.4;}
.p-tags { display: flex; gap: 6px; margin-top: 4px; display: none;}
.p-tag { background: var(--bg-muted); color: var(--text-secondary); font-size: 10px; padding: 3px 8px; border-radius: 6px; font-weight: 900; border: 1px solid var(--border-base);}
.p-actions { display: flex; gap: 10px; align-items: center; display: none;}
.btn-edit-profile { background: var(--brand-dark); color: #FFF; border: none; padding: 8px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 900; cursor: pointer; box-shadow: var(--shadow-sm);}
.btn-settings { background: var(--bg-card); border: 1px solid var(--border-base); width: 36px; height: 36px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 16px; cursor: pointer; color: var(--text-secondary); box-shadow: var(--shadow-sm);}

/* 游客登录块重构 */
.guest-login-block { margin: 10px 0 40px; text-align: center; background: var(--bg-card); padding: 35px 20px; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); }
.btn-huge-login { background: linear-gradient(135deg, var(--brand-dark) 0%, #374151 100%); color: #FFF; border: none; padding: 16px 40px; border-radius: var(--radius-pill); font-size: 16px; font-weight: 900; cursor: pointer; box-shadow: var(--shadow-float); transition: var(--transition-fast); width: 100%;}
.btn-huge-login:active { transform: scale(0.96); }

/* VIP 横幅与认证中心 */
.vip-banner { background: linear-gradient(135deg, #1F2937 0%, #000000 100%); border-radius: var(--radius-xl); padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; margin-bottom: 25px;}
.vip-banner::before { content: '✨'; position: absolute; right: 20px; top: -10px; font-size: 60px; opacity: 0.1; }
.vip-text { display: flex; flex-direction: column; gap: 6px; z-index: 1;}
.vip-title { font-size: 16px; font-weight: 900; color: #FDE68A; }
.vip-sub { font-size: 11px; color: #9CA3AF; }
.vip-btn { background: #FDE68A; color: #92400E; padding: 8px 16px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 900; z-index: 1; box-shadow: var(--shadow-md);}

.auth-container { margin-bottom: 30px; }
.auth-card { display: flex; justify-content: space-between; align-items: center; background: var(--bg-card); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); cursor: pointer; transition: transform var(--transition-fast);}
.auth-card:active { transform: scale(0.98); background: var(--bg-hover); }
.auth-info { display: flex; align-items: center; gap: 15px; }
.auth-icon { width: 44px; height: 44px; border-radius: 14px; display: flex; justify-content: center; align-items: center; font-size: 22px; }
.auth-icon.edu { background: var(--color-info-light); color: var(--color-info); }
.auth-icon.wechat { background: var(--brand-primary-light); color: var(--brand-primary); }
.auth-name { font-size: 15px; font-weight: 900; color: var(--text-primary); margin-bottom: 4px;}
.auth-sub { font-size: 12px; color: var(--text-muted); }
.auth-action { font-size: 12px; font-weight: 900; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border-base);}
.auth-action.done { background: transparent; color: var(--brand-primary); border-color: #A7F3D0; }

.menu-list { background: var(--bg-card); border-radius: var(--radius-xl); padding: 5px 15px; margin-bottom: 30px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);}
.menu-item { display: flex; justify-content: space-between; align-items: center; padding: 18px 5px; border-bottom: 1px solid var(--border-light); cursor: pointer;}
.menu-item:last-child { border-bottom: none; }
.menu-left { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 900; color: var(--text-regular);}
.menu-icon { font-size: 20px; }
.menu-arrow { color: var(--border-dark); font-weight: bold; font-size: 14px;}

.asset-tabs { display: flex; border-bottom: 1px solid var(--border-base); margin-bottom: 15px; }
.a-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; font-weight: bold; color: var(--text-muted); cursor: pointer; position: relative; transition: var(--transition-fast);}
.a-tab.active { color: var(--text-primary); font-weight: 900; }
.a-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 30px; height: 3px; background: var(--text-primary); border-radius: 3px; }
.asset-content { display: none; }
.asset-content.active { display: block; animation: fadeIn 0.3s ease; }

/* 认证专属高光标签 */
.p-tag.verified-edu { background: linear-gradient(135deg, #3B82F6, #2563EB); color: #FFF; border: none; box-shadow: 0 2px 6px rgba(59,130,246,0.3);}
.p-tag.verified-wechat { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover)); color: #FFF; border: none; box-shadow: 0 2px 6px rgba(16,185,129,0.3);}

/* ================= 8. 扫码大详情页 ================= */
#page-details { background: var(--bg-base); min-height: 100vh; padding-bottom: 100px; padding-top: 0; margin-top: -20px;}
.detail-back-btn { position: fixed; top: 20px; left: 20px; width: 36px; height: 36px; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: bold; color: var(--text-primary); z-index: 50; box-shadow: var(--shadow-md); cursor: pointer;}
.detail-hero-img-wrap { width: 100%; height: 350px; background: var(--border-base); position: relative; margin: 0 -20px; }
.detail-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-content-wrap { background: var(--bg-base); border-top-left-radius: 28px; border-top-right-radius: 28px; padding: 25px 20px; position: relative; margin-top: -30px; z-index: 10; margin-left: -20px; margin-right: -20px; min-height: 500px;}
.d-name-box { margin-bottom: 25px; text-align: center; }
.d-item-name { display: block; font-size: 26px; font-weight: 900; color: var(--text-primary); line-height: 1.3; }
.d-item-dutch { display: block; font-size: 14px; color: var(--text-muted); margin-top: 6px; font-style: italic; }
.info-block { background: var(--bg-card); border-radius: var(--radius-xl); padding: 20px; margin-bottom: 15px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);}
.block-title { font-size: 16px; font-weight: 900; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; color: var(--text-primary);}
.block-text { font-size: 15px; color: var(--text-secondary); line-height: 1.7; margin: 0; }
.alt-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px;}
.alt-tag { background: var(--bg-hover); border: 1px solid var(--border-base); font-size: 13px; padding: 8px 14px; border-radius: 8px; color: var(--text-secondary); font-weight: bold;}

/* 评价卡片 */
.recipe-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 15px; margin-bottom: 12px; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm); }
.r-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.r-user { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.r-avatar { width: 30px; height: 30px; background: var(--border-base); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 15px; }
.r-name { font-size: 14px; font-weight: 900; color: var(--text-regular); }
.r-tag { font-size: 10px; padding: 2px 6px; border-radius: 6px; font-weight: bold; }
.r-tag.like { background: var(--brand-primary-light); color: var(--brand-primary); border: 1px solid #A7F3D0;}
.r-tag.dislike { background: var(--color-danger-light); color: var(--color-danger); border: 1px solid #FECACA;}
.r-like-btn { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); cursor: pointer; font-weight: bold; padding: 4px 10px; border-radius: 12px; background: var(--bg-hover); transition: 0.2s;}
.r-like-btn:active { transform: scale(0.9); }
.r-like-btn.voted { color: var(--color-warning); background: var(--color-warning-light); }
.r-text { font-size: 14px; color: var(--text-secondary); line-height: 1.6; padding-left: 38px; white-space: pre-wrap;}
.add-review-btn { width: 100%; background: var(--bg-hover); color: var(--text-primary); border: 1px dashed var(--border-dark); padding: 14px; border-radius: var(--radius-lg); font-size: 14px; font-weight: 900; cursor: pointer; transition: 0.2s; margin-top: 5px; display: flex; justify-content: center; align-items: center; gap: 6px;}
.add-review-btn:active { transform: scale(0.98); background: var(--border-base); }

/* ================= 9. 弹窗 Modals ================= */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(17,24,39,0.7); z-index: 4000; display: none; justify-content: center; align-items: center; animation: fadeIn 0.2s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);}
.modal-content { background: var(--bg-card); width: 90%; max-width: 400px; border-radius: var(--radius-modal); padding: 24px; box-sizing: border-box; position: relative; box-shadow: var(--shadow-float);}
.modal-close { position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; background: var(--bg-muted); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 14px; cursor: pointer; font-weight: bold; color: var(--text-muted);}
.modal-input { width: 100%; border-radius: var(--radius-md); border: 2px solid var(--border-base); padding: 14px; font-size: 15px; box-sizing: border-box; margin-top: 10px; font-weight: bold; outline: none; background: var(--bg-hover); color: var(--text-primary);}
.modal-input:focus { border-color: var(--brand-primary); background: var(--bg-card);}
.modal-textarea { width: 100%; height: 120px; border-radius: var(--radius-md); border: 2px solid var(--border-base); padding: 14px; font-size: 14px; box-sizing: border-box; outline: none; resize: none; margin-top: 10px; background: var(--bg-hover); color: var(--text-primary);}
.modal-textarea:focus { border-color: var(--brand-primary); background: var(--bg-card);}
.float-plus { position: fixed; font-size: 20px; font-weight: 900; z-index: 9999; pointer-events: none; animation: popUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
@keyframes popUp { 0% { transform: translateY(0) scale(0.5); opacity: 1; } 50% { transform: translateY(-30px) scale(1.2); opacity: 1; } 100% { transform: translateY(-50px) scale(1); opacity: 0; } }

/* 全屏发布弹窗 */
.full-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-base); z-index: 3000; display: flex; flex-direction: column; animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1); }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.fm-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: var(--bg-card); box-shadow: var(--shadow-sm); z-index: 10; padding-top: calc(15px + env(safe-area-inset-top)); }
.fm-close { font-size: 20px; font-weight: bold; color: var(--text-primary); cursor: pointer; }
.fm-title { font-size: 16px; font-weight: 900; color: var(--text-primary); }
.fm-submit { background: var(--brand-primary); color: #FFF; font-size: 13px; font-weight: bold; padding: 8px 16px; border-radius: var(--radius-pill); cursor: pointer; transition: 0.2s; border: none; }
.fm-submit:active { transform: scale(0.95); }
.fm-content { flex: 1; overflow-y: auto; padding: 20px; }
.fm-textarea { width: 100%; height: 180px; background: var(--bg-card); border: 1px solid var(--border-base); border-radius: var(--radius-lg); padding: 15px; font-size: 14px; box-sizing: border-box; outline: none; resize: none; margin-bottom: 20px; box-shadow: var(--shadow-sm); line-height: 1.6;}
.fm-textarea:focus { border-color: var(--brand-primary); }
.fm-section-title { font-size: 14px; font-weight: 900; color: var(--text-muted); margin: 25px 0 10px 5px; }
.fm-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 5px; border-bottom: 1px solid var(--border-base); }
.fm-label { font-size: 15px; font-weight: 900; color: var(--text-primary); }
.fm-input-small { width: 80px; text-align: right; border: none; font-size: 16px; font-weight: bold; color: var(--color-danger); background: transparent; outline: none; }
.fm-select { border: none; background: var(--bg-muted); padding: 6px 10px; border-radius: 8px; font-size: 14px; font-weight: bold; color: var(--text-regular); outline: none; }
.pill-group { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pill { background: var(--bg-muted); color: var(--text-muted); font-size: 12px; font-weight: bold; padding: 6px 12px; border-radius: 14px; cursor: pointer; transition: 0.2s; border: 1px solid transparent;}
.pill.active { background: var(--brand-primary-light); color: var(--brand-primary); border-color: var(--brand-primary); }

/* 极简语音条与定位 */
.ai-magic-micro, .ai-magic-box { display: flex; align-items: center; background: var(--color-warning-light); border: 1px solid #FDE68A; border-radius: 20px; padding: 4px 10px; gap: 6px; box-shadow: var(--shadow-sm); }
.ai-magic-box { flex-direction: column; align-items: stretch; padding: 15px; border-radius: 16px; }
.ai-header { font-weight: 900; color: #D97706; margin-bottom: 10px; font-size: 14px;}
.ai-input-wrapper { display: flex; align-items: center; background: #FFF; border-radius: 12px; padding: 5px 10px; }
.ai-input { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; }
.ai-btn { background: #D97706; color: #FFF; border: none; padding: 10px; border-radius: 12px; font-weight: bold; cursor: pointer; box-shadow: var(--shadow-sm);}
.voice-btn-micro, .voice-btn { background: none; border: none; font-size: 14px; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.voice-btn-micro.recording, .voice-btn.recording { color: var(--color-danger); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.4; } }
.location-input-wrapper { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; }
.location-input-wrapper input { border: none; text-align: right; outline: none; background: transparent; font-size: 14px; width: 100%; color: var(--text-regular); font-weight: bold;}
.location-icon-btn { cursor: pointer; color: var(--color-info); font-size: 16px; display: flex; align-items: center; justify-content: center; padding: 4px 6px; background: var(--color-info-light); border-radius: 8px; transition: 0.2s;}

/* 图文连录卡片 */
.multi-img-container-vertical { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-bottom: 10px; }
.item-edit-card { display: flex; gap: 10px; background: var(--bg-hover); padding: 10px; border-radius: 12px; border: 1px solid var(--border-base); position: relative; align-items: center; }
.item-edit-card img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: #FFF; border: 1px solid var(--border-base); }
.item-edit-inputs { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.item-edit-inputs input { width: 100%; border: 1px solid var(--border-dark); border-radius: 6px; padding: 6px 8px; font-size: 13px; outline: none; background: #FFF; }
.item-del-btn { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; background: var(--color-danger); color: #FFF; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 12px; cursor: pointer; box-shadow: var(--shadow-sm); border: 2px solid #FFF;}
.upload-btn { width: 80px; height: 80px; background: var(--bg-muted); border: 2px dashed var(--border-dark); border-radius: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s;}

/* 底部唤起菜单 */
.publish-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(17,24,39,0.5); z-index: 1001; display: none; opacity: 0; transition: opacity 0.3s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);}
.publish-overlay.show { display: block; opacity: 1; }
.publish-sheet { position: fixed; bottom: -100%; left: 0; right: 0; max-width: 600px; margin: 0 auto; background: var(--bg-card); border-top-left-radius: 32px; border-top-right-radius: 32px; z-index: 1002; padding: 30px 20px calc(30px + env(safe-area-inset-bottom)); transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); box-shadow: var(--shadow-float); }
.publish-sheet.show { bottom: 0; }
.ps-close { position: absolute; top: 15px; right: 20px; width: 32px; height: 32px; background: var(--bg-muted); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 14px; color: var(--text-muted); cursor: pointer; font-weight: bold;}
.ps-title { font-size: 18px; font-weight: 900; color: var(--text-primary); margin-bottom: 25px; margin-left: 10px; }

/* 红宝书评论区样式 */
.wc-item { display: flex; gap: 12px; margin-bottom: 20px; }
.wc-avatar { width: 40px; height: 40px; background: var(--bg-muted); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 20px; box-shadow: var(--shadow-sm);}
.wc-content { flex: 1; background: var(--bg-card); padding: 16px; border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg); border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);}
.wc-name { font-size: 13px; font-weight: 900; color: var(--text-primary); margin-bottom: 6px; display: flex; justify-content: space-between;}
.wc-text { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

/* ================= 🏆 超市红黑榜专属样式 ================= */

/* 榜单大标题 (如果有的话) */
.home-section-title { 
    font-size: 18px; 
    font-weight: 900; 
    margin: 30px 0 15px; 
    display: flex; 
    align-items: center; 
    gap: 8px;
    color: var(--text-primary, #111827);
}

/* 顶部红黑榜切换 Tabs */
.trending-tabs { 
    display: flex; 
    gap: 15px; 
    margin-bottom: 15px; 
}
.t-tab { 
    flex: 1; 
    text-align: center; 
    padding: 12px 0; 
    background: var(--bg-card, #FFFFFF); 
    border-radius: var(--radius-md, 12px); 
    font-weight: 900; 
    color: var(--text-muted, #9CA3AF); 
    font-size: 13px; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.03)); 
    border: 1px solid var(--border-base, #E5E7EB);
}
.t-tab.active { 
    background: var(--brand-dark, #111827); 
    color: #FFFFFF; 
    box-shadow: var(--shadow-md, 0 4px 15px rgba(0,0,0,0.05)); 
    border-color: var(--brand-dark, #111827); 
}

/* 榜单商品卡片 */
.trending-card { 
    background: var(--bg-card, #FFFFFF); 
    margin-bottom: 12px; 
    border-radius: var(--radius-lg, 16px); 
    padding: 15px; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.03)); 
    position: relative; 
    overflow: hidden; 
    border: 1px solid var(--border-base, #E5E7EB); 
    transition: transform 0.2s ease; 
    cursor: pointer;
}
.trending-card:active { 
    transform: scale(0.98); 
    background: var(--bg-hover, #F9FAFB); 
}

/* 左上角排名角标 (Top 1, 2, 3) */
.rank-badge { 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding: 4px 10px; 
    border-bottom-right-radius: var(--radius-md, 12px); 
    font-size: 11px; 
    font-weight: 900; 
    color: #FFFFFF; 
    z-index: 1; 
}
.rank-1 { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
.rank-2 { background: linear-gradient(135deg, #9CA3AF, #D1D5DB); color: #FFFFFF;}
.rank-3 { background: linear-gradient(135deg, #B45309, #D97706); }
.rank-other { background: var(--bg-muted, #F3F4F6); color: var(--text-muted, #9CA3AF); }
.rank-bad { background: var(--color-danger, #EF4444); } /* 黑榜专属红色角标 */

/* 卡片内部文字信息 */
.t-info { 
    flex: 1; 
    margin-top: 8px; 
}
.t-name { 
    font-size: 15px; 
    font-weight: 900; 
    color: var(--text-primary, #111827); 
    line-height: 1.3; 
    margin-bottom: 3px; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden;
}
.t-score { 
    font-size: 16px; 
    font-weight: 900; 
}

/* ================= 🛡️ 管家安全盾专属样式 ================= */

/* 1. 邮编查治安卡片 */
.safety-check-card {
    padding: 16px;
    margin-bottom: 25px;
    border: 1px solid rgba(16, 185, 129, 0.3); /* 隐约的绿色安全感边框 */
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(236,253,245,0.4) 100%);
}
.sc-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}
.sc-title { font-size: 15px; font-weight: 900; color: var(--brand-dark); }
.sc-sub { font-size: 11px; color: var(--brand-primary-hover); font-weight: bold; }
.sc-search-box {
    display: flex;
    gap: 10px;
}
.sc-search-box input {
    flex: 1;
    background: var(--bg-card);
    border: 2px solid var(--border-base);
    border-radius: var(--radius-md);
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 900;
    outline: none;
    color: var(--text-primary);
    transition: var(--transition-fast);
}
.sc-search-box input:focus { border-color: var(--brand-primary); }
.sc-btn {
    background: var(--brand-dark);
    color: #FFF;
    border: none;
    padding: 0 16px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.sc-result {
    margin-top: 12px;
    padding: 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.5;
    animation: fadeIn 0.3s ease;
}

/* 治安评级颜色 */
.sc-result.safe { background: var(--brand-primary-light); color: var(--brand-primary-hover); border: 1px dashed #A7F3D0; }
.sc-result.warn { background: var(--color-warning-light); color: #B45309; border: 1px dashed #FDE68A; }
.sc-result.danger { background: var(--color-danger-light); color: var(--color-danger); border: 1px dashed #FECACA; }

/* 2. 紧急求助置顶广播 */
.sos-broadcast-bar {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    border: 1px solid #FECACA;
    border-radius: var(--radius-lg);
    padding: 12px 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15); /* 红色弥散光晕 */
    cursor: pointer;
}
.sos-pulse {
    font-size: 24px;
    animation: sosPulse 1.5s infinite;
}
@keyframes sosPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}
.sos-text-box { flex: 1; overflow: hidden; }
.sos-title { font-size: 13px; font-weight: 900; color: var(--color-danger); margin-bottom: 2px; }
.sos-desc { font-size: 11px; color: #991B1B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: bold;}
.sos-action-btn {
    background: var(--color-danger);
    color: #FFF;
    border: none;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    flex-shrink: 0;
}

/* ================= 🏕️ 找搭子模块：氛围感与社交裂变升级 ================= */

/* 1. 情绪化背景渐变主题 */
.partner-card.theme-party { background: linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%); border-color: #E9D5FF; }
.partner-card.theme-art { background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%); border-color: #FDE68A; }
.partner-card.theme-food { background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%); border-color: #FECDD3; }
.partner-card.theme-study { background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%); border-color: #BAE6FD; }

/* 2. 社交筹码 (FOMO) 提示条 */
.pc-social-proof {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.6);
    padding: 6px 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: bold;
    backdrop-filter: blur(4px);
}
.pc-social-avatars { display: flex; margin-right: 4px; }
.pc-mini-avatar { width: 16px; height: 16px; border-radius: 50%; background: #E5E7EB; border: 1px solid #FFF; margin-left: -6px; display: flex; justify-content: center; align-items: center; font-size: 10px;}
.pc-mini-avatar:first-child { margin-left: 0; }

/* 3. 底部操作栏重构：加入微信分享 */
.pc-action-row {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}
.pc-action-btn-main {
    flex: 2;
    background: var(--brand-dark);
    color: #FFF;
    padding: 10px 0;
    text-align: center;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 900;
    box-shadow: var(--shadow-sm);
}
.pc-action-btn-share {
    flex: 1;
    background: #FFF;
    color: #059669;
    border: 1px solid #A7F3D0;
    padding: 10px 0;
    text-align: center;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 900;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    box-shadow: var(--shadow-sm);
}


/* ================= 🔪 闲鱼同款：聊天快捷回复 ================= */
.chat-quick-replies {
    display: flex;
    gap: 10px;
    padding: 10px 15px 5px 15px;
    background: var(--bg-card, #FFFFFF);
    overflow-x: auto;
    border-top: 1px solid var(--border-light, #F3F4F6);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
}
.chat-quick-replies::-webkit-scrollbar { display: none; }

.qr-pill {
    background: var(--bg-card, #FFFFFF);
    color: var(--text-regular, #374151);
    font-size: 12px;
    font-weight: 900;
    padding: 8px 14px;
    border-radius: var(--radius-pill, 99px);
    border: 1px solid var(--border-base, #E5E7EB);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition-fast, 0.2s);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.03));
}

.qr-pill:active { 
    background: var(--bg-muted, #F3F4F6); 
    transform: scale(0.95); 
}

/* 砍价按钮做特殊高亮 */
.qr-pill:first-child {
    color: var(--color-danger, #EF4444);
    background: var(--color-danger-light, #FEF2F2);
    border-color: #FECACA;
}

/* ================= 📦 闲置详情页 (postDetailModal) 修复 ================= */
/* ================= 📦 详情页沉浸式选品瀑布流 ================= */
#pdContentArea {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 120px !important; /* 确保不被底部购买栏遮挡 */
    background: var(--bg-base);
}
#pdSellerInfo {
    background: var(--bg-card);
    padding: 16px;
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

#pdItemsList { 
    column-count: 2; 
    column-gap: 12px; 
    display: block; 
}
.pd-item-card { 
    position: relative; 
    border-radius: 16px; 
    overflow: hidden; 
    break-inside: avoid; 
    margin-bottom: 12px; 
    box-shadow: var(--shadow-md); 
    background: var(--bg-muted); 
    border: 1px solid var(--border-base); 
    cursor: pointer; 
    transition: transform var(--transition-fast); 
}
.pd-item-card:active { transform: scale(0.96); }
.pd-item-card.sold { opacity: 0.6; filter: grayscale(1); pointer-events: none; }

.pd-item-img { 
    width: 100%; 
    display: block; 
    object-fit: cover; 
    background: var(--bg-muted);
}

/* 底部暗黑渐变蒙层，让白色文字极度清晰 */
.pd-item-overlay { 
    position: absolute; 
    bottom: 0; left: 0; right: 0; 
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%); 
    padding: 30px 12px 12px; 
    display: flex; 
    flex-direction: column; 
    pointer-events: none; /* 让点击事件穿透到卡片上 */
}

.pd-item-name { 
    font-size: 14px; 
    font-weight: 900; 
    color: #FFFFFF; 
    line-height: 1.4; 
    text-shadow: 0 1px 4px rgba(0,0,0,0.6); 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    margin-bottom: 2px;
}
.pd-item-price { 
    font-size: 20px; 
    font-weight: 900; 
    color: #FCD34D; /* 亮眼的金色价格 */
    text-shadow: 0 1px 4px rgba(0,0,0,0.6); 
}

/* 高级打勾复选框 */
.custom-checkbox { 
    appearance: none; 
    width: 26px; height: 26px; 
    border: 2px solid rgba(255,255,255,0.8); 
    background: rgba(0,0,0,0.4); 
    border-radius: 8px; 
    cursor: pointer; 
    transition: 0.2s; 
    backdrop-filter: blur(4px); 
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    pointer-events: auto; /* 允许单独点击复选框 */
    margin: 0;
}
.custom-checkbox:checked { 
    background-color: var(--brand-primary); 
    border-color: var(--brand-primary); 
}
.custom-checkbox:checked::after { 
    content: '✔'; 
    position: absolute; 
    color: white; 
    font-size: 16px; 
    font-weight: bold;
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
}
.pd-sold-badge { 
    background: var(--color-danger); 
    color: #FFF; font-size: 11px; 
    padding: 4px 8px; border-radius: 8px; 
    font-weight: 900; box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
}

/* ================= 💬 私信与消息系统 (顶级原生 App 质感) ================= */

/* 1. 消息列表页面重构 */
.msg-list-item { 
    display: flex; align-items: center; gap: 15px; padding: 16px; 
    background: var(--bg-card); border-radius: var(--radius-lg); 
    margin-bottom: 12px; border: 1px solid var(--border-light); 
    box-shadow: var(--shadow-sm); cursor: pointer; transition: var(--transition-fast); 
    position: relative;
}
.msg-list-item:active { transform: scale(0.98); background: var(--bg-hover); }
.msg-avatar { 
    width: 52px; height: 52px; border-radius: 50%; background: var(--bg-muted); 
    display: flex; align-items: center; justify-content: center; font-size: 24px; 
    flex-shrink: 0; border: 2px solid #FFF; box-shadow: var(--shadow-sm);
}
.msg-content { flex: 1; overflow: hidden; }
.msg-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.msg-name { font-size: 16px; font-weight: 900; color: var(--text-primary); }
.msg-time { font-size: 11px; color: var(--text-muted); font-weight: bold;}
.msg-text { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 2. 聊天详情弹窗大框架 */
#chatModal { 
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 3600; 
    background: #F0F2F5; /* 类似微信的浅灰护眼背景 */
    display: flex; 
    flex-direction: column; 
    animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1);
}

/* 3. 头部导航 (毛玻璃) */
.chat-header { 
    display: flex; justify-content: space-between; align-items: center; 
    background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 15px 20px; box-shadow: 0 1px 0 rgba(0,0,0,0.05); 
    z-index: 10; padding-top: calc(15px + env(safe-area-inset-top)); flex-shrink: 0;
}
.ch-back { font-size: 16px; font-weight: 900; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 0;}
.ch-back:active { opacity: 0.5; }
.ch-title-box { display: flex; flex-direction: column; align-items: center; }
.ch-title { font-size: 16px; font-weight: 900; color: var(--text-primary); }
.ch-status { font-size: 10px; color: var(--brand-primary); font-weight: bold; margin-top: 2px;}
.ch-more { font-size: 20px; color: var(--text-primary); cursor: pointer; font-weight: bold; padding: 0 5px;}

/* 4. 悬浮商品小卡片 */
.chat-product-snippet { 
    background: var(--bg-card); margin: 15px 15px 0; border-radius: var(--radius-lg); 
    padding: 12px; display: flex; align-items: center; gap: 12px; 
    box-shadow: 0 6px 16px rgba(0,0,0,0.04); border: 1px solid var(--border-light); 
    flex-shrink: 0; position: relative; z-index: 5;
}
.cps-img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border-base); flex-shrink: 0;}
.cps-info { flex: 1; min-width: 0; }
.cps-title { font-size: 13px; font-weight: 900; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.cps-price { font-size: 16px; font-weight: 900; color: var(--color-danger); }
.cps-btn { background: var(--brand-dark); color: #FFF; padding: 6px 14px; border-radius: 14px; font-size: 12px; font-weight: 900; cursor: pointer; white-space: nowrap; transition: 0.2s; border: none;}
.cps-btn:active { transform: scale(0.95); }

/* 5. 聊天气泡记录区 (核心重构) */
.chat-msg-container {
    flex: 1; overflow-y: auto; padding: 20px 15px; display: flex; flex-direction: column; gap: 18px;
}
.chat-time-sys { text-align: center; font-size: 11px; color: var(--text-muted); font-weight: bold; margin-bottom: 5px; }

.chat-row { display: flex; gap: 10px; align-items: flex-end; max-width: 82%; }
.chat-row.other { align-self: flex-start; }
.chat-row.me { align-self: flex-end; flex-direction: row-reverse; }

.chat-avatar { 
    width: 36px; height: 36px; border-radius: 50%; background: var(--bg-card); 
    display: flex; justify-content: center; align-items: center; font-size: 18px; 
    flex-shrink: 0; box-shadow: var(--shadow-sm); overflow: hidden; border: 1px solid var(--border-light);
}
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }

.chat-text { 
    padding: 12px 16px; font-size: 15px; line-height: 1.5; word-wrap: break-word; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.03); position: relative;
}
/* 别人发的消息：白底黑字，左下角直角 */
.chat-row.other .chat-text { 
    background: var(--bg-card); color: var(--text-primary); 
    border-radius: 18px 18px 18px 4px; 
}
/* 我发的消息：绿底白字，右下角直角 */
.chat-row.me .chat-text { 
    background: var(--brand-primary); color: #FFF; 
    border-radius: 18px 18px 4px 18px; 
}

/* 6. 闲鱼同款快捷回复 */
.chat-quick-replies {
    display: flex; gap: 8px; padding: 10px 15px 5px; background: transparent; 
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; flex-shrink: 0;
}
.chat-quick-replies::-webkit-scrollbar { display: none; }
.qr-pill {
    background: var(--bg-card); color: var(--text-regular); font-size: 12px; font-weight: 900; 
    padding: 8px 14px; border-radius: 99px; border: 1px solid var(--border-base); 
    white-space: nowrap; cursor: pointer; transition: 0.2s; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.qr-pill:active { background: var(--bg-hover); transform: scale(0.95); }
.qr-pill:first-child { color: var(--color-danger); background: var(--color-danger-light); border-color: #FECACA; }

/* 7. 现代输入底栏 */
.chat-input-bar { 
    background: var(--bg-card); padding: 10px 15px calc(10px + env(safe-area-inset-bottom)); 
    display: flex; align-items: flex-end; gap: 12px; border-top: 1px solid var(--border-base); flex-shrink: 0;
}
.c-action-btn { 
    width: 34px; height: 34px; border-radius: 50%; background: var(--bg-muted); 
    display: flex; justify-content: center; align-items: center; color: var(--text-secondary); 
    font-size: 22px; cursor: pointer; flex-shrink: 0; transition: 0.2s; margin-bottom: 4px;
}
.c-action-btn:active { transform: scale(0.9); }
.c-input-wrapper {
    flex: 1; background: #F4F5F7; border-radius: 22px; display: flex; align-items: center; 
    padding: 2px 15px; border: 1px solid transparent; transition: 0.2s;
}
.c-input-wrapper:focus-within { border-color: var(--brand-primary); background: #FFF; box-shadow: 0 0 0 3px var(--brand-primary-light);}
.c-input { 
    flex: 1; height: 38px; background: transparent; border: none; 
    font-size: 15px; outline: none; padding: 0; color: var(--text-primary); font-weight: 500;
}
.c-send-btn { 
    background: var(--brand-primary); color: #FFF; border: none; width: 36px; height: 36px; 
    border-radius: 50%; font-size: 16px; font-weight: bold; cursor: pointer; display: flex; 
    align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 3px; 
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3); transition: 0.2s;
}
.c-send-btn:active { transform: scale(0.9); background: var(--brand-primary-hover); }

.chat-input-disabled { background: var(--bg-muted); padding: 20px 15px calc(20px + env(safe-area-inset-bottom)); text-align: center; color: var(--text-muted); font-size: 13px; font-weight: bold; flex-shrink: 0;}

/* ================= 🌟 全局现代 Toast 提示 ================= */
.global-toast {
    position: fixed;
    top: -100px; /* 初始隐藏在屏幕上方 */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(17, 24, 39, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #FFF;
    padding: 14px 24px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    z-index: 10000;
    /* 极致丝滑的弹跳动画 */
    transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    max-width: 90%;
    white-space: nowrap;
}
/* 触发显示时的类名 */
.global-toast.show {
    top: calc(20px + env(safe-area-inset-top));
}

/* ================= 🌟 全局大图预览 Lightbox ================= */
.lightbox-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.25 ease;
    backdrop-filter: blur(8px);
}
.lightbox-overlay img {
    max-width: 95vw;
    max-height: 85vh;
    border-radius: 12px;
    object-fit: contain; /* 保证原比例展示 */
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transition: transform 0.3s;
}
.lightbox-close {
    position: absolute;
    top: calc(20px + env(safe-area-inset-top));
    right: 20px;
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.15);
    color: #FFF;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 20px; cursor: pointer;
    backdrop-filter: blur(4px);
    transition: 0.2s;
}
.lightbox-close:active { background: rgba(255,255,255,0.4); transform: scale(0.9); }


/* ================= 💎 进阶 & Pro 模式专属高级 UI ================= */

/* 1. 原生感搜索栏 */
.wiki-search-box {
    margin: 10px 20px 15px;
    position: relative;
}
.wiki-search-box input {
    width: 100%;
    padding: 12px 15px 12px 38px;
    border-radius: 16px;
    border: 1px solid transparent;
    background: #F3F4F6;
    font-size: 14px;
    font-weight: bold;
    color: #111827;
    box-sizing: border-box;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.wiki-search-box input:focus {
    background: #FFF;
    border-color: #10B981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
    outline: none;
}
.wiki-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    filter: grayscale(1) opacity(0.5);
}

/* 2. 横向滑动胶囊 Tabs */
#wikiTabs {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 0 20px 15px;
    scrollbar-width: none;
}
#wikiTabs::-webkit-scrollbar { display: none; }
.w-tab {
    white-space: nowrap;
    padding: 8px 18px;
    border-radius: 99px;
    background: #FFF;
    border: 1px solid #E5E7EB;
    color: #4B5563;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.w-tab.active {
    background: #111827;
    color: #FFF;
    border-color: #111827;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.2);
}

/* 3. Tinder 级滑动卡片底层 (收藏与懂了) */
.swipe-wrapper {
    position: relative;
    margin: 0 20px 16px;
    border-radius: 20px;
    background: #F3F4F6;
    overflow: hidden;
}
.swipe-bg {
    position: absolute;
    top: 0; bottom: 0; width: 50%;
    display: flex; align-items: center;
    padding: 0 24px;
    font-weight: 900; color: #FFF; font-size: 15px;
    z-index: 1; opacity: 0;
}
.swipe-bg.save-bg { left: 0; background: linear-gradient(90deg, #10B981, #34D399); justify-content: flex-start; }
.swipe-bg.delete-bg { right: 0; background: linear-gradient(270deg, #EF4444, #F87171); justify-content: flex-end; }

/* 4. 折叠卡片主体 (极简微拟物) */
.wiki-card {
    background: #FFF;
    padding: 18px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    border: 1px solid #F9FAFB;
    position: relative;
    z-index: 2;
    cursor: pointer;
    /* 卡片回弹动画 */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}
.wk-header { display: flex; gap: 14px; align-items: flex-start; }
.wk-icon {
    font-size: 26px;
    background: #F9FAFB;
    width: 50px; height: 50px;
    border-radius: 14px;
    display: flex; justify-content: center; align-items: center;
    flex-shrink: 0; border: 1px solid #F3F4F6;
}
.wk-info { flex: 1; }
.wk-title {
    font-size: 16px; font-weight: 900; color: #111827;
    margin-bottom: 6px; display: flex; align-items: center;
    flex-wrap: wrap; gap: 8px; line-height: 1.3;
}
.wk-tag {
    font-size: 10px; background: #ECFDF5; color: #059669;
    padding: 2px 8px; border-radius: 6px; font-weight: 900;
    border: 1px solid #A7F3D0;
}
.wk-summary { font-size: 13px; color: #6B7280; line-height: 1.5; font-weight: 500;}

/* 5. 优雅的展开动画 */
.wk-detail {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0;
}
.wiki-card.open .wk-detail {
    max-height: 800px; opacity: 1;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px dashed #E5E7EB;
}
.wk-step {
    font-size: 14px; color: #374151; line-height: 1.6;
    background: #F9FAFB; padding: 14px; border-radius: 14px;
    margin-bottom: 15px; border: 1px solid #F3F4F6;
}
.wk-nl-word {
    color: #4F46E5; background: #EEF2FF; padding: 2px 6px;
    border-radius: 6px; cursor: pointer; text-decoration: underline; font-weight: bold;
}

/* UGC 评论互动按钮 */
.wk-ugc-btn {
    width: 100%; padding: 12px; background: #FFF;
    border: 1px solid #E5E7EB; color: #4B5563; font-size: 13px; font-weight: 900;
    border-radius: 12px; display: flex; justify-content: center; align-items: center;
    gap: 6px; cursor: pointer; transition: 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.wk-ugc-btn:active { background: #F3F4F6; transform: scale(0.98); }

/* 底部 AI 提取按钮 */
.btn-ai-create {
    margin: 10px 20px 30px; width: calc(100% - 40px); padding: 16px;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: #FFF; border: none; border-radius: 16px; font-size: 15px; font-weight: 900;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.35); cursor: pointer; transition: 0.2s;
}
.btn-ai-create:active { transform: scale(0.95); box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2); }

/* ================= 💼 Pro 模式专属黑金/黑紫主题覆写 ================= */
/* 当最外层拥有 .rb-pro-theme 时，内部颜色瞬间变得尊贵 */
.rb-pro-theme .w-tab.active {
    background: linear-gradient(135deg, #B45309, #D97706); /* 琥珀金 */
    border-color: #D97706;
    box-shadow: 0 4px 12px rgba(180, 83, 9, 0.25);
}
.rb-pro-theme .wk-tag {
    background: #FFFBEB; color: #B45309; border-color: #FDE68A;
}
.rb-pro-theme .swipe-bg.save-bg {
    background: linear-gradient(90deg, #F59E0B, #FBBF24); /* 收藏变成金色 */
}
.rb-pro-theme .btn-ai-create {
    background: linear-gradient(135deg, #111827, #374151); /* AI 按钮变成曜石黑 */
    box-shadow: 0 8px 25px rgba(17, 24, 39, 0.3);
}
/* ================= 🌷 荷兰风情沉浸式头部 (终极融合版) ================= */
.neth-hero-bg {
    position: relative;
    width: 100%;
    /* 高度调小一点，让它不会太占屏幕 */
    background-image: url('https://images.unsplash.com/photo-1512470876302-972faa2aa9a4?q=80&w=800&auto=format&fit=crop');
    background-size: cover;
    background-position: center 30%;
    /* 底部增加高级圆角，平滑过渡到内容区 */
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    overflow: hidden;
}

.neth-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* 上半部加深黑色确保白色标题清晰，下半部变白融入背景 */
    background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 40%, rgba(247,248,250,1) 100%);
    z-index: 1;
}

/* 🌟 新增：透明质感导航栏 */
.neth-hero-nav {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(15px + env(safe-area-inset-top)) 20px 10px;
}

.hero-title-box {
    text-align: center;
    color: #FFF;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* 文字发光，防看不清 */
}
.hero-title-box h1 {
    font-size: 18px;
    font-weight: 900;
    margin: 0 0 2px;
    letter-spacing: 0.5px;
}
.hero-title-box p {
    font-size: 10px;
    margin: 0;
    font-weight: bold;
    opacity: 0.9;
}

/* 毛玻璃按钮：查榜单 */
.hero-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #FFF;
    padding: 6px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 毛玻璃圆形按钮：相机 */
.hero-icon-btn {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFF;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* 模式切换器紧贴导航栏下方 */
.neth-hero-content {
    position: absolute;
    bottom: 15px; /* 控制它距离背景底部的距离 */
    left: 0; right: 0;
    z-index: 2;
}

/* 高级玻璃态的分段控制器 */
.neth-hero-bg .rb-mode-switcher {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.6);
    margin: 0 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* ================= 💼 Pro 模式专属：精英仪表盘 ================= */
.pro-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.pro-metric-card {
    background: linear-gradient(145deg, #1F2937, #111827);
    border: 1px solid #374151;
    border-radius: 14px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.pm-title { font-size: 11px; color: #9CA3AF; font-weight: bold; white-space: nowrap;}
.pm-value { font-size: 16px; font-weight: 900; color: #F3F4F6; display: flex; align-items: baseline;}
.pm-unit { font-size: 10px; font-weight: normal; margin-left: 2px; color: #9CA3AF;}
/* 红涨绿跌 (依据国内习惯，或者汇率上涨对留学生算跌，这里仅做样式) */
.pm-value.up { color: #EF4444; }
.pm-trend { font-size: 10px; margin-left: 4px; font-weight: bold; }
.pm-value.down { color: #10B981; }

/* ================= 📰 AI 新闻速递看板 ================= */
.pro-news-board {
    background: linear-gradient(180deg, #1F2937 0%, #111827 100%);
    border: 1px solid #374151;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.news-board-header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #374151; padding-bottom: 12px; margin-bottom: 12px;
}
.nbh-left { font-size: 14px; font-weight: 900; color: #F3F4F6; display: flex; align-items: center; }
.pulse-dot {
    width: 8px; height: 8px; background: #EF4444; border-radius: 50%;
    margin-right: 8px; box-shadow: 0 0 8px #EF4444;
    animation: pulse 1.5s infinite;
}
.nbh-right { font-size: 12px; color: #6B7280; cursor: pointer; font-weight: bold;}

.news-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px dashed #374151;
    cursor: pointer; transition: 0.2s;
}
.news-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0;}
.news-item:active { opacity: 0.6; }
.news-time {
    font-size: 12px; color: #D97706; font-weight: 900;
    background: #FFFBEB; padding: 2px 6px; border-radius: 6px; flex-shrink: 0;
}
.news-content { flex: 1; }
.news-title { font-size: 13px; font-weight: 900; color: #E5E7EB; margin-bottom: 4px; line-height: 1.4;}
.news-source { font-size: 10px; color: #6B7280; display: flex; justify-content: space-between;}

/* ================= 📈 Pro 趋势图表 (Apple Stocks 风格) ================= */
.trend-chart-box {
    height: 180px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.trend-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.trend-bar {
    width: 100%;
    background: #6366F1;
    border-radius: 4px 4px 0 0;
    transition: height 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
}
.trend-bar.up { background: #EF4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); }
.trend-bar.down { background: #10B981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }
.trend-label {
    font-size: 10px;
    color: #6B7280;
    font-weight: bold;
}

/* ================= 📰 新闻多语言切换器 ================= */
.news-lang-switcher {
    display: flex;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 4px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.nl-btn {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 13px;
    font-weight: 900;
    color: #9CA3AF;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}
.nl-btn.active {
    background: #374151;
    color: #FFF;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
/* ============================================================================
   🎨 架构师重构：全局卡片圆角与空气感阴影 (Breathing Cards)
   ============================================================================ */

/* 1. 统一全局页面底色，用极其极简的灰白底，把白色卡片“托”起来 */
body, .page-section, .container {
    background-color: #F9FAFB !important; 
}

/* 2. 重塑所有核心卡片：统一大圆角 + 空气感阴影 */
.glass-card, 
.trending-item, 
.task-card, 
.wiki-card,
.waterfall-item,
.help-card,
.partner-card,
.auth-card,
.em-card,
.widget-card {
    border-radius: 16px !important; /* 统一外部几何韵律 */
    background: #FFFFFF !important;
    border: 1px solid rgba(229, 231, 235, 0.6) !important; /* 极柔和的边缘反光 */
    /* 🍏 苹果核心魔法：双层空气阴影 (一层大范围极淡，一层小范围微深) */
    box-shadow: 0 8px 30px rgba(17, 24, 39, 0.04), 0 2px 8px rgba(17, 24, 39, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden; /* 防止内部元素溢出破坏圆角 */
}

/* 3. 黄金嵌套法则：内部图片元素的圆角必须比外部小 */
.trending-item .t-img,
.waterfall-item img,
.help-card img,
.auth-card .auth-icon {
    border-radius: 12px !important; 
}

/* 4. 赋予卡片生命力：点击时的“微呼吸”物理交互 */
.trending-item:active, 
.wiki-card:active,
.waterfall-item:active,
.auth-card:active,
.em-card:active {
    transform: scale(0.97); /* 按下去时微微回缩 */
    box-shadow: 0 2px 10px rgba(17, 24, 39, 0.04) !important; /* 阴影随之收拢 */
}

/* 5. 拯救超市红黑榜顶部的 Tab 切换栏 (增加呼吸感留白) */
.trending-tabs {
    background: rgba(243, 244, 246, 0.8) !important;
    padding: 6px !important;
    border-radius: 20px !important;
    display: inline-flex;
    margin: 0 auto 20px auto !important;
    width: 90% !important;
    left: 5%;
    position: relative;
}
.trending-tabs .t-tab {
    flex: 1;
    text-align: center;
    border-radius: 14px !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #6B7280 !important;
    transition: all 0.3s ease;
}
.trending-tabs .t-tab.active {
    background: #FFFFFF !important;
    color: #111827 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

/* ============================================================================
   ✨ 架构师高定 UI 补丁：拯救突兀感，拉满高级感
   ============================================================================ */

/* ---------------------------------------------------
   1. 拯救加号按钮：苹果级“伪镂空”悬浮效果
--------------------------------------------------- */
.tab-item-publish {
    top: -24px !important; /* 整体再往上提一点，脱离底栏的束缚 */
}
.btn-publish {
    width: 58px !important;
    height: 58px !important;
    background: linear-gradient(135deg, #111827 0%, #374151 100%) !important;
    /* 🍏 核心魔法：加上与底栏同色的粗边框，视觉上“挖”掉一块 */
    border: 4px solid #FFFFFF !important; 
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.25) !important; /* 加深悬浮阴影 */
}
.tab-item-publish .tab-text {
    bottom: -22px !important; /* 按钮抬高了，文字要跟着下沉保持在底栏内 */
}

/* ---------------------------------------------------
   2. 拯救压抑的页头：干掉黑洞图，换上现代弥散极光
--------------------------------------------------- */
.neth-hero-bg {
    /* 极简的高级蓝黄弥散渐变，透气感拉满 */
    background: linear-gradient(135deg, #E0E7FF 0%, #EEF2FF 50%, #FDF4FF 100%) !important; 
    background-image: none !important; /* 强行关掉那张写实风景图 */
}
.neth-hero-overlay {
    display: none !important; /* 干掉压抑的黑色半透明遮罩 */
}
.hero-title-box h1 {
    color: #111827 !important; /* 背景亮了，标题必须变深色 */
    text-shadow: none !important; /* 去掉以前为了在黑底上看清而加的阴影 */
}
.hero-title-box p {
    color: #4B5563 !important; /* 副标题变深灰 */
}

/* 优化页头上的小控件，适应新的亮色背景 */
.hero-btn {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #D97706 !important; /* 金橙色文字 */
    border: 1px solid rgba(255,255,255,1) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}
.rb-mode-switcher {
    background: rgba(255,255,255,0.6) !important; /* 半透明毛玻璃底座 */
    border: 1px solid rgba(255,255,255,0.8) !important;
}
.rb-mode-btn.active {
    background: #FFFFFF !important;
    color: #111827 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
.rb-mode-btn {
    color: #6B7280 !important;
}

/* ---------------------------------------------------
   3. 拯救廉价的交互按钮：高级克制蓝
--------------------------------------------------- */
.task-hook-action {
    background: #EFF6FF !important; /* 极其浅的婴儿蓝底色 */
    color: #2563EB !important; /* 沉稳的皇家蓝文字 */
    border-radius: 12px !important;
    font-weight: bold !important;
    padding: 8px 14px !important;
    transition: all 0.2s ease;
}
.task-hook-action:active {
    background: #DBEAFE !important;
    transform: scale(0.96);
}

/* 统一进度条颜色，去掉奇怪的绿色 */
.pp-bar-fill {
    background: linear-gradient(90deg, #3B82F6 0%, #2563EB 100%) !important;
}
.pp-count {
    color: #2563EB !important;
}

/* 1. 拯救大白墙：铺设高级冷灰底色 */
body, .page-section, .container {
    background-color: #F4F6F8 !important; /* 核心：带有一点点蓝调的极浅灰 */
    min-height: 100vh;
}

/* 2. 修复卡片对比度：让空气阴影重新显现 */
.glass-card, .task-card, .trending-item {
    background: #FFFFFF !important;
    border: none !important; /* 去掉多余的边框，全靠阴影撑起体积 */
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.05) !important;
}

/* ============================================================================
   🚑 架构师补丁：修复并重塑“主线通关任务”的 UI 样式
   ============================================================================ */

/* 1. 修复标题：恢复大字号和加粗 */
.section-title {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #111827 !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
}

/* 2. 修复任务切换 Tab：恢复横向胶囊排列 */
.task-tabs {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
}
.tt-tab {
    flex: 1 !important;
    text-align: center !important;
    background: #F1F5F9 !important; /* 浅灰蓝底色 */
    color: #64748B !important;
    padding: 10px 0 !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
}
/* 激活状态的胶囊：高级黑 */
.tt-tab.active {
    background: #0F172A !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2) !important;
}

/* 3. 修复进度条面板：恢复成白色悬浮卡片 */
.progress-panel {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.03) !important; /* 空气感阴影 */
    border: 1px solid rgba(229, 231, 235, 0.6) !important;
}
.pp-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #475569 !important;
    margin-bottom: 12px !important;
}
.pp-count {
    color: #2563EB !important; /* 品牌蓝字号 */
    font-size: 16px !important;
}
/* 进度条轨道与填充 */
.pp-bar {
    background: #E2E8F0 !important;
    height: 8px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}
.pp-bar-fill {
    background: linear-gradient(90deg, #3B82F6 0%, #2563EB 100%) !important;
    height: 100% !important;
    border-radius: 4px !important;
    transition: width 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; /* 丝滑进度动画 */
}
/* 确保切换逻辑拥有最高优先级 */
.page-section {
    display: none !important; 
}
.page-section.active {
    display: block !important; /* 或者 flex，根据你的布局定 */
}
/* 确保榜单和集市的文字不是白色的 */
#homeTrendingListLikes, 
#homeTrendingListDislikes, 
#communityPostList, 
#wikiListContainer {
    color: #111827 !important; /* 深黑色文字 */
    min-height: 200px; /* 防止内容没加载时容器塌陷成一条线 */
    display: block !important;
}

/* 确保加载中/空状态的文字可见 */
.empty-state, .loading-text {
    color: #9CA3AF !important;
    text-align: center;
    padding: 40px 0;
}

/* 专属高级感 Tab 切换栏样式 */
.a-tab {
    font-size: 15px;
    font-weight: bold;
    color: #94A3B8;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}
.a-tab.active {
    color: #0F172A;
    font-weight: 900;
}
.a-tab.active::after {
    content: '';
    position: absolute;
    bottom: -13px; /* 紧贴下边框 */
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: #0F172A;
    border-radius: 2px;
}
/* ============================================================================
   🚀 架构师高定：底部发布面板 (Action Sheet) 样式
   ============================================================================ */

/* 面板从底部滑出的丝滑动画 */
.publish-sheet-container {
    animation: slideUpSheet 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes slideUpSheet {
    from { transform: translateY(100%); opacity: 0.5; }
    to { transform: translateY(0); opacity: 1; }
}

/* 统一选项卡片：高级灰底色与白边框 */
.pub-card {
    background: #F8FAFC; 
    border: 1px solid #FFFFFF; 
    border-radius: 20px; 
    padding: 20px 16px; 
    text-align: center; 
    cursor: pointer; 
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.02); 
}

/* 点击时的物理反馈：微微按压回缩 */
.pub-card:active {
    transform: scale(0.95);
    background: #F1F5F9;
}

/* 糖果色图标底座 */
.pub-icon {
    width: 48px; 
    height: 48px; 
    border-radius: 16px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 24px; 
    margin: 0 auto 12px auto; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* 文字排版 */
.pub-title { font-size: 15px; font-weight: 900; color: #1E293B; margin-bottom: 4px; }
.pub-sub { font-size: 11px; color: #64748B; font-weight: bold; }

/* ============================================================================
   🌈 架构师高定：红宝书动态情境背景色
   ============================================================================ */

/* 1. 给主容器加上丝滑的颜色渐变过渡动画 */
#page-tips {
    transition: background 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    min-height: 100vh;
}

/* 2. 🐣 新手村主题：治愈薄荷暖绿 (缓解初来乍到的焦虑) */
#page-tips.theme-starter {
    background: linear-gradient(180deg, #F0FDF4 0%, #F8FAFC 100%) !important;
}

/* 3. 🥓 进阶篇主题：探索天空蓝 (鼓励出门社交与探索) */
#page-tips.theme-advanced {
    background: linear-gradient(180deg, #F0F9FF 0%, #F8FAFC 100%) !important;
}

/* 4. 💼 Pro玩家主题：高阶极客紫 (沉浸、深度的硬核感) */
#page-tips.theme-pro {
    background: linear-gradient(180deg, #FAF5FF 0%, #F8FAFC 100%) !important;
}

/* 发帖选项胶囊按钮 */
.publish-capsule {
    display: inline-block;
    background: #F3F4F6;
    color: #4B5563;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    margin-right: 8px;
    margin-bottom: 8px;
    user-select: none;
}
/* 选中状态 */
.publish-capsule.active {
    background: #111827;
    color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* 🚨 十万火急特权卡片 */
.urgent-card {
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.urgent-card.active-normal {
    border-color: #111827;
    background: #F8FAFC;
}
.urgent-card.active-urgent {
    border-color: #EF4444;
    background: #FEF2F2;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15);
}

/* 隐藏横向导航的滚动条，但保持可以滑动 */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }


/* 🌟 重写 Driver.js 默认样式，打造极致颜值 */
.hebao-driver-theme {
    border-radius: 16px !important;
    padding: 20px !important;
    font-family: inherit !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
    border: none !important;
}
.hebao-driver-theme .driver-popover-title {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #111827 !important;
    margin-bottom: 8px !important;
}
.hebao-driver-theme .driver-popover-description {
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
}
.hebao-driver-theme .driver-popover-next-btn,
.hebao-driver-theme .driver-popover-prev-btn {
    border-radius: 8px !important;
    font-weight: bold !important;
    text-shadow: none !important;
}
.hebao-driver-theme .driver-popover-next-btn {
    background-color: #111827 !important;
    color: #FFF !important;
    border: none !important;
}