/* ============================================
   Huidong CMS - 移动端 APP 风格样式 v4.0
   设计系统 + 动画库 + 完整页面样式
   ============================================ */

@media (max-width: 768px) {

/* ==========================================
   1. DESIGN TOKENS / 设计令牌
   ========================================== */
:root {
    /* 主色调 */
    --app-primary: #e02424;
    --app-primary-dark: #c01d1d;
    --app-primary-light: #fff0f0;
    --app-accent: #ff6b35;
    --app-accent-light: #fff4f0;

    /* 语义色 */
    --app-success: #67c23a;
    --app-warning: #e6a23c;
    --app-info: #409eff;
    --app-danger: #f56c6c;
    --app-gold: #ff9500;
    --app-vip: linear-gradient(135deg, #ff6b35, #e02424);

    /* 认证色 */
    --app-cert-personal: #e65100;
    --app-cert-personal-light: #fff3e0;
    --app-cert-enterprise: #1976d2;
    --app-cert-enterprise-light: #e3f2fd;

    /* 背景 */
    --app-bg: #f5f5f5;
    --app-bg-elevated: #fafafa;
    --app-card: #ffffff;

    /* 文字 */
    --app-text: #1a1a1a;
    --app-text-secondary: #555555;
    --app-text-tertiary: #888888;
    --app-text-muted: #b0b0b0;

    /* 边框 */
    --app-border: #eeeeee;
    --app-border-light: #f5f5f5;
    --app-divider: #f0f0f0;

    /* 圆角 */
    --app-radius-xs: 4px;
    --app-radius-sm: 8px;
    --app-radius: 12px;
    --app-radius-lg: 16px;
    --app-radius-xl: 20px;
    --app-radius-full: 999px;

    /* 阴影 */
    --app-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --app-shadow: 0 1px 3px rgba(0,0,0,0.06);
    --app-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --app-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --app-shadow-xl: 0 16px 48px rgba(0,0,0,0.16);

    /* 间距 */
    --app-space-xs: 4px;
    --app-space-sm: 8px;
    --app-space: 12px;
    --app-space-md: 16px;
    --app-space-lg: 20px;
    --app-space-xl: 24px;
    --app-space-2xl: 32px;

    /* 动画 */
    --app-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --app-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --app-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --app-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --app-duration-fast: 0.15s;
    --app-duration: 0.25s;
    --app-duration-slow: 0.35s;
    --app-duration-slower: 0.5s;

    /* 导航尺寸 */
    --header-h: 0px;
    --bottom-nav-h: 56px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==========================================
   2. GLOBAL RESET / 全局重置
   ========================================== */
body {
    background: var(--app-bg) !important;
    padding: 0 0 calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px) 0 !important;
    margin: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif !important;
    font-size: 15px;
    color: var(--app-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-overflow-scrolling: touch;
}

/* 选择文字颜色 */
::selection { background: rgba(224,36,36,0.15); color: inherit; }

/* 滚动条隐藏 */
::-webkit-scrollbar { width: 0; height: 0; }

/* ==========================================
   3. ANIMATION KEYFRAMES / 动画关键帧
   ========================================== */

/* 入场动画 */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 缩放动画 */
@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes zoomOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.9); }
}

/* 上滑弹窗 */
@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@keyframes slideDown {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
}

/* Toast 动画 */
@keyframes toastIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-20px) scale(0.95); }
}

/* 骨架屏闪烁 */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* 脉冲动画 */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

/* 心跳动画 */
@keyframes heartBeat {
    0%   { transform: scale(1); }
    15%  { transform: scale(1.3); }
    30%  { transform: scale(1); }
    45%  { transform: scale(1.15); }
    60%  { transform: scale(1); }
}

/* 波纹扩散 */
@keyframes ripple {
    to { transform: scale(4); opacity: 0; }
}

/* 旋转加载 */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 弹跳 */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* 摆动 */
@keyframes swing {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(5deg); }
    75%      { transform: rotate(-5deg); }
}

/* 徽章脉冲 */
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224,36,36,0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(224,36,36,0); }
}

/* 标签指示器滑动 */
@keyframes tabLineSlide {
    from { transform: translateX(0); }
}

/* ==========================================
   4. HIDE DESKTOP ELEMENTS / 隐藏PC元素
   ========================================== */
.navbar, nav.navbar, .site-header,
.tt-topbar, .tt-hero, .tt-navbar,
.tt-article-left, .tt-article-right,
.tt-desktop-only, .tt-toolbar,
footer:not(.footer-fixed-bar),
.swiper-button-next, .swiper-button-prev { display: none !important; }

/* ==========================================
   5. STATUS BAR / 状态栏
   ========================================== */
.app-status-bar {
    display: flex !important;
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: 48px; padding: 8px 16px 0;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: background var(--app-duration) var(--app-ease);
}
.app-status-bar.scrolled {
    background: rgba(255,255,255,0.98);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.app-status-bar .app-logo {
    font-size: 18px; font-weight: 800;
    color: var(--app-primary); letter-spacing: -0.5px;
    transition: transform var(--app-duration) var(--app-ease);
}
.app-status-bar .app-logo:active { transform: scale(0.95); }
.app-status-bar .app-actions { display: flex; gap: 4px; align-items: center; }
.app-status-bar .app-actions a,
.app-status-bar .app-actions button {
    width: 36px; height: 36px; border-radius: 50%;
    background: transparent; border: none;
    display: flex; align-items: center; justify-content: center;
    color: #666; text-decoration: none; font-size: 18px;
    transition: all var(--app-duration-fast) var(--app-ease);
    position: relative; overflow: hidden;
}
.app-status-bar .app-actions a:active,
.app-status-bar .app-actions button:active {
    transform: scale(0.9);
    background: rgba(0,0,0,0.05);
}

/* ==========================================
   6. BOTTOM TAB BAR / 底部导航栏
   ========================================== */
.app-tab-bar {
    display: flex !important;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    height: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 0.5px solid rgba(0,0,0,0.08);
    justify-content: space-around; align-items: center;
    transition: transform var(--app-duration) var(--app-ease);
    will-change: transform;
}
/* Tabbar 隐藏（键盘弹起时） */
.app-tab-bar.keyboard-visible {
    transform: translateY(100%);
}

.app-tab-item {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px;
    padding: 4px 8px; min-width: 50px; height: 100%;
    color: var(--app-text-muted); text-decoration: none;
    font-size: 10px; font-weight: 500;
    position: relative; overflow: hidden;
    transition: color var(--app-duration) var(--app-ease);
}
.app-tab-item .tab-icon {
    font-size: 22px; line-height: 1;
    transition: transform var(--app-duration) var(--app-ease-bounce);
    position: relative; z-index: 1;
}
.app-tab-item .tab-label {
    transition: transform var(--app-duration) var(--app-ease), font-weight var(--app-duration) var(--app-ease);
}

/* 活跃状态 */
.app-tab-item.active {
    color: var(--app-primary); font-weight: 600;
}
.app-tab-item.active .tab-icon {
    transform: translateY(-2px) scale(1.08);
}

/* 活跃指示器（顶部横条） */
.app-tab-item.active::before {
    content: '';
    position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    width: 20px; height: 3px;
    background: var(--app-primary);
    border-radius: 0 0 3px 3px;
    animation: fadeInDown var(--app-duration) var(--app-ease-bounce) both;
}

/* 触摸波纹 */
.app-tab-item .ripple-effect {
    position: absolute; border-radius: 50%;
    background: rgba(224,36,36,0.15);
    transform: scale(0);
    animation: ripple 0.6s var(--app-ease-out);
    pointer-events: none;
}

/* 徽章 */
.app-tab-item .tab-badge {
    position: absolute; top: 2px; right: 6px;
    width: 8px; height: 8px; border-radius: 50%;
    border: 1.5px solid #fff;
    z-index: 2;
}
.app-tab-item .tab-badge.approved {
    background: var(--app-success);
    animation: badgePulse 2s infinite;
}
.app-tab-item .tab-badge.pending {
    background: var(--app-warning);
    animation: badgePulse 3s infinite;
}

/* 创作按钮特殊样式 */
.app-tab-create {
    position: relative;
}
.app-tab-create .tab-icon-wrap {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, #e02424, #ff4d4d);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 2px;
    box-shadow: 0 4px 12px rgba(224,36,36,0.3);
    transition: all var(--app-duration) var(--app-ease-bounce);
}
.app-tab-create:active .tab-icon-wrap {
    transform: scale(0.9);
    box-shadow: 0 2px 6px rgba(224,36,36,0.3);
}

/* 创作菜单 */
.creator-popup-overlay {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(0,0,0,0.4);
    animation: fadeIn var(--app-duration) var(--app-ease) both;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.creator-popup-menu {
    position: fixed; bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 12px);
    left: 50%; transform: translateX(-50%); z-index: 1000;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-xl);
    padding: var(--app-space-sm);
    min-width: 200px;
    animation: zoomIn var(--app-duration) var(--app-ease-bounce) both;
}
.creator-popup-menu a {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; border-radius: var(--app-radius);
    color: var(--app-text); text-decoration: none;
    font-size: 15px; font-weight: 500;
    transition: background var(--app-duration-fast) var(--app-ease);
}
.creator-popup-menu a:active {
    background: var(--app-primary-light);
    transform: scale(0.98);
}
.creator-popup-menu .menu-icon {
    width: 40px; height: 40px; border-radius: var(--app-radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.creator-popup-menu .menu-icon.article { background: #fff0f0; }
.creator-popup-menu .menu-icon.doc    { background: #f0f7ff; }

/* ==========================================
   7. MOBILE HEADER / 移动端头部
   ========================================== */
.m-top {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    transition: background var(--app-duration) var(--app-ease),
                box-shadow var(--app-duration) var(--app-ease);
    padding: 0 !important;
}
.m-top.scrolled {
    background: rgba(255,255,255,0.98) !important;
    box-shadow: var(--app-shadow);
}

/* 搜索栏 */
.m-search-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px !important;
    transition: padding var(--app-duration) var(--app-ease);
}
.m-search-bar .m-logo {
    font-weight: 800; font-size: 17px;
    color: var(--app-primary); text-decoration: none;
    flex-shrink: 0;
    transition: transform var(--app-duration-fast) var(--app-ease);
}
.m-search-bar .m-logo:active { transform: scale(0.95); }

.m-search-box {
    flex: 1; height: 36px; border-radius: 18px;
    background: #f5f5f5; border: 1.5px solid transparent;
    display: flex; align-items: center; padding: 0 14px;
    font-size: 13px; color: var(--app-text-muted);
    text-decoration: none; min-width: 0;
    transition: all var(--app-duration) var(--app-ease);
    position: relative; overflow: hidden;
}
.m-search-box:active {
    background: #eee;
    border-color: var(--app-primary);
    transform: scale(0.98);
}
.m-search-box .search-icon {
    margin-right: 6px; flex-shrink: 0;
    transition: transform var(--app-duration) var(--app-ease);
}
.m-search-box:active .search-icon {
    transform: scale(1.1);
}

/* 搜索栏聚焦态（搜索页使用） */
.m-search-box.focused {
    background: #fff;
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(224,36,36,0.1);
}

.m-actions {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.m-btn-plus {
    width: 32px; height: 32px; border-radius: var(--app-radius-sm);
    background: #f5f5f5; color: #666;
    text-decoration: none; display: flex;
    align-items: center; justify-content: center;
    font-size: 18px; font-weight: 300;
    transition: all var(--app-duration-fast) var(--app-ease);
}
.m-btn-plus:active {
    background: var(--app-primary-light);
    color: var(--app-primary);
    transform: rotate(90deg);
}
.m-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #e02424, #ff6b35);
    color: #fff; text-decoration: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    box-shadow: 0 2px 6px rgba(224,36,36,0.2);
    transition: transform var(--app-duration-fast) var(--app-ease);
}
.m-avatar:active { transform: scale(0.9); }

/* 分类标签栏 */
.m-tabs {
    display: flex; align-items: center;
    overflow-x: auto; white-space: nowrap;
    scrollbar-width: none; -ms-overflow-style: none;
    border-bottom: 1px solid var(--app-divider);
    padding: 0 12px 0 12px; gap: 0;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
.m-tabs::-webkit-scrollbar { display: none; }

/* 标签指示器（滑动下划线） */
.m-tabs-line {
    position: absolute; bottom: 0; left: 0;
    height: 3px; border-radius: 3px 3px 0 0;
    background: var(--app-primary);
    transition: left var(--app-duration) var(--app-ease),
                width var(--app-duration) var(--app-ease);
}

.m-tabs a {
    flex-shrink: 0; padding: 9px 14px;
    font-size: 14px; text-decoration: none;
    color: var(--app-text-tertiary); font-weight: 400;
    transition: color var(--app-duration) var(--app-ease),
                font-weight var(--app-duration) var(--app-ease);
    position: relative;
}
.m-tabs a:first-child { padding-left: 4px; }
.m-tabs a.active {
    color: var(--app-text); font-weight: 700;
}

/* 渐变遮罩（右侧提示可滑动） */
.m-tabs-fade {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.95));
    pointer-events: none;
    z-index: 2;
    transition: opacity var(--app-duration) var(--app-ease);
}

/* ==========================================
   8. LAYOUT / 布局
   ========================================== */
.tt-main {
    display: flex !important; flex-direction: column !important;
    gap: 10px !important; padding: 0 !important;
    max-width: 100% !important; margin: 0 !important;
    min-height: calc(100vh - var(--bottom-nav-h) - var(--safe-bottom) - 100px);
}
.tt-left { max-width: 100% !important; flex: 1 !important; min-width: 0 !important; }
.tt-right { display: none !important; }
.container { padding: 0 12px !important; max-width: 100% !important; }
.row { margin: 0 !important; }

/* ==========================================
   9. SCROLL-REVEAL / 滚动揭示
   ========================================== */
.anim-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s var(--app-ease-out),
                transform 0.5s var(--app-ease-out);
}
.anim-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
.anim-reveal.anim-left  { transform: translateX(-20px); }
.anim-reveal.anim-left.revealed  { transform: translateX(0); }
.anim-reveal.anim-right { transform: translateX(20px); }
.anim-reveal.anim-right.revealed { transform: translateX(0); }
.anim-reveal.anim-scale { transform: scale(0.9); }
.anim-reveal.anim-scale.revealed { transform: scale(1); }

/* 延迟序列 */
.anim-reveal.delay-1  { transition-delay: 0.05s; }
.anim-reveal.delay-2  { transition-delay: 0.10s; }
.anim-reveal.delay-3  { transition-delay: 0.15s; }
.anim-reveal.delay-4  { transition-delay: 0.20s; }
.anim-reveal.delay-5  { transition-delay: 0.25s; }
.anim-reveal.delay-6  { transition-delay: 0.30s; }
.anim-reveal.delay-7  { transition-delay: 0.35s; }
.anim-reveal.delay-8  { transition-delay: 0.40s; }
.anim-reveal.delay-9  { transition-delay: 0.45s; }
.anim-reveal.delay-10 { transition-delay: 0.50s; }

/* ==========================================
   10. SKELETON / 骨架屏
   ========================================== */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--app-radius-xs);
}
.skeleton-text {
    height: 14px; margin-bottom: 8px;
    border-radius: 4px;
}
.skeleton-text:last-child { width: 60%; }
.skeleton-title {
    height: 18px; width: 80%; margin-bottom: 10px;
    border-radius: 4px;
}
.skeleton-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    flex-shrink: 0;
}
.skeleton-img {
    width: 100%; aspect-ratio: 16/9;
    border-radius: var(--app-radius-sm);
}
.skeleton-card {
    background: #fff; border-radius: var(--app-radius);
    padding: var(--app-space-md); margin: 0 var(--app-space);
    box-shadow: var(--app-shadow-sm);
}

/* 骨架屏列表项 */
.skeleton-feed {
    display: flex; gap: 14px; padding: 14px;
    background: #fff; margin: 0 var(--app-space);
    border-radius: var(--app-radius);
}
.skeleton-feed .skeleton-content { flex: 1; min-width: 0; }
.skeleton-feed .skeleton-thumb {
    width: 112px; height: 78px; border-radius: 6px;
    flex-shrink: 0;
}

/* ==========================================
   11. TOAST / 消息提示
   ========================================== */
.app-toast-container {
    position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
    z-index: 2000; display: flex; flex-direction: column;
    align-items: center; gap: 8px; pointer-events: none;
}
.app-toast {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 20px; border-radius: 24px;
    background: rgba(30,30,30,0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff; font-size: 14px; font-weight: 500;
    box-shadow: var(--app-shadow-lg);
    animation: toastIn var(--app-duration) var(--app-ease-bounce) both;
    pointer-events: auto; white-space: nowrap;
    max-width: 90vw;
}
.app-toast.removing {
    animation: toastOut var(--app-duration-fast) var(--app-ease-in) both;
}
.app-toast.success { background: rgba(103,194,58,0.92); }
.app-toast.warning { background: rgba(230,162,60,0.92); }
.app-toast.error   { background: rgba(245,108,108,0.92); }
.app-toast .toast-icon { font-size: 18px; flex-shrink: 0; }

/* ==========================================
   12. MODAL / 模态弹窗
   ========================================== */
.app-modal-overlay {
    position: fixed; inset: 0; z-index: 1500;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: fadeIn var(--app-duration) var(--app-ease) both;
}
.app-modal {
    background: #fff; border-radius: var(--app-radius-lg);
    width: 100%; max-width: 320px; max-height: 80vh;
    overflow-y: auto; box-shadow: var(--app-shadow-xl);
    animation: zoomIn var(--app-duration) var(--app-ease-bounce) both;
}
.app-modal-header {
    padding: var(--app-space-lg) var(--app-space-lg) var(--app-space-sm);
    text-align: center;
}
.app-modal-title {
    font-size: 17px; font-weight: 700; color: var(--app-text);
}
.app-modal-body {
    padding: var(--app-space-sm) var(--app-space-lg) var(--app-space-lg);
    font-size: 14px; color: var(--app-text-secondary);
    text-align: center; line-height: 1.6;
}
.app-modal-footer {
    display: flex; border-top: 1px solid var(--app-border);
}
.app-modal-footer button {
    flex: 1; padding: 14px; border: none; background: none;
    font-size: 15px; font-weight: 500; cursor: pointer;
    transition: background var(--app-duration-fast) var(--app-ease);
}
.app-modal-footer button:active { background: #f5f5f5; }
.app-modal-footer .btn-cancel { color: var(--app-text-tertiary); }
.app-modal-footer .btn-confirm { color: var(--app-primary); font-weight: 600; }
.app-modal-footer button + button { border-left: 1px solid var(--app-border); }

/* Action Sheet */
.app-sheet-overlay {
    position: fixed; inset: 0; z-index: 1500;
    background: rgba(0,0,0,0.4);
    animation: fadeIn var(--app-duration) var(--app-ease) both;
}
.app-sheet {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1501;
    background: #fff; border-radius: var(--app-radius-lg) var(--app-radius-lg) 0 0;
    padding: var(--app-space) 0 calc(var(--safe-bottom) + var(--app-space));
    animation: slideUp var(--app-duration) var(--app-ease-bounce) both;
}
.app-sheet-item {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px; font-size: 15px; color: var(--app-text);
    text-decoration: none; border: none; background: none;
    width: 100%; text-align: left; cursor: pointer;
    transition: background var(--app-duration-fast) var(--app-ease);
}
.app-sheet-item:active { background: #f5f5f5; }
.app-sheet-cancel {
    display: block; width: calc(100% - 32px); margin: 8px 16px 0;
    padding: 14px; border: none; background: #f5f5f5;
    border-radius: var(--app-radius); font-size: 15px;
    color: var(--app-text-tertiary); cursor: pointer;
}

/* ==========================================
   13. PULL TO REFRESH / 下拉刷新
   ========================================== */
.ptr-indicator {
    display: flex; align-items: center; justify-content: center;
    height: 0; overflow: hidden;
    transition: height var(--app-duration) var(--app-ease);
    color: var(--app-text-muted); font-size: 13px;
}
.ptr-indicator.active { height: 48px; }
.ptr-indicator .ptr-spinner {
    width: 20px; height: 20px; border: 2px solid #e0e0e0;
    border-top-color: var(--app-primary); border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: 8px;
}

/* ==========================================
   14. HEADLINE MODULE / 头条模块
   ========================================== */
.tt-date-module {
    background: var(--app-card); border-radius: var(--app-radius);
    padding: 0; margin: 0 var(--app-space); box-shadow: var(--app-shadow-sm);
    display: flex; flex-direction: column !important;
    overflow: hidden;
    animation: fadeInUp var(--app-duration-slow) var(--app-ease) both;
}
.tt-date-module .date-label {
    font-size: 15px; font-weight: 800; color: var(--app-primary);
    padding: var(--app-space) var(--app-space-md) var(--app-space-sm) var(--app-space-md);
    display: flex; align-items: center; gap: 6px;
}
.tt-date-module .date-label::before {
    content: '🔥'; font-size: 16px;
    animation: pulse 2s ease-in-out infinite;
}
.tt-date-module .date-label::after { display: none; }
.tt-date-module .date-item {
    font-size: 14px; font-weight: 500; color: var(--app-text);
    padding: 11px var(--app-space-md); border: none;
    text-decoration: none; line-height: 1.5;
    display: flex; align-items: flex-start; gap: 10px;
    border-top: 1px solid var(--app-divider);
    transition: background var(--app-duration-fast) var(--app-ease),
                transform var(--app-duration-fast) var(--app-ease);
}
.tt-date-module .date-item:active {
    background: #fafafa;
    transform: scale(0.99);
}
.tt-date-module .date-item::before {
    content: attr(data-index);
    min-width: 18px; height: 18px; border-radius: 4px;
    background: #f0f0f0; color: #999;
    font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
    transition: transform var(--app-duration-fast) var(--app-ease);
}
.tt-date-module .date-item:nth-child(2)::before { background: var(--app-primary); color: #fff; }
.tt-date-module .date-item:nth-child(3)::before { background: var(--app-accent); color: #fff; }
.tt-date-module .date-item:nth-child(4)::before { background: #ff9800; color: #fff; }

/* ==========================================
   15. SECTION HEADERS / 模块标题
   ========================================== */
.tt-feed-header {
    background: transparent !important;
    padding: 14px var(--app-space) 10px var(--app-space) !important;
    margin: 0 !important; border: none !important;
    font-size: 17px !important; font-weight: 800 !important;
    color: var(--app-text) !important; letter-spacing: 0.3px;
    border-radius: 0 !important;
    display: flex; align-items: center;
}
.tt-feed-header::before {
    content: '' !important;
    display: inline-block; width: 4px; height: 18px;
    background: linear-gradient(to bottom, var(--app-primary), #ff6b6b);
    border-radius: 2px;
    margin-right: 8px; vertical-align: middle; margin-top: -1px;
    animation: fadeInUp var(--app-duration-slow) var(--app-ease) both;
}

/* ==========================================
   16. FEED ITEMS / 信息流卡片
   ========================================== */
.tt-feed-item {
    display: flex !important; gap: 14px !important;
    background: var(--app-card) !important;
    margin: 0 var(--app-space) 0 var(--app-space) !important;
    padding: 14px !important;
    border: none !important;
    border-radius: 0 !important;
    text-decoration: none !important; color: inherit !important;
    position: relative;
    transition: background var(--app-duration-fast) var(--app-ease),
                transform var(--app-duration-fast) var(--app-ease);
}
.tt-feed-item:first-of-type {
    border-radius: var(--app-radius) var(--app-radius) 0 0 !important;
}
.tt-feed-item:last-of-type {
    border-radius: 0 0 var(--app-radius) var(--app-radius) !important;
    margin-bottom: 0 !important;
}
.tt-feed-item:only-of-type { border-radius: var(--app-radius) !important; }
.tt-feed-item::after {
    content: ''; position: absolute; bottom: 0; left: 14px; right: 14px;
    height: 1px; background: var(--app-divider);
}
.tt-feed-item:last-of-type::after { display: none; }
.tt-feed-item:active {
    background: #fafafa !important;
    transform: scale(0.985);
}

.tt-feed-item .feed-left { flex: 1; min-width: 0; }
.tt-feed-item .feed-title {
    font-size: 16px !important; font-weight: 600 !important;
    line-height: 1.5 !important; color: var(--app-text) !important;
    margin-bottom: 8px !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; letter-spacing: 0.2px;
    transition: color var(--app-duration-fast) var(--app-ease);
}
.tt-feed-item:active .feed-title { color: var(--app-primary) !important; }
.tt-feed-item .feed-desc {
    font-size: 13px !important; color: var(--app-text-tertiary) !important;
    line-height: 1.5 !important; margin-bottom: 8px !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.tt-feed-item .feed-meta {
    font-size: 12px !important; color: var(--app-text-muted) !important;
    display: flex; align-items: center; gap: 10px !important;
    flex-wrap: wrap;
}
.tt-feed-item .feed-meta .source {
    color: var(--app-primary) !important; font-weight: 500;
}
.tt-feed-item .feed-img {
    width: 112px !important; height: 78px !important;
    border-radius: 6px !important; object-fit: cover; flex-shrink: 0;
    background: #f0f0f0;
    transition: transform var(--app-duration) var(--app-ease);
}
.tt-feed-item:active .feed-img {
    transform: scale(0.97);
}

/* 入场交错的 feed 动画 */
.tt-feed-item {
    animation: fadeInUp var(--app-duration-slow) var(--app-ease) both;
}
.tt-feed-item:nth-child(2) { animation-delay: 0.05s; }
.tt-feed-item:nth-child(3) { animation-delay: 0.10s; }
.tt-feed-item:nth-child(4) { animation-delay: 0.15s; }
.tt-feed-item:nth-child(5) { animation-delay: 0.20s; }
.tt-feed-item:nth-child(6) { animation-delay: 0.25s; }
.tt-feed-item:nth-child(7) { animation-delay: 0.30s; }
.tt-feed-item:nth-child(8) { animation-delay: 0.35s; }
.tt-feed-item:nth-child(9) { animation-delay: 0.40s; }
.tt-feed-item:nth-child(10){ animation-delay: 0.45s; }

/* ==========================================
   17. SPECIAL / 专题卡片
   ========================================== */
.tt-main div[style*="display:flex;gap:12px"],
.tt-left > div[style*="display:flex"] {
    display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important; padding: 4px var(--app-space) 4px var(--app-space) !important;
    background: transparent !important; border-radius: 0 !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
}
.tt-main div[style*="display:flex;gap:12px"] > a,
.tt-left > div[style*="display:flex"] > a {
    flex: none !important; width: 100% !important;
    background: var(--app-card); border-radius: var(--app-radius) !important;
    overflow: hidden; text-decoration: none; display: block;
    box-shadow: var(--app-shadow-sm);
    transition: transform var(--app-duration-fast) var(--app-ease);
}
.tt-main div[style*="display:flex;gap:12px"] > a:active,
.tt-left > div[style*="display:flex"] > a:active {
    transform: scale(0.97);
}
.tt-main > div[style*="display:flex;gap:12px"] > a > div:first-child {
    height: 120px !important; border-radius: 0 !important;
    overflow: hidden;
}
.tt-main > div[style*="display:flex;gap:12px"] > a > div:first-child img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--app-duration) var(--app-ease);
}
.tt-main > div[style*="display:flex;gap:12px"] > a:active > div:first-child img {
    transform: scale(1.05);
}
.tt-main > div[style*="display:flex;gap:12px"] > a > div:last-child {
    padding: 10px var(--app-space) var(--app-space) var(--app-space) !important;
    font-size: 13px !important; font-weight: 600 !important;
    color: #333 !important; line-height: 1.4 !important;
}

/* ==========================================
   18. SPECIAL DETAIL / 专题详情
   ========================================== */
.tt-main .tt-left > div[style*="background:#fff"] {
    background: var(--app-card) !important;
    border-radius: var(--app-radius) !important;
    padding: var(--app-space-lg) var(--app-space-md) !important;
    margin: 0 var(--app-space) var(--app-space) var(--app-space) !important;
    box-shadow: var(--app-shadow-sm);
    animation: fadeInUp var(--app-duration-slow) var(--app-ease) both;
}
.tt-main .tt-left > div[style*="background:#fff"] h1 {
    font-size: 20px !important; font-weight: 800 !important;
    margin-bottom: 6px !important; color: var(--app-text) !important;
}
.tt-main .tt-left > div[style*="background:#fff"] p {
    font-size: 13px !important; color: var(--app-text-tertiary) !important; margin: 0 !important;
}

/* ==========================================
   19. ARTICLE DETAIL / 文章详情
   ========================================== */
.tt-article-wrap {
    display: flex !important; flex-direction: column !important;
    gap: 0 !important; padding: 0 !important;
    max-width: 100% !important; margin: 0 !important;
}
.tt-article-left { display: none !important; }
.tt-article-right { display: none !important; }
.tt-article-main {
    flex: 1 !important; max-width: 100% !important;
    background: var(--app-card) !important;
    border-radius: 0 !important; padding: 18px var(--app-space-md) var(--app-space-xl) var(--app-space-md) !important;
    margin: 0 !important; box-shadow: none !important;
    animation: fadeIn var(--app-duration-slow) var(--app-ease) both;
}
.tt-article-main h1 {
    font-size: 22px !important; font-weight: 800 !important;
    line-height: 1.45 !important; color: var(--app-text) !important;
    margin-bottom: var(--app-space) !important; letter-spacing: 0.3px;
}
.tt-article-main .meta {
    display: flex !important; flex-wrap: wrap !important;
    gap: 10px !important; align-items: center !important;
    font-size: 12px !important; color: var(--app-text-muted) !important;
    margin-bottom: 18px !important; padding-bottom: 14px !important;
    border-bottom: 1px solid var(--app-border) !important;
}
.tt-article-main .meta span:first-child {
    color: var(--app-primary) !important; font-weight: 600;
}
.tt-article-main .meta .follow-btn {
    margin-left: auto !important;
    padding: 6px 18px !important; background: var(--app-primary) !important;
    color: #fff !important; border-radius: var(--app-radius-full) !important;
    font-size: 12px !important; font-weight: 600 !important;
    text-decoration: none !important; border: none;
    transition: all var(--app-duration-fast) var(--app-ease);
}
.tt-article-main .meta .follow-btn:active {
    transform: scale(0.95);
    opacity: 0.8;
}
.tt-article-main .meta .follow-btn.followed {
    background: #f0f0f0 !important; color: #999 !important;
}

/* 文章正文 */
.tt-article-main .body {
    font-size: 16px !important; line-height: 1.85 !important;
    color: #333 !important; word-break: break-word;
    letter-spacing: 0.2px;
}
.tt-article-main .body p { margin-bottom: var(--app-space-md) !important; }
.tt-article-main .body h2,
.tt-article-main .body h3 {
    font-size: 18px !important; font-weight: 700 !important;
    margin: var(--app-space-lg) 0 10px 0 !important; color: var(--app-text) !important;
}
.tt-article-main .body img {
    width: 100% !important; max-width: 100% !important;
    height: auto !important; border-radius: var(--app-radius-sm) !important;
    margin: 14px 0 !important; display: block;
}
.tt-article-main .body video { width: 100% !important; border-radius: var(--app-radius-sm); margin: 14px 0; }
.tt-article-main .body ul, .tt-article-main .body ol {
    padding-left: 20px !important; margin-bottom: var(--app-space-md) !important;
}
.tt-article-main .body li { margin-bottom: 6px !important; }
.tt-article-main .body pre {
    font-size: 13px !important; overflow-x: auto;
    padding: var(--app-space) !important; border-radius: var(--app-radius-sm) !important;
    background: #f8f8f8 !important; margin-bottom: var(--app-space-md) !important;
}
.tt-article-main .body blockquote {
    border-left: 3px solid var(--app-primary) !important;
    padding: 8px 14px !important; margin: 14px 0 !important;
    background: #fafafa !important; border-radius: 0 6px 6px 0 !important;
    color: #666 !important; font-size: 14px !important;
}
.tt-article-main .body table {
    width: 100% !important; border-collapse: collapse !important;
    margin: 14px 0 !important; font-size: 13px !important;
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tt-article-main .body th, .tt-article-main .body td {
    padding: 8px 10px !important; border: 1px solid var(--app-border) !important;
    text-align: left; min-width: 80px;
}
.tt-article-main .body th { background: #f8f8f8 !important; font-weight: 600 !important; }
.tt-article-main .body code {
    background: #f5f5f5 !important; padding: 2px 6px !important;
    border-radius: 3px !important; font-size: 0.9em !important;
    color: var(--app-primary) !important;
}
.tt-article-main .body a {
    color: var(--app-primary) !important;
    text-decoration: underline !important;
}
.tt-article-main > img[style*="width:100%"] {
    border-radius: var(--app-radius-sm) !important; margin-bottom: var(--app-space-md) !important;
}
.tt-article-main .body > *:first-child { margin-top: 0 !important; }
.tt-article-main .body > *:last-child { margin-bottom: 0 !important; }

/* 文章操作栏 */
.tt-article-main + div[style*="display:flex;gap:12px"] {
    margin: var(--app-space-md) 0 0 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border-top: 1px solid var(--app-border) !important;
    padding-top: var(--app-space-md) !important;
}

/* 文章底部操作按钮栏 */
.article-action-bar {
    position: sticky; bottom: 0;
    display: flex; align-items: center; justify-content: space-around;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 10px 0 calc(var(--safe-bottom) + 4px);
    border-top: 0.5px solid rgba(0,0,0,0.08);
    z-index: 50;
}
.article-action-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: none; padding: 4px 16px;
    color: var(--app-text-tertiary); font-size: 11px; cursor: pointer;
    transition: all var(--app-duration-fast) var(--app-ease);
}
.article-action-btn .action-icon {
    font-size: 20px; line-height: 1;
    transition: transform var(--app-duration-fast) var(--app-ease);
}
.article-action-btn:active .action-icon {
    transform: scale(1.2);
}
.article-action-btn.liked {
    color: var(--app-primary);
}
.article-action-btn.liked .action-icon {
    animation: heartBeat 0.6s var(--app-ease);
}
.article-action-btn.collected {
    color: var(--app-gold);
}

/* ==========================================
   20. COMMENT SECTION / 评论区
   ========================================== */
.tt-comments {
    background: var(--app-card) !important;
    border-radius: var(--app-radius) !important;
    margin: var(--app-space) !important; padding: var(--app-space-md) !important;
    box-shadow: var(--app-shadow-sm);
    animation: fadeInUp var(--app-duration-slow) var(--app-ease) both;
}
.tt-article-main .tt-comments {
    background: transparent !important; border-radius: 0 !important;
    margin: 0 !important; padding: var(--app-space-lg) 0 0 0 !important;
    box-shadow: none !important;
}
.tt-comments .cmt-hd {
    font-size: 17px !important; font-weight: 800 !important;
    color: var(--app-text) !important; margin-bottom: 14px !important;
    padding-bottom: var(--app-space) !important;
    border-bottom: 1px solid var(--app-border) !important;
}

.tt-comment-item {
    display: flex !important; gap: var(--app-space) !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid #f8f8f8 !important;
    transition: background var(--app-duration-fast) var(--app-ease);
}
.tt-comment-item:last-child { border-bottom: none !important; }
.tt-comment-item .cmt-av {
    width: 36px !important; height: 36px !important; min-width: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #f87171, #dc2626) !important;
    color: #fff !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    font-weight: 700 !important; font-size: 13px !important;
    flex-shrink: 0;
}
.tt-comment-item .cmt-body { flex: 1; min-width: 0; }
.tt-comment-item .cmt-name {
    font-size: 13px !important; font-weight: 700 !important;
    color: #333 !important; margin-bottom: 4px !important;
}
.tt-comment-item .cmt-text {
    font-size: 15px !important; color: #555 !important;
    line-height: 1.6 !important;
}
.tt-comment-item .cmt-meta {
    font-size: 12px !important; color: #ccc !important;
    margin-top: 6px !important; display: flex; gap: 14px;
    align-items: center;
}

/* 评论区表单 */
.tt-article-main > div[style*="margin-top:16px;display:flex"] {
    background: var(--app-card) !important;
    padding: 14px !important; margin: var(--app-space) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow-sm);
}
.tt-article-main div[style*="margin-top:16px;display:flex"] {
    background: transparent !important; padding: 14px 0 !important;
    margin: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; border-top: 1px solid var(--app-border) !important;
}
.tt-article-main > div[style*="margin-top:16px;display:flex"] textarea {
    font-size: 14px !important; border-radius: var(--app-radius-xl) !important;
    border: 1px solid #e8e8e8 !important; background: #f8f8f8 !important;
    padding: 10px var(--app-space-md) !important; resize: none !important;
    min-height: 40px !important; outline: none !important;
    transition: border-color var(--app-duration-fast) var(--app-ease);
}
.tt-article-main > div[style*="margin-top:16px;display:flex"] textarea:focus {
    border-color: var(--app-primary) !important;
    background: #fff !important;
}
.tt-article-main > div[style*="margin-top:16px;display:flex"] button {
    padding: 0 22px !important; background: var(--app-primary) !important;
    color: #fff !important; border: none !important;
    border-radius: var(--app-radius-xl) !important; font-size: 14px !important;
    font-weight: 600 !important; cursor: pointer;
    white-space: nowrap;
    transition: all var(--app-duration-fast) var(--app-ease);
}
.tt-article-main > div[style*="margin-top:16px;display:flex"] button:active {
    transform: scale(0.95);
    background: var(--app-primary-dark) !important;
}

/* ==========================================
   21. SIDEBAR ON MOBILE / 侧栏移动端
   ========================================== */
.tt-sb-login {
    background: var(--app-card) !important;
    border-radius: var(--app-radius) !important;
    padding: 18px !important; margin: 0 var(--app-space) 10px var(--app-space) !important;
    text-align: center !important; box-shadow: var(--app-shadow-sm);
    animation: fadeInUp var(--app-duration-slow) var(--app-ease) both;
}
.tt-sb-login .msg { font-size: 14px !important; color: #666 !important; margin-bottom: 10px !important; }
.tt-sb-login .btn {
    display: inline-block !important; padding: 8px 32px !important;
    background: var(--app-primary) !important; color: #fff !important;
    border-radius: var(--app-radius-xl) !important; font-size: 14px !important;
    font-weight: 600 !important; text-decoration: none !important;
    transition: all var(--app-duration-fast) var(--app-ease);
}
.tt-sb-login .btn:active {
    transform: scale(0.95);
    background: var(--app-primary-dark) !important;
}

.tt-sb-hot {
    background: var(--app-card) !important;
    border-radius: var(--app-radius) !important;
    margin: 0 var(--app-space) !important; padding: 0 !important;
    box-shadow: var(--app-shadow-sm); overflow: hidden;
    animation: fadeInUp var(--app-duration-slow) var(--app-ease) both;
}
.tt-sb-hot .hot-hd {
    padding: 14px var(--app-space-md) 10px var(--app-space-md) !important;
    border-bottom: 1px solid var(--app-border) !important;
    display: flex; justify-content: space-between; align-items: center;
}
.tt-sb-hot .hot-hd .title { font-size: 16px !important; font-weight: 800 !important; }
.tt-sb-hot .hot-hd .refresh {
    font-size: 12px !important; color: var(--app-text-muted) !important;
    text-decoration: none;
    transition: transform var(--app-duration) var(--app-ease);
}
.tt-sb-hot .hot-hd .refresh:active { transform: rotate(180deg); }
.tt-sb-hot ol { padding: 0 !important; margin: 0 !important; list-style: none !important; }
.tt-sb-hot li {
    display: flex !important; align-items: flex-start !important;
    gap: 10px !important; padding: var(--app-space) var(--app-space-md) !important;
    border-bottom: 1px solid #f8f8f8 !important;
    transition: background var(--app-duration-fast) var(--app-ease);
}
.tt-sb-hot li:active { background: #fafafa; }
.tt-sb-hot li:last-child { border-bottom: none !important; }
.tt-sb-hot .rank {
    width: 20px !important; height: 20px !important; min-width: 20px !important;
    border-radius: 4px !important; background: #eee !important;
    color: #999 !important; font-size: 11px !important; font-weight: 800 !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; margin-top: 2px;
}
.tt-sb-hot li:nth-child(1) .rank,
.tt-sb-hot li:nth-child(2) .rank,
.tt-sb-hot li:nth-child(3) .rank {
    background: var(--app-primary) !important; color: #fff !important;
}
.tt-sb-hot .link {
    font-size: 14px !important; line-height: 1.5 !important;
    color: #333 !important; text-decoration: none !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--app-duration-fast) var(--app-ease);
}
.tt-sb-hot .link:active { color: var(--app-primary) !important; }

/* ==========================================
   22. TAGS / 标签
   ========================================== */
.tt-right > div[style*="background:#fff"] {
    background: var(--app-card) !important;
    border-radius: var(--app-radius) !important;
    padding: 14px var(--app-space-md) !important;
    margin: 0 var(--app-space) 10px var(--app-space) !important;
    box-shadow: var(--app-shadow-sm);
}
.tt-right > div[style*="background:#fff"] a {
    padding: 5px var(--app-space) !important; border-radius: 14px !important;
    background: #f8f8f8 !important; color: #666 !important;
    font-size: 12px !important; text-decoration: none !important;
    transition: all var(--app-duration-fast) var(--app-ease);
    display: inline-block; margin: 2px;
}
.tt-right > div[style*="background:#fff"] a:active {
    background: var(--app-primary) !important; color: #fff !important;
    transform: scale(0.95);
}



/* ==========================================
   26. MEMBER CENTER / 会员中心
   ========================================== */
/* 认证徽章 */
.v-badge {
    font-size: 10px; font-weight: 600; color: #fff;
    padding: 1px 6px; border-radius: 8px;
    display: inline-flex; align-items: center; gap: 2px;
}
.v-badge.personal  { background: linear-gradient(90deg, #ff9800, #ff6b35); }
.v-badge.enterprise { background: linear-gradient(90deg, #1976d2, #42a5f5); }
.v-badge.admin      { background: linear-gradient(90deg, #1976d2, #42a5f5); }

/* 认证V标识（通用） */
.author-cert-v {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%; font-size: 10px;
    font-weight: 700; color: #fff; flex-shrink: 0;
    font-style: normal;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    animation: zoomIn var(--app-duration) var(--app-ease-bounce) both;
}
.author-cert-v.personal  { background: var(--app-cert-personal); }
.author-cert-v.enterprise { background: var(--app-cert-enterprise); }
.author-cert-v.admin      { background: var(--app-cert-enterprise); }

/* 个人主页头像区 */
.au-profile {
    background: #fff; padding: var(--app-space-lg) var(--app-space-md);
    display: flex; align-items: flex-start; gap: 14px;
}
.au-avatar {
    width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #e02424, #ff6b35);
    color: #fff; font-weight: 700; font-size: 30px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(224,36,36,.2);
    position: relative;
    transition: transform var(--app-duration-fast) var(--app-ease);
}
.au-avatar:active { transform: scale(0.95); }
.au-avatar.admin { background: linear-gradient(135deg, #1976d2, #42a5f5); }
.au-body { flex: 1; min-width: 0; }
.au-name {
    font-size: 20px; font-weight: 700; color: var(--app-text);
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.au-stats {
    display: flex; gap: 14px; margin-top: 8px;
    font-size: 13px; color: #999; flex-wrap: wrap;
}
.au-stats b {
    color: var(--app-text); font-weight: 700; font-size: 16px; margin-right: 3px;
}
.au-cert { margin-top: 6px; font-size: 12px; color: #555; font-weight: 600; }
.au-bio { margin-top: 4px; font-size: 13px; color: #666; line-height: 1.5; }
.au-tags { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.au-tags span {
    padding: 2px 8px; background: #f3f4f6; border-radius: 4px; font-size: 11px; color: #777;
}
.au-follow-btn {
    flex-shrink: 0; padding: 6px 20px; border-radius: var(--app-radius-full);
    font-size: 13px; font-weight: 600; border: none; cursor: pointer;
    background: var(--app-primary); color: #fff;
    box-shadow: 0 2px 6px rgba(224,36,36,.25); white-space: nowrap;
    transition: all var(--app-duration-fast) var(--app-ease);
}
.au-follow-btn:active { transform: scale(0.95); }
.au-follow-btn.followed { background: #f0f0f0; color: #999; box-shadow: none; }
.au-follow-btn.self { background: #f0f0f0; color: #999; box-shadow: none; pointer-events: none; }

/* 设置按钮 */
.au-settings-btn {
    flex-shrink: 0; padding: 8px var(--app-space-md);
    border-radius: var(--app-radius-full); font-size: 13px; font-weight: 600;
    border: 1px solid #e0e0e0; background: #fff; color: #555;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: all var(--app-duration-fast) var(--app-ease);
}
.au-settings-btn:hover { border-color: var(--app-primary); color: var(--app-primary); }

/* 设置面板 */
.me-settings-panel {
    background: #fff; border-radius: var(--app-radius-xs); margin-bottom: var(--app-space);
    overflow: hidden; box-shadow: var(--app-shadow-sm);
}
.me-settings-panel .me-section-hd {
    font-size: 15px; font-weight: 700; color: #333;
    padding: var(--app-space-md) var(--app-space-md) var(--app-space);
    border-bottom: 1px solid var(--app-divider);
}
.me-settings-panel .me-row {
    display: flex; align-items: center; gap: var(--app-space);
    padding: 14px var(--app-space-md);
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none; color: var(--app-text); font-size: 14px;
    cursor: pointer;
    transition: background var(--app-duration-fast) var(--app-ease);
}
.me-settings-panel .me-row:active { background: #fafafa; }
.me-settings-panel .me-row:last-child { border-bottom: none; }
.me-settings-panel .me-row .row-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.me-settings-panel .me-row .row-label { flex: 1; min-width: 0; }
.me-settings-panel .me-row .row-extra { color: #999; font-size: 12px; }
.me-settings-panel .me-row .row-arrow {
    color: #ccc; font-size: 14px;
    transition: transform var(--app-duration) var(--app-ease);
}
.me-settings-panel .me-row:active .row-arrow { transform: translateX(2px); }

/* 可展开子面板 */
.me-sub-panel {
    background: #fafbfc; border: 1px solid var(--app-divider);
    border-radius: 6px; margin: 0 var(--app-space-md) var(--app-space);
    padding: var(--app-space) 14px; display: none;
    animation: fadeInUp var(--app-duration) var(--app-ease) both;
}
.me-sub-panel.open { display: block; }
.me-sub-panel h6 { font-size: 13px; font-weight: 700; margin-bottom: 10px; color: #666; }

/* Tab切换 */
.follow-tabs {
    display: flex !important; background: #fff;
    border: 1px solid #e0e0e0; overflow: hidden;
    margin: var(--app-space) 0 0 0;
    border-radius: var(--app-radius-sm);
    position: relative;
}
.follow-tabs a {
    flex: 1; text-align: center; padding: 14px 0;
    font-size: 15px; text-decoration: none; color: var(--app-text-tertiary);
    position: relative; z-index: 1;
    transition: color var(--app-duration) var(--app-ease);
}
.follow-tabs a.active { color: var(--app-primary); font-weight: 600; }

/* Tab滑动指示器 */
.follow-tabs-indicator {
    position: absolute; bottom: 0; left: 0;
    height: 3px; border-radius: 3px 3px 0 0;
    background: var(--app-primary);
    transition: left var(--app-duration) var(--app-ease),
                width var(--app-duration) var(--app-ease);
}

/* ==========================================
   27. CREATOR CENTER / 创作者中心
   ========================================== */
.main-container { padding: var(--app-space-lg) 0; }
.main-container .container { padding: 0 var(--app-space) !important; }

/* 统计卡片 */
.stat-card {
    border: none; border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow-sm) !important;
    transition: transform var(--app-duration-fast) var(--app-ease),
                box-shadow var(--app-duration-fast) var(--app-ease);
    margin: 0 0 var(--app-space-sm) 0 !important;
}
.stat-card:active {
    transform: scale(0.97);
    box-shadow: var(--app-shadow) !important;
}
.stat-value {
    font-size: 1.6rem; font-weight: 700;
    transition: transform var(--app-duration-fast) var(--app-ease);
}
.stat-card:active .stat-value { transform: scale(1.05); }
.stat-icon {
    width: 44px; height: 44px; border-radius: var(--app-radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}

/* 快捷操作 */
.quick-action {
    display: flex; align-items: center; gap: var(--app-space);
    padding: 14px 18px; border-radius: var(--app-radius);
    background: #fff; border: 1px solid #e9ecef;
    text-decoration: none; color: #333;
    transition: all var(--app-duration-fast) var(--app-ease);
}
.quick-action:active {
    border-color: var(--app-primary);
    color: var(--app-primary);
    transform: scale(0.98);
}

/* ==========================================
   28. SEARCH / 搜索页
   ========================================== */
.search-input-wrap {
    display: flex; align-items: center; gap: 8px;
    padding: 8px var(--app-space); background: #fff;
}
.search-input-wrap input {
    flex: 1; height: 38px; border-radius: 19px;
    border: 1.5px solid transparent;
    background: #f5f5f5; padding: 0 var(--app-space-md);
    font-size: 14px; outline: none;
    transition: all var(--app-duration) var(--app-ease);
}
.search-input-wrap input:focus {
    background: #fff;
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(224,36,36,0.08);
}
.search-input-wrap .search-cancel {
    color: var(--app-text-tertiary); font-size: 14px;
    text-decoration: none; white-space: nowrap; padding: 4px;
    transition: color var(--app-duration-fast) var(--app-ease);
}

/* 热门搜索 */
.search-hot {
    background: #fff; border-radius: var(--app-radius);
    margin: var(--app-space); padding: var(--app-space-md);
    box-shadow: var(--app-shadow-sm);
}
.search-hot h4 { font-size: 15px; font-weight: 700; margin-bottom: var(--app-space); }
.search-hot .hot-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.search-hot .hot-tags a {
    padding: 4px var(--app-space); background: #f8f8f8;
    border-radius: var(--app-radius-full); font-size: 12px;
    color: #666; text-decoration: none;
    transition: all var(--app-duration-fast) var(--app-ease);
}
.search-hot .hot-tags a:active {
    background: var(--app-primary-light);
    color: var(--app-primary);
}

/* 搜索结果卡片 */
.search-result-item {
    display: flex; gap: 14px; padding: 14px;
    background: #fff; border-bottom: 1px solid var(--app-divider);
    text-decoration: none; color: inherit;
    transition: background var(--app-duration-fast) var(--app-ease);
}
.search-result-item:active { background: #fafafa; }

/* ==========================================
   29. FOLLOW / 关注页
   ========================================== */
.follow-empty {
    text-align: center; padding: 60px var(--app-space-lg);
    animation: fadeInUp var(--app-duration-slow) var(--app-ease) both;
}
.follow-empty .empty-icon {
    font-size: 48px; margin-bottom: var(--app-space-md);
    animation: bounce 2s ease infinite;
}
.follow-empty .empty-text {
    font-size: 15px; color: var(--app-text-tertiary); margin-bottom: var(--app-space-lg);
}
.follow-empty .empty-action {
    display: inline-block; padding: 10px 28px;
    background: var(--app-primary); color: #fff;
    border-radius: var(--app-radius-full); font-size: 14px;
    font-weight: 600; text-decoration: none;
    transition: all var(--app-duration-fast) var(--app-ease);
}
.follow-empty .empty-action:active {
    transform: scale(0.95);
    background: var(--app-primary-dark);
}

/* ==========================================
   30. LOGIN / REGISTER / 登录注册
   ========================================== */
.auth-page {
    min-height: calc(100vh - var(--bottom-nav-h) - var(--safe-bottom));
    display: flex; align-items: center; justify-content: center;
    padding: var(--app-space-lg);
}
.auth-card {
    width: 100%; max-width: 360px;
    background: #fff; border-radius: var(--app-radius-lg);
    padding: var(--app-space-2xl) var(--app-space-xl);
    box-shadow: var(--app-shadow-md);
    animation: zoomIn var(--app-duration-slow) var(--app-ease-bounce) both;
}
.auth-card .auth-logo {
    text-align: center; margin-bottom: var(--app-space-xl);
}
.auth-card .auth-logo span {
    font-size: 28px; font-weight: 800; color: var(--app-primary);
    letter-spacing: -1px;
}
.auth-card .form-group { margin-bottom: var(--app-space-md); }
.auth-card .form-group label {
    display: block; font-size: 13px; color: var(--app-text-secondary);
    margin-bottom: 6px; font-weight: 500;
}
.auth-card .form-group input {
    width: 100%; height: 44px; border-radius: var(--app-radius);
    border: 1.5px solid #e8e8e8; padding: 0 var(--app-space-md);
    font-size: 15px; outline: none;
    transition: border-color var(--app-duration-fast) var(--app-ease),
                box-shadow var(--app-duration-fast) var(--app-ease);
}
.auth-card .form-group input:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(224,36,36,0.08);
}
.auth-card .btn-submit {
    width: 100%; height: 44px; border-radius: var(--app-radius);
    background: var(--app-primary); color: #fff; border: none;
    font-size: 16px; font-weight: 600; cursor: pointer;
    margin-top: var(--app-space);
    transition: all var(--app-duration-fast) var(--app-ease);
}
.auth-card .btn-submit:active {
    transform: scale(0.97);
    background: var(--app-primary-dark);
}

/* ==========================================
   31. EMPTY STATE / 空状态
   ========================================== */
.tt-main .tt-left > div[style*="text-align:center;padding:60px"] {
    background: var(--app-card) !important;
    border-radius: var(--app-radius) !important;
    padding: 50px var(--app-space-lg) !important;
    margin: 0 var(--app-space) !important;
    box-shadow: var(--app-shadow-sm);
}

/* ==========================================
   32. BUTTONS & FORMS / 按钮和表单
   ========================================== */
.btn:not(.btn-sm):not(.btn-link) {
    display: block !important; width: calc(100% - 24px) !important;
    margin: 0 var(--app-space) 8px var(--app-space) !important;
    padding: var(--app-space) !important; font-size: 15px !important;
    border-radius: var(--app-radius-xl) !important;
    transition: all var(--app-duration-fast) var(--app-ease) !important;
}
.btn:not(.btn-sm):not(.btn-link):active {
    transform: scale(0.97) !important;
}

input.form-control, textarea.form-control, select.form-control {
    font-size: 16px !important; padding: var(--app-space) var(--app-space-md) !important;
    border-radius: var(--app-radius) !important;
    border: 1.5px solid #e8e8e8 !important;
    transition: border-color var(--app-duration-fast) var(--app-ease),
                box-shadow var(--app-duration-fast) var(--app-ease) !important;
}
input.form-control:focus, textarea.form-control:focus {
    border-color: var(--app-primary) !important;
    box-shadow: 0 0 0 3px rgba(224,36,36,0.08) !important;
}

/* ==========================================
   33. LOADING SPINNER / 加载动画
   ========================================== */
.app-loading {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 40px 0; gap: var(--app-space);
}
.app-spinner {
    width: 28px; height: 28px; border: 3px solid #e0e0e0;
    border-top-color: var(--app-primary); border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.app-loading-text { font-size: 13px; color: var(--app-text-muted); }

/* 加载更多 */
.load-more {
    display: flex; justify-content: center; padding: var(--app-space-md);
}
.load-more-btn {
    padding: 10px 32px; background: #f5f5f5; border: none;
    border-radius: var(--app-radius-xl); font-size: 14px;
    color: var(--app-text-secondary); cursor: pointer;
    transition: all var(--app-duration-fast) var(--app-ease);
}
.load-more-btn:active { background: #e8e8e8; transform: scale(0.97); }
.load-more-btn.loading {
    pointer-events: none; opacity: 0.6;
}

/* ==========================================
   34. BACK BUTTON / 返回按钮
   ========================================== */
.app-back-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px var(--app-space); border-radius: var(--app-radius-full);
    background: #f5f5f5; color: #666; text-decoration: none;
    font-size: 13px; font-weight: 500;
    transition: all var(--app-duration-fast) var(--app-ease);
}
.app-back-btn:active {
    background: #e8e8e8;
    transform: translateX(-2px);
}
.app-back-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px var(--app-space); background: #fff;
    position: sticky; top: 0; z-index: 90;
    border-bottom: 1px solid var(--app-divider);
}
.app-back-header .back-title {
    font-size: 16px; font-weight: 700; color: var(--app-text);
}

/* ==========================================
   35. FLOATING ACTION BUTTON / 悬浮按钮
   ========================================== */
.app-fab {
    position: fixed; right: var(--app-space-md); bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--app-space-md));
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--app-primary); color: #fff;
    border: none; box-shadow: 0 4px 16px rgba(224,36,36,0.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; cursor: pointer; z-index: 50;
    transition: all var(--app-duration) var(--app-ease-bounce);
}
.app-fab:active {
    transform: scale(0.9) rotate(90deg);
}
.app-fab.scrolled-down {
    transform: scale(0) translateY(20px);
    opacity: 0;
}

/* ==========================================
   36. IMAGE VIEWER / 图片查看器
   ========================================== */
.app-img-viewer {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.95);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn var(--app-duration) var(--app-ease) both;
}
.app-img-viewer img {
    max-width: 100%; max-height: 90vh;
    object-fit: contain;
    animation: zoomIn var(--app-duration) var(--app-ease-bounce) both;
}
.app-img-viewer .close-btn {
    position: absolute; top: var(--app-space-md); right: var(--app-space-md);
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.15); color: #fff;
    border: none; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

/* ==========================================
   37. MISC / 其他
   ========================================== */
/* 隐藏元素 */
.footer-fixed-bar { display: none !important; }
.tt-sb-download { display: none !important; }
.tt-right > div[style*="color:#999"] { display: none !important; }

/* 卡片覆盖 */
.card {
    border-radius: var(--app-radius) !important; border: none !important;
    box-shadow: var(--app-shadow-sm) !important;
    margin: 0 var(--app-space) 10px var(--app-space) !important;
    transition: transform var(--app-duration-fast) var(--app-ease);
}
.card:active { transform: scale(0.985); }
.card-body { padding: var(--app-space-md) !important; }

/* 错误页 */
.error-container { padding: 40px var(--app-space-lg) !important; }
.error-code { font-size: 5rem !important; }
.error-title { font-size: 1.3rem !important; }

/* Bootstrap 中和 */
a { color: inherit; text-decoration: none; }
a:hover { color: var(--app-primary); }
img { max-width: 100%; height: auto; vertical-align: middle; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; line-height: 1.35; }
p { margin-top: 0; }
ul, ol { padding-left: 20px; }
small, .small { font-size: inherit; }
code, kbd, pre, samp { font-family: inherit; font-size: inherit; }
label { display: inline-block; }

.row {
    --bs-gutter-x: 0 !important; --bs-gutter-y: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
}
.row > * { padding-left: 0 !important; padding-right: 0 !important; }
.col, [class*="col-"] { padding: 0 !important; }
img, video, iframe, pre, table { max-width: 100% !important; }

/* 间距紧凑 */
.tt-sb-login { margin-bottom: 8px !important; }
.tt-sb-hot { margin-bottom: 8px !important; }
.tt-sb-download { margin-bottom: 8px !important; }
.tt-right > div[style*="background:#fff"] { margin-bottom: 8px !important; }

} /* end @media (max-width: 768px) */

/* ==========================================
   38. DESKTOP RESET / PC端重置
   ========================================== */
@media (min-width: 769px) {
    .app-tab-bar, .app-status-bar, .app-mobile-only, .m-top,
    .app-toast-container, .app-modal-overlay, .app-sheet-overlay,
    .app-img-viewer, .app-fab, .app-back-header,
    .creator-popup-overlay, .creator-popup-menu,
    .article-action-bar, .ptr-indicator { display: none !important; }
    .footer-fixed-bar { display: none !important; }
}