*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-stroke: 0.35px transparent;
}

html{
    overflow-y: scroll;
    /* 根元素背景兜底：修「弹窗/抽屉一开背景就变白」
       弹窗打开时 ScrollLock 把 body 设成 position: fixed，body 的渐变背景就
       不再传播到 canvas，而 html 自身没背景，于是露出浏览器默认的白色画布。
       根元素背景总会铺满整个 canvas，且不受自身高度影响（锁定后 html 高度会
       塌陷成 0），所以铺上同一套渐变即可。正常状态 body 渐变绘制在上层，观感
       不变；锁定后由 html 接住。移动端的另一份 A1b 已合并到此（本文件所有
       页面都加载），避免同一规则写两处造成漂移。 */
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

body{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    min-height: 100vh;
    padding: 20px;
    color: #e4e4e7;
}

/* 页面标题样式 */
.page-title-section{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    margin-bottom: 20px;
    overflow: hidden;
}

.page-title-container{
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
}

.title-icon{
    font-size: 28px;
    animation: iconFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(102, 126, 234, 0.5));
}

@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.title-content{
    display: flex;
    flex-direction: column;
}

.main-title{
    font-size: 1.5rem;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    letter-spacing: 0.03em;
    text-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
    position: relative;
}

.main-title::after{
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #667eea, #764ba2, transparent);
    border-radius: 2px;
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {

    0%,
    100% {
        opacity: 0.5;
        transform: scaleX(0.8);
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

.title-decoration{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
}

header{
    text-align: center;
    margin-bottom: 40px;
    color: #fff;
}

header p{
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.65;
    margin-bottom: 15px;
    letter-spacing: 0.01em;
    font-family: 'Courier New', Courier, monospace;
}

.header-actions{
    display: flex;
    justify-content: center;
    gap: 10px;
}

.search-overlay{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.search-overlay.show{
    display: flex;
    opacity: 1;
}

.search-form-popup{
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(30, 30, 46, 0.98);
    padding: 20px 24px;
    border-radius: 16px;
    border: 1px solid rgba(165, 180, 252, 0.35);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
    min-width: 550px;
    max-width: 90%;
    width: 600px;
}

.search-input-popup{
    flex: 1;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: #f4f4f5;
    font-size: 1.1rem;
    outline: none;
}

.search-input-popup:focus{
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.35);
}

.search-btn-popup{
    padding: 16px 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-btn-popup:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.45);
}

/* ========== 搜索弹窗面板（搜索框+结果列表） ========== */
.search-popup-title{
    display: block;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 16px 20px 0;
    text-decoration: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.03em;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.search-popup-title:hover{
    transform: scale(1.05);
    opacity: 0.85;
}

.search-popup-panel{
    display: flex;
    flex-direction: column;
    width: 650px;
    max-width: 92%;
    max-height: 85vh;
    background: rgba(30, 30, 46, 0.98);
    border-radius: 16px;
    border: 1px solid rgba(165, 180, 252, 0.35);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

/* 弹窗内的表单保持原样但去掉底部圆角 */
.search-popup-panel .search-form-popup{
    width: 100%;
    min-width: auto;
    max-width: none;
    border: none;
    border-radius: 16px 16px 0 0;
    box-shadow: none;
    flex-shrink: 0;
}

/* 结果列表容器 */
.search-results-dropdown{
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 420px;
    max-width: 90vw;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid rgba(165, 180, 252, 0.2);
    border-radius: 12px;
    background: rgba(20, 20, 36, 0.95);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    z-index: 1200;
}

.search-results-dropdown.show,
.search-results-dropdown.has-results{
    display: block;
}

/* tojav 头部搜索：下拉固定 420px，左对齐搜索框 */
.tojav-page .search-results-dropdown{
    width: 420px;
    max-width: 90vw;
    left: 0;
    right: auto;
}

/* 滚动条美化 */
.search-results-dropdown::-webkit-scrollbar{
    width: 6px;
}
.search-results-dropdown::-webkit-scrollbar-track{
    background: transparent;
}
.search-results-dropdown::-webkit-scrollbar-thumb{
    background: rgba(165, 180, 252, 0.3);
    border-radius: 3px;
}

/* 单条搜索结果 */
.search-result-item{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.search-result-item:last-child{
    border-bottom: none;
}

.search-result-item:hover{
    background: rgba(102, 126, 234, 0.12);
}

/* 搜索结果缩略图 */
.search-result-img{
    width: 60px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-result-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-no-img{
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
}

/* 搜索结果信息 */
.search-result-info{
    flex: 1;
    min-width: 0;
}

.search-result-name{
    font-size: 0.95rem;
    color: #e4e4e7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    margin-bottom: 4px;
}

.search-result-item:hover .search-result-name{
    color: #a5b4fc;
}

/* 搜索结果元数据 */
.search-result-meta{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}





/* 加载中 / 无结果 / 更多提示 */
.search-result-item.search-loading{
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(165, 180, 252, 0.7);
    font-size: 0.9rem;
    padding: 20px;
}

.search-result-item.search-loading:hover{
    background: transparent;
}

.search-loading-spinner{
    width: 18px;
    height: 18px;
    border: 2px solid rgba(165, 180, 252, 0.2);
    border-top-color: rgba(165, 180, 252, 0.8);
    border-radius: 50%;
    animation: search-spin 0.8s linear infinite;
}

@keyframes search-spin {
    to { transform: rotate(360deg); }
}

.search-result-item.search-no-results{
    cursor: default;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
    justify-content: center;
    padding: 20px;
}

.search-result-item.search-no-results:hover{
    background: transparent;
}

.search-result-item.search-more-hint{
    cursor: default;
    color: rgba(165, 180, 252, 0.5);
    font-size: 0.8rem;
    justify-content: center;
    padding: 14px 24px;
    text-align: center;
}

.search-result-item.search-more-hint:hover{
    background: transparent;
}

/* ========== 右侧功能区面板 ========== */
.right-sidebar-panel{
    position: fixed;
    right: 14px;
    top: 14px;
    z-index: 1001;
    padding: 10px;
    background: rgba(30, 30, 46, 0.85);
    border-radius: 14px;
    border: 1px solid rgba(165, 180, 252, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
}

.panel-divider{
    width: 28px;
    height: 1px;
    background: rgba(165, 180, 252, 0.3);
}

.sidebar-trigger{
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.sidebar-trigger:hover{
    opacity: 1 !important;
}

/* ========== 搜索按钮 ========== */
.search-trigger{
    width: 31px;
    height: 31px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(165, 180, 252, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.search-trigger:hover{
    background: rgba(165, 180, 252, 0.2);
    color: rgba(165, 180, 252, 1);
    transform: scale(1.05);
}

.dot-grid{
    display: grid;
    grid-template-columns: repeat(3, 7px);
    gap: 5px;
}

.dot-grid span{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(165, 180, 252, 0.6);
    animation: dotBreathe 2.5s ease-in-out infinite;
}

.dot-grid span:nth-child(1){
    animation-delay: 0s;
}

.dot-grid span:nth-child(2){
    animation-delay: 0.15s;
}

.dot-grid span:nth-child(3){
    animation-delay: 0.3s;
}

.dot-grid span:nth-child(4){
    animation-delay: 0.15s;
}

.dot-grid span:nth-child(5){
    animation-delay: 0.3s;
}

.dot-grid span:nth-child(6){
    animation-delay: 0.45s;
}

.dot-grid span:nth-child(7){
    animation-delay: 0.3s;
}

.dot-grid span:nth-child(8){
    animation-delay: 0.45s;
}

.dot-grid span:nth-child(9){
    animation-delay: 0.6s;
}

@keyframes dotBreathe {

    0%,
    100% {
        opacity: 0.35;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/* 导航栏滑入滑出 */
.sidebar-nav{
    position: fixed;
    right: 0;
    top: 0;
    width: 210px;
    height: 100vh;
    background: linear-gradient(180deg, #1e1e36 0%, #161628 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    z-index: 1002;
    transform: translateX(210px);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: none;
}

/* JS 控制展开状态 */
.sidebar-nav.open{
    transform: translateX(0);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
}

.sidebar-nav.open~.sidebar-trigger{
    opacity: 0;
    pointer-events: none;
}

/* 内容区域 */
.sidebar-content{
    flex: 1;
    padding: 20px 0 10px;
}

.sidebar-logo{
    padding: 0 18px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 12px;
}

.sidebar-logo h2{
    font-size: 1.15rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.08em;
}

.sidebar-section{
    padding: 4px 0;
    margin-bottom: 4px;
}

.sidebar-section-title{
    padding: 6px 18px;
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-item{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    border-right: 3px solid transparent;
    position: relative;
}

.sidebar-item:hover{
    background: rgba(255, 255, 255, 0.06);
    color: #e4e4e7;
}

.sidebar-item.active{
    color: #a5b4fc;
    background: rgba(102, 126, 234, 0.12);
    border-right-color: #667eea;
}

/* sidebar-badge removed - notifications moved out */

/* 侧边栏底部用户信息 */
.sidebar-footer{
    padding: 14px 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-user{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.sidebar-avatar{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.sidebar-avatar-guest{
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}

.sidebar-user-info{
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}

.sidebar-username{
    font-size: 0.82rem;
    font-weight: 600;
    color: #e4e4e7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-role{
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
}

.sidebar-logout{
    width: 100%;
    padding: 7px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    color: #fca5a5;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
}

.sidebar-logout:hover{
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.4);
}

.sidebar-login-btn{
    width: 100%;
    padding: 7px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.sidebar-login-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
}

/* 遮罩层（可选，移动端点击关闭） */
.sidebar-overlay{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.sidebar-overlay.show{
    display: block;
}

/* ========== 侧边栏分类专属色 ========== */
.sidebar-cat-latest.active{
    color: #93c5fd;
    border-right-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.sidebar-cat-asian_uncensored.active{
    color: #f9a8d4;
    border-right-color: #ec4899;
    background: rgba(236, 72, 153, 0.1);
}

.sidebar-cat-asian_censored.active{
    color: #c4b5fd;
    border-right-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

.sidebar-cat-western.active{
    color: #fcd34d;
    border-right-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.sidebar-cat-domestic.active{
    color: #fca5a5;
    border-right-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.sidebar-cat-anime.active{
    color: #86efac;
    border-right-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.sidebar-cat-adult_photo.active{
    color: #fdba74;
    border-right-color: #fb923c;
    background: rgba(251, 146, 60, 0.1);
}

.sidebar-cat-gallery.active{
    color: #a5b4fc;
    border-right-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.sidebar-cat-dirt.active{
    color: #fca5a5;
    border-right-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

@keyframes catPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(var(--cat-color), 0.25);
    }

    50% {
        box-shadow: 0 0 8px 2px rgba(var(--cat-color), 0.45);
    }
}

/* ========== 各分类专属配色 ========== */
.nav-cat-latest{
    --cat-color: 59, 130, 246;
    --cat-bg: rgba(59, 130, 246, 0.1);
    --cat-border: rgba(59, 130, 246, 0.3);
    --cat-text: #93c5fd;
    animation: catPulse 2.5s ease-in-out infinite;
}

.nav-cat-asian_uncensored{
    --cat-color: 236, 72, 153;
    --cat-bg: rgba(236, 72, 153, 0.1);
    --cat-border: rgba(236, 72, 153, 0.3);
    --cat-text: #f9a8d4;
    animation: catPulse 2.5s ease-in-out infinite;
}

.nav-cat-asian_censored{
    --cat-color: 139, 92, 246;
    --cat-bg: rgba(139, 92, 246, 0.1);
    --cat-border: rgba(139, 92, 246, 0.3);
    --cat-text: #c4b5fd;
    animation: catPulse 2.5s ease-in-out infinite;
}

.nav-cat-western{
    --cat-color: 245, 158, 11;
    --cat-bg: rgba(245, 158, 11, 0.1);
    --cat-border: rgba(245, 158, 11, 0.3);
    --cat-text: #fcd34d;
    animation: catPulse 2.5s ease-in-out infinite;
}

.nav-cat-domestic{
    --cat-color: 239, 68, 68;
    --cat-bg: rgba(239, 68, 68, 0.1);
    --cat-border: rgba(239, 68, 68, 0.3);
    --cat-text: #fca5a5;
    animation: catPulse 2.5s ease-in-out infinite;
}

.nav-cat-anime{
    --cat-color: 34, 197, 94;
    --cat-bg: rgba(34, 197, 94, 0.1);
    --cat-border: rgba(34, 197, 94, 0.3);
    --cat-text: #86efac;
    animation: catPulse 2.5s ease-in-out infinite;
}

.nav-cat-adult_photo{
    --cat-color: 251, 146, 60;
    --cat-bg: rgba(251, 146, 60, 0.1);
    --cat-border: rgba(251, 146, 60, 0.3);
    --cat-text: #fdba74;
    animation: catPulse 2.5s ease-in-out infinite;
}

.nav-cat-gallery{
    --cat-color: 99, 102, 241;
    --cat-bg: rgba(99, 102, 241, 0.1);
    --cat-border: rgba(99, 102, 241, 0.3);
    --cat-text: #a5b4fc;
    animation: catPulse 2.5s ease-in-out infinite;
}

.nav-cat-dirt{
    --cat-color: 239, 68, 68;
    --cat-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(245, 158, 11, 0.1));
    --cat-border: rgba(239, 68, 68, 0.35);
    --cat-text: #fca5a5;
}

/* 用 CSS 变量统一覆盖 */
.category-nav .nav-item[class*="nav-cat-"]{
    background: var(--cat-bg);
    border-color: var(--cat-border);
    color: var(--cat-text);
}

.category-nav .nav-item[class*="nav-cat-"]:hover{
    background: rgba(var(--cat-color), 0.2);
    border-color: rgba(var(--cat-color), 0.5);
    color: var(--cat-text);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(var(--cat-color), 0.25);
    animation: none;
}

.category-nav .nav-item[class*="nav-cat-"].active{
    background: linear-gradient(135deg, rgba(var(--cat-color), 0.3), rgba(var(--cat-color), 0.15));
    border-color: rgba(var(--cat-color), 0.6);
    color: var(--cat-text);
    box-shadow: 0 4px 18px rgba(var(--cat-color), 0.35);
    animation: none;
}

/* ========== 跳转按钮 ========== */
.jump-btn{
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.015em;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.jump-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

/* 更新历史区域的控制按钮容器 */
.admin-update-controls{
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-update-controls .load-data-btn{
    padding: 8px 16px;
    font-size: 0.9rem;
    min-width: auto;
}

/* ========== 数据加载按钮 ========== */
.load-data-btn{
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    min-width: 44px;
    line-height: 1;
}

.load-data-btn:hover:not(:disabled){
    background: rgba(14, 165, 233, 0.2);
    border-color: rgba(14, 165, 233, 0.4);
    color: #38bdf8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(14, 165, 233, 0.3);
}

.load-data-btn:disabled{
    cursor: not-allowed;
    opacity: 0.7;
}

/* 运行中：图标旋转 + 进度 */
.load-data-btn.running{
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    animation: pulse-loading 2s ease-in-out infinite;
}

.load-data-btn.running .spin-icon{
    display: inline-block;
    animation: spin 1s linear infinite;
}

.load-data-btn.cooldown{
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.25);
    color: rgba(165, 180, 252, 0.5);
}

.load-data-btn.error-state{
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

@keyframes pulse-loading {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.3);
    }

    50% {
        box-shadow: 0 0 12px 3px rgba(245, 158, 11, 0.5);
    }
}

.cancel-update-btn{
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    font-size: 0.9rem;
    min-width: 40px;
    padding: 10px 14px;
}

.cancel-update-btn:hover:not(:disabled){
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fecaca;
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3);
}

/* ========== 管理面板分类区域 ========== */
.admin-section{
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
}

.admin-section:first-of-type{
    margin-top: 4px;
}

.admin-section-title{
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 10px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border-radius: 6px;
    transition: background 0.15s, margin-bottom 0.3s;
}

.admin-section-title:hover{
    background: rgba(255, 255, 255, 0.04);
}

.admin-section-title::after{
    content: '▾';
    margin-left: auto;
    font-size: 1.1rem;
    transition: transform 0.3s ease;
    opacity: 0.5;
}

.admin-section.collapsed .admin-section-title{
    margin-bottom: 0;
}

.admin-section.collapsed .admin-section-title::after{
    transform: rotate(-90deg);
}

.admin-section-body{
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: max-height;
}

.admin-section.collapsed .admin-section-body{
    max-height: 0 !important;
}

.history-list{
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 180px;
    overflow-y: auto;
}

.history-item{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.03);
    margin-bottom: 4px;
}

.history-item .h-time{
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.4);
    font-family: monospace;
}

.history-item .h-new{
    flex-shrink: 0;
    font-weight: 600;
}

.history-item .h-new.has-new{
    color: #6ee7b7;
}

.history-item .h-new.no-new{
    color: rgba(255, 255, 255, 0.4);
}

.history-item .h-status{
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
}

.history-item .h-status.ok{
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

.history-item .h-status.err{
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.history-item .h-status.cancel{
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

/* ========== Hero 轮播管理 ========== */
.hero-config-hint{
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 12px;
    padding: 0 4px;
}
.hero-config-list{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hero-config-row{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.hc-cat-name{
    width: 80px;
    flex-shrink: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}
.hc-preview{
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.hc-thumb{
    width: 36px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.hc-title{
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hc-auto{
    flex: 1;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.25);
    font-style: italic;
}
.hc-actions{
    flex-shrink: 0;
    display: flex;
    gap: 6px;
}
.hc-btn{
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s;
}
.hc-btn:hover{
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}
.hc-btn.pick{
    border-color: rgba(102, 126, 234, 0.4);
    color: #a78bfa;
}
.hc-btn.pick:hover{
    background: rgba(102, 126, 234, 0.15);
}
.hc-btn.reset{
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}
.hc-btn.reset:hover{
    background: rgba(239, 68, 68, 0.12);
}

/* -- Hero Picker 弹窗 -- */
.hero-picker-overlay{
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-picker-dialog{
    width: 620px;
    max-width: 90vw;
    max-height: 80vh;
    background: #1e1e2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.hp-header{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hp-header h3{
    flex-shrink: 0;
    font-size: 1rem;
    color: #fff;
    margin: 0;
}
.hp-search{
    flex: 1;
}
.hp-search input{
    width: 100%;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 0.82rem;
    outline: none;
    box-sizing: border-box;
}
.hp-search input:focus{
    border-color: rgba(102, 126, 234, 0.5);
}
.hp-close{
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
}
.hp-close:hover{
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}
.hp-items{
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.hp-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: all 0.2s;
}
.hp-item:hover{
    background: rgba(102, 126, 234, 0.12);
    border-color: rgba(102, 126, 234, 0.35);
    transform: translateY(-2px);
}
.hp-item-thumb{
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 6px;
}
.hp-item-title{
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.hp-pager{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.hp-page-btn{
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
}
.hp-page-btn:hover{
    background: rgba(255, 255, 255, 0.12);
}
.hp-page-info{
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

/* ========== Toast 通知 ========== */
.update-toast{
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s ease;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    max-width: 90vw;
    text-align: center;
    white-space: pre-line;
}

.update-toast.show{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.update-toast.success{
    background: linear-gradient(135deg, #059669, #10b981);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.update-toast.error{
    background: linear-gradient(135deg, #dc2626, #ef4444);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.update-toast.info{
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.grid-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 400px));
    gap: 15px;
    max-width: 2100px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    justify-content: center;
}

.media-card{
    background: linear-gradient(145deg, #2d2d44, #1e1e2e);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.media-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}



/* 来源徽章 */


.card-header{
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.item-name{
    color: #f1f1f3;
    font-size: 0.85rem;
    font-weight: 600;
    display: -webkit-box;
    display: box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
    letter-spacing: 0.015em;
    word-break: break-all;
}

/* 元数据标签 */


/* 标签不参与 flex 压缩：flex-shrink 默认 1，标签总宽超过容器时浏览器会把它们压窄
   （文字被挤掉）而不是换行。更麻烦的是 MetaTags 布局计算拿到的 offsetWidth 是
   压缩后的值 → 算出的行数与实际渲染对不上，浮在右下角的 ▾ 也会因此压住标签 */


/* 被 JS 判定为溢出的标签（克隆副本仍在「更多」菜单里） */
.rating-widget.is-overflow{ display: none !important; }




/* 向上弹出：.ntags 是卡片最后一区，向下会被卡片的 overflow:hidden 裁掉 */





/* ===== 卡片标签图标 =====
   用 mask + currentColor 绘制，颜色自动跟随该标签的文字色，所以 data URI 里
   写什么描边色都无所谓 —— 遮罩只取形状。有图标的标签（有码 / 磁力 / 下载）
   不再输出文字，语义靠 title + aria-label 表达。 */








/* 只给定义了图标的标签画 ::before：否则会露出一块 currentColor 的实心方块 */












/* ========== 评分组件（位于卡片标签行内） ========== */
.rating-widget{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 平时显示的「分数 + 星图标」标签：未评分 0 ★，已评分显示对应分数 ★ */
.rating-display{
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.rating-display:hover{
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(102, 126, 234, 0.5);
}

.rating-display.has-rating{
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
}

.rating-score-star{
    color: #fbbf24;
    font-size: 0.8rem;
    line-height: 1;
}

/* 悬停/点击时从评分标签上方悬浮弹出的星级选择器（绝对定位，不占布局，卡片不抖动） */
.rating-picker{
    position: absolute;
    left: 0;
    bottom: calc(100% + 4px);
    z-index: 30;
    display: none;
    align-items: center;
    gap: 1px;
    padding: 2px 6px;
    background: rgba(20, 22, 40, 0.96);
    border: 1px solid rgba(102, 126, 234, 0.4);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    animation: ratingPop 0.12s ease-out;
}

.rating-widget:hover .rating-picker,
.rating-widget:focus-within .rating-picker,
.rating-picker.open{
    display: inline-flex;
}

.rating-star{
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.28);
    cursor: pointer;
    padding: 1px 2px;
    user-select: none;
    transition: color 0.12s ease, transform 0.12s ease;
}

.rating-star:hover,
.rating-star.active{
    color: #fbbf24;
}

.rating-star:hover{
    transform: scale(1.2);
}

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

/* 磁力链接按钮 */






/* 下载链接按钮（蓝色系，与磁力链接橙色区分） */




/* 详情图预览 */
.detail-thumbs{
    display: flex;
    gap: 4px;
    padding: 6px 12px 0;
    flex-wrap: wrap;
    align-items: center;
}

.detail-thumb{
    width: 48px;
    height: 36px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: all 0.2s;
}

.detail-thumb:hover{
    border-color: rgba(102, 126, 234, 0.5);
    transform: scale(1.08);
}

.detail-more{
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    font-weight: 500;
}

.image-container{
    position: relative;
    width: 100%;
    height: 250px;
    background: #1a1a2e;
    flex-shrink: 0;
    overflow: hidden;
}

/* 缩略图骨架加载动画 */
.image-container::before{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
            rgba(255, 255, 255, 0.03) 25%,
            rgba(255, 255, 255, 0.08) 40%,
            rgba(255, 255, 255, 0.03) 55%);
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.image-container.loaded::before{
    opacity: 0;
    animation: none;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.media-thumbnail{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.media-thumbnail.loaded{
    opacity: 1;
}

.media-thumbnail.error{
    background: linear-gradient(135deg, #2d1f1f 0%, #1a1a2e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.75rem;
}

.media-thumbnail.error::before{
    content: '图片加载失败';
}

/* ===== 图片占位「暂无图片」：无图 / 封面加载失败共用 =====
   图标为内联 data URI（带斜杠的画框），不产生额外请求、不会因缓存失效而丢图。 */
.no-image,
.no-video,
.wf-no-img{
    --ph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48' fill='none'%3E%3Crect x='4.5' y='6.5' width='55' height='35' rx='6' stroke='%23fff' stroke-opacity='.3' stroke-width='2'/%3E%3Cpath d='M8 36 L21 23 L27 28.5 L35 20.5 L45 30 L56 36' stroke='%23fff' stroke-opacity='.24' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='19' cy='14' r='3.2' fill='%23fff' fill-opacity='.24'/%3E%3Cpath d='M11.5 40.5 L52.5 5.5' stroke='%23151524' stroke-opacity='.85' stroke-width='5.5' stroke-linecap='round'/%3E%3Cpath d='M11.5 40.5 L52.5 5.5' stroke='%23fff' stroke-opacity='.45' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");

    position: relative;
    width: 100%;
    height: 100%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    -webkit-user-select: none;
    user-select: none;
    background-color: #171728;
    background-image:
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.035) 0 7px,
            rgba(255, 255, 255, 0) 7px 15px),
        linear-gradient(160deg, #1e1e33 0%, #151524 100%);
}

.no-image::before,
.no-video::before,
.wf-no-img::before{
    content: '';
    flex: none;
    width: 46px;
    height: 34px;
    background: var(--ph-icon) center / contain no-repeat;
}

/* 内嵌虚线框：让空位看起来是「预留的画框」，而不是一块空洞 */
.no-image::after,
.no-video::after,
.wf-no-img::after{
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    pointer-events: none;
}

.no-image>span,
.no-video>span,
.wf-no-img>span{
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

/* 无封面图的容器停止骨架屏闪烁 */
.no-image.loaded{
    z-index: 3;
}



.clickable{
    cursor: pointer;
}

.image-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
}

html.not-logged-in .image-overlay{
    opacity: 1;
    pointer-events: auto;
}

/* 封面已判定不可用时（容器内已有占位块），撤掉「登录后查看」遮罩：
   遮罩 z-index 10 会整块盖住占位，而登录了也一样看不到这张图，
   此时显示「暂无图片」才是真实状态。has-placeholder 由 JS 兜底添加（旧浏览器无 :has）。 */
html.not-logged-in .image-container:has(.no-image) .image-overlay,
html.not-logged-in .image-container.has-placeholder .image-overlay{
    display: none;
}

.image-overlay.hidden{
    opacity: 0;
    pointer-events: none;
}

.login-prompt{
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    padding: 10px 20px;
    border-radius: 8px;
}

.login-prompt-icon{
    font-size: 2rem;
    margin-bottom: 8px;
    opacity: 0.9;
}


html.not-logged-in .media-card .media-thumbnail{
    filter: blur(3px);
}

html.not-logged-in .media-card .clickable{
    cursor: not-allowed;
}

.pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    padding: 20px;
    flex-wrap: wrap;
}

.pagination-info{
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.pagination-links{
    display: flex;
    align-items: center;
    gap: 5px;
}

.page-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.page-link:hover:not(.current):not(.ellipsis){
    background: rgba(102, 126, 234, 0.5);
    border-color: rgba(102, 126, 234, 0.8);
    transform: translateY(-2px);
}

.page-link.current{
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    font-weight: 600;
}

.page-link.ellipsis{
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: default;
}

.pagination-jump{
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-input{
    width: 60px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    outline: none;
    transition: all 0.3s ease;
}

.page-input::-webkit-outer-spin-button,
.page-input::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

.page-input:focus{
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

.page-input::placeholder{
    color: rgba(255, 255, 255, 0.4);
}

.modal{
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: contain;
    background-color: rgba(0, 0, 0, 0.92);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 关闭按钮 */
.modal-close{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 20;
    line-height: 1;
}

.modal-close:hover{
    background: rgba(239, 68, 68, 0.45);
    border-color: rgba(239, 68, 68, 0.6);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.modal-stack{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 98%;
    max-width: 98vw;
    height: 85vh;
    padding: 0 8px;
}

/* 侧边预览包装 */
.modal-stack-side{
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    min-width: 48px;
    min-height: 48px;
    transition: transform 0.25s ease;
}

.modal-stack-side:hover{
    transform: scale(1.03);
}

/* 侧边图加载动画 */
.side-loading{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 半透明遮罩调淡，避免盖住正在实时加载的图片 */
    background: rgba(0, 0, 0, 0.12);
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.side-loading.hidden{
    opacity: 0;
}

.side-spinner{
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* 主图包装 */
.modal-main-wrap{
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content{
    display: block;
    max-width: 90vw;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
    flex-shrink: 0;
    /* 实时加载：始终可见，由浏览器渐进式渲染边下载边显示，无淡入等待 */
    opacity: 1;
}

.modal-content.loading{
    /* 实时加载：加载期间保持可见，渐进式图片边下载边渲染 */
    opacity: 1;
}

.modal-content.switching{
    /* 换图瞬间隐藏旧帧，新图数据开始到达后由 JS 移除该类，恢复实时渲染 */
    visibility: hidden;
}

/* 加载指示器（实时加载模式：不再使用转圈等待） */
.modal-loading{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    pointer-events: none;
}

.modal-loading.show{
    display: none;
}

.loading-spinner{
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.modal-stack-img{
    display: block;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
    /* 实时加载：下载过程中即保持可见，渐进式图片边下边渲染 */
    opacity: 0.55;
    transition: opacity 0.35s ease;
    /* 尺寸由 JS 根据主图实时计算 */
}

.modal-stack-img.loaded{
    opacity: 0.65;
}

.modal-stack-side:hover .modal-stack-img.loaded{
    opacity: 0.9;
    filter: brightness(0.85);
}

.modal-header{
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 22px;
    background: rgba(0, 0, 0, 0.78);
    border-radius: 30px;
    z-index: 10;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-title{
    color: #f4f4f5;
    font-size: 1.0rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-counter-badge{
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    white-space: nowrap;
}

/* ========== 底部缩略图条 ========== */
.modal-thumb-strip{
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    max-width: 90vw;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    z-index: 10;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.modal-thumb-strip::-webkit-scrollbar{
    display: none;
}

.modal-thumb-item{
    flex-shrink: 0;
    width: 56px;
    height: 42px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.25s ease;
    position: relative;
}

.modal-thumb-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.modal-thumb-item:hover{
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.modal-thumb-item.active{
    border-color: #667eea;
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.5);
    transform: translateY(-2px);
}

.modal-thumb-item .thumb-index{
    position: absolute;
    bottom: 2px;
    right: 3px;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.55);
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.2;
}

@media (max-width: 1200px) {
    .grid-container{
        padding: 0 40px;
    }
}

@media (max-width: 900px) {
    .grid-container{
        padding: 0 30px;
    }
}

@media (max-width: 768px) {
    header h1{
        font-size: 1.8rem;
    }

    .grid-container{
        gap: 12px;
        padding: 0 20px;
    }

    .modal-content{
        max-width: 92vw;
        max-height: 65vh;
    }

    .modal-stack{
        width: 99%;
        height: 70vh;
        gap: 4px;
        padding: 0 2px;
    }

    .modal-stack-side{
        display: block;
    }

    .modal-header{
        padding: 8px 14px;
        top: 15px;
    }

    .modal-title{
        font-size: 0.8rem;
        max-width: 160px;
    }

    .modal-counter-badge{
        font-size: 0.7rem;
        padding: 2px 8px;
    }

    .modal-close{
        top: 12px;
        right: 12px;
        width: 34px;
        height: 34px;
        font-size: 1.1rem;
    }

    .modal-thumb-strip{
        bottom: 10px;
        padding: 6px 12px;
        gap: 4px;
        border-radius: 22px;
    }

    .modal-thumb-item{
        width: 40px;
        height: 30px;
    }
}

/* ============ 表格视图 ============ */
.table-container{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
    overflow-x: auto;
    contain: layout style;
    min-height: 60vh;
}

.data-table{
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background: rgba(30, 30, 50, 0.6);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.85rem;
}

.data-table thead{
    background: linear-gradient(135deg, #1e1e3a, #2a1a3e);
}

.data-table th{
    padding: 12px 10px;
    text-align: left;
    color: #a5b4fc;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    border-bottom: 2px solid rgba(102, 126, 234, 0.3);
    white-space: nowrap;
}

.data-table td{
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #d1d5db;
    vertical-align: middle;
}

.data-table tbody tr:hover{
    background: rgba(102, 126, 234, 0.08);
}

.td-source{
    white-space: nowrap;
}



.td-title{
    max-width: 300px;
}

.title-link{
    color: #c4b5fd;
    text-decoration: none;
    transition: color 0.2s;
}

.title-link:hover{
    color: #e2d5ff;
    text-decoration: underline;
}

.td-format,
.td-size,
.td-coded,
.td-time{
    white-space: nowrap;
    font-size: 0.8rem;
}

.td-seed{
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: #9ca3af;
}







/* 下载链接按钮（表格视图，蓝色系） */




/* ============ 表格登录保护 ============ */
/* 默认（登录）：显示真实数据 */
/* 未登录：隐藏真实数据，显示锁定占位 */
.data-table .table-data-locked{
    display: none;
}

html.not-logged-in .data-table .table-data-real{
    display: none;
}

html.not-logged-in .data-table .table-data-locked{
    display: inline;
    white-space: nowrap;
    user-select: none;
}

html.not-logged-in .data-table .td-magnet .table-data-locked{
    color: #6b7280;
    font-size: 0.75rem;
    font-style: italic;
}

html.not-logged-in .data-table .td-title .table-data-locked{
    color: #c4b5fd;
}

/* 表格单元格不换行，溢出省略 */
.data-table th:nth-child(1),
.data-table td:nth-child(1){
    width: 9%;
}

.data-table th:nth-child(2),
.data-table td:nth-child(2){
    width: 30%;
}

.data-table th:nth-child(3),
.data-table td:nth-child(3){
    width: 7%;
}

.data-table th:nth-child(4),
.data-table td:nth-child(4){
    width: 8%;
}

.data-table th:nth-child(5),
.data-table td:nth-child(5){
    width: 7%;
}

.data-table th:nth-child(6),
.data-table td:nth-child(6){
    width: 17%;
}

.data-table th:nth-child(7),
.data-table td:nth-child(7){
    width: 10%;
}

.data-table th:nth-child(8),
.data-table td:nth-child(8){
    width: 12%;
}

.data-table td{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 视图切换按钮 */
.view-toggle{
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 10px 0;
}

.view-btn{
    padding: 6px 16px;
    background: rgba(30, 30, 50, 0.6);
    color: #9ca3af;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.view-btn.active{
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border-color: transparent;
}

.view-btn:hover:not(.active){
    background: rgba(102, 126, 234, 0.15);
    color: #a5b4fc;
}

/* ========== 瀑布流视图 (Waterfall / Masonry) ========== */
.waterfall-container{
    max-width: 100%;
    margin: 0 auto;
    padding: 0 2px;
}

.waterfall-header{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.waterfall-hint{
    color: rgba(102, 126, 234, 0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.waterfall-hint.watermark-cat{
    color: rgba(16, 185, 129, 0.45);
}

/* CSS Columns 瀑布流网格 */
.waterfall-grid{
    column-count: 4;
    column-gap: 12px;
    orphans: 1;
    widows: 1;
}

.waterfall-card{
    break-inside: avoid;
    margin-bottom: 12px;
    background: linear-gradient(145deg, #2d2d44, #1e1e2e);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.waterfall-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    border-color: rgba(102, 126, 234, 0.2);
}

/* 图片区域 */
.wf-img-wrap{
    position: relative;
    overflow: hidden;
    background: #1a1a2e;
    cursor: pointer;
}

.wf-img{
    width: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease, opacity 0.35s ease;
    min-height: 120px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.wf-img:hover{
    transform: scale(1.04);
}

/* 无封面占位（瀑布流）：沿用上面的通用占位样式，只调尺寸 */
.wf-no-img{
    min-height: 150px;
    gap: 8px;
    font-size: 0.75rem;
}

.wf-no-img::before{
    width: 40px;
    height: 30px;
}

/* 未登录遮罩 */
.wf-img-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* 同上：瀑布流的占位块优先于未登录遮罩 */
html.not-logged-in .wf-img-wrap:has(.wf-no-img) .wf-img-overlay,
html.not-logged-in .wf-img-wrap.has-placeholder .wf-img-overlay{
    display: none;
}

html.not-logged-in .wf-img-overlay{
    opacity: 1;
    pointer-events: auto;
}

html.not-logged-in .wf-img{
    filter: blur(4px);
}

.wf-overlay-icon{
    font-size: 1.8rem;
    opacity: 0.85;
}

/* 来源徽章 */


/* 信息区域 */
.wf-info{
    padding: 10px 12px 12px;
}

.wf-name{
    font-size: 0.8rem;
    font-weight: 600;
    color: #e4e4e7;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    margin-bottom: 8px;
}

/* 元数据标签 */














/* 操作按钮 */
.wf-actions{
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}









.wf-source-link{
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 6px;
    color: #a5b4fc;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
    letter-spacing: 0.015em;
}

.wf-source-link:hover{
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.12);
}

.wf-source-link:active{
    transform: translateY(0);
}

/* 瀑布流响应式列数 */
@media (max-width: 1400px) {
    .waterfall-grid{
        column-count: 3;
    }
}

@media (max-width: 900px) {
    .waterfall-grid{
        column-count: 2;
        column-gap: 8px;
    }

    .waterfall-card{
        margin-bottom: 8px;
    }

    .wf-info{
        padding: 8px 10px 10px;
    }

    .wf-name{
        font-size: 0.75rem;
    }
}

@media (max-width: 500px) {
    .waterfall-grid{
        column-count: 1;
        column-gap: 0;
    }
}

/* ========== 仪表盘样式 ========== */
.admin-stats-grid{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-stats-total{
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 10px;
}

.stats-total-num{
    font-size: 1.6rem;
    font-weight: 700;
    color: #a5b4fc;
    line-height: 1;
}

.stats-total-label{
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.admin-stats-bars{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stats-bar-row{
    display: flex;
    align-items: center;
    gap: 8px;
}

.stats-bar-label{
    width: 70px;
    flex-shrink: 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
}

.stats-bar-track{
    flex: 1;
    height: 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 7px;
    overflow: hidden;
}

.stats-bar-fill{
    height: 100%;
    border-radius: 7px;
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.6), rgba(102, 126, 234, 0.9));
    transition: width 0.4s ease;
    min-width: 2px;
}

.stats-bar-count{
    width: 50px;
    flex-shrink: 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.admin-stats-update{
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    padding: 4px 0;
}

/* ========== 响应式：瀑布流在小屏幕自适应 ========== */
/* 瀑布流视图的响应式已在 .waterfall-grid 的列数媒体查询中处理 */



.media-card .media-thumbnail:not(.loaded){
    opacity: 0;
    transform: scale(1.03);
}

/* ========== 以下样式从 index.html 内联迁移 ========== */

/* ========== 认证栏（已集成到侧边栏） ========== */
.auth-bar{
    display: none;
}

.login-btn,
.logout-btn{
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.login-btn{
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.login-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.logout-btn{
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.logout-btn:hover{
    background: rgba(239, 68, 68, 0.3);
}

/* ========== 登录弹窗 ========== */
.login-overlay{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.login-overlay.show{
    display: flex;
}

.login-container{
    position: relative;
    background: linear-gradient(145deg, #2d2d44, #1e1e2e);
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.login-header{
    text-align: center;
    margin-bottom: 30px;
}

.login-header h2{
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.login-header p{
    color: #667eea;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 5px;
}

.login-header .login-hint{
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-bottom: 0;
}

.login-close{
    position: absolute;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.login-close:hover{
    background: rgba(255, 255, 255, 0.2);
}

.login-form-group{
    margin-bottom: 20px;
}

.login-form-group label{
    display: block;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.login-form-group input{
    width: 100%;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
}

.login-form-group input:focus{
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

.login-form-group input::placeholder{
    color: rgba(255, 255, 255, 0.4);
}

.login-submit{
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.login-submit:hover:not(:disabled){
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.login-submit:disabled{
    opacity: 0.6;
    cursor: not-allowed;
}

.login-error{
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 16px 24px;
    color: #fff;
    text-align: left;
    display: none;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
    transition: all 0.3s ease;
    align-items: center;
    gap: 12px;
    z-index: 10;
    min-width: 280px;
    max-width: 90%;
}

.login-error.show{
    display: flex;
    animation: fadeIn 1s ease;
}

.login-error.fade-out{
    animation: fadeOut 1s ease forwards;
}

.error-icon{
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.2);
    border-radius: 50%;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.error-text{
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
}

.login-form-group input.error{
    border-color: #ef4444 !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3) !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px) scale(0.95);
    }
}

.login-loading{
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}




/* ========== 用户管理弹窗 ========== */
.admin-overlay{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.admin-overlay.show{
    display: flex;
}

.admin-container{
    position: relative;
    background: linear-gradient(145deg, #2d2d44, #1e1e2e);
    border-radius: 16px;
    padding: 24px;
    width: 95%;
    max-width: 580px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    margin: 0 8px;
    box-sizing: border-box;
    overflow-y: auto;
}

.admin-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.admin-header h2{
    color: #fff;
    font-size: 1.4rem;
}

.admin-close{
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-close:hover{
    background: rgba(239, 68, 68, 0.3);
}

.admin-add-form{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.admin-add-form input{
    flex: 1 1 140px;
    min-width: 120px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.admin-add-form input:focus{
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

.admin-add-form input::placeholder{
    color: rgba(255, 255, 255, 0.4);
}

.admin-add-btn{
    flex: 0 0 auto;
    padding: 10px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    min-width: 80px;
}

.admin-add-btn:hover:not(:disabled){
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}

.admin-add-btn:disabled{
    opacity: 0.6;
    cursor: not-allowed;
}

.admin-user-list{
    flex: 1;
    overflow-y: auto;
    max-height: 320px;
}

.admin-user-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.admin-user-item:hover{
    background: rgba(255, 255, 255, 0.08);
}

.admin-user-info{
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-user-avatar{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

.admin-user-name{
    color: #f4f4f5;
    font-size: 0.95rem;
    font-weight: 500;
}

.admin-badge{
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

.admin-badge.admin{
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.admin-badge.user{
    background: rgba(102, 126, 234, 0.2);
    color: #a5b4fc;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.admin-delete-btn{
    padding: 5px 12px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    color: #fca5a5;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-delete-btn:hover:not(:disabled){
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
}

.admin-delete-btn:disabled{
    opacity: 0.3;
    cursor: not-allowed;
}

.admin-change-pwd-btn{
    padding: 5px 12px;
    background: rgba(102, 126, 234, 0.15);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 6px;
    color: #a5b4fc;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.admin-change-pwd-btn:hover{
    background: rgba(102, 126, 234, 0.3);
    border-color: rgba(102, 126, 234, 0.5);
}

.admin-user-actions{
    display: flex;
    gap: 6px;
    align-items: center;
}

.admin-pwd-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-pwd-dialog{
    background: linear-gradient(145deg, #2d2d44, #1e1e2e);
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 380px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.admin-pwd-dialog h3{
    margin: 0 0 16px 0;
    color: #f4f4f5;
    font-size: 1.1rem;
}

.admin-pwd-dialog label{
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-bottom: 6px;
}

.admin-pwd-dialog input{
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    margin-bottom: 16px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.admin-pwd-dialog input:focus{
    border-color: rgba(102, 126, 234, 0.8);
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
}

.admin-pwd-dialog input::placeholder{
    color: rgba(255, 255, 255, 0.4);
}

.admin-pwd-btns{
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.admin-pwd-cancel{
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #ccc;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-pwd-cancel:hover{
    background: rgba(255, 255, 255, 0.15);
}

.admin-pwd-confirm{
    padding: 8px 18px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-pwd-confirm:hover{
    opacity: 0.9;
}

.admin-pwd-confirm:disabled{
    opacity: 0.5;
    cursor: not-allowed;
}

.admin-msg{
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    display: none;
}

.admin-msg.show{
    display: block;
}

.admin-msg.success{
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.admin-msg.error{
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.admin-loading{
    display: flex;
    justify-content: center;
    padding: 20px;
}

.admin-spinner{
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.manage-btn{
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    background: rgba(102, 126, 234, 0.2);
    border: 1px solid rgba(102, 126, 234, 0.4);
    color: #a5b4fc;
}

.manage-btn:hover{
    background: rgba(102, 126, 234, 0.35);
    transform: translateY(-2px);
}

/* ========== 设为封面按钮（模态框内） ========== */
.modal-set-cover-btn{
    position: absolute;
    top: -44px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 16px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: 20px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    z-index: 5;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.3);
    letter-spacing: 0.02em;
}

.modal-set-cover-btn.visible{
    opacity: 1;
    pointer-events: auto;
}

.modal-set-cover-btn:hover{
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.5);
}

.modal-set-cover-btn:active{
    transform: translateX(-50%) scale(0.96);
}

.modal-set-cover-btn.loading{
    pointer-events: none;
    opacity: 0.7;
}

.modal-set-cover-btn.success-flash{
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.4) !important;
}

/* =============================================
   toJAV 页面专用样式
   ============================================= */

/* toJAV page body override */
body.tojav-page{
    padding: 0;
}

/* -- toJAV Header -- */
header.header{
    text-align: left;
    margin-bottom: 0;
}
.header{
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #0f0f1e;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header-container{
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    gap: 20px;
}
.logo a{
    font-size: 1.6rem;
    font-weight: 800;
    background: linear-gradient(135deg, #e74c3c, #f39c12);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    letter-spacing: 0.04em;
}
.nav-categories{
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.nav-categories .nav-item{
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.88rem;
    color: #aaa;
    text-decoration: none;
    transition: all 0.25s;
    white-space: nowrap;
}
.nav-categories .nav-item:hover,
.nav-categories .nav-item.active{
    color: #fff;
    background: rgba(102, 126, 234, 0.2);
}

/* header 一行放不下「logo + 9 个分类 + 搜索框/登录按钮」：
   .nav-categories 是 flex-shrink: 0，空间不足时不收缩、而是把 header 撑破，
   页面因此出现横向滚动条（1280px 视口下约溢出 17px）。
   容器宽度小于 header-container 的 max-width(1400px) 时，
   让分类导航整体换到第二行并居中，第一行仍是 logo + 操作区。 */
@media (max-width: 1400px) {
    .header-container{ flex-wrap: wrap; }
    .nav-categories{
        flex-shrink: 1;
        min-width: 0;
        order: 3;
        width: 100%;
        justify-content: center;
    }
}
.header-actions .search-box{
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 5px 6px 5px 14px;
    gap: 4px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-actions .search-box:focus-within{
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.15), inset 0 0 12px rgba(102, 126, 234, 0.06);
}
.header-actions .search-box input{
    background: transparent;
    border: none;
    outline: none;
    color: #e4e4e7;
    font-size: 0.88rem;
    width: 180px;
}
.header-actions .search-box input::placeholder{
    color: rgba(255, 255, 255, 0.25);
    transition: color 0.3s;
}
.header-actions .search-box:focus-within input::placeholder{
    color: rgba(255, 255, 255, 0.4);
}
.header-actions .search-box button{
    background: rgba(102, 126, 234, 0.25);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 50%;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-actions .search-box button svg{
    width: 14px;
    height: 14px;
    stroke: currentColor;
    transition: transform 0.4s ease;
}
.header-actions .search-box button:hover{
    background: rgba(102, 126, 234, 0.45);
    border-color: rgba(102, 126, 234, 0.5);
    color: #fff;
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.3);
}
.header-actions .search-box button:hover svg{
    transform: rotate(-15deg) scale(1.1);
}
.header-actions .search-box button:active svg{
    transform: rotate(0) scale(0.9);
}
.login-btn{
    padding: 8px 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap;
}
.login-btn:hover{
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
    transform: translateY(-1px);
}

/* -- toJAV Mobile Menu (Side Drawer) -- */
/* 移动端 hamburger 按钮：嵌入 header-actions，与搜索框/登录同行
   桌面端 display:none 不显示，只在 <=768px 启用（见底部 768px 媒体查询） */
.mobile-menu-btn{
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(15, 15, 30, 0.92);
    color: #ccc;
    cursor: pointer;
    font-size: 0.92rem;
    border: none;
    border-radius: 8px;
    flex-shrink: 0;
    transition: color 0.2s, background 0.2s;
}
.mobile-menu-btn:hover{
    color: #fff;
    background: rgba(20, 20, 40, 0.92);
}
.mobile-menu-btn:focus-visible{
    outline: 2px solid rgba(102, 126, 234, 0.7);
    outline-offset: -2px;
    color: #fff;
}
.mobile-menu-btn .mobile-menu-icon-close{ display: none; }
.mobile-menu-btn[aria-expanded="true"] .mobile-menu-icon-open{ display: none; }
.mobile-menu-btn[aria-expanded="true"] .mobile-menu-icon-close{ display: inline-block; }

.mobile-nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    /* 必须 > header (1000)，否则抽屉顶部会被 header 遮挡 */
    z-index: 1100;
}
.mobile-nav-backdrop.active{
    opacity: 1;
    visibility: visible;
}

.mobile-nav{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* 自适应内容：宽度跟着最长一行文字走（中文 2-4 字分类名），上下限保证观感 */
    width: max-content;
    min-width: 200px;
    max-width: min(280px, 80vw);
    margin: 0;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(15, 15, 30, 0.97), rgba(20, 20, 40, 0.97));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px 0 0 16px;
    box-shadow: -12px 0 36px rgba(0, 0, 0, 0.45);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 必须 > header (1000)，不然抽屉顶部的"导航"标题和首页链接会被 header 遮挡 */
    z-index: 1101;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* 隐藏滚动条（内容仍可滚动）：抽屉内容较少，滚动条视觉突兀 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mobile-nav::-webkit-scrollbar{ display: none; }
.mobile-nav.active{ transform: translateX(0); }

.mobile-nav-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 8px;
    margin-bottom: 6px;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* 标题前的渐变小圆点，提示"菜单已打开" */
.mobile-nav-title{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.mobile-nav-title::before{
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.6);
}
.mobile-nav-close{
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s, transform 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.mobile-nav-close:hover{
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: rotate(90deg);
}
.mobile-nav-close:focus-visible{
    outline: 2px solid rgba(102, 126, 234, 0.7);
    outline-offset: 1px;
}

.mobile-nav a{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 2px 0;
    color: rgba(220, 224, 232, 0.85);
    text-decoration: none;
    font-size: 0.92rem;
    border-radius: 8px;
    transition: background 0.18s, color 0.18s, transform 0.18s;
    position: relative;
}
/* 链接前的小圆点，hover 时变色 + 放大 + 发光 */
.mobile-nav a::before{
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
    flex-shrink: 0;
}
.mobile-nav a:hover,
.mobile-nav a:active,
.mobile-nav a:focus-visible{
    background: rgba(102, 126, 234, 0.15);
    color: #fff;
    transform: translateX(2px);
    outline: none;
}
.mobile-nav a:hover::before,
.mobile-nav a:focus-visible::before{
    background: #667eea;
    transform: scale(1.4);
    box-shadow: 0 0 6px rgba(102, 126, 234, 0.6);
}
/* 分组小标题："分类" */
.mobile-nav-section-label{
    padding: 14px 12px 4px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* === 抽屉底部 footer（margin-top:auto 推到 nav 最下方） === */
.mobile-nav-footer{
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}
.mobile-nav-login-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: 1px solid rgba(102, 126, 234, 0.4);
    border-radius: 10px;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.2);
}
.mobile-nav-login-btn:hover{
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.45);
    transform: translateY(-1px);
}
.mobile-nav-login-btn:active{ transform: translateY(0); }
.mobile-nav-login-btn:focus-visible{
    outline: 2px solid rgba(102, 126, 234, 0.7);
    outline-offset: 2px;
}
/* === 登录后态：用户信息卡 + 退出按钮 === */
.mobile-nav-user{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}
.mobile-nav-user-avatar{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.mobile-nav-user-info{
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
    flex: 1;
}
.mobile-nav-user-name{
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-nav-user-role{
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    margin-top: 1px;
}
.mobile-nav-logout-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 100, 100, 0.12);
    border: 1px solid rgba(255, 100, 100, 0.25);
    border-radius: 10px;
    color: #ff9a9a;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.mobile-nav-logout-btn:hover{
    background: rgba(255, 100, 100, 0.22);
    color: #fff;
    border-color: rgba(255, 100, 100, 0.5);
    transform: translateY(-1px);
}
.mobile-nav-logout-btn:active{ transform: translateY(0); }
.mobile-nav-logout-btn:focus-visible{
    outline: 2px solid rgba(255, 100, 100, 0.7);
    outline-offset: 2px;
}

body.menu-open{ overflow: hidden; }

/* -- toJAV Hero Slider (Redesigned) -- */
.hero{
    position: relative;
    width: 70%;
    height: 55vh;
    max-height: 620px;
    min-height: 340px;
    margin: 0 auto 30px;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-user-select: none;
}

.hero-slider{
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    will-change: opacity, transform;
}

.hero-slide.active{
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.hero-slide.exit-prev{
    transform: translateX(-8%) scale(1.02);
}

.hero-slide.exit-next{
    transform: translateX(8%) scale(1.02);
}

.slide-bg-wrapper{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.slide-bg{
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    filter: brightness(0.85);
}

.slide-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.7) 100%
    );
    z-index: 1;
}

.hero-content{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    height: 100%;
    max-width: 700px;
    text-align: left;
    padding: 20px 40px 56px;
}

/* 分类标签 Badge */
.hero-badge{
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.05em;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    margin-bottom: 16px;
    animation: slideUpFadeIn 0.6s ease-out 0.1s both;
}

.hero-content h1{
    font-size: 1.9rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 20px;
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.7);
    letter-spacing: 0.02em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    animation: slideUpFadeIn 0.6s ease-out 0.2s both;
}

.hero-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 28px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(231, 76, 60, 0.4);
    animation: slideUpFadeIn 0.6s ease-out 0.4s both;
}

.hero-btn svg{
    transition: transform 0.3s ease;
}

.hero-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(231, 76, 60, 0.55);
}

.hero-btn:hover svg{
    transform: translateX(3px);
}

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

/* Navigation Arrows */
.slider-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 80px;
    border-radius: 8px;
    border: none;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.slider-arrow::after{
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-style: solid;
    border-width: 2px 2px 0 0;
    border-color: currentColor;
}

.slider-prev{ left: 12px; }
.slider-prev::after{ transform: rotate(-135deg); margin-right: -2px; }

.slider-next{ right: 12px; }
.slider-next::after{ transform: rotate(45deg); margin-left: -2px; }

.hero:hover .slider-arrow{ opacity: 1; }

.slider-arrow:hover{
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    width: 50px;
    border-radius: 10px;
}
.slider-prev:hover{ left: 9px; }
.slider-next:hover{ right: 9px; }

.slider-arrow:active{
    transform: translateY(-50%) scale(0.93);
    background: rgba(0, 0, 0, 0.55);
}

/* Progress Bar - 紧贴轮播底部 */
.slider-progress{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.slider-progress-bar{
    height: 100%;
    background: linear-gradient(90deg, #667eea, #e74c3c);
    width: 0%;
    transition: width 0.1s linear;
}

/* Bottom Controls Area */
.slider-controls{
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

/* Dots */
.slider-dots{
    display: flex;
    gap: 10px;
    z-index: 5;
}

.dot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: all 0.35s ease;
    position: relative;
}

.dot:hover{
    background: rgba(255, 255, 255, 0.7);
    transform: scale(1.2);
}

.dot.active{
    background: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
    width: 28px;
    border-radius: 5px;
}

/* 回到顶部 - 火箭按钮 */
.back-to-top{
    position: fixed;
    /* 原来 bottom: 200px 会把按钮送到内容区中部（移动端尤其明显，实测压住
       条目标题）。桌面同样偏高，一并改成贴底；后按需求再翻倍到 56px。
       env() 在桌面取 0，无副作用。 */
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    right: 28px;
    z-index: 999;
    width: 54px;
    height: 54px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    /* 拆开写，不再用 all：显隐与位移走 0.35s，配色单独走 0.25s。
       配色时长是跟着“什么时候变色”走的，改过三次：
         - 最早 all 0.35s：滚动中要 350ms 才换完，手指快滑时按钮一直卡在过渡
           中间态（不深不浅的灰），看着就是「滚动中不变色、停下来才变色」；
         - 后来改成按滚动位置实时变色，压到 0.12s 才跟得上；
         - 现在改成 scrollend 防抖、只在停止滚动后变一次色，0.12s 就显得生硬，
           调回 0.25s —— 比实时变色从容，比最早的 0.35s 利落。 */
    transition:
        opacity .35s cubic-bezier(0.4, 0, 0.2, 1),
        visibility .35s cubic-bezier(0.4, 0, 0.2, 1),
        transform .35s cubic-bezier(0.4, 0, 0.2, 1),
        background-color .25s linear,
        border-color .25s linear,
        color .25s linear,
        box-shadow .25s linear;
}

.back-to-top svg{
    width: 22px;
    height: 22px;
}

.back-to-top-label{
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
}

.back-to-top.visible{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 背后是深色内容时改成浅底深图标，避免「深色按钮叠在深色内容上」糊成一片。
   class 由 tojav.js 采样按钮中心下方的背景亮度后切换。
   必须写在 :hover 之前 —— 同特异性下让悬停态能覆盖它。 */
.back-to-top.on-dark-bg{
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(30, 30, 46, 0.82);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.back-to-top.on-dark-bg .back-to-top-label{
    color: rgba(30, 30, 46, 0.6);
}

/* 触摸设备上 :hover 会「粘住」——手指点完浏览器仍保留 hover 态，直到点击别处
   或刷新才释放，于是按钮点一次就永久变红。用 hover+pointer 媒体查询把整套
   悬停样式限定给真正的指针设备；触摸设备只保留下面的 :active 反馈。 */
@media (hover: hover) and (pointer: fine) {

    .back-to-top:hover{
        background: rgba(231, 76, 60, 0.6);
        border-color: rgba(231, 76, 60, 0.5);
        color: #fff;
        transform: translateY(-4px);
        box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
    }
}

.back-to-top:active{
    transform: translateY(0) scale(0.93);
}

/* -- toJAV Category Quick Links -- */
.category-links{
    max-width: 1400px;
    margin: 0 auto 30px;
    padding: 0 20px;
}
.category-grid{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.category-card{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.category-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* -- toJAV Video Sections -- */
.video-section{
    margin: 0 auto 36px;
    padding: 0;
}
.section-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    max-width: 55%;
    margin-left: auto;
    margin-right: auto;
}
.section-header h2{
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    position: relative;
    padding-left: 16px;
}
.section-header h2::before{
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 22px;
    border-radius: 2px;
    background: linear-gradient(180deg, #667eea, #764ba2);
}
.view-more{
    font-size: 0.9rem;
    color: #667eea;
    text-decoration: none;
    transition: color 0.2s;
}
.view-more:hover{ color: #a78bfa; }

/* -- 精选推荐专区（排版与其他分类统一：无外框，仅保留金色标识） -- */
.featured-section{
    margin: 0 auto 36px;
}

.featured-section .section-header h2::before{
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

.featured-hint{
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
}

/* -- 精选推荐控制条（排序切换 / 只看我评分），宽度与卡片网格对齐 -- */
.featured-controls{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    /* 桌面版：与卡片网格对齐占一半宽度；移动端在 768px 断点占满全宽 */
    max-width: 50%;
    margin: 14px auto 16px;
    padding: 0;
    box-sizing: border-box;
}

.featured-sort-group{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.featured-sort-btn{
    padding: 5px 14px;
    border: 1px solid rgba(102, 126, 234, 0.35);
    border-radius: 999px;
    background: rgba(102, 126, 234, 0.08);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.82rem;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.2s;
}

.featured-sort-btn:hover{
    border-color: rgba(102, 126, 234, 0.6);
    color: #fff;
}

.featured-sort-btn.active{
    background: linear-gradient(180deg, #667eea, #5b67d8);
    border-color: transparent;
    color: #fff;
}

.featured-mine-toggle{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    user-select: none;
}

.featured-mine-toggle input[type="checkbox"]{
    accent-color: #667eea;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.featured-empty{
    padding: 28px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
}

/* -- toJAV Video Grid & Cards -- */
.video-section .grid-container{
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    /* 桌面版：网格占页面一半宽度（原布局）；移动端在 768px 断点占满全宽 */
    max-width: 50%;
    padding: 0;
}
.video-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.video-card{
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}
.video-card:hover{
    transform: translateY(-4px);
    border-color: rgba(102, 126, 234, 0.3);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.video-thumbnail{
    position: relative;
    aspect-ratio: 16 / 10;
    background: #1a1a2e;
    overflow: hidden;
}
.video-thumbnail img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.video-card:hover .video-thumbnail img{
    transform: scale(1.06);
}
.video-overlay{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}
.video-views{
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.85);
}
.video-quality{
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(102, 126, 234, 0.7);
    color: #fff;
    font-weight: 600;
}
.video-info{ padding: 10px 12px 14px; }
.video-title{
    font-size: 0.9rem;
    font-weight: 600;
    color: #e4e4e7;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.video-meta{ margin-top: 6px; }
.video-id{
    font-size: 0.75rem;
    color: #667eea;
    font-weight: 500;
}

/* -- toJAV Footer -- */
.footer{
    margin-top: 40px;
    padding: 36px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(15, 15, 30, 0.6);
}
.footer-container{
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}
.footer-links{
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.footer-links a{
    color: #888;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}
.footer-links a:hover{ color: #667eea; }
.footer-info{ margin-bottom: 12px; }
.footer-info p{ color: #777; font-size: 0.88rem; }
.footer-info a{ color: #667eea; text-decoration: none; }
.footer-copyright p{ color: #555; font-size: 0.82rem; }

/* -- toJAV Responsive -- */
@media (max-width: 1024px) {
    .hero{ width: 85%; height: 45vh; max-height: 500px; min-height: 280px; }
    .hero-content h1{ font-size: 1.5rem; }
    .hero-content{ max-width: 560px; padding: 20px 30px 52px; }
    .hero-badge{ font-size: 0.72rem; padding: 4px 12px; }
    .category-grid{ grid-template-columns: repeat(3, 1fr); }
    .video-grid{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .video-section .grid-container{ grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
    /* 移动端专用：隐藏页面主滚动条（滚动功能保留） */
    html:has(body.tojav-page){
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    html:has(body.tojav-page)::-webkit-scrollbar{ display: none; }

    /* 移动端专用：header 登录按钮 / 用户胶囊隐藏，登录入口统一在 ☰ 抽屉底部 */
    .tojav-page .user-info-trigger,
    .tojav-page .user-dropdown,
    .tojav-page .header-login-btn{ display: none; }
    .tojav-page .mobile-menu-btn{ display: flex; }

    /* 移动端专用：搜索框收起为放大镜，点击后向左展开 */
    .header-search-wrapper{ margin-left: auto; }
    .header-actions .search-box{ padding: 5px 6px; gap: 0; }
    .header-actions .search-box.open,
    .header-actions .search-box:focus-within{ padding-left: 14px; gap: 4px; }
    .header-actions .search-box:not(.open):not(:focus-within){ border-color: transparent; }
    .header-actions .search-box input{
        width: 0;
        padding: 0;
        opacity: 0;
        pointer-events: none;
        transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, padding 0.35s ease;
    }
    .header-actions .search-box.open input,
    .header-actions .search-box:focus-within input{
        width: 110px;
        opacity: 1;
        pointer-events: auto;
    }

    /* 旧方案遗留：这里原本让 meta 标签「只显示一排」（nowrap + overflow: hidden）。
       它与现在的两行折叠冲突 —— 标签不换行会溢出卡片被裁掉（scrollWidth 258 > 183），
       而 MetaTags 拿 clientWidth 算出的可用宽度依旧成立 → 判定放得下、不折叠，
       于是浮在右下角的 ▾ 直接压住标签。两行的换行与折叠统一交给 utils.js 的 MetaTags */
    

    .nav-categories{ display: none; }
    .header-container{ flex-wrap: wrap; gap: 10px; }
    .header-actions{ width: 100%; justify-content: space-between; }
    /* 登录按钮在移动端移到抽屉底部（.mobile-nav-footer），header 里不再显示 */
    .header-login-btn{ display: none; }
    /* 已登录态的用户胶囊 / 下拉菜单也移走：移动端登录入口统一在抽屉底部，避免重复 */
    .user-info-trigger{ display: none; }
    .user-dropdown{ display: none; }
    .search-popup-panel .search-results-dropdown{
        width: calc(100vw - 24px);
        max-width: 420px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
    .tojav-page .search-results-dropdown{
        width: 420px;
        max-width: calc(100vw - 24px);
        left: 0;
        right: auto;
        transform: none;
    }
    .mobile-menu-btn{ display: flex; }
    .hero{
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        min-height: 220px;
        max-height: 340px;
        border-radius: 0;
    }
    .hero-content h1{
        font-size: 1.25rem;
        /* 移动端：标题只占一行，超出部分省略号。
           注意两处冲突：
           1) 全局用了 display:-webkit-box + line-clamp（多行截断模式），text-overflow 在此模式下无效 → 改回 block
           2) .hero-content 是 flex 且 align-items:flex-start，h1 宽度 = 内容宽度，永不溢出 → 必须限宽 100% */
        display: block;
        -webkit-line-clamp: none;
        width: 100%;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .hero-content{ max-width: 420px; padding: 16px 24px 48px; }
    .hero-badge{ font-size: 0.68rem; padding: 4px 10px; margin-bottom: 10px; }
    /* B触摸目标：hero 主按钮 ≥44px（inline-flex 下 min-height 生效） */
    .hero-btn{ padding: 12px 24px; font-size: 0.9rem; min-height: 44px; box-sizing: border-box; }
    /* 移动端靠左右滑动翻页（tojav.js 的 touch 处理），隐藏箭头按钮 */
    .slider-arrow{ display: none; }
    /* B触摸目标：圆点视觉大小不变，用伪元素把点击热区撑到 ~26px；
       gap 同步加大到 14px，否则相邻热区重叠会误翻页 */
    .slider-dots{ gap: 14px; }
    .dot::after{ content: ''; position: absolute; inset: -8px; }
    .dot.active{ width: 22px; }
    .category-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
    /* B触摸目标：分类卡整块可点，保证 ≥44px 高 */
    .category-card{ padding: 22px 12px; font-size: 0.95rem; min-height: 56px; box-sizing: border-box; }
    .video-grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    /* 移动端：卡片网格 / 精选控制条占满全宽（桌面为 50% 半宽），
       左右留白 12px 避免内容贴边 */
    .video-section{ padding: 0 12px; }
    /* 首页主网格是 <main> 的直接子元素、不在 .video-section 内，
       只写后代选择器的话它还是 minmax(380px,400px) 的固定 380px 轨道，
       视口 <380px 就会撑出横向滚动条 → 这里按类名统一打成两列。
       必须写 minmax(0, 1fr)：1fr 等价于 minmax(auto, 1fr)，
       轨道下限会被图片/卡片内容的 min-content（约 380px）重新顶开，
       两列叠加会直接把容器撑破。 */
    .grid-container{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 100%; }
    .media-card{ min-width: 0; }
    .video-section .grid-container{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 100%; }
    .featured-controls{ max-width: 100%; }
    /* 移动端卡片满宽，标题栏同步满宽，否则标题缩在中间与卡片对不齐 */
    .section-header{ max-width: 100%; margin-bottom: 22px; }
    /* C字号：分类标题 / 查看全部 */
    .section-header h2{ font-size: 1.25rem; }
    .view-more{ font-size: 0.95rem; padding: 8px 0 8px 12px; }
    /* A1 封面比例：改 3:2 宽幅。两列下每列约 177px 宽 → 封面高约 118px，
       保留桌面 3:4 竖版会占满半屏还多 */
    .image-container{ height: auto; aspect-ratio: 3 / 2; max-height: 260px; }
    .item-name{ -webkit-line-clamp: 2; line-clamp: 2; font-size: 0.88rem; }
    /* D间距：按 ~177px 卡宽收紧，否则 meta 标签会挤成多行把卡片拉长 */
    .media-card{ border-radius: 12px; }
    .card-header{ padding: 10px 11px; }
    /* 再收一档：两列下一行只有 ~143px 可用，每标签省 4px 就能多排下一个。
       padding 5→4px、gap 6→4px、字号 0.76→0.72rem */
    
    /* B触摸目标 + C字号：meta 标签（含磁力/下载按钮）桌面只有 ~18px 高，移动端做大。
       评分标签（.rating-display）与 ▾ 展开按钮（.ntags-more-btn）用的是另一套桌面值，
       不会跟着 .ntag 走 → 同行会出现 24px 与 31px 混排，这里并入同一组选择器 */
    .rating-display{
        padding: 4px 8px;
        font-size: 0.72rem;
        /* 必须显式写：磁力/下载是 <button>，UA 给 button 的 line-height: normal
           不继承 body 的 1.6，同字号下会比 <span> 矮约 3px */
        line-height: 1.6;
        /* 只有图标、没有文字的标签（有码 / 磁力）内容高度只剩图标，会比带文字的矮 3~6px。
           按「一行文字 + 上下 padding + 边框」给下限，保证整行标签等高。
           32px 也是 Material 对 chip 的触控高度建议，再低就跌破可点范围 */
        box-sizing: border-box;
        min-height: 32px;
    }
    /* 图标跟着字号缩到 12px */
    
    /* ▾ 浮在右下角：排在 flex 末尾时剩余空间不够就独占一整行（32px + gap），
       改成绝对定位后不占流内空间，省下的宽度能再排下一个标签。
       是否压住标签由 utils.js 的 MetaTags 计算保证（放不下就收进菜单）。
       发布时间因此不必再隐藏：短日期 + 图标约 60px，两行放得下 */
    
    .rating-score-star{ font-size: 0.72rem; }
    /* B触摸目标：☰ 菜单按钮 ≥44px */
    .mobile-menu-btn{ min-height: 44px; box-sizing: border-box; }
    /* B触摸目标：抽屉底部登录 / 退出按钮加高 */
    .mobile-nav-login-btn,
    .mobile-nav-logout-btn{ min-height: 48px; box-sizing: border-box; }
    /* E安全区：抽屉底部避开 iPhone 底部横条 */
    .mobile-nav-footer{ padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
    /* E安全区 + D间距：footer 避开底部横条，移动端收窄留白 */
    .footer{ padding: 28px 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
    /* E手势：去掉移动端点击时的蓝色高亮 */
    *{ -webkit-tap-highlight-color: transparent; }
    /* E手势：触屏没有 hover，补按压反馈 */
    .media-card:active{ transform: translateY(-1px); }
    .category-card:active, .hero-btn:active{ transform: scale(0.97); }
}

@media (max-width: 480px) {
    .header-container{ padding: 10px 14px; }
    .logo a{ font-size: 1.3rem; }
    .header-actions{ gap: 8px; }
    /* 超窄屏隐藏 ☰ 文字，只留图标，腾出搜索框宽度 */
    .mobile-menu-label{ display: none; }
    .mobile-menu-btn{ padding: 8px 10px; gap: 0; }
    .header-actions .search-box.open input,
    .header-actions .search-box:focus-within input{ width: 90px; }
    .login-btn{ padding: 6px 16px; font-size: 0.82rem; }
    .hero{
        width: 100%;
        aspect-ratio: 16 / 9;
        min-height: 200px;
        max-height: 280px;
    }
    .hero-content h1{ font-size: 1.05rem; margin-bottom: 10px; }
    .hero-content{ max-width: 300px; padding: 12px 16px 40px; }
    .hero-badge{ font-size: 0.62rem; padding: 3px 8px; margin-bottom: 8px; }
    /* B触摸目标：超窄屏同样保持 ≥44px */
    .hero-btn{ padding: 11px 20px; font-size: 0.85rem; }
    .slider-progress{ height: 2px; }
    /* 768 断点已把 gap 加大到 14px 以容纳扩大的圆点热区，这里只小幅收窄 */
    .slider-dots{ gap: 12px; }
    .dot{ width: 7px; height: 7px; }
    .dot.active{ width: 18px; border-radius: 4px; }

    /* A2：原来这里改成 3 列，屏幕越窄反而越挤 → 与 768 断点一致，统一 2 列 */
    .category-grid{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .category-card{ padding: 20px 8px; font-size: 0.85rem; }
    .section-header h2{ font-size: 1.25rem; }
    .video-grid{ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
    /* 超窄屏：把两侧留白还给卡片（两列下每 1px 的宽度都很宝贵） */
    .video-section{ padding: 0 8px; }
    .grid-container,
    .video-section .grid-container{ gap: 8px; }
    .card-header{ padding: 9px 10px; }
    
    /* 尺寸沿用 768 断点的统一档（4px 8px / 0.72rem）：480 块排在 768 块之后，
       在这里写死更大值会反过来把超窄屏的标签放大，白省的宽度又没了 */
    .rating-score-star{ font-size: 0.72rem; }
    /* .ntags-more 是包 ▾ 按钮的 div，默认按 block 参与行内布局会比按钮高 1px */
    
    /* 超窄屏：完整日期要 120px 宽，窄卡片放不下会折成两行、高出一倍。
       改成单行 + 省略号；min-width: 0 必须写，flex item 默认不收缩到内容宽以下 */
    
    /* A1：列数由 768 断点统一控制（两列），这里不再重复声明，
       避免在超窄屏被意外覆盖成别的列数 */
    .footer-links{ gap: 16px; }
}

/* ========== toJAV 头部用户菜单 & 搜索下拉 ========== */
.header-actions{
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-search-wrapper{
    position: relative;
}

.header-search-input{
    width: 180px;
}

.header-user{
    position: relative;
}

.header-login-btn{
    padding: 8px 22px;
    border-radius: 24px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.25s;
    white-space: nowrap;
}
.header-login-btn:hover{
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
    transform: translateY(-1px);
}

.user-info-trigger{
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 12px 4px 4px;
    border-radius: 24px;
    transition: background 0.2s;
}
.user-info-trigger:hover{
    background: rgba(255, 255, 255, 0.08);
}

.user-avatar-sm{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.user-avatar-lg{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.user-name{
    color: #e4e4e7;
    font-size: 0.9rem;
    font-weight: 500;
}

.user-dropdown{
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 200px;
    background: #1e1e38;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    z-index: 1100;
}
.user-dropdown.show{
    display: block;
}

.user-dropdown-header{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.user-details{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-display-name{
    color: #f4f4f5;
    font-size: 0.95rem;
    font-weight: 600;
}

.user-role{
    color: #888;
    font-size: 0.8rem;
}

.user-dropdown-divider{
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}

.user-dropdown-item{
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    color: #ccc;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}
.user-dropdown-item:hover{
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.logout-action:hover{
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}