/* ========================================== */
/* 📜 偶像信息页全局基本样式设定 */
/* ========================================== */
body { font-family: "Microsoft YaHei", sans-serif; background-color: var(--page-bg); overflow-x: hidden; }

/* 头部人物简介大框 */
.profile-container { background: white; border-radius: 20px; padding: 25px 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 2px solid var(--theme-light); }

.profile-img { border-radius: 8px; border: 4px solid var(--theme-light); margin-bottom: 20px; width: 100%; max-width: 250px; aspect-ratio: 1 !important; object-fit: cover !important; background-color: #eef1f5; }

.btn-custom { border-radius: 20px; font-weight: bold; padding: 10px 15px; transition: 0.2s; font-size: 15px; }
.btn-back { background: #eef1f5; color: #555; border: none; }
.btn-back:hover { background: #e2e6eb; }
.btn-add { background: var(--theme-color); color: white; border: none; box-shadow: 0 4px 15px var(--theme-light); }
.btn-add:hover { background: var(--theme-color); filter: brightness(1.1); color: white; transform: translateY(-2px);}

/* 导航栏下拉跟随与固定 */
.sticky-tabs-wrapper { position: sticky; top: 0; z-index: 1020; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: 15px; margin-top: -15px; margin-bottom: 20px; border-radius: 0 0 15px 15px; border-bottom: 2px dashed var(--theme-light); box-shadow: 0 10px 30px rgba(0,0,0,0.05); transform: translateZ(0); }

/* 点击切换类别功能的选项按钮体系 */
.tabs-toggle-btn { display: flex; align-items: center; justify-content: center; width: 100%; background: #fff; color: var(--theme-color); border: 2px dashed #eef1f5; padding: 8px; border-radius: 12px; font-size: 14px; font-weight: bold; cursor: pointer; margin-bottom: 12px; transition: 0.2s; }
.tabs-toggle-btn:hover { background: #f4f6f9; border-color: var(--theme-light); }
.tabs-toggle-btn span { margin-left: 8px; font-size: 12px; font-weight: 900; color: #888;}

.category-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.category-tabs.collapsed { display: none; }

.tab-btn, .filter-badge { padding: 8px 18px; border-radius: 20px; font-weight: bold; font-size: 14px; background: #fff; color: #666; border: 2px solid #eef1f5; transition: all 0.2s; cursor: pointer; }
.tab-btn:hover, .filter-badge:hover { background: #f4f6f9; border-color: #dcdfe6; color: var(--theme-color); }
.tab-btn.active, .filter-badge.active { background: var(--theme-color); color: white; border-color: var(--theme-color); box-shadow: 0 4px 10px var(--theme-light); }
.tab-btn .badge { font-size: 12px; background: rgba(0,0,0,0.08) !important; color: inherit; }
.tab-btn.active .badge { background: rgba(255,255,255,0.2) !important; color: white; }

.idol-select-badge { cursor: pointer; border: 1px solid var(--theme-color); color: var(--theme-color); background: white; padding: 8px 14px; transition: 0.2s; user-select: none; font-size: 13px; font-weight: bold; margin-bottom: 4px; }
.idol-select-badge:hover { background: var(--theme-light); }
.idol-select-badge.active-idol { background-color: var(--theme-color) !important; color: white !important; box-shadow: 0 3px 8px var(--theme-light); transform: translateY(-1px); }

/* ========================================== */
/* 📸 剧情显示大网格核心容器 */
/* ========================================== */
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeIn 0.3s ease-in-out; }
.category-header { display: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* 全展开显示视图 */
body.show-all-mode .tab-pane { display: block !important; margin-bottom: 40px; }
body.show-all-mode .category-header { display: block; margin-bottom: 15px; color: var(--theme-color); font-weight: bold; font-size: 18px; border-bottom: 2px dashed var(--theme-light); padding-bottom: 8px; }

/* 拖拽编辑排序视图 */
body.sort-mode-active .tab-pane { display: block !important; margin-bottom: 35px; border: 2px dashed #eef1f5; padding: 15px; border-radius: 15px; }
body.sort-mode-active .category-header { display: block; margin-bottom: 15px; color: var(--theme-color); font-weight: bold; font-size: 18px; border: none; }
body.sort-mode-active .tabs-toggle-btn, body.sort-mode-active .category-tabs { display: none; } 

.idol-card { contain: content; }

/* 基本的布局呈现样式 */
.sortable-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px 15px; min-height: 100px; border-radius: 12px; transition: 0.3s; padding-bottom: 15px; }
body.sort-mode-active .sortable-grid { background: rgba(0,0,0,0.02); border: 3px dashed var(--theme-light); padding: 10px; }
body.sort-mode-active .idol-card { cursor: grab !important; animation: jiggle 0.3s infinite alternate ease-in-out; }
body.sort-mode-active .idol-card:active { cursor: grabbing !important; }
body.sort-mode-active .idol-card * { pointer-events: none; }
.sortable-ghost { opacity: 0.3; transform: scale(0.9); }
@keyframes jiggle { 0% { transform: rotate(-1deg); } 100% { transform: rotate(1deg); } }

/* 具体信息独立小块设置 */
.story-card { position: relative; border-radius: 12px; border: 2px solid transparent; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; height: 100%; background: white; cursor: pointer; transform: translateZ(0); will-change: transform; }
.story-card.open { border-color: var(--theme-color); box-shadow: 0 10px 25px var(--theme-light); }
.no-link-card { border-color: #e4e7ed !important; box-shadow: none !important; }
.no-link-card .card-body { background-color: #f4f6f9 !important; }
.no-link-card .card-title { color: #a0a5ab !important; }
.no-link-card .img-wrapper { opacity: 0.75; transition: opacity 0.3s; filter: grayscale(20%); }

@media (hover: hover) {
    .story-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px var(--theme-light); border-color: var(--theme-color); }
    .story-card:hover .card-img-top { transform: scale(1.05); }
    .no-link-card:hover { border-color: #cccccc !important; box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important; }
    .no-link-card:hover .img-wrapper { opacity: 1 !important; filter: grayscale(0%); }
    .no-link-card:hover .card-body { background-color: #ffffff !important; }
    .no-link-card:hover .card-title { color: #777777 !important; }
}

/* ========================================== */
/* 📐 复杂图片尺寸分块智能缩放判定 */
/* ========================================== */

/* 1. 正常长方形封面（16:9）的预设框限制 */
.img-wrapper { position: relative; display: block; overflow: hidden; border-radius: 10px 10px 0 0; aspect-ratio: 16 / 9; background: #f8f9fa; }
.card-img-top { width: 100%; height: 100%; object-fit: contain; padding: 0; opacity: 0; transition: opacity 0.4s ease-in-out, transform 0.3s; will-change: transform; }
.card-img-top.loaded { opacity: 1; }

/* 2. 竖立模式剧情图片调整，如老式企划的特有画面比例 (3:4) */
.category-section[data-category="竖卡"] .img-wrapper { aspect-ratio: 3 / 4 !important; }
.category-section[data-category="P卡"] .img-wrapper { aspect-ratio: 9 / 16 !important; }
.category-section[data-category="竖卡"] .sortable-grid, .category-section[data-category="P卡"] .sortable-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 15px 12px !important; }
.category-section[data-category="竖卡"] .card-img-top, .category-section[data-category="P卡"] .card-img-top { padding: 5px !important; }

/* 3. 头像框比例（1:1）适配 */
.category-section[data-category="亲密度剧情"] .img-wrapper { aspect-ratio: 1 / 1 !important; }
.category-section[data-category="亲密度剧情"] .sortable-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; gap: 15px 10px !important; }
.category-section[data-category="亲密度剧情"] .card-img-top { padding: 5px !important; }

/* 🌟 核心修复 4. 狭长连带画面比例配置：移除了“活动”和“活动剧情”，让它们恢复成和其他栏目一样正常的 16:9！ */
.category-section[data-category="enza主线"] .img-wrapper, .category-section[data-category="enza组合剧情"] .img-wrapper, .category-section[data-category="enza节日剧情"] .img-wrapper, .category-section[data-category="scsp活动"] .img-wrapper { aspect-ratio: 2.8 / 1 !important; }
.category-section[data-category="enza主线"] .sortable-grid, .category-section[data-category="enza组合剧情"] .sortable-grid, .category-section[data-category="enza节日剧情"] .sortable-grid, .category-section[data-category="scsp活动"] .sortable-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 15px 12px !important; }
.category-section[data-category="enza主线"] .card-img-top, .category-section[data-category="enza组合剧情"] .card-img-top, .category-section[data-category="enza节日剧情"] .card-img-top, .category-section[data-category="scsp活动"] .card-img-top { padding: 8px !important; }

/* 5. 特殊阶段无图选项，强制转化为文字胶囊 */
.category-section[data-category="初"] .img-wrapper, .category-section[data-category="N.I.A"] .img-wrapper, .category-section[data-category="STEP3"] .img-wrapper { display: none !important; }
.category-section[data-category="初"] .sortable-grid, .category-section[data-category="N.I.A"] .sortable-grid, .category-section[data-category="STEP3"] .sortable-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 15px 12px !important; }
.category-section[data-category="初"] .story-card, .category-section[data-category="N.I.A"] .story-card, .category-section[data-category="STEP3"] .story-card { height: auto; min-height: 55px; padding: 10px 5px; background: linear-gradient(145deg, #ffffff, #f8f9fa); border: 2px solid var(--theme-light); border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.02); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.category-section[data-category="初"] .story-card:hover, .category-section[data-category="N.I.A"] .story-card:hover, .category-section[data-category="STEP3"] .story-card:hover { background: var(--theme-color); border-color: var(--theme-color); transform: translateY(-3px); box-shadow: 0 6px 15px var(--theme-light); }
.category-section[data-category="初"] .card-body, .category-section[data-category="N.I.A"] .card-body, .category-section[data-category="STEP3"] .card-body { padding: 0 !important; background: transparent !important; }
.category-section[data-category="初"] .card-title, .category-section[data-category="N.I.A"] .card-title, .category-section[data-category="STEP3"] .card-title { font-size: 15px !important; color: var(--theme-color) !important; transition: color 0.2s; }
.category-section[data-category="初"] .card-subtitle, .category-section[data-category="N.I.A"] .card-subtitle, .category-section[data-category="STEP3"] .card-subtitle { font-size: 12px !important; color: #888 !important; transition: color 0.2s; }
.category-section[data-category="初"] .story-card:hover .card-title, .category-section[data-category="N.I.A"] .story-card:hover .card-title, .category-section[data-category="STEP3"] .story-card:hover .card-title, .category-section[data-category="初"] .story-card:hover .card-subtitle, .category-section[data-category="N.I.A"] .story-card:hover .card-subtitle, .category-section[data-category="STEP3"] .story-card:hover .card-subtitle { color: #ffffff !important; }

/* 其他附带信息块 */
.card-body { padding: 12px 6px !important; border-radius: 0 0 12px 12px; transition: background-color 0.3s; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.card-title { font-size: 16px !important; padding: 0 8px !important; font-weight: bold; margin: 0 !important; text-align: center; color: #333; line-height: 1.3; word-break: break-all; transition: color 0.3s;}
.card-subtitle { font-size: 12px !important; margin-top: 5px; color: #666; font-weight: 600; text-align: center; line-height: 1.2; opacity: 1 !important; }

.empty-category-hint { display: none; text-align: center; color: #999; padding: 30px; border: 2px dashed #eef1f5; border-radius: 12px; width: 100%; }
.sortable-grid:empty + .empty-category-hint { display: block; }
body.sort-mode-active .empty-category-hint { display: none !important; }

/* 弹窗设计配置 */
#dynamic-desktop-popup { display: none; position: absolute; width: 280px; max-height: 350px; overflow-y: auto; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); border-radius: 15px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); border: 3px solid var(--theme-color); z-index: 9999; padding: 15px; cursor: default; }
#dynamic-desktop-popup.show { display: block; animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.9) translateX(-10px); } 100% { opacity: 1; transform: scale(1) translateX(0); } }

#global-mobile-popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 88vw; max-width: 360px; max-height: 80vh; overflow-y: auto; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); border-radius: 15px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); border: 3px solid var(--theme-color); z-index: 9999; padding: 15px; animation: popInMobile 0.2s ease-out; }
@keyframes popInMobile { 0% { opacity: 0; transform: translate(-50%, -45%); } 100% { opacity: 1; transform: translate(-50%, -50%); } }
#mobile-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 9998; backdrop-filter: blur(3px); }

.popup-header { font-size: 15px; font-weight: bold; color: var(--theme-color); margin-bottom: 15px; text-align: center; border-bottom: 2px dashed var(--theme-light); padding-bottom: 10px;}
.side-video-btn { display: block; background: #f8f9fa; color: #333 !important; text-decoration: none; margin-bottom: 10px; padding: 12px 15px; border-radius: 12px; border: 2px solid #eef1f5; transition: 0.2s; }
.side-video-btn:hover { border-color: var(--theme-color); background: var(--theme-light); transform: translateX(3px); }
.up-name { font-size: 13px; color: var(--theme-color); font-weight: 900; margin-bottom: 6px; display: block; }
.video-title { font-size: 14px; font-weight: bold; line-height: 1.4; }

@media screen and (max-width: 1400px) {
    .sortable-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ========================================== */
/* 📱 极简移动端优化重排版系统 (< 768px)       */
/* ========================================== */
@media screen and (max-width: 768px) {
    .sticky-tabs-wrapper, #dynamic-desktop-popup, #global-mobile-popup { backdrop-filter: none !important; background: rgba(255, 255, 255, 0.98) !important; }
    .story-card { box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; }
    .tab-btn, .filter-badge { padding: 6px 12px; font-size: 13px; }
    
    .profile-container { padding: 15px; margin-bottom: 15px; }
    .profile-img { max-width: 120px !important; margin-bottom: 15px; border-width: 3px; }
    .profile-container h3 { font-size: 20px; margin-bottom: 10px !important; }
    .btn-custom { font-size: 13px; padding: 8px 12px; }
    
    /* 缩小手机端的展示容框 */
    .sortable-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 15px 10px; }
    
    .category-section[data-category="竖卡"] .sortable-grid,
    .category-section[data-category="P卡"] .sortable-grid { 
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important; 
    }
    
    .category-section[data-category="亲密度剧情"] .sortable-grid { 
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important; 
    }
    
    /* 🌟 同步移除了移动端宽度限制名单中的“活动”和“活动剧情” */
    .category-section[data-category="enza主线"] .sortable-grid,
    .category-section[data-category="enza组合剧情"] .sortable-grid,
    .category-section[data-category="enza节日剧情"] .sortable-grid,
    .category-section[data-category="scsp活动"] .sortable-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    }
    
    .card-title { font-size: 12px !important; padding: 0 2px !important; margin-top: 4px !important; }
    .card-body { padding: 6px 2px !important; }
    .card-subtitle { font-size: 10px !important; margin-top: 2px; }
}