/* === 基础样式 === */
    :root { 
        --kp-bg:#F2F4F6; --kp-white:#FFF; --kp-radius:20px; 
        /* 按照你的要求定义颜色 */
        --kp-blue: #35BAF3;  /* 已学完 */
        --kp-green: #333333; /* 正在学 */
        --kp-red: #E57373;   /* 未学习 */
    }
    html,body { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
    html::-webkit-scrollbar,body::-webkit-scrollbar { display: none; }
    /* 原来是 max-width: 600px; 现在改成 100% 或者 unset */
.kp-wrap { 
    width: 100%; 
    max-width: 100%; /* 不再限制宽度，因为它现在被关在中间栏的大盒子里了 */
    margin: 0 auto; 
    /* 其他保持不变 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    color: #333; 
    position: relative; 
}
    .kp-icon { width: 16px; height: 16px; vertical-align: middle; }
    .kp-icon-lg { width: 24px; height: 24px; vertical-align: middle; }
    
    /* === 首页组件 === */
    .kp-filter-capsule {
        display: inline-flex; align-items: center; gap: 6px;
        background: #111; color: #fff; padding: 10px 16px; border-radius: 30px;
        font-size: 14px; font-weight: 600; border: none; cursor: pointer; margin-bottom: 15px;
    }
    .kp-unified-card { background: #fff; border-radius: 20px; margin-bottom: 25px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); overflow: hidden; transform: translateZ(0); }
    .kp-head-row { padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; border-bottom: 1px solid transparent; transition: 0.3s; }
    .kp-head-row.expanded { border-bottom-color: #F6F6F6; }
    .kp-title { font-size: 18px; font-weight: 600; }
    .kp-body-content { display: none; padding: 15px; background: #fff; }
    
    .kp-tab-btn { padding: 6px 16px; border-radius: 20px; font-size: 13px; border:none; margin-right:8px; cursor:pointer; }
    .kp-tab-btn.active { background:#111; color:#fff; }
    .kp-tab-btn.inactive { background:#F0F0F0; color:#333; }
    
    /* 格子颜色逻辑更新 */
    .kp-grid-wrap { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
    .kp-grid-box { 
        width:34px; height:34px; display:flex; align-items:center; justify-content:center; 
        border-radius:8px; font-size:12px; cursor: pointer;
        background:#F5F5F5; color:#ccc; /* 默认灰色(未学习) */
    }
    .kp-grid-box.doing { background: var(--kp-green); color:#fff; } /* 绿色正在学 */
    .kp-grid-box.done { background: var(--kp-blue); color:#fff; }  /* 蓝色已学完 */

    /* 统计标签行 (新功能) */
    .kp-tags-row { display: flex; gap: 8px; justify-content: flex-start; flex-wrap: wrap; margin-top: 10px; }
    /* === 修改这块：小标签样式 === */
    .kp-mini-tag {
        font-size: 11px; 
        padding: 3px 8px; 
        border-radius: 6px; 
        border: 1px solid; /* 保留边框 */
        background: transparent; /* ★关键：背景透明，去掉背景色 */
        font-weight: 600; /* 字体稍微加粗一点点，没背景更好看 */
    }

    /* 1. 蓝色 (已学完) - 修改这里的 #35BAF3 换颜色 */
    .kp-mini-tag.blue { 
        color: var(--kp-blue) !important;       /* 强制使用变量里的蓝色 */
    border-color: var(--kp-blue) !important; 
}

    /* 2. 绿色 (正在学) - 修改这里的 #4CAF50 换颜色 */
    .kp-mini-tag.green { 
        color: var(--kp-green) !important;      /* 变黑了 */
    border-color: var(--kp-green) !important; 
}

    /* 3. 红色 (未学习) - 修改这里的 #FF5252 换颜色 */
    .kp-mini-tag.red { 
        /* 字的颜色：用稍微深一点的低调红 */
    color: #E57373 !important;   
    
    /* 边框颜色：用更浅一点的红色，或者半透明的红色 */
    border-color: #E57373 !important; 
    
    /* 背景色（可选）：如果你想要一点点淡淡的底色，可以把下面这行解开注释 */
    /* background: rgba(229, 115, 115, 0.1) !important; */
}

    /* 首页卡片 */
    .kp-cat-wrapper { background: #fff; border-radius: 20px; margin-bottom: 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); padding: 15px 15px; }
    .kp-cat-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
    .kp-cat-title { font-size: 24px; font-weight: 800; }
    .kp-latest-card { display: flex; gap: 15px; cursor: pointer; position: relative; }
    .kp-latest-img { width: 120px; height: 80px; border-radius: 10px; object-fit: cover; background: #eee; flex-shrink: 0; }
    .kp-latest-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
    .kp-latest-t { font-size: 16px; font-weight: 700; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    /* === NEW 标签：绝对定位到右下角 === */
    .kp-new-badge {
        position: absolute; 
        
        /* 贴到底部和右边 */
        bottom: 5px;  /* 距离底部 15px (和 padding 配合) */
        right: 10px;   /* 距离右边 20px */
        
        color: #FF5252; 
        background: #FFF0F0; 
        padding: 2px 8px; 
        border-radius: 8px; 
        font-size: 12px; 
        font-weight: 800;
        
        /* 确保它浮在最上面 */
        z-index: 10;
        
        /* 去掉之前的 top:0 配置 */
        top: auto; 
    }

    /* === 详情页组件 === */
    .kp-detail-view { background: transparent; min-height: 80vh; }
    .kp-back-nav { margin-bottom: 15px; margin-top: 0; cursor: pointer; display: inline-block; }
    /* 1. 容器改成弹性布局，靠右对齐 */
    .kp-detail-head {
        display: flex;          /* 开启 Flex */
        justify-content: flex-end; /* 内容靠右 */
        align-items: baseline;  /* 文字底部对齐 */
        gap: 10px;              /* 中文和韩文中间的空隙 */
        margin-bottom: 20px;    /* 这一行和下面统计格子的距离 */
    }

    /* 2. 中文标题：去掉下边距 */
    .kp-detail-title {
        font-size: 28px;
        font-weight: 800;
        margin-bottom: 0;       /* 原来有 5px，现在改成 0 */
        line-height: 1;         /* 防止行高太高撑开 */
    }

    /* 3. 韩文副标题：保持原样，只是变成了行内元素 */
    .kp-detail-sub {
        font-size: 20px;
        color: #666;
        font-weight: 400;
        line-height: 1;
    }
    
    .kp-stats-row { display: flex; gap: 12px; margin-bottom: 15px; }
    .kp-stat-box { flex: 1; background: #F2F2F7; border-radius: 12px; height: 75px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: default; }
    .kp-stat-box.clickable { cursor: pointer; position: relative; overflow: hidden; }
    .kp-stat-box.clickable:active { background: #E5E5EA; transform: scale(0.98); transition: 0.1s; }
    .kp-stat-lbl { background: #999; color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 6px; margin-bottom: 6px; }
    .kp-stat-val { font-size: 15px; font-weight: 700; display:flex; align-items:center; gap:4px; }

    .kp-full-item { display: flex; gap: 15px; padding: 15px; background: #fff; border-radius: 16px; margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); cursor: pointer; }
    .kp-item-img { width: 100px; height: 66px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
    .kp-item-status { font-size: 12px; font-weight: 600; margin-top: auto; align-self: flex-end; }

    /* ★★★ 底部弹窗 (Bottom Sheet) 固定高度版 ★★★ */
    .kp-modal-mask {
        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.4); z-index: 9999;
        display: none; align-items: flex-end; justify-content: center;
        opacity: 0; transition: opacity 0.3s;
    }
    .kp-modal-mask.visible { display: flex; opacity: 1; }
    
    .kp-bottom-sheet {
        width: 100%; max-width: 600px;
        background: #fff;
        border-radius: 24px 24px 0 0;
        padding: 20px;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        
        /* 固定高度控制 */
        height: 60vh; /* 屏幕高度的60% */
        display: flex; flex-direction: column; /* 内部布局 */
    }
    .kp-modal-mask.visible .kp-bottom-sheet { transform: translateY(0); }

    /* 弹窗头部：只放标签和关闭按钮 */
    .kp-sheet-header { 
        display: flex; justify-content: flex-end; /* 靠右对齐 */
        align-items: center; margin-bottom: 15px; flex-shrink: 0; 
    }
    .kp-sheet-tags { display: flex; gap: 8px; margin-right: auto; /* 标签靠左，如果想靠右就删掉这行 */ }
    /* 用户说右上角有标签，所以这里 flex-end 没问题，标签放里面 */

    /* 内部滚动区 */
    .kp-sheet-scroll-area {
        flex: 1; /* 占满剩余空间 */
        overflow-y: auto; /* 内部滚动 */
        padding-bottom: 30px;
    }
	/* ===================================================================
       PART 3. 筛选栏 (优化版：大选框、隐藏滚动条)
       =================================================================== */

    /* 1. 弹窗面板主体 */
    .filter-sheet { 
        height: 60vh !important; 
        display: flex; flex-direction: column; padding: 0 !important; 
        background: #fff;
        border-radius: 16px 16px 0 0; 
    }
    
    /* 2. 顶部区域 */
    .kp-filter-header-top { 
        padding: 10px 15px; 
        border-bottom: 1px solid #eee; 
        display: flex; justify-content: space-between; align-items: center; gap: 10px;
        min-height: 50px;
    }

    /* 左侧：选中标签区 */
    .kp-selected-area {
        flex: 1; display: flex; flex-wrap: wrap; gap: 5px; 
        align-items: center;
    }

    /* 标签样式 (字号加大，X居中) */
    .kp-tag-chip {
        display: inline-flex; align-items: center; justify-content: center; gap: 4px;
        background: #f3f0ff;          
        color: #6c5ce7;               
        border: 0.5px solid #6c5ce7;  
        padding: 4px 10px; 
        border-radius: 12px;
        font-size: 12px; /* 改大：原来是10px */
        height: 28px;
        line-height: 1;
    }
    .kp-tag-close { 
        cursor: pointer; font-weight: bold; font-size: 16px; /* 改大叉号 */
        margin-left: 2px; 
        display: flex; align-items: center; height: 100%; /* 强制居中 */
        padding-bottom: 2px; /* 微调视觉位置 */
    }

    /* 右侧：按钮组 */
    .kp-action-area { display: flex; gap: 6px; flex-shrink: 0; }
    
    .kp-btn-black, .kp-btn-purple {
        border: none; padding: 6px 12px; border-radius: 40px; 
        font-size: 12px; font-weight: 500; cursor: pointer;
    }
    .kp-btn-black { background: #000; color: #fff; }
    .kp-btn-purple { background: #6c5ce7; color: #fff; border-radius: 6px; }

    /* 3. Tabs 栏 (隐藏滚动条) */
    .kp-filter-tabs { 
        display: flex; gap: 0; padding: 0; 
        overflow-x: auto; border-bottom: none; 
        flex-shrink: 0;
        /* 隐藏滚动条 */
        scrollbar-width: none; -ms-overflow-style: none;
    }
    .kp-filter-tabs::-webkit-scrollbar { display: none; }
    
    .kp-ft-tab { 
        position: relative; padding: 15px 15px; color: #666; cursor: pointer;
        font-size: 15px; font-weight: 500; white-space: nowrap; display: block;
    }

    .kp-ft-tab.active { color: #6c5ce7; font-weight: 600; }
    
    /* 下划线 */
    .kp-ft-tab.active::after { 
        content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
        width: 45px; height: 1px; background-color: #6c5ce7; border-radius: 1px;
    }

    /* 4. 选项列表 (隐藏滚动条) */
    .kp-filter-content { 
        flex: 1; overflow-y: auto; padding: 0; 
        scrollbar-width: none; -ms-overflow-style: none; /* 隐藏滚动条 */
    }
    .kp-filter-content::-webkit-scrollbar { display: none; }

    .kp-ft-group { display: flex; flex-direction: column; gap: 0; }
    
    .kp-ft-row { 
        display: flex; align-items: center; 
        padding: 12px 20px; 
        cursor: pointer; 
    }
    .kp-ft-text { font-size: 14px; color: #333; font-weight: 400; }

    /* Checkbox (加大) */
    .kp-check-box {
        width: 16px; height: 16px; /* 改大：原来是11px */
        border: 1px solid #333; 
        border-radius: 2px;     
        display: flex; align-items: center; justify-content: center;
        margin-right: 12px;
        background: transparent;
        flex-shrink: 0;
    }
    .kp-check-box input { display: none; }
    
    /* 选中状态 */
    .kp-check-box:has(input:checked) {
        border-color: #6c5ce7;
        background: transparent;
    }
    
    /* 对号 (加粗) */
    .kp-check-box:has(input:checked) .kp-checkmark::after {
        content: '';
        width: 5px; height: 9px; /* 改大对号尺寸 */
        border: solid #6c5ce7;
        border-width: 0 2px 2px 0; /* 加粗：原来是1px */
        transform: rotate(45deg);
        display: block;
        margin-top: -2px; 
    }
				 
	/* =========================================
       V10 更新样式：大图 + 标签
       ========================================= */

    /* 1. 首页大卡片图片加大 */
    .kp-latest-img {
        width: 140px;  /* 原来120px，加大 */
        height: 95px;  /* 原来80px，加大 */
        border-radius: 12px; 
        object-fit: cover; 
        background: #eee; 
        flex-shrink: 0;
    }
    /* 首页大卡片布局微调 */
    .kp-latest-card {
        padding-bottom: 5px; /* 让白色背景下面多留点空 */
        align-items: flex-start; /* 顶部对齐 */
    }

    /* 2. 详情页列表图片加大 */
    .kp-item-img { 
        width: 130px;  /* 原来100px，加大 */
        height: 85px;  /* 原来66px，加大 */
        border-radius: 10px; 
        object-fit: cover; 
        flex-shrink: 0; 
    }
    
    /* 3. 视频主题标签样式 */
    .kp-card-tags {
        display: flex; gap: 6px; flex-wrap: wrap;
    }
    .kp-small-topic {
        font-size: 11px;
        color: #888;
        background: #F7F7F7; /* 浅灰背景 */
        padding: 2px 6px;
        border-radius: 4px;
        line-height: 1.2;
    }

    
				 
	/* =========================================
       修正：首页播客大卡片 (图片巨大版)
       ========================================= */

    /* 1. 卡片容器：确保顶部对齐，去掉多余限制 */
    .kp-latest-card {
        display: flex; 
        gap: 15px;       /* 图片和文字的间距 */
        cursor: pointer; 
        position: relative;
        padding-bottom: 5px; /* 底部留一点白 */
    }

    /* 2. 图片：显著加大 */
    .kp-latest-img {
        width: 180px;    /* ★ 宽度加大：占屏幕约1/3 */
        height: 115px;   /* ★ 高度加大 */
        border-radius: 12px; 
        object-fit: cover; 
        background: #eee; 
        flex-shrink: 0;  /* 防止被文字挤压 */
        box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 加一点阴影更有质感 */
    }

    /* 3. 右侧文字区域：垂直分布 */
    .kp-latest-info {
        flex: 1; 
        display: flex; 
        flex-direction: column; 
        justify-content: flex-start; /* 顶对齐 */
        min-height: 115px; /* 至少和图片一样高，保证标签在底部 */
    }

    /* 标题微调 */
    .kp-latest-t {
        font-size: 16px; 
        font-weight: 700; 
        line-height: 1.4; 
        margin-bottom: 4px;
        /* 限制2行 */
        overflow: hidden; 
        display: -webkit-box; 
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical;
    }		
	/* 1. 新增：黑色统计小标签 (用于分类标题旁) */
    .kp-mini-tag.black { 
        color: #333; 
        border-color: #333; 
        background: transparent;
        font-weight: normal; 
        vertical-align: middle;
        margin-left: 8px; /* 距离标题的距离 */
    }

    /* 2. 修改：视频主题标签 (去掉了#号，颜色加深) */
    .kp-small-topic {
        font-size: 11px;
        color: #333;       /* ★ 修改：颜色改深 (原来是 #888) */
        background: #F0F0F0; 
        padding: 2px 6px;
        border-radius: 4px;
        line-height: 1.2;
    }

    /* 3. 新增：首页大卡片左侧容器 (用于包裹图片+下面的一行字) */
    .kp-latest-left-col {
        display: flex;
        flex-direction: column; /* 垂直排列：图在上，字在下 */
        width: 180px;           /* 宽度和图片一致 */
        flex-shrink: 0;
    }
    
    /* 配合上面的修改，图片宽度设为 100% */
    .kp-latest-img {
        width: 100%;       /* 填满容器 */
        height: 115px; 
        border-radius: 12px; 
        object-fit: cover; 
        background: #eee; 
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }			 
	/* ============================================
       V12.0 列表卡片改造 (大图 + 底部按钮栏)
       ============================================ */
    
    /* 1. 列表卡片容器：让它变高，顶部对齐 */
    .kp-full-item { 
        display: flex; 
        gap: 15px; 
        padding: 15px; 
        background: #fff; 
        border-radius: 16px; 
        margin-bottom: 15px; 
        box-shadow: 0 2px 10px rgba(0,0,0,0.02); 
        cursor: pointer; 
        align-items: flex-start; /* 关键：顶部对齐，方便撑开高度 */
    }

    /* 2. 列表缩略图：加大尺寸 (和首页大卡片一致) */
    .kp-item-img { 
        width: 160px;   /* 原来100px -> 改大 */
        height: 100px;  /* 原来66px -> 改大 */
        border-radius: 10px; 
        object-fit: cover; 
        flex-shrink: 0; 
        background: #eee;
    }

    /* 3. 底部按钮栏容器 */
    .kp-card-actions {
        display: flex; 
        align-items: center; 
        gap: 8px;           /* 按钮之间的间距 */
        margin-top: auto;   /* 关键：自动推到最底部 */
        padding-top: 10px;  /* 和上面文字拉开点距离 */
    }

    /* 4. 按钮样式 A: 第x期 (黑色标签风格) */
    .kp-btn-tag {
        font-size: 11px; color: #333; background: #F0F0F0;
        padding: 4px 8px; border-radius: 6px;
    }

    /* 5. 按钮样式 B: 预习 (空心/灰色风格) */
    .kp-btn-preview {
        font-size: 11px; color: #666; background: #fff;
        border: 1px solid #ddd;
        padding: 3px 10px; border-radius: 16px;
        cursor: pointer; transition: 0.2s;
    }
    .kp-btn-preview:hover { border-color: #333; color: #333; }

    /* 6. 按钮样式 C: 打卡 (未学习状态 - 灰色/红色) */
    .kp-btn-check {
        font-size: 11px; 
        display: flex; align-items: center; gap: 4px;
        padding: 4px 10px; border-radius: 16px;
        cursor: pointer;
    }
    /* 未学习样式 */
    .kp-btn-check.todo { background: #FFF0F0; color: #FF5252; border: 1px solid #FF5252; }
    /* 已学完样式 */
    .kp-btn-check.done { background: #E3F2FD; color: #35BAF3; border: 1px solid #35BAF3; }	
						
	/* ============================================
       V13.0 列表卡片 (上下分层布局)
       ============================================ */
    
    /* 1. 卡片大容器：改成垂直排列 */
    .kp-full-item { 
        display: flex; 
        flex-direction: column; /* ★ 关键：从左到右变成从上到下 */
        padding: 15px; 
        background: #fff; 
        border-radius: 16px; 
        margin-bottom: 15px; 
        box-shadow: 0 2px 10px rgba(0,0,0,0.02); 
        cursor: pointer; 
    }

    /* 2. 新增：上半部分 (图+文) 的容器 */
    .kp-top-row {
        display: flex;      /* 内部是左右排列 */
        gap: 15px;          /* 图文间距 */
        width: 100%;
        margin-bottom: 12px; /* ★ 让它和下面的按钮栏拉开距离 */
    }

    /* 图片样式保持不变 (确保够大) */
    .kp-item-img { 
        width: 160px; height: 100px; 
        border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #eee;
    }

    /* 3. 下半部分：按钮栏 */
    .kp-card-actions {
        display: flex; 
        align-items: center; 
        gap: 8px;
        width: 100%;
        /* 可以在这里加个上边框，看起来更像分离区域 (可选) */
        /* border-top: 1px solid #f9f9f9; padding-top: 10px; */
    }				
						
		/* ============================================
       V14.0 列表卡片 (大图 + 按钮组 + 弹窗)
       ============================================ */
    
    /* 1. 卡片布局 */
    .kp-full-item { 
        display: flex; flex-direction: column; 
        padding: 15px; background: #fff; border-radius: 16px; 
        margin-bottom: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); 
        cursor: pointer; 
    }
    
    .kp-top-row {
        display: flex; gap: 15px; width: 100%; margin-bottom: 15px; /* 加大间距 */
    }

    /* 2. 缩略图：再加大！ */
    .kp-item-img { 
        width: 180px;   /* 原来160 -> 改大 */
        height: 110px;  /* 原来100 -> 改大 */
        border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #eee;
    }

    /* 3. 底部按钮栏 */
    .kp-card-actions {
        display: flex; 
        align-items: center; 
        gap: 10px;         /* 按钮间距 */
        width: 100%;
        padding-top: 5px;  /* 微调 */
    }

    /* 按钮 A: 第x期  */
    .kp-btn-ep-tag {
        font-size: 11px;         /* 字号：和外面保持一致 */
        color: #333;             /* 黑色文字 */
        border: 1px solid #333;  /* ★ 关键：加上黑色边框 */
        padding: 3px 8px;        /* 内边距：撑开一点 */
        border-radius: 6px;      /* 圆角 */
        background: transparent; /* 透明背景 */
        font-weight: 600;        /* 稍微加粗 */
        margin-right: 5px;       /* 和右边的按钮拉开点距离 */
        line-height: 1.2;        /* 防止太高 */
    }

    /* 按钮 B & C: 预习 & 学完打卡 (大按钮样式) */
    .kp-btn-action {
        font-size: 13px; color: #333; background: #fff;
        border: 1px solid #E0E0E0; /* 淡淡的边框 */
        padding: 6px 16px;         /* 大一点的内边距 */
        border-radius: 20px;       /* 圆润 */
        cursor: pointer; transition: 0.2s;
        font-weight: 600;
        display: flex; align-items: center; gap: 4px;
    }
    .kp-btn-action:hover { border-color: #333; background: #f9f9f9; }
    .kp-btn-action:active { transform: scale(0.95); }

    /* 状态标签：强制靠右 (margin-left: auto) */
    .kp-status-label {
        margin-left: auto; /* ★ 关键：推到最右边 */
        font-size: 12px; font-weight: 600;
    }

    /* ★★★ 恭喜弹窗 (Toast) 样式 ★★★ */
    .kp-toast-popup {
        position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9);
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px); /* 磨砂玻璃效果 */
        padding: 20px 30px;
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15);
        text-align: center;
        z-index: 99999;
        opacity: 0; pointer-events: none;
        transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹跳动画 */
        border: 1px solid rgba(0,0,0,0.05);
        min-width: 200px;
    }
    .kp-toast-popup.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    
    .kp-toast-icon { font-size: 30px; margin-bottom: 10px; display: block; }
    .kp-toast-text { font-size: 16px; font-weight: 700; color: #333; margin-bottom: 4px; }
    .kp-toast-sub { font-size: 13px; color: #888; }			
				   
	/* ============================================
       V15.0 更新：进度条 & 复习按钮
       ============================================ */

    /* 1. 缩略图容器 (必须加 relative，为了放进度条) */
    .kp-latest-left-col,  /* 首页大卡片左侧 */
    .kp-img-wrapper,      /* 列表页图片容器 (下面PHP里会加这个class) */
    .kp-simple-img-wrap { /* 简单列表容器 */
        position: relative; 
        overflow: hidden; 
        border-radius: 10px; /* 确保进度条不溢出圆角 */
    }

    /* 2. 进度条样式 */
    .kp-prog-bar-bg {
        position: absolute; 
        bottom: 0; left: 0; right: 0;
        height: 4px; 
        background: rgba(0,0,0,0.3); /* 半透明底色 */
        z-index: 2;
    }
    .kp-prog-bar-fill {
        height: 100%; 
        background: #35BAF3; /* 你的主题蓝 */
        width: 0%; 
        border-radius: 0 4px 4px 0;
    }

    /* 3. 列表页图片容器 (为了配合进度条，专门包一层) */
    .kp-img-wrapper {
        width: 180px; height: 110px; flex-shrink: 0;
    }
    .kp-item-img {
        width: 100%; height: 100%; object-fit: cover;
    }

    /* 4. 复习按钮 (样式同预习) */
    .kp-btn-review {
        font-size: 13px; color: #666; background: #fff;
        border: 1px solid #E0E0E0;
        padding: 6px 16px; border-radius: 20px;
        cursor: pointer; transition: 0.2s;
        font-weight: 600; display: flex; align-items: center; gap: 4px;
    }
    .kp-btn-review:hover { border-color: #333; color: #333; background: #f9f9f9; }	
    /* =========================================
   V16.0 样式修复补丁 (针对你的3点要求)
   ========================================= */

/* 1. 修复：第X期 标签 (针对要求 ①) */
/*  小列表的标签样式 */
.kp-simple-tag {
    /* 让方框里稍微宽敞一点 */
    padding: 2px 7px !important; 
    font-size: 10px !important;
    border: 1px solid #333 !important;
    border-radius: 6px !important;
    color: #333 !important;
    background: transparent !important;
    font-weight: 500 !important;
    flex-shrink: 0; /* 防止被挤扁 */
    line-height: 1.2;
    text-align: center;
}

/* 2. 修复：简单列表布局 (针对要求 ②) */
/* 让图片和文字稍微紧凑一点，给右边留出空间 */
.kp-simple-row {
    display: flex; 
    gap: 10px !important; /* 原来是12px，改小一点 */
    padding-left: 0 !important; /* ★ 关键：强制去掉左边的内边距 */
    margin-bottom: 15px; 
    cursor: pointer;
    align-items: center; /* 垂直居中 */
}

/* 图片稍微改小一点点，给文字腾地方，防止挤压 */
.kp-simple-img-box {
    width: 110px !important; /* 原来110px，改小10px */
    height: 68px !important;
    border-radius: 8px; 
    overflow: hidden; 
    position: relative; 
    flex-shrink: 0;
}

/* 3. 修复：标题间距 (针对要求 ③) */
.kp-simple-title {
    font-size: 14px; 
    font-weight: 600; 
    line-height: 1.4; 
    
    /* 关键：增加标题和下方标签的距离 */
    margin-bottom: 8px !important; 
    
    /* 限制显示2行 */
    overflow: hidden; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}

/* 进度文字不换行 */
.kp-simple-meta {
    font-size: 11px;
    white-space: nowrap; /* 防止"学到x句"换行 */
}
/* 手机端/小屏优化 */
@media (max-width: 768px) {
    /* 1. 标题往上提 (减少 margin-bottom) */
    .kp-simple-title {
        margin-bottom: 4px !important; /* 原来是 8px -> 改小 */
        line-height: 1.3;
    }

    /* 2. 第X期 方框优化 (内部宽松一点) */
    .kp-btn-ep-tag, 
    .kp-simple-tag {
        padding: 2px 7px !important; /* 上下2px, 左右8px */
        font-size: 10px !important;  /* 字号稍微小一点点更精致 */
        border: 1px solid #666 !important; /* 边框颜色稍浅一点，不那么生硬 */
    }
}