/* =============================================================================
   1. 全局暴力重置 (彻底消灭 WordPress 自带的上方空白)
   ============================================================================= */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: #f7f8fa !important; /* 统一的灰色背景 */
}
p:empty { display: none !important; }

/* 强制把各种主题自带的限制全部干掉 */
.entry-content, .site-main, #main, article, .ast-container, .wrap { 
    margin: 0 !important; 
    padding: 0 !important; 
    max-width: none !important;
}

/* =============================================================================
   2. 顶栏 (终极越狱版：打破主题 1300px 宽度封锁)
   ============================================================================= */
.ft-header {
    position: fixed !important;
    top: 0 !important;
    
    /* 🚀 核心破解魔法：无论是否被主题囚禁，强制恢复 100% 屏幕宽度！ */
    width: 100vw !important;
    max-width: 100vw !important;
    left: calc(-50vw + 50%) !important; /* 神奇的数学公式：完美抵消主题的居中偏移 */
    
    height: 60px !important;
    z-index: 9999 !important;
    
    /* 让内部容器居中 */
    display: flex !important;
    justify-content: center !important;
    
    
}

/* 内部限宽容器：重新建立 680px 绝对坐标系 */
.ft-header-inner {
    width: 100% !important;
    max-width: 680px !important; 
    padding: 0 15px !important;
    box-sizing: border-box !important;
    
    position: relative !important; /* 给标题和按钮提供定位锚点 */
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* 标题：永远在 inner 的正中心 */
.ft-title { 
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    font-size: 16px !important; 
    font-weight: 700 !important; 
    color: #111 !important; 
    white-space: nowrap !important;
}

/* 返回箭头：死死钉在左侧 15px */
.ft-back { 
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 24px !important; 
    cursor: pointer !important; 
    color: #333 !important; 
    z-index: 10 !important; 
    line-height: 1 !important;
    font-weight: bold !important;
}

/* 开关：死死钉在右侧 15px */
.ft-header-right { 
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important; 
}

/* 🔙 电脑端与手机端背景色适配 */
@media (min-width: 1024px) {
    html, body { background-color: #f7f8fa !important; } 
    .ft-header {
        background-color: #f7f8fa !important; 
        border-bottom: none !important; 
        box-shadow: none !important;
    }
    .ft-back { 
     display: none !important; 
    }

}

@media (max-width: 1023px) {
    .ft-header {
        background: #ffffff !important;
        box-shadow: 0 1px 5px rgba(0,0,0,0.03) !important;
        border-bottom: 1px solid #f2f2f2 !important;
        
        /* ★ 神奇刘海魔法再次发动：增加顶栏高度并把内容往下推 */
        height: calc(60px + env(safe-area-inset-top, 0px)) !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        box-sizing: border-box !important;
    }
}

/* 开关内部元素保持不变 */
.switch-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 13px; font-weight: 600; color: #888; margin: 0; padding: 0; }
.switch-btn { cursor: pointer; width: 40px; height: auto; display: block; -webkit-tap-highlight-color: transparent; }

/* =============================================================================
   3. 主体容器 (保持距离，统一宽度)
   ============================================================================= */
.ft-container { 
    width: 100%;
    max-width: 680px; /* 统一为复习页的 680px */
    margin: 0 auto !important; 
    
    /* 核心修改：加上左右的 15px，手机卡片就不会贴边了！ */
    padding: 60px 15px 100px 15px !important; 
    box-sizing: border-box;
}

/* （你原有的 .ft-card 等卡片样式保留在下面，不用动） */

.ft-card {
    background: #fff; border-radius: 16px; overflow: hidden;
    margin-bottom: 25px; padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    /* 👇 新增：增加顺滑的过渡动画 */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* 👇 新增：鼠标悬浮时的交互反馈，专业网站必备 */
.ft-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.ft-card-header { display: flex; align-items: center; margin-bottom: 15px; }
.ft-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; margin-right: 12px; flex-shrink: 0; background: #eee; }
.ft-avatar-text { display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; color: #fff; text-transform: uppercase; }

.ft-user-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ft-name { font-weight: 700; font-size: 15px; color: var(--ft-text-main); line-height: 1.2; }
.ft-handle { font-size: 13px; color: var(--ft-text-sub); margin-top: 2px; }

.ft-card-toggle {
    font-size: 12px; font-weight: 700; color: var(--ft-primary);
    background: #EAF8FF; padding: 4px 8px; border-radius: 8px;
    cursor: pointer; user-select: none;
}
.ft-card-toggle:not(.active) { background: #f0f0f0; color: #999; }

/* 文本与实线分割 */
.ft-content { margin-bottom: 12px; }
.ft-kr-text { font-size: 16px; font-weight: 500; line-height: 1.6; color: #222; margin-bottom: 12px; word-wrap: break-word; }

/* ★ 改为实线分割 (solid) */
.ft-cn-text { 
    font-size: 13px; line-height: 1.5; color: #666; 
    padding-top: 12px; 
    /* 核心修改：直接写死浅灰色 #EEEEEE，线就回来了！ */
    border-top: 1px solid #EEEEEE; 
    transition: all 0.3s ease; 
}
.ft-cn-text.hidden { display: none; }

.ft-media { margin-top: 10px; }
.ft-media img { width: 100%; border-radius: 12px; object-fit: cover; max-height: 400px; border: 1px solid #f5f5f5; }

.ft-end-msg { text-align: center; font-size: 13px; color: #bbb; padding: 20px 0; }

/* 双图并排展示网格 */
.ft-media.ft-media-double {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 分成平均的两列 */
    gap: 10px; /* 两张图中间的缝隙 */
}

/* 保证双图模式下图片等高并且裁剪好看 */
.ft-media.ft-media-double img {
    height: 100%;
    aspect-ratio: 1 / 1; /* 强制变成正方形，类似朋友圈 */
    object-fit: cover;
}