/* === 强制手机深色模式不改变主题 === */
:root {
    color-scheme: light only !important;
    forced-colors: none !important;
}
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light only !important;
    }
    html, body, * {
        color-scheme: light only !important;
    }
}
html {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* 阻止浏览器强制反转颜色 */
html, body {
    -webkit-filter: none !important;
    filter: none !important;
}
/* === 强制主题结束 === */

/* ========== 移动端全局适配 ========== */
/* 禁止横向滚动条 */
html, body {
    /* overflow-x: hidden !important; */ /* 移除：影响PC端滚动 */
    max-width: 100% !important;
    width: 100% !important;
}
/* 触摸优化 + 禁止长按菜单/选中 */
body {
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
/* 允许输入框选中文字 */
input, textarea {
    -webkit-user-select: text;
    user-select: text;
}
/* iOS安全区域适配 */
body {
    
}
/* ========== 移动端适配结束 ========== */



.video-meta {
    font-size: 11px;
    color: #6b4d5c; font-weight: 500;
    margin-top: -2px;
}

.video-meta .meta-cat {
    color: #ff85a8;
    margin-right: 6px;
}

.video-meta .meta-cat {
    color: #ff85a8;
    margin-right: 6px;
}
.video-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #6b4d5c; font-weight: 500;
    background: #ffc8d9;
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.4;
}
.video-meta-tag .tag-icon {
    font-size: 10px;
}

/* ========== 全局重置与基础设置 ========== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

*:focus { outline: none; }

html {
    font-size: clamp(12px, 2.667vw, 16px);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', Arial, sans-serif;
    font-size: 0.875rem;
    color: #42303b;
    background: #ffe0ea;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* iOS Safari 禁止弹性滚动回弹留白 */
html, body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* ========== 主容器 ========== */
.mobile-body {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    height: calc(var(--vh,1vh)*100);overflow:hidden;
    background: #ffe0ea;
    position: relative;
    padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    /* overflow-x: hidden; */ /* 移除：影响iOS sticky */
}

/* internal scroll container */
#pageScroll{
    position:absolute;top:0;left:0;right:0;bottom:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
}
body.community-active #pageScroll{overflow:hidden!important;}

/* ========== 顶部导航 ========== */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(clamp(52px, 8vw, 64px) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    background: #fff0f4;
    z-index: 100;
    -webkit-box-shadow: 0 2px 8px rgba(155,110,133,0.09);
    box-shadow: 0 2px 8px rgba(155,110,133,0.09);
    border-bottom: 1px solid #ffc8d9;
}

.header-content {
    max-width: 750px;
    margin: 0 auto;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 0.75rem;
    gap: 0.75rem;
}

.logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.375rem;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 100%;
}

.logo-text {
    color: #2b2b2b;
    font-size: clamp(20px, 4.5vw, 26px);
    font-weight: bold;
    line-height: 1;
}

.search-box {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: clamp(40px, 6.5vw, 50px);
    background: #ffc8d9;
    border-radius: 999px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 0.75rem;
    gap: 0.5rem;
    min-width: 0;
}

.search-input {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: clamp(13px, 3.2vw, 15px);
    color: #000;
    line-height: 1.4;
    width: 100%;
    min-width: 0;
}

.search-input:focus {
    border: 2px solid #000 !important;
    border-radius: 999px;
}

.search-input::placeholder {
    color: rgba(0,0,0,0.35);
}

/* ========== 主内容区 ========== */
.app-main {
    padding-top: calc(clamp(110px, 18vw, 128px) + env(safe-area-inset-top));
}

/* ========== 分类导航 ========== */
.category-nav {
    position: fixed;
    top: calc(clamp(52px, 8vw, 64px) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    background: #fff0f4;
    padding: 0.625rem 0;
    border-bottom: 1px solid #ffc8d9;
    z-index: 99;
}

.category-scroll {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.625rem;
    padding: 0 0.75rem;
    overflow-x: auto;
    white-space: nowrap;
    height: clamp(40px, 6.5vw, 50px);
    max-width: 750px;
    margin: 0 auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.category-scroll::-webkit-scrollbar { display: none; }

.category-item {
    display: inline-block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 0.375rem 0.875rem;
    font-size: clamp(13px, 3.2vw, 15px);
    color: #5a3d4d;
    font-weight: 500;
    background: #ffc8d9;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.4;
    height: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.category-item.active {
    color: #2b2b2b;
    background: #ff6b8a;
    font-weight: 500;
    box-shadow: inset 0 -2px 0 #2b2b2b;
}

/* ========== Banner区 ========== */
.banner-section {
    padding: 0.75rem;
    background: #fff0f4;
}

.banner-container {
    position: relative;
    width: 100%;
    padding-top: 40%;
    border-radius: 0.625rem;
    overflow: hidden;
    border: 2px solid #000;
    background: #ffc8d9;
}

.banner-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}

.banner-item.active { opacity: 1; }

.banner-placeholder {
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right bottom, from(#ffd6e5), to(#fff0f4));
    background: linear-gradient(135deg, #ffd6e5 0%, #2b2b2b 100%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.banner-title {
    color: #2b2b2b;
    font-size: clamp(16px, 4vw, 20px);
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(155,110,133,0.09);
}

.banner-dots {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0.375rem;
}

.dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.dot.active {
    width: 1rem;
    border-radius: 0.1875rem;
    background: #2b2b2b;
}

/* ========== 公告区 ========== */
.notice-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0.25rem 0.75rem;
    padding: 0.25rem 0.75rem;
    background: #fff0f4;
    border: 1px solid #ffc8d9;
    border-radius: 0.625rem;
    box-shadow: 0 2px 8px rgba(155,110,133,0.10);
    gap: 0.5rem;
    min-height: clamp(36px, 5.5vw, 44px);
}

.notice-icon {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    font-size: clamp(14px, 3vw, 16px);
}

.notice-marquee {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 1.25rem;
    min-width: 0;
}

.notice-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-animation: marquee 25s linear infinite;
    animation: marquee 25s linear infinite;
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 0;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

.notice-item {
    font-size: clamp(13px, 3vw, 15px);
    color: #e63462; font-weight: 600;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-right: 2.5rem;
    line-height: 1.25rem;
}

@-webkit-keyframes marquee {
    0% { -webkit-transform: translateX(0); transform: translateX(0); }
    100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@keyframes marquee {
    0% { -webkit-transform: translateX(0); transform: translateX(0); }
    100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

/* ========== 子分类区 ========== */
.sub-category-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: #fff0f4;
    padding: 0.75rem 0;
    overflow: visible;
    margin-top: 0.5rem;
    position: -webkit-sticky;
    position: sticky;
    top: calc(clamp(92px, 14vw, 110px) + env(safe-area-inset-top));
    z-index: 98;
    border-bottom: 1px solid #ffc8d9;
}

.sub-category-section.sub-fixed {
    position: fixed;
    top: calc(clamp(92px, 14vw, 110px) + env(safe-area-inset-top));
    left: 0;
    right: 0;
    margin-top: 0;
    -webkit-box-shadow: 0 2px 8px rgba(155,110,133,0.09);
    box-shadow: 0 2px 8px rgba(155,110,133,0.09);
    z-index: 99;
}

.sub-category-placeholder {
    display: none;
    margin-top: 0.5rem;
}

.sub-category-placeholder.show { display: block; }

.sub-category-scroll {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    overflow-x: auto;
    white-space: nowrap;
    height: clamp(28px, 4.2vw, 34px);
    -ms-overflow-style: none;
    scrollbar-width: none;
    touch-action: pan-x;
    max-width: 750px;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
}

.sub-category-scroll::-webkit-scrollbar { display: none; }

.sub-cat-item {
    display: inline-block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 14px 10px;
    font-size: clamp(11px, 2.6vw, 13px);
    color: #5a3d4d;
    font-weight: 500;
    background: #ffc8d9;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid transparent;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    line-height: 1.4;
    height: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.sub-cat-item.active {
    color: #2b2b2b;
    background: #ff6b8a;
    border-color: #ff6b8a;
    font-weight: 500;
}

.view-toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.25rem;
    padding-right: 0;
    padding-left: 0.5rem;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    background: #fff0f4 !important;
}

.hamburger-icon {
    display: inline-block;
    width: 18px;
    height: 2px;
    background: #745866 !important;
    position: relative;
    border-radius: 1px;
}
.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    background: #745866 !important;
    position: absolute;
    left: 0;
    border-radius: 1px;
}
.hamburger-icon::before { top: -6px; }
.hamburger-icon::after { top: 6px; }
.toggle-btn.active .hamburger-icon,
.toggle-btn.active .hamburger-icon::before,
.toggle-btn.active .hamburger-icon::after {
    background: #fff !important;
}

.toggle-btn {
    width: clamp(28px, 4.5vw, 36px);
    height: clamp(40px, 6.5vw, 50px);
    min-width: 28px;
    min-height: 28px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: clamp(14px, 3vw, 18px);
    color: #5a3d4d !important; font-weight: 500 !important;
    -webkit-text-fill-color: #5a3d4d !important; font-weight: 500 !important;
    background: #ffc8d9 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.toggle-btn.active {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: #ff85a8 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* ========== 视频列表区 ========== */
.video-grid-section {
    padding: 0.75rem;
    margin-top: 0.5rem;
    background: #fff0f4;
}

.video-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 0.375rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem;
}

.video-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0.625rem;
}

.video-list .video-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.video-list .video-cover {
    width: 100%;
    padding-top: 56.25%;
    height: auto;
}

.video-list .video-info {
    padding: 0.625rem 0.75rem;
}

.video-list .video-title {
    height: auto;
    -webkit-line-clamp: 2;
    font-size: clamp(13px, 3vw, 16px);
    margin-bottom: 0.375rem;
}

.video-card {
    background: #ffe0ea;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #000;
    -webkit-box-shadow: 0 2px 8px rgba(155,110,133,0.06);
    box-shadow: 0 2px 8px rgba(155,110,133,0.06);
}

.video-cover {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #2b2b2b;
    overflow: hidden;
}

.cover-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right bottom, from(#ffe0ea), color-stop(#ffe0ea), to(#ffe0ea));
    background: #ffe0ea;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.cover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 1;
}

.play-icon {
    position: relative;
    z-index: 2;
    font-size: clamp(24px, 5.5vw, 36px);
    color: #2b2b2b;
    opacity: 0.9;
    text-shadow: 0 2px 8px rgba(155,110,133,0.09);
}

.video-list .play-icon {
    font-size: clamp(28px, 6vw, 44px);
}

.duration {
    position: absolute;
    bottom: 0.375rem;
    right: 0.375rem;
    padding: 0.125rem 0.375rem;
    font-size: clamp(10px, 2.4vw, 12px);
    color: #2b2b2b;
    background: rgba(75,42,60,0.20);
    border-radius: 0.25rem;
    line-height: 1.4;
    z-index: 2;
}

.video-info {
    padding: 0.5rem 0.625rem;
}

.video-title {
    font-size: clamp(13px, 3.2vw, 15px);
    color: #fff;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

/* ========== 加载更多 ========== */
.load-more {
    text-align: center;
    padding: 0.625rem 0;
    font-size: clamp(13px, 3.2vw, 15px);
    color: #ff85a8;
}

/* ========== 底部导航 ========== */
.bottom-nav {
    bottom: env(safe-area-inset-bottom, 0px);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: clamp(50px, 7.5vw, 64px);
    background: #fff0f4;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-shadow: 0 -2px 10px rgba(155,110,133,0.09);
    box-shadow: 0 -2px 10px rgba(155,110,133,0.09);
    z-index: 200;
    border-top: 1px solid #ffc8d9;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav .nav-item {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.125rem;
    cursor: pointer;
    padding: 0.375rem 0;
    text-align: center;
    min-height: 44px;
}

.bottom-nav .nav-item.active .nav-text {
    color: #ff85a8;
    font-weight: 600;
}
.bottom-nav .nav-item.active .nav-icon {
    transform: scale(1.15);
    transition: transform .15s ease;
}
.bottom-nav .nav-item:active {
    background: rgba(255,133,168,0.1);
}

.nav-icon {
    font-size: clamp(18px, 4.2vw, 24px);
    line-height: 1;
    display: block;
    height: 1.5em;
    line-height: 1.5em;
}

.nav-text {
    font-size: clamp(10px, 2.4vw, 12px);
    color: #6b4d5c; font-weight: 500;
    line-height: 1.2;
    height: 1.2em;
    display: block;
}

/* ========== 视频播放弹窗 ========== */
.video-player-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
}

.video-player-modal.show { display: block; }

.player-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(75,42,60,0.30);
}

.player-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: clamp(40px, 8vw, 80px) auto 0;
    background: #ffe4ed;
    border-radius: 0.5rem;
    overflow: hidden;
}

.player-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #ffd6e2;
    color: #2b2b2b;
}

.player-title {
    font-size: clamp(14px, 3vw, 16px);
    font-weight: 500;
}

.player-close {
    cursor: pointer;
    font-size: clamp(18px, 4vw, 22px);
    color: #745866;
    min-width: 32px;
    min-height: 32px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.player-close:hover { color: #2b2b2b; }

.player-video-wrap {
    width: 100%;
    aspect-ratio: 16/9;
    background: #ffe4ed;
}

.player-video-wrap video {
    width: 100%;
    height: 100%;
    display: block;
}

.player-time {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #ffd6e2;
    color: #2b2b2b;
    font-size: clamp(13px, 3.2vw, 15px);
    font-family: 'Courier New', monospace;
}

.player-time-sep { color: #6b4d5c; font-weight: 500; }

/* ========== 平板及以上尺寸适配 ========== */
@media screen and (min-width: 768px) {
    .video-grid {
        -ms-grid-columns: 1fr 0.75rem 1fr 0.75rem 1fr;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
    
    .video-grid-section { padding: 1rem; }
    
    .banner-section { padding: 1rem; }
    
    .banner-container { padding-top: 35%; }
    
    .header-content,
    .category-scroll,
    .sub-category-scroll {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ========== 大屏适配 ========== */
@media screen and (min-width: 1024px) {
    .video-grid {
        -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr 1rem 1fr;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}

/* ========== 超小屏适配 ========== */
@media screen and (max-width: 320px) {
    .video-grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .video-title {
        height: auto;
        min-height: 2.5rem;
    }
}

@keyframes randomShake { 0% { transform: translateX(0); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } 100% { transform: translateX(0); } }
.sub-cat-item[data-sort='random'].shake { animation: randomShake 0.3s ease; }

/* ========== 抖音Tab ========== */
/* 全屏覆盖，z-index高于导航 */
.douyin-tab{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999!important;background:#000!important;overflow:hidden!important}
/* 视频区域=视口高度-底部导航高度 */
.douyin-container{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;overflow-y:scroll;overflow-x:hidden;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;scrollbar-width:none;transform:translateZ(0);will-change:scroll-position}
/* 滑动轨道，硬件加速 */
.douyin-track{position:relative;width:100%}
/* 每个视频slide占满容器 */
.douyin-slide{position:relative;width:100%;height:100vh;height:100dvh;height:100svh;overflow:hidden;box-sizing:border-box;scroll-snap-align:start;scroll-snap-stop:always;box-sizing:border-box;flex-shrink:0;transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform;contain:layout style paint}
.douyin-slide video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:#000}
.douyin-slide.dy-video-hidden video{display:none!important}
/* removed: was breaking spinner animation */
.dy-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:#000}
.dy-poster{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;object-fit:cover;pointer-events:none}

.douyin-sidebar{position:absolute;right:10px;bottom:40px;z-index:10;display:flex;flex-direction:column;align-items:center;gap:18px}
.sidebar-avatar{width:46px;height:46px;border-radius:50%;border:2px solid #2b2b2b;overflow:hidden;position:relative;cursor:pointer}
.sidebar-avatar img{width:100%;height:100%;object-fit:contain}
.sidebar-avatar .follow-badge{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:18px;height:18px;background:#ff5c8a;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#2b2b2b;font-weight:700;border:1.5px solid #ffe4ed}
.sidebar-btn{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;color:#2b2b2b}
.sidebar-btn .icon{font-size:28px;line-height:1;filter:drop-shadow(0 1px 2px rgba(155,110,133,0.09))}
.sidebar-btn .count{font-size:11px;color:rgba(255,255,255,.9);font-weight:500}
.sidebar-btn.liked .icon{color:#ff5c8a}

.douyin-info{position:absolute;left:12px;right:12px;bottom:20px;z-index:1001;color:#2b2b2b}
.douyin-info .author{font-size:16px;font-weight:700;margin-bottom:6px;text-shadow:0 1px 3px rgba(155,110,133,0.12)}
.douyin-info .title{font-size:13px;line-height:1.4;color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(155,110,133,0.09);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.douyin-info .music{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:rgba(255,255,255,.8)}
.douyin-info .music-icon{display:inline-block;animation:musicRotate 3s linear infinite}
@keyframes musicRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.douyin-play-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:8;font-size:52px;color:rgba(255,255,255,.85);opacity:0;transition:opacity .2s;pointer-events:none;background:rgba(155,110,133,0.11);border-radius:50%;width:80px;height:80px;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.douyin-play-indicator.show{opacity:1}

.douyin-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;display:none}
.douyin-loading .spinner{width:64px;height:64px;border:4px solid rgba(255,255,255,.25);border-top-color:#ff85a8;border-right-color:#ff85a8;border-radius:50%;animation:spin .8s linear infinite;box-shadow:0 0 30px rgba(255,133,168,0.4),inset 0 0 20px rgba(255,133,168,0.1);}
@keyframes spin{to{transform:rotate(360deg)}}

.heart-animation{position:absolute;z-index:15;pointer-events:none;font-size:80px;opacity:0;animation:heartBurst .8s ease-out forwards}
@keyframes heartBurst{0%{opacity:1;transform:scale(0) rotate(-15deg)}50%{opacity:1;transform:scale(1.2) rotate(15deg)}100%{opacity:0;transform:scale(1.5) rotate(-10deg) translateY(-40px)}}

/* 底部导航始终在最上层 */


.douyin-top-tabs{position:fixed;top:0;left:0;right:0;z-index:11;display:flex;justify-content:center;gap:32px;padding:14px 0;padding-top:calc(env(safe-area-inset-top,0px) + 14px);background:linear-gradient(180deg,rgba(75,42,60,0.20) 0%,rgba(155,110,133,0.09) 70%,transparent 100%);flex-shrink:0}
.douyin-top-tabs .dy-tab{color:rgba(255,255,255,.5);font-size:16px;font-weight:500;cursor:pointer;padding-bottom:6px;position:relative;transition:color .2s}
.douyin-top-tabs .dy-tab.active{color:#2b2b2b;font-weight:700}
.douyin-top-tabs .dy-tab.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:20px;height:2.5px;background:#2b2b2b;border-radius:2px}

/* 抖音进度条 */




/* 抖音视频加载指示器 */
.dy-video-loading{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(75,42,60,0.25);z-index:12;transition:opacity .3s;}
.dy-video-loading.hide{opacity:0;pointer-events:none;}
.dy-spin{width:64px;height:64px;border:4px solid rgba(255,255,255,0.25);border-top-color:#ff85a8;border-right-color:#ff85a8;border-radius:50%;animation:dy-spin .8s linear infinite;box-shadow:0 0 30px rgba(255,133,168,0.4),inset 0 0 20px rgba(255,133,168,0.1);}
.dy-load-text{color:#2b2b2b;font-size:18px;margin-top:16px;letter-spacing:2px;font-weight:300;text-shadow:0 0 10px rgba(255,133,168,0.5);}
@keyframes dy-spin{to{transform:rotate(360deg);}}

/* 禁止body/html在抖音模式下滚动 */
body.douyin-active .bottom-nav{z-index:1000!important}
body.douyin-active{overflow:hidden!important;overscroll-behavior:none;position:fixed;width:100%}
html.douyin-active{overflow:hidden!important;overscroll-behavior:none;touch-action:none}
.douyin-container::-webkit-scrollbar{display:none}

/* === Loading spinner overlay (抖音式转圈加载) === */
.dy-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:15;opacity:0;transition:opacity .2s}
.dy-loading-overlay.show{opacity:1}
.dy-spinner-wrap{position:relative;width:52px;height:52px;display:flex;align-items:center;justify-content:center}
.dy-spinner{position:absolute;top:0;left:0;width:52px;height:52px;border:3px solid rgba(255,255,255,0.15);border-top-color:#ff85a8;border-right-color:#ff85a8;border-radius:50%;animation:dySpin .8s linear infinite}
.dy-load-pct{position:relative;z-index:1;color:#2b2b2b;font-size:13px;font-weight:600;letter-spacing:0}
@keyframes dySpin{to{transform:rotate(360deg)}}
@-webkit-keyframes dySpin{to{-webkit-transform:rotate(360deg)}}

/* === Retry overlay (长时间加载不出) === */
.dy-retry-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:16;opacity:0;pointer-events:none;transition:opacity .3s;background:rgba(75,42,60,0.20)}
.dy-retry-overlay.show{opacity:1;pointer-events:auto}
.dy-retry-text{color:#2b2b2b;font-size:15px;padding:10px 24px;border:1px solid rgba(255,255,255,0.5);border-radius:20px;cursor:pointer;transition:background .2s}
.dy-retry-text:hover{background:rgba(255,255,255,0.1)}
.dy-retry-text:active{background:rgba(255,255,255,0.2)}

/* === 统一播放器控制栏 === */
.dy-controls{position:absolute;bottom:0;left:0;right:0;padding:8px 12px calc(env(safe-area-inset-bottom,0px) + 8px);background:linear-gradient(transparent,rgba(75,42,60,0.20));z-index:10;transition:opacity .3s;display:flex;flex-direction:column;gap:4px}
.dy-controls-hidden{opacity:0;pointer-events:none}
.dy-controls-row{display:flex;align-items:center;gap:8px}
.dy-ctrl-btn{color:#2b2b2b;font-size:18px;cursor:pointer;padding:4px 6px;-webkit-tap-highlight-color:transparent;flex-shrink:0;line-height:1;user-select:none}
.dy-ctrl-time{color:rgba(255,255,255,0.8);font-size:11px;flex-shrink:0;font-variant-numeric:tabular-nums;min-width:36px;text-align:center}
.dy-ctrl-progress{flex:1;height:20px;position:relative;cursor:pointer;display:flex;align-items:center;-webkit-tap-highlight-color:transparent}
.dy-ctrl-buffered{position:absolute;top:50%;left:0;height:3px;background:rgba(255,255,255,0.25);border-radius:1.5px;transform:translateY(-50%);width:0;pointer-events:none}
.dy-ctrl-played{position:absolute;top:50%;left:0;height:3px;background:#ff85a8;border-radius:1.5px;transform:translateY(-50%);width:0;pointer-events:none}
.dy-ctrl-handle{position:absolute;top:50%;left:0;width:14px;height:14px;background:#2b2b2b;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 4px rgba(155,110,133,0.09);pointer-events:none}

/* ========== TikTok风格: 底部细进度条 ========== */
.dy-bottom-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 1001;
}
.dy-bottom-progress-bar {
    height: 100%;
    width: 0;
    background: #ff85a8;
    transition: width 0.1s linear;
}

/* ========== 双击点赞动画 ========== */
.dy-heart-burst {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    font-size: 80px;
    color: #ff5c8a;
    animation: dyHeartFloat 1s ease-out forwards;
}
@keyframes dyHeartFloat {
    0% { transform: scale(0); opacity: 1; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1) translateY(-100px); opacity: 0; }
}

/* ========== 音乐文字跑马灯 ========== */
.douyin-info .music {
    overflow: hidden;
    white-space: nowrap;
    max-width: calc(100% - 30px);
}
.douyin-info .music-text {
    display: inline-block;
    white-space: nowrap;
    animation: musicMarquee 10s linear infinite;
    padding-right: 50px;
}
@keyframes musicMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Sort options scroll */
#sortOptionsScroll {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 0 0.75rem;
    scrollbar-width: none;
}
#sortOptionsScroll .sub-cat-item {
    font-size: clamp(11px, 2.6vw, 13px);
    padding: 14px 10px;
    white-space: nowrap;
    background: #ffe0ea;
    border-radius: 999px;
    transition: all 0.2s;
    border: 1px solid transparent;
}
#sortOptionsScroll .sub-cat-item.active {
    background: #ff6b8a;
    border-color: #ff6b8a;
    color: #2b2b2b;
    font-weight: 500;
}
#sortOptionsScroll::-webkit-scrollbar {
    display: none;
}

/* Main sub category section - two rows */
#mainSubCatSection {
    flex-direction: column !important;
    gap: 15px !important;
    align-items: stretch !important;
}

/* Inline player sort options */
#inlineSubCatSection .sub-cat-item {
    font-size: clamp(11px, 2.6vw, 13px);
    padding: 14px 10px;
    white-space: nowrap;
    background: #ffe0ea;
    border-radius: 999px;
    transition: all 0.2s;
    border: 1px solid transparent;
}
#inlineSubCatSection .sub-cat-item.active {
    background: #ff6b8a;
    border-color: #ff6b8a;
    color: #2b2b2b;
    font-weight: 500;
}


/* ========== 横竖屏切换适配 ========== */
@media screen and (orientation: landscape) {
    .app-header {
        height: calc(clamp(44px, 6vw, 56px) + env(safe-area-inset-top)) !important;
    }
    .app-main {
        padding-top: calc(clamp(60px, 9vw, 80px) + env(safe-area-inset-top)) !important;
    }
    .banner-container {
        padding-top: 20% !important;
    }
    .sub-category-section {
        top: calc(clamp(60px, 9vw, 80px) + env(safe-area-inset-top)) !important;
    }
}
/* 横竖屏切换自动重适配 */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .banner-section { display: none; }
    .category-nav { padding: 0.25rem 0; }
}
/* ========== 横竖屏适配结束 ========== */




/* ========== 社区Tab ========== */
.community-tab{
    display:flex;
    flex-direction:column;
    height:100%;
    overflow:hidden;
    background:#fff0f4;
}
/* 用户Tab */
.user-tab{
    position:relative;
    padding-bottom:calc(70px + env(safe-area-inset-bottom,0px));
    background:#f5f5f5;
}
body.user-active .app-header{display:none!important}
/* 主页active - body锁定，mobile-body作为内部滚动容器 */
body.home-active{overflow:hidden!important;height:calc(var(--vh,1vh)*100)}


/* 我的active - body锁定，mobile-body内部滚动 */
body.user-active{overflow:hidden!important;height:calc(var(--vh,1vh)*100)}


/* 社区active */
body.community-active .app-header{display:none!important}
body.community-active{overflow:hidden!important;height:calc(var(--vh,1vh)*100)}



/* 社区顶部 */
.comm-header{
    position:sticky;top:0;z-index:50;
    background:#fff0f4;
    padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 0;
    border-top:1px solid #ffc8d9;
}
.comm-card-wrap{
    display:flex;padding:0 0 3px;margin:0;
    background:transparent;border-radius:0;border:none;box-shadow:none;
}
.comm-card{
    flex:1;display:flex;flex-direction:column;align-items:center;
    gap:2px;padding:3px 4px;
    background:transparent;border-radius:10px;
    border:none;
    cursor:pointer;transition:all .2s;
    box-shadow:none;
}
.comm-card.active{
    background:linear-gradient(135deg,#ff9a9e,#fad0c4);
    box-shadow:0 2px 8px rgba(255,154,158,.3);
}
.comm-card-icon{font-size:18px;line-height:1;}
.comm-card-name{font-size:11px;color:#8a6d7d;font-weight:600;}
.comm-card.active .comm-card-name{color:#fff;}

/* 面板切换 */
.comm-feed-card{    margin:0 16px 0;    background:#fff;    border-radius:16px 16px 0 0;    border:1px solid #ffe0e8;    box-shadow:0 4px 12px rgba(255,154,158,.15);    overflow:hidden;    flex:1;    display:flex;    flex-direction:column;    min-height:0;}.comm-feed-card .comm-header{    padding:5px 12px !important;    flex-shrink:0;    }.comm-feed-card .comm-panel{    padding:12px 12px 8px;    margin:0;    overflow-y:auto;    -webkit-overflow-scrolling:touch;    background:transparent;    border:none;    box-shadow:none;    flex:1;    min-height:0;}
.comm-panel{padding:12px 12px 8px;margin:0 16px 8px;background:#fff;border-radius:14px;border:1px solid #ffe0e8;box-shadow:0 2px 8px rgba(255,154,158,.08);}

/* 热门话题横滑 */
.comm-hot-topics{
    display:flex;gap:8px;overflow-x:auto;
    padding:4px 0 12px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.comm-hot-topics::-webkit-scrollbar{display:none;}
.comm-topic-chip{
    flex-shrink:0;padding:6px 14px;
    font-size:13px;color:#5a3d4d;font-weight:500;
    background:#ffc8d9;border-radius:999px;
    cursor:pointer;transition:all .2s;
    border:1.5px solid transparent;
}
.comm-topic-chip.active{
    background:#ff85a8;color:#fff;
    border-color:#ff85a8;
}

/* 帖子卡片 */
.comm-post-card{
    background:#fff;border-radius:16px;
    padding:16px;margin-bottom:12px;
    box-shadow:0 2px 8px rgba(155,110,133,0.08);
}
.comm-post-header{
    display:flex;align-items:center;gap:10px;
    margin-bottom:10px;
}
.comm-avatar{
    width:40px;height:40px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;flex-shrink:0;
}
.comm-post-user{flex:1;min-width:0;}
.comm-post-name{
    font-size:14px;font-weight:600;color:#2b2b2b;
    display:flex;align-items:center;gap:6px;
}
.comm-post-time{font-size:12px;color:#8b6b7d;margin-top:2px;}
.comm-post-topic{
    font-size:12px;color:#ff85a8;font-weight:500;
    background:#fff0f4;padding:3px 10px;border-radius:12px;
    flex-shrink:0;
}

/* 等级徽章 */
.comm-level{
    font-size:10px;font-weight:700;
    padding:1px 5px;border-radius:4px;
    line-height:1.4;
}
.comm-level.lv1{background:#e8e8e8;color:#888;}
.comm-level.lv2{background:#d4edff;color:#4a90d9;}
.comm-level.lv3{background:#d5f5e3;color:#27ae60;}
.comm-level.lv4{background:#fff3cd;color:#f39c12;}
.comm-level.lv5{background:#ffd6e5;color:#e74c8b;}
.comm-level.lv6{background:#e8daef;color:#8e44ad;}
.comm-level.lv7{background:linear-gradient(135deg,#ffd700,#ff8c00);color:#fff;}

/* 帖子内容 */
.comm-post-content{
    font-size:13px;line-height:1.5;color:#2b2b2b;
    margin-bottom:8px;word-break:break-word;
}

/* 帖子图片 */
.comm-post-images{
    display:flex;gap:6px;margin-bottom:10px;
}
.comm-post-img{
    flex:1;height:90px;border-radius:8px;
    min-width:0;
}

/* 关联视频 */
.comm-post-video-ref{
    display:flex;gap:10px;align-items:center;
    background:#fff0f4;border-radius:12px;
    padding:10px;margin-bottom:10px;
    cursor:pointer;
}
.comm-video-thumb{
    width:60px;height:42px;border-radius:6px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;position:relative;
}
.comm-play-icon{
    color:rgba(255,255,255,.9);font-size:18px;
    text-shadow:0 1px 4px rgba(0,0,0,.3);
}
.comm-video-info{flex:1;min-width:0;}
.comm-video-title{
    font-size:13px;font-weight:600;color:#2b2b2b;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.comm-video-meta{font-size:11px;color:#8b6b7d;margin-top:3px;}

/* 操作栏 */
.comm-post-actions{
    display:flex;gap:20px;padding-top:8px;
    border-top:1px solid #fff0f4;
}
.comm-action{
    font-size:13px;color:#8b6b7d;cursor:pointer;
    transition:color .2s;
}
.comm-action:active{color:#ff85a8;}
.comm-action.liked{color:#ff85a8;}

/* 热门评论 */
.comm-hot-comment{
    margin-top:10px;padding:10px 12px;
    background:#fff8fa;border-radius:10px;
    border-left:3px solid #ffc8d9;
    font-size:13px;
    display:flex;align-items:center;gap:6px;
    flex-wrap:wrap;
}
.comm-hc-name{font-weight:600;color:#ff85a8;}
.comm-hc-text{flex:1;color:#5a3d4d;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.comm-hc-like{font-size:12px;color:#8b6b7d;flex-shrink:0;}

/* 话题广场 */
.comm-topic-banner{
    display:flex;align-items:center;gap:12px;
    background:linear-gradient(135deg,#ffc8d9,#ff85a8);
    border-radius:16px;padding:16px;
    margin-bottom:12px;
}
.comm-tb-icon{font-size:32px;}
.comm-tb-title{font-size:16px;font-weight:700;color:#fff;}
.comm-tb-desc{font-size:12px;color:rgba(255,255,255,.85);margin-top:3px;}

.comm-topic-list{display:flex;flex-direction:column;gap:8px;}
.comm-topic-card{
    display:flex;align-items:center;gap:12px;
    background:#fff;border-radius:12px;
    padding:14px;cursor:pointer;
    transition:transform .15s;
}
.comm-topic-card:active{transform:scale(0.98);}
.comm-tc-rank{
    width:28px;height:28px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:700;
    background:#fff0f4;color:#8b6b7d;flex-shrink:0;
}
.comm-tc-rank:first-child{background:#ffd6e5;color:#e74c8b;}
.comm-tc-info{flex:1;min-width:0;}
.comm-tc-name{font-size:15px;font-weight:600;color:#2b2b2b;}
.comm-tc-stats{font-size:12px;color:#8b6b7d;margin-top:3px;}
.comm-tc-hot{
    font-size:12px;padding:3px 8px;border-radius:8px;
    background:#fff0f4;color:#ff85a8;font-weight:500;
    flex-shrink:0;
}

/* 热评榜 */
.comm-hot-list{display:flex;flex-direction:column;gap:10px;}
.comm-hot-item{
    display:flex;align-items:flex-start;gap:12px;
    background:#fff;border-radius:14px;
    padding:14px;
}
.comm-hi-rank{
    width:32px;height:32px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:15px;font-weight:700;
    background:#fff0f4;color:#8b6b7d;flex-shrink:0;
    margin-top:2px;
}
.comm-hi-rank.top1{background:linear-gradient(135deg,#ffd700,#ffb347);color:#fff;}
.comm-hi-rank.top2{background:linear-gradient(135deg,#c0c0c0,#a8a8a8);color:#fff;}
.comm-hi-rank.top3{background:linear-gradient(135deg,#cd7f32,#b8860b);color:#fff;}
.comm-hi-body{flex:1;min-width:0;}
.comm-hi-content{
    font-size:14px;line-height:1.5;color:#2b2b2b;
    margin-bottom:8px;
}
.comm-hi-meta{
    display:flex;align-items:center;gap:8px;
    flex-wrap:wrap;
}
.comm-hi-user{font-size:12px;color:#ff85a8;font-weight:500;
    display:flex;align-items:center;gap:4px;}
.comm-hi-stats{font-size:12px;color:#8b6b7d;}

/* 发帖FAB */
.comm-fab{display:none;
    position:fixed;right:16px;
    bottom:calc(80px + env(safe-area-inset-bottom,0px));
    width:52px;height:52px;border-radius:50%;
    background:linear-gradient(135deg,#ff85a8,#ffc8d9);
    align-items:center;justify-content:center;
    font-size:24px;cursor:pointer;z-index:100;
    box-shadow:0 4px 16px rgba(255,133,168,0.4);
    transition:transform .2s;
}
.comm-fab:active{transform:scale(0.9);}



/* ===== 头像选择弹窗 ===== */
.avatar-edit-hint{
    position:absolute;bottom:0;right:-2px;
    background:#ff85a8;color:#fff;font-size:10px;
    padding:2px 6px;border-radius:8px;font-weight:600;
}
.avatar-picker-mask{
    position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,.45);z-index:9998;
}
.avatar-picker-panel{
    position:fixed;left:0;right:0;bottom:0;
    background:#fff;border-radius:20px 20px 0 0;
    padding:24px 16px calc(env(safe-area-inset-bottom,0px) + 20px);
    z-index:9999;
    box-shadow:0 -4px 20px rgba(0,0,0,.12);
    animation:slideUp .3s ease;
    overflow:hidden;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.avatar-picker-title{
    font-size:16px;font-weight:700;color:#2b2b2b;
    text-align:center;margin-bottom:16px;
}
.avatar-picker-grid{
    display:grid;grid-template-columns:repeat(5,1fr);
    gap:10px;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:0 4px;
    max-height:55vh;overflow-y:auto;
}

.avatar-picker-item{
    position:relative;border-radius:12px;overflow:hidden;
    cursor:pointer;transition:transform .2s,box-shadow .2s;
    border:2px solid #f0f0f0;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.avatar-picker-item:active{transform:scale(.93);box-shadow:0 1px 4px rgba(0,0,0,0.1)}
.avatar-picker-item:active{transform:scale(.95)}
.avatar-picker-item img{
    width:100%;aspect-ratio:1;object-fit:cover;display:block;
}
.avatar-picker-label{
    position:absolute;bottom:0;left:0;right:0;
    background:linear-gradient(transparent,rgba(0,0,0,.6));
    color:#fff;font-size:11px;text-align:center;
    padding:12px 0 4px;font-weight:600;
}
.avatar-picker-close{
    margin:16px auto 0;text-align:center;
    font-size:14px;color:#fff;font-weight:500;
    padding:10px 40px;cursor:pointer;
    background:linear-gradient(135deg,#ff6b9d,#ff8e53);
    border-radius:22px;width:fit-content;
    box-shadow:0 3px 10px rgba(255,107,157,0.3);
    transition:transform .15s;
}
.avatar-picker-close:active{transform:scale(.95)}

/* 长按快进/快退指示器 */
.dy-speed-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 20px;
    background: rgba(0,0,0,0.65);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 50;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.dy-speed-indicator[data-side="left"] {
    left: 15%;
}
.dy-speed-indicator[data-side="right"] {
    right: 15%;
}
.dy-speed-indicator.show {
    opacity: 1;
}
.dy-speed-icon {
    font-size: 22px;
    color: #fff;
    letter-spacing: 2px;
}
.dy-speed-text {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}


/* 社区作品预览画廊 */
.comm-gallery-mask{
    position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;
    background:rgba(0,0,0,.95);
    touch-action:none;user-select:none;-webkit-user-select:none;
    overflow:hidden;
}
.comm-gallery-close{
    position:absolute;top:12px;right:16px;z-index:10;
    width:36px;height:36px;background:rgba(255,255,255,.15);border-radius:50%;
    color:#fff;font-size:20px;text-align:center;line-height:36px;cursor:pointer;
}
.comm-gallery-counter{
    position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:10;
    color:rgba(255,255,255,.8);font-size:14px;
}
.comm-gallery-track{
    position:absolute;top:0;left:0;
    width:100%;height:100%;
    display:flex;flex-wrap:nowrap;
    transition:transform .3s ease;
}
.comm-gallery-slide{
    flex:0 0 100vw;width:100vw;height:100%;
    display:flex;align-items:center;justify-content:center;
    padding:60px 20px 80px 20px;box-sizing:border-box;
}
.comm-gallery-slide img,.comm-gallery-slide video{
    max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;
}
.comm-gallery-dots{
    position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:10;
    display:flex;gap:6px;
}
.comm-gallery-dot{
    width:8px;height:8px;border-radius:50%;
    background:rgba(255,255,255,.3);transition:background .2s;
}
.comm-gallery-dot.active{
    background:#fff;
}


/* iOS橡皮筋滚动修复 */
html,body{
    overscroll-behavior:none;
}
/* .comm-panel overflow handled by parent flex layout */