/*
Theme Name:   Blocksy Child
Template:     blocksy
Version:      V40.0 (Safe Restore: Only Word Page Modified)
*/

/* ===================================================================
   ██████╗  PART 0. 字体导入 (Fonts)
   说明：最优先加载字体
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');


/* ============这里是你喜欢的电脑版登录页面效果 右上角是黑色边框的韩语单词 播客新闻 头像======== */

/* 定义CSS自定义属性（CSS变量），用于导航条样式 */
:root { 
    --nav-height: 10px;       /* 导航条高度 */
    --nav-width: 22px;        /* 导航条宽度 */
    --nav-gap: 16px;          /* 导航项之间的间距 */
    --nav-border-color: #000000;  /* 导航边框颜色 */
    --nav-border-width: 1px;      /* 导航边框粗细 */
    --nav-border-radius: 1px;     /* 导航边框圆角 */
}

/* 头部导航菜单垂直居中 */
.ct-header .menu { align-items: center !important; }

/* 导航菜单项左右间距使用变量计算 */
.ct-header .menu > li { margin-left: calc(var(--nav-gap) / 2); margin-right: calc(var(--nav-gap) / 2); }

/* 导航链接使用变量定义内边距、边框和圆角 */
.ct-header .menu > li > a { 
    padding: var(--nav-height) var(--nav-width);      /* 上下内边距使用nav-height，左右使用nav-width */
    border: var(--nav-border-width) solid var(--nav-border-color);  /* 边框样式使用变量 */
    border-radius: var(--nav-border-radius);          /* 圆角使用变量 */
}

/* 头像菜单项样式 */
#menu-item-320 { 
    position: relative;               /* 相对定位 */
    margin-top: 0 !important;         /* 顶部外边距为0 */
    display: flex !important;         /* 弹性布局 */
    align-items: center !important;   /* 垂直居中 */
    height: 100%;                     /* 高度100% */
}

/* 头像链接样式 */
#menu-item-320 > a.ct-menu-link { 
    font-size: 0 !important;          /* 字体大小为0，隐藏文字 */
    color: transparent !important;    /* 文字颜色透明 */
    background-image: url('http://60.205.125.23/wp-content/uploads/2025/11/微信图片_2025-11-02_053215_510.jpg');  /* 背景图片（头像） */
    background-size: cover;           /* 背景图片覆盖整个元素 */
    background-position: center;      /* 背景图片居中 */
    display: block;                   /* 块级元素 */
    width: 40px;                      /* 宽度40像素 */
    height: 40px;                     /* 高度40像素 */
    padding: 0;                       /* 内边距为0 */
    border-radius: 50%;               /* 圆形 */
    border: none !important;          /* 无边框 */
}

/* 隐藏头像链接的下拉箭头 */
#menu-item-320 > a.ct-menu-link .ct-toggle-dropdown-desktop { 
    display: none !important; 
}

/* 隐藏头像菜单项的子菜单 */
#menu-item-320 > ul.sub-menu { 
    display: none !important; 
}
/* ============结束======== */

/* =====================正式开始================================
   ██████╗  PART 1. 核心基础设置 (Base & Wrapper)
   说明：HTML重置、Weverse大框架容器
   =================================================================== */

/* 1.1 全局重置 */
html, body { 
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}
#wpadminbar { display: none !important; }
html { margin-top: 0 !important; }
#main, .site-main, .content-area, .entry-content, .ct-container, article { 
    margin-top: 0 !important; 
    padding-top: 0 !important; 
    border: none !important; 
}

/* 1.2 Weverse 包装器 */
.wv-wrapper { 
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    position: relative !important;
    left: 0 !important;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 160px) !important;
    background-color: #fff;
    overflow-x: hidden;
    padding-top: 0 !important;
}


/* ===================================================================
   ██████╗  PART 2. 主体布局结构 (Body Layout)
   说明：控制 左-中-右 三栏的排布逻辑
   =================================================================== */

/* 2.1 主体容器 */
.wv-main-body { 
    display: flex;
    flex-grow: 1;
    width: 100%;
    justify-content: flex-start;
    padding-left: 0 !important;
    padding-right: 40px !important;
    gap: 30px;
    padding-top: 100px !important;
    box-sizing: border-box;
    align-items: flex-start !important;
}

/* 2.2 中间内容区域 (Content) */
.wv-content { 
    flex-grow: 1;
    min-width: 0;
    margin-left: 260px; /* 给左侧栏留位置 */
    max-width: 900px;
    width: 100%;
}
.wv-content-inner { 
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 2.3 顶部间距修复 (first-child) */
.wv-content-inner > *:first-child, 
.wv-content-inner > div > *:first-child, 
.entry-content > *:first-child, 
h1:first-child, h2:first-child, p:first-child { 
    margin-top: 0 !important; 
    padding-top: 0 !important; 
    line-height: 1.2 !important; 
}
p:empty { display: none !important; }

/* 2.4 右侧栏容器占位 (具体内容样式在后面) */
.wv-right-column { 
    width: 240px;
    flex-shrink: 0;
    display: none;
    margin-right: 20px;
}
.wv-right-scrollable { 
    position: sticky;
    top: 70px;
}
.has-right-column .wv-content { 
    max-width: 1600px !important;
    margin-left: 260px;
}
/* ==============================================
   ★ 特殊补丁：当右侧栏关闭时，强制中间变宽比如
  登录页面 ============================================== */

/* 1. 只有当大盒子【没有】has-right-column 标签时 */
.wv-main-body:not(.has-right-column) .wv-content {
    max-width: 900px !important; /* 把 900px 撑大到 1200px */
}

/* 2. 同时把里面的小盒子也撑大 */
.wv-main-body:not(.has-right-column) .wv-content-inner {
    max-width: 100% !important; /* 不再锁死 800px，跟随父亲变宽 */
}
@media (min-width: 1100px) { 
    .has-right-column .wv-right-column { display: block; }
}

/* ===================================================================
   ██████╗  PART 2.5 布局模式逻辑 (推特动画 V6 - 浅色磨砂玻璃版)
   =================================================================== */

/* A. 电脑端逻辑 (保持原样) */
@media (min-width: 1001px) { 
    .layout-mode-fixed .wv-header-brand { cursor: default; }
    .layout-mode-drawer .wv-sidebar-scrollable { opacity: 0; pointer-events: none; }
    .layout-mode-drawer.sidebar-is-expanded .wv-sidebar-scrollable { opacity: 1; pointer-events: auto; }
    .layout-mode-drawer .wv-sidebar { transform: translateX(-100%); transition: transform 0.3s ease; }
    .layout-mode-drawer.sidebar-is-expanded .wv-sidebar { transform: translateX(0); }
    .wv-overlay { display: none !important; }
}

/* B. 手机端逻辑 (★ 磨砂玻璃 + 去除分割线) */
@media (max-width: 1000px) {

    /* --- 1. 侧边栏 (加了 html body 前缀，权力更大) --- */
    html body .wv-sidebar {
        position: fixed !important;
        
        /* ★ 强制顶天立地 (覆盖电脑端的 60px) */
        top: 0 !important; 
        left: 0 !important;
        width: 260px !important;
        height: 100vh !important;
        
        /* ★ 强制吐出棉花 (覆盖电脑端的 40px) */
        padding-top: 0 !important; 
        
        /* 确保纯白 */
        background-color: #fff !important;
        
        z-index: 3000 !important; 
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    
    .sidebar-is-expanded .wv-sidebar { transform: translateX(0); }

    /* --- 5. 侧边栏内部文字 (防止撞头) --- */
    /* 必须加在这里，让文字往下挪，避开手机状态栏 */
    html body .wv-sidebar-scrollable {
        padding-top: 60px !important; 
    }

    /* --- 2. 大遮罩 (身体部分) --- */
    .wv-overlay {
        position: fixed !important;
        top: 0; left: 0;
        width: 100vw !important; height: 100vh !important;
        
        /* 浅灰半透明 + 磨砂 */
        background-color: rgba(220, 220, 220, 0.3) !important; 
        backdrop-filter: blur(10px); 
        -webkit-backdrop-filter: blur(10px);
        
        z-index: 2000 !important; 
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        display: block !important;
    }
    .sidebar-is-expanded .wv-overlay {
        opacity: 1;
        pointer-events: auto;
    }
    /* --- 3. 顶栏样式 & 专属小遮罩 --- */
    .wv-mobile-top-bar {
        position: fixed !important;
        top: 0; left: 0; width: 100%; height: 55px;
        background: #fff;
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        will-change: transform;
        box-shadow: 0 1px 5px rgba(0,0,0,0.05); /* 平时的阴影 */
        z-index: 999; 
    }
    
    /* ★ 关键修复：当侧边栏打开时，去掉顶栏的阴影，消除那条线！ */
    .sidebar-is-expanded .wv-mobile-top-bar {
        box-shadow: none !important; 
    }

    /* 顶栏专属小遮罩 (样式要和大遮罩一模一样) */
    .wv-mobile-top-bar::after {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        
        /* ★ 必须和大遮罩完全一致 */
        background-color: rgba(230, 230, 230, 0.6); 
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .sidebar-is-expanded .wv-mobile-top-bar::after {
        opacity: 1;
    }
    
    .wv-mobile-top-bar.wv-hide-bar { transform: translateY(-100%); }

    /* --- 4. 全员大迁徙 --- */
    .sidebar-is-expanded .wv-mobile-top-bar, 
    .sidebar-is-expanded .wv-content,         
    .sidebar-is-expanded .wv-right-column,    
    .sidebar-is-expanded footer,              
    .sidebar-is-expanded .ct-footer {         
        transform: translateX(260px);        
    }

    /* 垫子逻辑 */
    .wv-main-body { padding-top: 55px !important; }
    .wv-wrapper.no-content-padding .wv-main-body { padding-top: 55px !important; }
    body.hide-mobile-header .wv-mobile-top-bar { display: none !important; }
    body.hide-mobile-header .wv-main-body { padding-top: 15px !important; }
    body.hide-mobile-header .wv-wrapper.no-content-padding .wv-main-body { padding-top: 15px !important; }

}

/* ==============================================
   ★ 视觉统一：把页脚和背景全变成白色
   说明：消除底部的色差，让页面看起来是一整张白纸
   ============================================== */
body, 
.ct-footer, 
footer {
    background-color: #ffffff !important; /* 强制变白 */
}

/* 如果页脚原本有上边框线，也把它去掉，彻底隐形 */
.ct-footer {
    border-top: none !important;
    box-shadow: none !important;
}


/* ===================================================================
   ██████╗  PART 3. 电脑端顶部导航栏 (Desktop Header)
   说明：电脑端显示的白色顶部条、汉堡图标、Logo
   =================================================================== */

.wv-desktop-top-header { 
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    z-index: 2000;
    padding-left: 10px;
    box-sizing: border-box;
}
.wv-header-brand { 
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 100%;
}
.wv-hamburger-icon { 
    width: 20px;
    height: 20px;
    margin-left: 0;
    margin-right: 26px;
    display: flex;
    align-items: center;
}
/* 确保图片填满图标容器 */
.wv-hamburger-icon img { width: 100%; height: 100%; }

.wv-logo-text { 
    font-family: 'Roboto Mono', monospace !important;
    font-size: 22px;
    font-weight: 500;
    color: #000;
    text-decoration: none !important;
    display: flex;
    align-items: center;
}
.emoji { 
    font-size: 24px;
    margin-top: -2px;
    margin-right: 7px;
    margin-left: -16px;
}


/* ===================================================================
   ██████╗  PART 4. 左侧栏详细内容 (Left Sidebar)
   说明：包含欢迎语、用户盒子、导航菜单
   =================================================================== */

/* 4.1 侧边栏容器 (修改版：修复顶部断层缝隙) */
.wv-sidebar { 
    width: 260px;
    flex-shrink: 0;
    position: fixed !important;
    
    /* ★★★ 修改核心在这里 ★★★ */
    
    /* 1. 提裤子：把侧边栏往上提 40px，让它紧贴顶栏(60px) */
    top: 60px !important;             
    
    /* 2. 塞棉花：在盒子内部顶端塞 40px 的白垫子 */
    /* 作用：把刚才因为“提裤子”而跟着跑上去的文字，强行挤回原来的位置 */
    padding-top: 40px !important;     
    
    /* 3. 控身高：屏幕高度 - 顶栏高度(60px) */
    /* 这样侧边栏正好铺满剩下所有的屏幕 */
    height: calc(100vh - 60px) !important;
    
    /* 4. 防撑爆：把 padding 算在高度里，防止盒子变长 */
    box-sizing: border-box !important;
    
    /* ★★★ 修改结束 ★★★ */

    left: -20px;
    background-color: #fff;           /* 保持白色背景 */
    z-index: 1999;
    overflow-y: auto;
    border-right: none;               
}

/* 4.2 可滚动区域 & 内边距 */
.wv-sidebar-scrollable { 
    display: flex;
    flex-direction: column;
    position: static !important;
    top: auto !important;
    transition: opacity 0.3s ease;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    scrollbar-width: none;
    padding: 20px 20px 20px 50px;     
    box-sizing: border-box;
}
.wv-sidebar-scrollable::-webkit-scrollbar { display: none; }

/* 4.3 欢迎区块 (含中文名) */
.brand-cn-name {
    font-size: 23px !important;       
    color: #999999 !important;        
    font-weight: 500 !important;      
    letter-spacing: 0.1px !important;   
    margin-top: -5px !important;
    margin-bottom: 30px !important;   
}
.wv-welcome-block { margin-bottom: 25px; }
.wv-welcome-block h2 { 
    font-size: 22px; font-weight: 700; color: #35BAF3; margin: 0 0 6px 0; line-height: 1.2;                 
}
.wv-welcome-block .sub { 
    font-size: 12px; font-weight: 400; color: #888;                      
}

/* 4.4 用户盒子 (User Box) */
.wv-user-block { margin-bottom: 20px; }

.user-box { 
    display: flex;
    align-items: center;
    padding: 10px 10px;               
    background: #f7f9fa;              
    border-radius: 12px;              
    text-decoration: none !important;
    width: fit-content;
    min-width: 150px;                 
}
.user-box:hover { background: #eff3f4; }

.u-avatar { 
    width: 42px; height: 42px; border-radius: 50%; margin-right: 12px; object-fit: cover;
}

/* ★★★ 核心修复：只加了这一段，让名字和余额变回上下排列 ★★★ */
.user-box > div {
    display: flex !important;
    flex-direction: column !important; /* 强制上下分布 */
    justify-content: center !important;
    align-items: flex-start !important;
}

/* 下面全部是你原本的样式，一个字都没改 */
.u-name { 
    font-weight: 500; 
    color: #0f1419; 
    font-size: 12px; 
    
    /* ★ 改这里 1：顶部间距改小 (解决卡片变高的问题) */
    margin-top: 6px !important;  /* 原来是6px，改成0，卡片就会缩回去 */
    
    /* ★ 改这里 2：底部间距 (控制它和“曲奇数”之间的距离) */
    margin-bottom: 0px !important; /* 这个数字越大，名字和曲奇离得越远；原来是6px，这里改小了 */
}

/* 未登录状态下的“同步进度”样式 */
html body .user-box .sub {
    font-size: 12px !important; color: #35BAF3 !important; font-weight: 400 !important; margin-top: 3px !important; display: block !important;        
}
    /* 控制“曲奇图标 + 数字”的样式 */
.u-balance {
    font-size: 11px !important;       /* 大小 */
    color: #35BAF3 !important;        /* 颜色 */
    font-weight: 500 !important;      /* 粗细 */
    margin-top: 2px !important;       /* 顶部间距 */
    display: block !important;        /* 独占一行 */
}

/* 4.5 导航菜单 (Nav Items) */
.wv-nav-block { 
    display: flex; flex-direction: column; gap: 10px; 
}
.nav-item { 
    display: flex; align-items: center; padding: 10px 0; text-decoration: none !important; cursor: pointer; transition: color 0.2s;
}
.nav-item:hover { color: #35BAF3; }
.nav-item .icon { 
    width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-right: 12px; 
}
.nav-item .icon img, .nav-item .icon svg { 
    width: 20px !important; height: 20px !important; object-fit: contain !important; display: block !important;
}
.nav-item .text { 
    font-size: 16px !important; font-weight: 400 !important; color: #333; 
}
.wv-divider { 
    height: 0.5px; background: #f5f5f5; margin: 15px 0; 
}

/* ★ 特殊调整：生词本爱心图标大小 */
html body .wv-nav-block a[href*="word-folders"] .icon {
    width: 24px !important; height: 2px !important; margin-right: 11px !important; 
}
html body .wv-nav-block a[href*="word-folders"] .icon img {
    width: 19px !important; height: 19px !important; max-width: none !important;   
}


/* ===================================================================
   ██████╗  PART 5. 首页核心组件 (每日一句 & 幻灯片)
   =================================================================== */

/* ==============================================
   每日一句 (Daily Quote) - 终极加权修复版 (Style.css 专用)
   说明：增加了 html 前缀以提升优先级，解决在 style.css 不生效的问题
   ============================================== */

/* 1. 外框容器设置 (Box) */
html body .daily-quote-box {         /* <--- 逗号去掉了，大括号留在后面 */
    
    /* --- 边框与背景 --- */
    background-color: #ffffff !important;   /* 背景颜色 */
    border: 1px solid #f0f0f0 !important;   /* 边框线条：1px 浅灰 */
    border-radius: 8px !important;          /* 圆角大小 */

    /* --- 文字离边框的距离 (内边距) --- */
    padding-top: 25px !important;    
    padding-bottom: 4px !important;  /* 底部留白 */
    padding-left: 15px !important;   /* 左侧留白 */
    padding-right: 12px !important;  /* 右侧留白 */
    
    /* --- 布局方式 --- */
    display: flex !important;
    flex-direction: column !important; /* 垂直排列 */

    /* --- 让盒子永远居中 (变窄后需要这个) --- */
    margin-left: auto !important;
    margin-right: auto !important;

    /* --- 每日一句离下面幻灯片的距离 --- */
    margin-bottom: 40px !important;  /* 数字越大，离下面越远 */
}

/* 2. 第一行：韩语原文 (Korean) */
html body .daily-quote-box .korean-quote {
    /* --- 位置控制 (关键) --- */
    /* ★ 加了 html 前缀，强迫浏览器执行这个距离 */
    margin-top: 20px !important;      
    margin-bottom: 10px !important;   
    
    /* --- 字体样式 --- */
    font-family: "Gowun Dodum", sans-serif !important; 
    font-weight: 400 !important;      
    line-height: 1.3 !important;      
    letter-spacing: 0.5px !important; 
    color: #000000 !important;        
    
    /* 防止 display 属性被干扰 */
    display: block !important;
}

/* 3. 第二行：中文翻译 (Chinese) */
html body .daily-quote-box .chinese-translation {
    /* --- 位置控制 --- */
    margin-top: 0 !important;
    margin-bottom: 3px !important;    
    
    /* --- 字体样式 --- */
    font-weight: 400 !important;      
    line-height: 1 !important;        
    color: #555555 !important;        
    
    display: block !important;
}

/* 4. 第三行：来源/剧名 (Source) */
html body .daily-quote-box .source {
    /* --- 位置控制 --- */
    align-self: flex-end !important;  /* flex-end=靠右 */
    margin-top: 0px !important;       
	
	/* ★【加这行！】把文字自带的“下巴”切掉 */
    margin-bottom: 0 !important; 
    
    /* --- 字体样式 --- */
    font-style: normal !important;    
    font-weight: 400 !important;      
    color: #999999 !important;        
    
    display: block !important;
}

/* ==============================================
   PART B. 宽度与字号控制 (电脑/手机分开调) - 已加权
   ============================================== */

/* --- 1. 电脑端 (屏幕宽度 ≥ 1024px) --- */
@media (min-width: 1024px) { 
    /* ★【电脑宽度调节】 */
    html body .daily-quote-box {     /* <--- 干净利落 */
        width: 550px !important;     
        max-width: 100% !important;
        
        /* ★【位置对齐控制：靠右】★ */
        margin-right: 0 !important;  
    }

    html body .daily-quote-box .korean-quote        { font-size: 24px !important; }
    html body .daily-quote-box .chinese-translation { font-size: 16px !important; }
    html body .daily-quote-box .source              { font-size: 12px !important; }
}

/* --- 2. 平板端 (屏幕宽度 768px 到 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
    html body .daily-quote-box {     /* <--- 干净利落 */
        /* ★【平板宽度】 */
        width: 500px !important;     
        max-width: 90% !important;   
        
        /* ★【位置对齐控制：靠右 10px】★ */
        margin-right: 10px !important;  
        
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    html body .daily-quote-box .korean-quote        { font-size: 26px !important; }
    html body .daily-quote-box .chinese-translation { font-size: 18px !important; }
    html body .daily-quote-box .source              { font-size: 12px !important; }
}

/* --- 3. 手机端 (屏幕宽度 ≤ 767px) --- */
@media (max-width: 767px) { 
    /* ★【手机宽度调节】 */
    html body .daily-quote-box {     /* <--- 干净利落 */
        width: 90% !important;       
        
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    html body .daily-quote-box .korean-quote        { font-size: 20px !important; }
    html body .daily-quote-box .chinese-translation { font-size: 15px !important; }
    html body .daily-quote-box .source              { font-size: 12px !important; }
}
/* ===================================================================
   幻灯片 (Ultimate Slider) - 最终加权修复版
   说明：
   1. 严格保留原始数据：圆角(20px/4px)，图片大小(80px/50px)。
   2. 修正平板显示逻辑：平板(竖屏)现在会显示电脑版大图，不再显示手机图。
   3. 间距控制：手机/平板左右留白 90%，缩略图全端靠右。
   =================================================================== */

/* --- 1. 幻灯片最外层容器 --- */
html body .ultimate-slider-wrapper {
    /* 离每日一句的距离 */
    margin-top: 20px !important;       
    
    /* 默认全宽 */
    width: 100% !important;
    max-width: 100% !important;
    
    /* 居中对齐 */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- 2. 主幻灯片区域 --- */
html body .ultimate-slider-wrapper .main-slides-swiper {
    position: relative;
    /* 还原原始圆角 20px */
    border-radius: 20px !important;   
    overflow: hidden;                 
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* --- 3. 缩略图导航容器 --- */
html body .ultimate-slider-wrapper .thumbnail-nav-container { 
    display: flex;
    margin-top: 20px !important;      /* 还原原始间距 20px */
    gap: 4px !important;
    
    /* 强制靠右 */
    justify-content: flex-end !important; 
}

/* --- 4. 缩略图单个项 --- */
html body .ultimate-slider-wrapper .thumb-item { 
    cursor: pointer;
    border: 1px solid transparent !important;    
    transition: border-color 0.3s;
    
    /* 还原原始圆角 4px */
    border-radius: 4px !important;    
    
    overflow: hidden;
}

/* --- 5. 缩略图 - 激活状态 --- */
html body .ultimate-slider-wrapper .thumb-item.active { 
    /* 还原原始灰色边框 */
    border-color: #a6a6a6 !important;            
}

/* --- 6. 图片显示逻辑 (基础) --- */
.ultimate-slider-wrapper .desktop-version-img { display: block; width: 100%; height: auto; }
.ultimate-slider-wrapper .mobile-version-img { display: none; width: 100%; height: auto; }


/* ===================================================================
   PART B. 响应式控制 (电脑 / 平板 / 手机)
   =================================================================== */

/* --- 1. 电脑端 (PC: ≥ 1024px) --- */
@media (min-width: 1024px) { 
    /* 电脑端保持全宽，仅控制缩略图大小 */
    html body .ultimate-slider-wrapper .thumb-item img { 
        width: 60px !important;      
        height: 60px !important;     
        object-fit: cover; 
    }
}

/* --- 2. 平板端 (768px - 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
    html body .ultimate-slider-wrapper {
        /* 平板端左右留白控制 (90%宽度) */
        width: 90% !important;      
    }

    /* 平板端缩略图大小 (过渡尺寸 60px) */
    html body .ultimate-slider-wrapper .thumb-item img { 
        width: 60px !important;      
        height: 60px !important;     
        object-fit: cover; 
    }
}

/* --- 3. 手机端 (Mobile: ≤ 767px) --- */
/* ★ 关键修改：只有小于 767px 才切换为手机竖图，平板显示上面的电脑图 */
@media (max-width: 767px) { 
    
    /* 图片切换逻辑移动到这里 */
    .ultimate-slider-wrapper .desktop-version-img { display: none; }
    .ultimate-slider-wrapper .mobile-version-img { display: block; }
    
    html body .ultimate-slider-wrapper {
        /* 手机端左右留白控制 (90%宽度) */
        width: 95% !important;        
    }
    
    /* 手机端缩略图大小 (还原 50px) */
    html body .ultimate-slider-wrapper .thumb-item img { 
        width: 50px !important;      
        height: 50px !important;     
        object-fit: cover; 
    }
}



/* ===================================================================
   ██████╗  PART 6. 首页右侧栏内容 (Right Sidebar Content)
   说明：包含继续学习卡片、文章列表等
   =================================================================== */

/* 6.1 通用白色卡片容器 */
.right-widget-box { 
    background: #fff; border: 1px solid #efefef; border-radius: 12px; padding: 15px; margin-bottom: 20px;
}

/* 6.2 “继续学习”功能卡片 */
.study-card-v2 { 
    display: flex; justify-content: space-between; align-items: center; padding: 20px !important;
}
.study-content-left { 
    display: flex; flex-direction: column; gap: 6px;
}
.study-meta-top { font-size: 12px; color: #888; font-weight: 500; }
.study-main-title { font-size: 15px; font-weight: 800; color: #000; line-height: 1.3; }
.study-mode-tag { 
    display: inline-flex; align-items: center; background: #e6f7ff; color: #0099ff; font-size: 11px; padding: 2px 8px; border-radius: 6px; width: fit-content; font-weight: 600;
}
.study-mode-tag .dot { width: 6px; height: 6px; background: #0099ff; border-radius: 50%; margin-right: 5px; }
.btn-continue-v2 { 
    background: #0f1419; color: #fff !important; padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: all 0.2s;
}
.btn-continue-v2:hover { background: #333; transform: translateY(-1px); }

/* 6.3 文章/播客列表模块 */
.media-header-top h3 { font-size: 18px; font-weight: 800; margin: 0 0 15px 0; color: #000; }
.media-filter-row { 
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 13px; color: #000; font-weight: 600;
}
.filter-dropdown { 
    color: #666; cursor: pointer; display: flex; align-items: center; font-weight: 400; font-size: 12px;
}
.media-item { 
    display: flex; align-items: flex-start; margin-bottom: 15px; cursor: pointer;
}
.media-thumb { 
    width: 110px; height: 62px; border-radius: 6px; overflow: hidden; margin-right: 10px; flex-shrink: 0;
}
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-info { 
    flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 62px;
}
.media-title { 
    font-size: 13px; font-weight: 500; color: #0f1419; line-height: 1.4; margin-bottom: 4px;
}
.media-tag { 
    display: inline-block; font-size: 10px; color: #ff4d4f; border: 1px solid #ff4d4f; padding: 0 3px; border-radius: 3px; width: fit-content;
}
.media-date { font-size: 11px; color: #999; }
.wv-right-footer { font-size: 12px; color: #aaa; text-align: left; margin-top: 15px; }


/* ===================================================================
   ██████╗  PART 7. 移动端/平板端 响应式控制 (Mobile & Tablet)
   说明：包含移动端顶部栏、侧边栏抽屉逻辑、布局重排
   =================================================================== */

/* 7.1 移动端顶部栏容器 (默认隐藏) */
.wv-mobile-top-bar { display: none; }

/* 7.2 移动端核心样式 (宽度≤1000px) */
@media (max-width: 1000px) {
    /* 隐藏桌面版顶部栏 */
    .wv-desktop-top-header { display: none !important; }
    
    /* 显示移动端顶部栏 */
    .wv-mobile-top-bar { 
        display: flex !important;
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        height: 54px;
        background: #ffffff !important;
        border-bottom: 1px solid #eee;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        z-index: 200002 !important;
    }

    /* 左上角头像 */
    .mobile-avatar-trigger { 
        width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center;
        /* 背景图：未登录时显示 */
        background-image: url('/wp-content/uploads/2025/11/微信图片_2025-11-02_053215_510.jpg');
        background-size: cover; background-position: center; border-radius: 50%;
    }
    .mobile-avatar-trigger img { 
        width: 32px; height: 32px; border-radius: 50%; border: 1px solid #f0f0f0; object-fit: cover;
    }
    body:not(.logged-in) .mobile-avatar-trigger img { opacity: 0 !important; }

    /* 网站标题 */
    .mobile-site-title { 
        font-family: 'Roboto Mono', monospace !important;
        font-size: 18px; font-weight: 700; color: #000;
        position: absolute; left: 50%; transform: translateX(-50%);
        cursor: pointer; pointer-events: auto;
    }
    .mobile-spacer { width: 32px; }

    /* 移动端侧边栏 (抽屉) */
    .wv-sidebar { 
        position: fixed; top: 54px; left: 0;
        height: calc(100vh - 54px); width: 280px;
        transform: translateX(-100%);
        background: #fff; box-shadow: 2px 0 15px rgba(0,0,0,0.1);
        padding: 0px; z-index: 200001 !important;
        padding-top: 5px !important; border-right: none;
        transition: transform 0.3s ease;
    }
    .sidebar-is-expanded .wv-sidebar { transform: translateX(0); }
    
    /* 遮罩层 */
    .wv-overlay { 
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.4); z-index: 200000; display: none;
    }
    .sidebar-is-expanded .wv-overlay { display: block !important; }

    /* ★★★ 核心修复：防止重叠的布局代码 ★★★ */
    html body .wv-main-body { 
        display: flex !important;           
        flex-direction: column !important;  /* 垂直方向！ */
        padding: 0 !important;
        padding-top: 54px !important;
        gap: 0 !important;
    }

    /* 中间内容区域 */
    html body .wv-content { 
        width: 100% !important; max-width: 100% !important; margin-left: 0 !important; flex: none !important;
    }
    
    /* 内容内部间距 */
    html body .wv-content-inner { 
        padding-top: 40px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100vw !important; max-width: 100vw !important; margin-left: 0 !important; box-sizing: border-box !important;
    }
    html body .wv-content-inner > *:first-child, 
    html body .wv-content-inner > div:first-child { 
        margin-top: 0 !important;
    }

    /* ★★★ 右侧栏修复：变成底部栏 ★★★ */
    html body .wv-right-column { 
        display: block !important;          
        width: 100% !important;             
        margin-left: 0 !important; margin-right: 0 !important;
        margin-top: 40px !important;        
        padding: 0 15px !important;
        box-sizing: border-box !important;
        flex: none !important;
        order: 999 !important;              
    }
	/* ★★★ 如果右侧栏是空的，在手机上彻底消失 */
    html body .wv-right-column.is-empty-sidebar {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body .wv-right-scrollable { position: static !important; top: auto !important; }

    /* 手机端侧边栏内容间距修正 */
    html body .wv-sidebar-scrollable {
        padding-left: 25px !important; 
        padding-top: 45px !important; padding-right: 10px !important; padding-bottom: 20px !important;
    }

    /* 手机端字体修正 */
    html body .brand-cn-name {
        font-size: 20px !important; color: #999999 !important; font-weight: 500 !important; letter-spacing: 0.3px !important;   
        margin-top: 5px !important; margin-bottom: 25px !important;    
    }
    .wv-welcome-block h2 { 
        font-size: 20px; font-weight: 500; color: #35BAF3; margin: 0 0 6px 0; line-height: 1.2;                 
    }
    
    /* 手机端未登录字号 */
    html body .user-box .sub {
        font-size: 10px !important; color: #35BAF3 !important; font-weight: 400 !important; margin-top: 3px !important; display: block !important;        
   }
}
/* ===================================================================
   ██████╗ 以上 网站框架和首页  结束 =================================================================== */

/* ===================================================================
   ██████╗  PART 8. 词书中心 (Wordbook Hub)
   说明：包含搜索栏、左侧导航、右侧列表、弹窗样式
   =================================================================== */

/* --- 8.1 词书搜索栏 (Search Bar) --- */
.wordbook-search-bar { 
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 20px !important;
    padding: 5px 30px !important;  
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 400px !important;
    max-width: 100% !important;
    margin: 0 auto 30px auto !important; 
    cursor: text;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.wordbook-search-bar:hover, .wordbook-search-bar:focus-within { border-color: #6c5ce7; }

/* 搜索图标 */
.search-icon { 
    width: 8px; height: 8px; flex-shrink: 0; opacity: 0.6; margin-top: 10px !important; 
}

/* 真实输入框 */
.wordbook-search-bar input {
    border: none !important; background: transparent !important; outline: none !important;         
    font-size: 10px !important; color: #333 !important;
    width: 100% !important; padding: 0 !important; height: auto !important;
    margin-top: 10px !important;
}

/* 搜索栏移动端适配 */
@media (max-width: 1000px) { 
    .wordbook-search-bar { 
        width: 92% !important; margin-top: 10px !important; margin-bottom: 20px !important;
        padding-left: 20px !important; padding-right: 15px !important;  
        padding-top: 8px !important; padding-bottom: 8px !important;
    }
    .search-icon { width: 11px; height: 11px; }
    .wordbook-search-bar input { font-size: 12px !important; }
}

/* --- 8.2 搜索下拉框 (Dropdown) --- */
#wordbook-search-results {
    position: absolute; top: 100%; left: 0; width: 100%;
    background: #fff; border: 1px solid #ccc; border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    max-height: 300px; overflow-y: auto; z-index: 999999;
    display: none; margin-top: 10px;
}
.search-result-item {
    padding: 15px; border-bottom: 1px solid #eee; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; background: #fff;
}
.search-result-item:hover { background: #f0f8ff; }
.search-res-word { font-weight: bold; font-size: 16px; color: #000; }
.search-res-mean { color: #666; font-size: 14px; }

/* --- 8.3 搜索详情弹窗 (适配工厂卡片) --- */
.word-detail-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 半透明黑底 */
    backdrop-filter: blur(5px);
    z-index: 1000000; 
    display: flex; justify-content: center; align-items: center;
}

/* 弹窗白盒子 (模仿闪卡弹窗的设置) */
.word-detail-popup {
    width: 90%; 
    max-width: 700px; /* 和闪卡一样宽 */
    height: 85vh;     /* 和闪卡一样高 */
    background: transparent; /* 背景交给卡片 */
    box-shadow: none; 
    position: relative; 
    display: flex; 
    flex-direction: column;
}

/* 关闭按钮 (右上角) */
.word-detail-popup .close-detail-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    color: #d6d6d6; /* 和闪卡一样的浅灰 */
    cursor: pointer;
    background: none;
    border: none;
    z-index: 1000;
    line-height: 1;
}
.word-detail-popup .close-detail-btn:hover { color: #666; }

/* 详情卡片本体适配 */
#word-detail-content {
    width: 100%;
    height: 100%;
}

/* 强制让工厂卡片在搜索弹窗里也能正常显示 (复用闪卡的修复逻辑) */
#word-detail-content .learning-card-item {
    position: relative !important;
    top: 0 !important; left: 0 !important;
    opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 30px !important;
    background: #fff !important;
    border-radius: 16px !important;
    overflow-y: auto !important; /* 允许内部滚动 */
    scrollbar-width: none;
    display: block !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}
#word-detail-content .learning-card-item::-webkit-scrollbar { display: none; }

/* 手机端适配 */
@media (max-width: 768px) {
    .word-detail-popup {
        width: 95vw !important;
        max-width: none !important;
    }
    #word-detail-content .learning-card-item {
        padding: 20px 15px !important; /* 手机端减小内边距 */
    }
}

/* 修复列表样式 (照搬闪卡的修复) */
#word-detail-content .sub-toggle-content ul {
    margin: 0 !important; padding-left: 20px !important;
    list-style-type: disc !important; list-style-position: outside !important;
}
#word-detail-content .sub-toggle-content li {
    margin-bottom: 5px !important; line-height: 1.6 !important;
    text-align: left !important; display: list-item !important;
}
#word-detail-content details > summary { list-style: none !important; }
#word-detail-content details > summary::-webkit-details-marker { display: none; }
/* =======================================================
   ★ 搜索页修复①：爱心与关闭键防撞
   ======================================================= */

/* 1. 强制调整爱心位置 (给 X 让路) */
#word-detail-content .fav-interaction-wrapper {
    /* 垂直方向：和标题/X保持水平 */
    top: 25px !important;
    
    /* 水平方向：往左挪 (因为最右边 15px 处是 X) */
    /* 45px = X的位置(15px) + X的宽度(20px) + 间距(10px) */
    right: 45px !important; 
    
    z-index: 100 !important;
}

/* 2. 再次确认关闭键 (X) 的位置 */
.word-detail-popup .close-detail-btn {
    top: 0px !important;
    right: 10px !important;
    z-index: 200 !important; /* 保证 X 在最上层 */
}
/* =======================================================
   ★ 搜索页修复②：强制撑开属性标签
   ======================================================= */
#word-detail-content .meta-tag {
    /* 1. 核心：变成“行内块”，才能撑开上下高度 */
    display: inline-block !important;
    
    /* 2. 加大内边距：上下 2px，左右 6px (让你看着舒服) */
    padding: 2px 6px !important;
    
    /* 3. 字体大小微调 */
    font-size: 11px !important;
    
    /* 4. 保持标签之间的距离 */
    margin-right: 2px !important;
    margin-bottom: 4px !important;
    
    /* 5. 确保边框清晰 */
    border-style: solid !important;
    border-width: 1px !important;
}
/* =======================================================
   ★ 搜索页修复③：高度自适应 (拒绝大片空白)
   ======================================================= */

/* 1. 弹窗容器：不再强制固定高度 */
.word-detail-popup {
    /* 改为“最大高度”，而不是“固定高度” */
    max-height: 85vh !important; 
    height: auto !important;
    
    /* 居中定位 */
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* 2. 内容容器：让它随着内容伸缩 */
#word-detail-content .learning-card-item {
    height: auto !important;
    min-height: 300px !important; /* 给个最小高度，别太扁 */
    
    /* 依然保持溢出滚动的能力 (防万一内容太多) */
    max-height: 85vh !important;
    overflow-y: auto !important;
}
/* =======================================================
   ★ 搜索页终极修正：1:1 复刻学习模式卡片样式
   ======================================================= */

/* 1. 弹窗容器：绝对居中 */
.word-detail-popup {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    
    /* 容器本身不设高宽，全靠里面的卡片撑开 */
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 2. 卡片本体：固定尺寸 + 内部滚动 (核心！) */
#word-detail-content .learning-card-item {
    /* ★ 尺寸复刻：固定高度，强制内部滚动 ★ */
    width: 600px !important;        /* 标准宽度 */
    height: 500px !important;       /* 固定高度 (内容多就滚，内容少也占位) */
    
    overflow-y: auto !important;    /* 开启内部滚动 */
    scrollbar-width: none;          /* 隐藏滚动条美观 */
    
    /* 样式复位 */
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 50px rgba(0,0,0,0.2) !important;
    padding: 30px !important;
    margin: 0 !important;
    position: relative !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
#word-detail-content .learning-card-item::-webkit-scrollbar { display: none; }

/* 3. 完美复刻黑色小箭头 (精准打击 .sub-toggle-title) */
#word-detail-content .sub-toggle summary,
#word-detail-content .sub-toggle-title {
    list-style: none !important;
    outline: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
}
/* 隐藏默认丑箭头 */
#word-detail-content .sub-toggle summary::-webkit-details-marker {
    display: none !important;
}

/* 添加自定义实心三角 */
#word-detail-content .sub-toggle-title::before {
    content: '▶' !important;
    font-size: 10px !important;
    color: #333 !important;
    margin-right: 10px !important;
    display: inline-block !important;
    transition: transform 0.2s ease !important;
}

/* 展开时旋转 */
#word-detail-content .sub-toggle[open] .sub-toggle-title::before {
    transform: rotate(90deg) !important;
}

/* 4. 列表样式复位 (对齐圆点) */
#word-detail-content .sub-toggle-content ul {
    margin: 0 !important; padding-left: 20px !important;
    list-style-type: disc !important; list-style-position: outside !important;
}
#word-detail-content .sub-toggle-content li {
    margin-bottom: 5px !important; line-height: 1.6 !important;
    text-align: left !important; display: list-item !important;
}

/* 5. 手机端适配：宽度占满，高度自适应 */
@media (max-width: 768px) {
    .word-detail-popup { width: 95vw !important; }
    
    #word-detail-content .learning-card-item {
        width: 100% !important;
        height: 65vh !important;    /* 手机上稍微高一点 */
        padding: 20px 15px !important;
    }
}
/* =======================================================
   ★ 搜索页精简补丁：只修尺寸和箭头
   ======================================================= */

/* 1. 尺寸锁定 (电脑端 600x400，手机端自适应) */
#word-detail-content .learning-card-item {
    width: 600px !important;
    height: 400px !important;
    min-height: 400px !important;
    overflow-y: auto !important; /* 内容多了内部滚动 */
    scrollbar-width: none;
}

@media (max-width: 768px) {
    #word-detail-content .learning-card-item {
        width: 100% !important;
        height: 65vh !important;
    }
}

/* 2. 箭头修复：先隐藏默认的丑箭头 */
#word-detail-content .sub-toggle summary {
    list-style: none !important; /* 核心 */
    display: flex !important;    /* 这一步往往能自动把默认箭头挤掉 */
    align-items: center !important;
    outline: none !important;
}
#word-detail-content .sub-toggle summary::-webkit-details-marker {
    display: none !important;    /* 针对 Chrome 强力隐藏 */
}

/* 3. 箭头重绘：直接用 CSS 画一个纯黑三角 (彻底告别 Emoji) */
#word-detail-content .sub-toggle-title::before {
    /* 不用文字字符，这就绝不会变蓝 */
    content: '' !important; 
    
    /* 用边框画出三角形 */
    width: 0 !important;
    height: 0 !important;
    border-top: 5px solid transparent !important;
    border-bottom: 5px solid transparent !important;
    
    /* 这里控制颜色(#333) 和 大小 */
    border-left: 8px solid #333 !important; 
    
    margin-right: 10px !important;
    display: inline-block !important;
    transition: transform 0.2s ease !important;
}

/* --- 8.4 词书中心布局容器 (Hub Layout) --- */
.wordbook-hub-container { 
    display: flex; border-radius: 0; overflow: hidden; min-height: 400px;
    background-color: #ffffff; gap: 0; align-items: stretch; border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); width: 100%;
}
.wordbook-hub-left-column { 
    width: 33.33%; background-color: #fafbff; padding: 0;
}
.wordbook-hub-right-column { 
    width: 66.67%; padding: 0; background-color: #ffffff; display: flex; flex-direction: column;
}

/* 导航列表 */
.wordbook-nav { list-style: none; margin: 0; padding: 0; }
.wordbook-nav-item { 
    display: flex; align-items: center; padding: 14px 15px; text-decoration: none;
    color: #333; font-weight: 500; border-left: 2px solid transparent;
    transition: all 0.2s ease; background-color: #fafbff; margin: 0; font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 48px; box-sizing: border-box;
}
.wordbook-nav-item.is-active { 
    background-color: #ffffff !important; border-left-color: #6c5ce7; color: #6c5ce7; font-weight: 600;
}
.wordbook-nav-item:hover { background-color: #f0f4ff; color: #6c5ce7; }

/* 目录内容 */
.wordbook-toc-content { 
    display: none; margin: 0; padding: 14px 25px; flex-grow: 1;
}
.wordbook-toc-content:first-of-type { display: block; }
.wordbook-toc-content h4 { 
    margin-top: 0; color: #333; font-size: 1.2em; font-weight: 600; margin-bottom: 15px;
}
.wordbook-toc-list { list-style: none; margin: 0; padding: 0; }
.wordbook-toc-list li { margin-bottom: 10px; }
.wordbook-toc-list a { 
    display: flex; align-items: center; padding: 12px 16px; text-decoration: none;
    color: #555; transition: all 0.2s ease; background-color: #ffffff;
    font-size: 14px; font-weight: 500;
}
.wordbook-toc-list a:hover { 
    background-color: #f0f4ff; color: #6c5ce7; transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(108, 92, 231, 0.15);
}

/* ===================================================================
   PART 1. 全局设置 & 顶部导航栏 (Top Header)
   =================================================================== */

/* 1. 全局容器 */
#word-app-root {
    background-color: #ffffff;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    padding-bottom: 20px;
    box-sizing: border-box;
    padding-top: 10px !important;
}

#word-app-root a { text-decoration: none; color: inherit; }
#word-app-root button { outline: none; }

/* ==============================================
   ★ 布局系统：内边距开关 (配合 PHP V40)
   ============================================== */
/* 手机端/通用：强制清零 */
.no-content-padding .wv-content-inner {
    padding-top: 0 !important;
}

/* 电脑端：保留60px顶部栏高度，剩下的清零 */
@media (min-width: 1001px) {
    .no-content-padding .wv-main-body {
        padding-top: 60px !important; 
    }
}

/* 2. 顶部返回行 */
.page-header-bar {
    display: flex;
    align-items: center;
    padding: 5px 15px;
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1002;
    border-bottom: 1px solid #f0f0f0;
    height: auto !important;       
    min-height: 0 !important;  
    margin-top: -35px !important; 
}

.return-button { 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.return-button img { 
    width: 12px !important;
    height: 12px !important;
    display: block;
    object-fit: contain;
}

/* ===================================================================
   PART 2. 模式切换器 (右上角按钮)
   =================================================================== */

/* 1. 容器 */
.mode-switcher-container { 
    position: relative;
    font-size: 14px;
    margin-left: auto;
    margin-top: 7px;
    margin-right: 0; 
}

/* 2. 当前模式按钮 */
.current-mode-btn { 
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important; /* 内容靠左 */
    white-space: nowrap !important;
    
    gap: 8px;                       
    width: 140px !important;        /* 宽度锁死 */
    box-sizing: border-box !important;
    padding: 0 30px 0 12px !important; /* 右边留空给箭头 */
    
    height: 35px; 
    background: #fff;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    color: #35BAF3;
    font-weight: 500;
    cursor: pointer;
    position: relative;
}

/* 3. 自定义下拉箭头 (SVG) */
.current-mode-btn .arrow {
    font-size: 0 !important; 
    color: transparent !important;
    
    width: 16px !important;  
    height: 16px !important; 
    
    display: block;
    background-image: url('http://wp-cookiecloset.oss-cn-beijing.aliyuncs.com/wp-content/uploads/2025/12/下拉.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* 4. 下拉菜单 */
.mode-dropdown-menu { 
    display: none;
    position: absolute;
    top: 115%;
    right: 0;
    width: 140px !important;       /* 宽度与按钮一致 */
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    z-index: 1003;
    overflow: hidden;
}

.mode-switcher-container.open .mode-dropdown-menu { 
    display: block;
}

/* 5. 下拉菜单项 */
.mode-item { 
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px; 
    padding: 10px 12px !important; 
    color: #555;
    font-size: 14px;
    transition: 0.1s;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.mode-item:hover { 
    background: #f0f9ff;
    color: #35BAF3;
}

/* 6. 图标控制 */
.custom-mode-icon {
    display: block;
    margin-top: -1px;
    flex-shrink: 0;
    width: 24px !important; 
    height: 24px !important;
    object-fit: contain; 
    object-position: center;
}

/* 图标缩放逻辑 */
.icon-learning { transform: scale(0.7); }
.icon-flashcard { transform: scale(0.7); }
.icon-dictation { transform: scale(0.6); }

/* ===================================================================
   PART 3. 筛选栏 (Filter Bar - 紫色曲奇版)
   =================================================================== */

/* 1. 筛选栏整体 */
.word-filter-bar { 
    display: flex;
    justify-content: flex-start;
    padding: 6px 15px;
    background: #fff;
    min-height: 40px;
    align-items: center;
}

/* 2. 筛选按钮 */
.filter-card { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 10px;
    height: 30px;
    background: #f7f9fa;
    border: 0.7px solid #e1e4e8;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
    box-sizing: border-box;
}

.filter-card:hover, 
.filter-card.active { 
    color: #6c5ce7;
    border-color: #6c5ce7;
}

/* 曲奇 Emoji 替换 */
.filter-card span { font-size: 0 !important; }
.filter-card span::before {
    content: '🍪';
    font-size: 12px !important;
    visibility: visible;
}

/* 3. 已选标签 (Selected Tags) */
.selected-filter {
    background: #f3f0ff !important;
    color: #6c5ce7 !important;
    border: 0.5px solid #6c5ce7 !important;
    padding: 6px 10px !important;
    border-radius: 12px;
    font-size: 10px !important;
    margin-right: 5px;
    display: inline-flex;
    align-items: center;
}

.remove-filter {
    color: #6c5ce7 !important;
    background: none;
    border: none;
    margin-left: 4px;
    cursor: pointer;
    font-weight: bold;
}

/* 4. 筛选面板主体 */
.filter-panel { 
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -5px 40px rgba(0,0,0,0.2);
    z-index: 99999;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.filter-panel.active { transform: translateY(0); }

@media (min-width: 769px) { 
    .filter-panel { 
        width: 450px;
        left: 50%;
        transform: translate(-50%, 110%);
    }
    .filter-panel.active { transform: translate(-50%, 0); }
}

/* 面板头部 */
.panel-header {
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    min-height: 50px; 
    padding: 10px 10px !important;
    border-bottom: 1px solid #eee;
}

/* 面板底部按钮 */
.panel-actions {
    display: flex;
    align-items: center;
    gap: 6px !important;
    margin-left: auto;
    flex-shrink: 0;
}

.panel-reset-btn,
.panel-close-btn { 
    background: #000 !important;
    color: #fff !important;
    border: none;
    padding: 6px 12px !important;
    border-radius: 40px;
    cursor: pointer;
    font-size: 12px !important;
    font-weight: 400;
}

.apply-filters { 
    background: #6c5ce7 !important;
    color: white !important;
    border: none;
    padding: 6px 12px !important;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px !important;
    font-weight: 400;
}

/* 5. 标签页 (Tabs) */
.panel-tabs { 
    display: flex;
    overflow-x: auto;
    flex-shrink: 0;
}

.filter-tab { 
    position: relative;
    padding: 15px 20px;
    color: #666;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400; 
    white-space: nowrap;
    border-bottom: none !important; 
}

.filter-tab.active { 
    color: #6c5ce7 !important;
    font-weight: 400;
    border-bottom: none !important; 
}

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

/* 6. 内容选项 (Options) */
.panel-content { flex: 1; overflow-y: auto; padding: 0; }
.filter-options { display: none; padding: 10px 0; }
.filter-options.active { display: block; }

.option-item { 
    display: flex;
    align-items: center;
    padding: 12px 20px;
    font-size: 14px;
    cursor: pointer;
    color: #333;
    font-weight: 400;
}

/* 父级标题样式 */
.option-item.parent-item { font-weight: 400 !important; }

/* 复选框样式 */
.option-item input[type="checkbox"], 
.folder-checkbox { 
    appearance: none;
    -webkit-appearance: none;
    width: 11px !important;
    height: 11px !important;
    border: 1px solid #333 !important;
    border-radius: 1px !important;
    margin-right: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    flex-shrink: 0;
}

.option-item input[type="checkbox"]:checked, 
.folder-checkbox.checked { 
    background-color: transparent !important;
    border-color: #6c5ce7 !important;
}

.option-item input[type="checkbox"]:checked::after, 
.folder-checkbox.checked::after { 
    content: '';
    width: 4px;
    height: 8px;
    border: solid #6c5ce7;
    border-width: 0 1px 1px 0 !important; 
    transform: rotate(45deg);
    margin-top: -2px;
    display: block;
}

/* ===================================================================
   PART 4. 进度条 & 侧边栏 (Status & Drawer)
   =================================================================== */

/* 状态栏 */
.status-bar-row { 
    position: sticky;
    top: 60px;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
    padding: 5px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #333;
}

#universal-drawer-btn { font-size: 20px; cursor: pointer; }

/* 侧边栏 */
#universal-word-drawer { 
    position: fixed;
    top: 60px;
    right: 0;
    width: 280px;
    height: calc(100vh - 60px);
    background: #fff;
    z-index: 2000;
    box-shadow: -5px 0 20px rgba(0,0,0,0.1);
    transform: translateX(110%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

#universal-word-drawer.open { transform: translateX(0); }

.drawer-header { 
    padding: 15px;
    background: #f9f9f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-list { 
    flex: 1;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
}

.drawer-list li { 
    padding: 12px 15px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
    cursor: pointer;
}

.drawer-list li.active { 
    background: #e1f5fe;
    color: #0277bd;
    border-left: 4px solid #0277bd;
}

/* ===================================================================
   PART 5. 单词卡片与详情 (Cards & Content)
   =================================================================== */

/* 1. 卡片容器 */
#learning-cards-wrapper,
.flashcard-container {
    width: 95% !important;
    max-width: 600px !important;
    height: 400px !important;
    min-height: 400px !important;
    margin: 20px auto !important;
    box-sizing: border-box !important;
    position: relative;
}

/* 2. 单张卡片 */
.learning-card-item {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 20px 25px;
    box-shadow: 0 2px 25px rgba(0,0,0,0.03);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.2s ease;
}

.learning-card-item.active { 
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 2;
    display: flex !important;
}

.learning-card-item::-webkit-scrollbar { display: none; }

/* 3. 卡片头部 (Word + Audio) */
.word-card-header-wrapper { 
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.word-card-header { 
    font-size: 26px;
    font-weight: 600;
    color: #111;
    margin: 0;
    line-height: 1.1;
}

/* 音频控制条 */
.audio-control-card { 
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 10px !important;
    padding: 1px 12px !important;
    height: 26px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.audio-control-card .action-btn { 
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

.audio-control-card .action-btn img { 
    width: 14px !important;
    height: 14px !important;
    opacity: 0.5;
    display: block !important;
}

.audio-control-card .action-btn:hover img { opacity: 1; }

/* ★ 音频按钮状态高亮逻辑 */
/* 1. 激活状态的图标 (变蓝 #35BAF3) */
/* 使用滤镜将黑色/灰色转为目标蓝色 */
.action-btn.active-state img {
    filter: invert(66%) sepia(68%) saturate(452%) hue-rotate(170deg) brightness(96%) contrast(90%);
    opacity: 1 !important;
    transform: scale(1.1); /* 稍微放大一点点提示用户 */
}

/* 2. 下拉菜单选中项 (变蓝加粗) */
.dropdown-menu div.active {
    color: #35BAF3 !important;
    font-weight: 600 !important; /* 加粗 */
    background: #f0f9ff !important; /* 浅蓝背景 */
}

/* 音频下拉菜单 */
.audio-control-card .with-dropdown { 
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

.audio-control-card .dropdown-menu { 
    display: none !important;
    position: absolute !important;
    
    /* ★ 改点 1: 把距离改近一点，或者干脆设为 100% 并加 margin */
    top: 100% !important; 
    margin-top: 10px !important; /* 视觉上保留空隙 */
    
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    z-index: 10000 !important;
    min-width: 60px !important;
    padding: 5px 0 !important;
    text-align: center !important;
}
.audio-control-card .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -20px; /* 向上延伸，盖住按钮和菜单之间的空隙 */
    left: 0;
    width: 100%;
    height: 20px; /* 高度足够覆盖空隙即可 */
    background: transparent; /* 透明的 */
}
.audio-control-card .with-dropdown:hover .dropdown-menu { display: block !important; }

.audio-control-card .dropdown-menu div { 
    padding: 6px 10px !important;
    font-size: 13px !important;
    color: #666 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.audio-control-card .dropdown-menu div:hover { 
    background: #f5f5f5 !important;
    color: #35BAF3 !important;
}

/* 4. 卡片中间部分 (Middle Split) */
.card-middle-split {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 30px;
    margin-bottom: 0;
    align-items: start;
    flex-shrink: 0;
}

.card-content-left { display: flex; flex-direction: column; }
.card-content-right { display: flex; justify-content: center; align-items: flex-start; }

.word-detail-img { 
    max-width: 100%;
    border-radius: 8px;
    object-fit: cover;
    max-height: 200px;
}
.img-placeholder { display: none !important; }

/* 5. 释义与标签 */
.word-card-translation { 
    font-size: 16px;
    color: #444;
    margin-bottom: 12px;
    line-height: 1.6;
}

/* 行内词性标签容器 */
.inline-pos-wrapper {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    transform: translateY(-2px);
}
.inline-pos-wrapper .meta-tag { margin-bottom: 0 !important; margin-right: 0 !important; }

/* 放在中文前面的标签样式 */
.inline-pos-wrapper .meta-tag {
    padding: 3px 8px !important; 
    font-size: 11px !important;
}

/* 词源详情 (灰色) */
.origin-detail-inline {
    color: #999 !important;
    font-size: 0.9em;
    margin-left: 8px;
    font-weight: 400;
}

/* 其他标签容器 */
.word-card-meta-tags { 
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0px;
}
.word-card-meta-tags.others { margin-top: 5px; }

/* 通用元标签样式 */
.meta-tag { 
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 12px;
    border: 1px solid;
    background: #fff !important;
    white-space: nowrap;
}

/* 标签颜色定义 */
.tag-part-of-speech { border-color: #6BD2FF !important; color: #29B6F2 !important; }
.tag-topik-level { border-color: #6BCFC4 !important; color: #23B097 !important; }
.tag-word-origin { border-color: #a6a6a6 !important; color: #808080 !important; }
.tag-word-theme { border-color: #8E80FF !important; color: #6c5ce7 !important; }
.tag-semantic-category { border-color: #75787D !important; color: #313338 !important; }

/* 6. 卡片底部 - 分割线 */
.card-divider { 
    border: none !important;
    background: transparent !important;
    height: 0 !important;
    border-top: 0.5px solid rgba(0, 0, 0, 0.12) !important;
    margin: 20px 0 20px 0 !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    opacity: 1 !important;
}

/* 7. 卡片底部 - 例句 (Sentence) */
.sentence-section { margin-top: 0; }

.sentence-row-wrapper {
    display: flex;                
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 5px;
}

.korean-sentence { 
    flex: 0 1 auto;
    width: auto;
    font-size: 16px;
    color: #333;
    margin-bottom: 0 !important;
    margin-right: 0;
    line-height: 1.6;
    font-weight: 500;
    word-break: keep-all;
}

.sentence-row-wrapper .action-buttons-group {
    margin-left: 0 !important;
    flex-shrink: 0;
}

.chinese-sentence { 
    font-size: 14px;
    color: #666;
    margin-top: 0px;
    margin-bottom: 0px !important; 
}

/* =======================================================
   PART 8. 卡片底部 - 搭配与辨析 (Toggles) - 修复版
   ======================================================= */

.word-card-section {
    margin-bottom: 0px !important;
    padding-bottom: 0px !important;
}

/* 折叠器头部 */
.sub-toggle { 
    margin-top: 0;
    border-top: none;
    padding-top: 0;
    margin-bottom: 0px !important;
}

/* ★★★ 1. Summary 容器：去掉默认样式 ★★★ */
.sub-toggle summary { 
    font-weight: 600;
    font-size: 15px;
    color: #111;
    cursor: pointer;
    
    /* 核心：去掉电脑端默认图标 */
    list-style: none !important; 
    
    display: flex;
    align-items: center;
    padding: 0px 0;
    padding-bottom: 10px !important;
    outline: none;
}

/* ★★★ 2. 核心：去掉手机端/Chrome 默认图标 ★★★ */
.sub-toggle summary::-webkit-details-marker {
    display: none !important;
}

/* ★★★ 3. 自定义黑色实心三角形 ★★★ */
.sub-toggle summary::before { 
    content: '▶';       /* 实心三角形 */
    font-size: 10px;    /* 大小 (不要太大，10px比较精致) */
    color: #333;        /* 纯黑色 */
    
    margin-right: 10px;
    margin-top: -2px;    /* 微调对齐 */
    transition: transform 0.2s ease; /* 旋转动画 */
    display: inline-block;
}

/* 4. 展开时旋转 90度 (向下) */
.sub-toggle[open] summary::before { 
    transform: rotate(90deg); 
}

/* --- 下面的内容保持原样 --- */

/* 折叠器内容 (展开后) */
.sub-toggle-content {
    background-color: #f9f9f9 !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-top: 5px !important;
    color: #444 !important;
}

/* 搭配 (列表) 样式 */
.sub-toggle-content ul {
    margin: 0 !important;
    padding-left: 18px !important;
}

.sub-toggle-content li {
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
}

/* 辨析 (段落) 样式 */
.sub-toggle-content p {
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
    margin-top: 0 !important;
}
.sub-toggle-content p:last-child, .sub-toggle-content li:last-child { margin-bottom: 0 !important; }

/* ===================================================================
   PART 6. 收藏功能 (修复版：解决"不能出现标记"报错)
   =================================================================== */

/* 1. 位置 */
.fav-interaction-wrapper { 
    position: absolute;
    top: 4px;
    right: 8px;
    z-index: 10;
}

/* 2. 默认状态 (灰色空心) */
.favorite-btn img { 
    width: 22px;
    height: 22px;
    opacity: 0.5;
    transition: all 0.2s;
    object-fit: contain; 
}

/* 3. ★★★ 激活状态：变成实心蓝色 (#35BAF3) ★★★ */
/* 
   修复原理：已经把 SVG 代码转成了 Base64 编码。
   WordPress 看到这串字母不会报错，浏览器能读懂它是蓝色爱心。
*/
.favorite-btn.active img { 
    opacity: 1;
    transform: scale(1.1);
    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjMzVCQUYzIj48cGF0aCBkPSJNMTIgMjEuMzVsLTEuNDUtMS4zMkM1LjQgMTUuMzYgMiAxMi4yOCAyIDguNSAyIDUuNDIgNC40MiAzIDcuNSAzYzEuNzQgMCAzLjQxLjgxIDQuNSAyLjA5QzEzLjA5IDMuODEgMTQuNzYgMyAxNi41IDMgMTkuNTggMyAyMiA1LjQyIDIyIDguNWMwIDMuNzgtMy40IDYuODYtOC41NSAxMS41NEwxMiAyMS4zNXoiLz48L3N2Zz4=') !important;
}

/* 3. 小弹窗 (Popover) */
.fav-popover-menu { 
    display: none;
    position: absolute;
    right: 0;
    top: 25px;
    width: 200px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    padding: 0px 0;
    z-index: 200;
}

/* 列表项布局 */
.fav-folder-item { 
    display: flex;
    align-items: center; 
    justify-content: flex-start;
    padding: 8px 15px 8px 10px !important; 
    cursor: pointer;
    color: #333;
}
.fav-folder-item:hover { background: #f9f9f9; }

/* =======================================================
   ★ 4. 方框 (Checkbox) - 终极修复版
   目标：白底、蓝框、蓝色对钩 (√)
   ======================================================= */

.folder-checkbox {
    /* 基础盒子 */
    width: 14px !important;
    height: 14px !important;
    
    border: 1.5px solid #999 !important; /* 默认深灰边框，看得清楚 */
    border-radius: 3px !important;       /* 稍微圆角 */
    
    margin-right: 18px !important;
    position: relative !important;
    flex-shrink: 0 !important;
    background: #fff !important;         /* 强制白色背景 */
}

/* ★ 选中状态：边框变蓝 */
.folder-checkbox.checked {
    border-color: #35BAF3 !important;    /* 蓝色边框 */
    background-color: #fff !important;   /* 背景依然是白色 */
}

/* ★ 对钩 (√) - 强制显形 */
.folder-checkbox.checked::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    
    /* 颜色和粗细 */
    border: solid #35BAF3 !important;
    border-width: 0 1.5px 1.5px 0 !important; 
    
    /* 1. 尺寸稍微调大一点点，看着更饱满 */
    width: 4px !important;
    height: 8px !important;
    
    /* 2. ★★★ 坐标修正 (核心在这里) ★★★ */
    /* 往右推一点 (原来是5px) */
    left: 3.5px !important;   
    
    /* 往下推一点 (原来是1px，这个数值越大越往下) */
    top: 2.5px !important;    
    
    /* 旋转角度 */
    transform: rotate(45deg) !important;
}

/* 5. 文件夹名称 */
.folder-name {
    font-size: 14px;
    flex-grow: 1;
}

/* 6. 默认标签 */
.default-tag {
    font-size: 10px;
    color: #35BAF3;
    border: 1px solid #35BAF3;
    padding: 0px 3px !important; 
	line-height: 1.4 !important; 
    border-radius: 4px;
    margin-left: auto;
}

/* 7. 底部管理 */
.fav-menu-footer {
    display: flex;
    justify-content: flex-end;
    padding: 4px 15px 4px 15px;
    margin-top: 0px;
    border-top: 1px solid #f5f5f5;
}
.manage-fav-btn {
    font-size: 12px;
    color: #999;
    cursor: pointer;
}
.manage-fav-btn:hover { color: #35BAF3; }
ul.fav-folder-list {
    margin-bottom: 5px !important; /* 列表底部留一点点缝隙即可 */
    padding: 0 !important;
    margin-top: 0 !important;
}

/* ===================================================================
   PART 7. 大弹窗样式 (修复：顶部大留白 + 小标题)
   =================================================================== */

/* 1. 遮罩层 */
.custom-modal-overlay { 
    position: fixed !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 100000;
    display: flex;
    align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
}

/* 2. 弹窗容器 (白盒子) */
.custom-modal-box { 
    background: #fff;
    width: 80%;
    max-width: 300px;
    
    /* ★★★ 核心修改：顶部留白加大 (35px)，左右下保持 25px ★★★ */
    padding: 35px 25px 25px 25px !important; 
    
    border-radius: 16px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.15);
    text-align: center;
    position: relative; 
    z-index: 100001; 
}

/* 3. 标题 (变小) */
.modal-title { 
    /* ★★★ 核心修改：字号变小 ★★★ */
    font-size: 16px !important; 
    
    font-weight: 600;
    margin: 0 0 20px 0;
    color: #333;
    line-height: 1.2;
}

/* 4. 列表项 */
.modal-folder-list-wrapper { 
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 20px;
    border: none; 
}

.modal-folder-option { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 5px;
    border-bottom: 1px solid #f9f9f9;
    cursor: pointer;
    font-size: 16px;
    color: #333;
}

/* 5. 单选按钮 */
.modal-folder-option input[type="radio"] { 
    accent-color: #35BAF3; 
    width: 20px; height: 20px;
    cursor: pointer;
}

/* 6. 底部按钮 */
.modal-buttons.text-style-buttons {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.modal-btn-text {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 5px 10px;
    font-weight: 500;
}

.modal-btn-text.cancel { color: #666; }
.modal-btn-text.confirm { color: #35BAF3; font-weight: 600; }

/* =======================================================
   ★ 强力覆盖：更换默认生词本弹窗 (ID定点打击)
   请放在 CSS 文件的【最后一行】，不要放中间
   ======================================================= */

/* 1. 弹窗白盒子 (使用 ID #set-default-folder-modal 锁定它) */
#set-default-folder-modal .custom-modal-box {
    /* ★★★ 这里控制顶部的留白 ★★★ */
    /* 之前没反应是因为没加 ID，现在加上 ID 肯定听话 */
    padding-top: 20px !important; 
    
    /* 其他方向保持适中 */
    padding-bottom: 10px !important;
    padding-left: 25px !important;
    padding-right: 25px !important;
}

/* 2. 标题文字 (更换默认生词本) */
#set-default-folder-modal .modal-title {
    /* ★★★ 这里控制字体大小 ★★★ */
    font-size: 16px !important;  
    
    margin-top: 0 !important;    
    margin-bottom: 25px !important; /* 标题离下面列表的距离 */
    line-height: 1 !important;
}

/* =======================================================
   ★ 强力修复：大弹窗单选按钮 (去黑边 + 调大小)
   请放在 CSS 文件的最后一行下面
   ======================================================= */

/* 1. 外面的圆圈 (未选中状态) */
#set-default-folder-modal .modal-folder-option input[type="radio"] {
    /* ★ 核心：清除浏览器默认丑样式 ★ */
    appearance: none !important;
    -webkit-appearance: none !important;
    
    /* 尺寸：改小一点 (原来可能是20px) */
    width: 14px !important;
    height: 14px !important;
    
    /* 边框：默认灰色，绝对没有黑色 */
    border: 1px solid #ccc !important;
    border-radius: 50% !important; /* 圆形 */
    background-color: #fff !important;
    
    position: relative !important;
    cursor: pointer !important;
    outline: none !important; /* 去掉点击时的黑框 */
    margin: 0 !important;
}

/* 2. 外面的圆圈 (选中状态) */
#set-default-folder-modal .modal-folder-option input[type="radio"]:checked {
    /* 选中后边框变蓝 */
    border-color: #35BAF3 !important;
    background-color: #fff !important;
}

/* 3. 中间的原点 (自己画的，大小随你定) */
#set-default-folder-modal .modal-folder-option input[type="radio"]:checked::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    
    /* ★ 居中定位 ★ */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* ★ 原点大小：在这里调节 ★ */
    width: 7px !important;
    height: 7px !important;
    
    /* 原点颜色：蓝色实心 */
    background-color: #35BAF3 !important;
    border-radius: 50% !important;
}

/* ===================================================================
   PART 闪卡相关样式 (Flashcard Styles)
   =================================================================== */

/* 闪卡容器样式 */
.flashcard-container { 
    background: transparent;          /* 透明背景 */
    perspective: 1000px;              /* 3D透视效果，值越小透视效果越强 */
    cursor: pointer;                  /* 鼠标指针为手形 */
}

/* 闪卡正面和背面公共样式 */
.fc-face { 
    position: absolute;               /* 绝对定位 */
    width: 100%;                      /* 宽度100% */
    height: 100%;                     /* 高度100% */
    border-radius: 16px;              /* 16像素圆角 */
    background: #fff;                 /* 白色背景 */
    border: 1px solid #eee;           /* 1像素浅灰色边框 */
    box-shadow: 0 5px 25px rgba(0,0,0,0.05);  /* 轻微阴影效果 */
    backface-visibility: hidden;      /* 隐藏背面 */
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);  /* 变换过渡动画0.6秒，自定义缓动函数 */
    display: flex;                    /* 弹性布局 */
    flex-direction: column;           /* 垂直方向排列子元素 */
    align-items: center;              /* 水平居中 */
    justify-content: center;          /* 垂直居中 */
    top: 0;                           /* 顶部对齐 */
    left: 0;                          /* 左侧对齐 */
}

/* 闪卡正面样式 */
.fc-face.fc-front { 
    transform: rotateY(0deg);         /* 初始不旋转（正面朝上） */
    z-index: 2;                       /* 在上层 */
}

/* 闪卡背面样式 */
.fc-face.fc-back { 
    transform: rotateY(180deg);       /* 初始旋转180度（背面朝上） */
    z-index: 1;                       /* 在下层 */
    padding: 20px;                    /* 内边距20像素 */
    text-align: center;               /* 文本居中 */
}

/* 翻转状态的闪卡正面旋转180度 */
#current-flashcard.is-flipped .fc-front { 
    transform: rotateY(-180deg);      /* 旋转-180度 */
}

/* 翻转状态的闪卡背面旋转到正面 */
#current-flashcard.is-flipped .fc-back { 
    transform: rotateY(0deg);         /* 旋转0度（正面朝上） */
    z-index: 5;                       /* 在上层 */
}

/* 闪卡主要单词样式 */
.fc-main-word { 
    font-size: 52px;                  /* 字体大小52像素 */
    font-weight: 700;                 /* 加粗字重 */
    margin: 20px 0;                   /* 上下外边距20像素 */
    color: #152c3f;                   /* 深蓝色文字 */
}

/* 闪卡释义样式 */
.fc-meaning { 
    font-size: 28px;                  /* 字体大小28像素 */
    font-weight: 700;                 /* 加粗字重 */
    color: #152c3f;                   /* 深蓝色文字 */
    margin-bottom: 20px;              /* 底部外边距20像素 */
}

/* 闪卡提示图标样式 */
.fc-hint-icon { 
    position: absolute;               /* 绝对定位 */
    top: 20px;                        /* 距离顶部20像素 */
    right: 20px;                      /* 距离右侧20像素 */
    display: flex;                    /* 弹性布局 */
    align-items: center;              /* 垂直居中 */
    gap: 5px;                         /* 子元素之间间距5像素 */
    color: #888;                      /* 灰色文字 */
    font-size: 14px;                  /* 字体大小14像素 */
    cursor: pointer;                  /* 鼠标指针为手形 */
    z-index: 10;                      /* 较高层级 */
}

/* 闪卡工具提示文本默认隐藏 */
.fc-tooltip { 
    display: none;                    /* 默认隐藏 */
    margin-left: 5px;                 /* 左侧外边距5像素 */
    font-size: 14px;                  /* 字体大小14像素 */
    color: #555;                      /* 灰色文字 */
}

/* 悬停时显示闪卡工具提示文本 */
.fc-hint-icon:hover .fc-tooltip { 
    display: inline-block;            /* 行内块显示 */
}

/* =======================================================
   ★ 修正问题①：气泡出现在灯泡左边 (灯泡位置不变)
   ======================================================= */

/* 1. 气泡本体 */
.fc-tooltip {
    /* --- 定位核心代码 --- */
    position: absolute !important;
    
    /* 垂直方向：跟灯泡居中对齐 */
    top: 50% !important;
    transform: translateY(-50%) !important;
    
    /* 水平方向：在灯泡的"左边" */
    right: 100% !important;        /* 气泡的右边贴着灯泡的左边 */
    left: auto !important;         /* 清除干扰 */
    bottom: auto !important;       /* 清除干扰 */
    
    /* 加一点间距，别贴太死 */
    margin-right: 12px !important; 

    /* --- 样式代码 (黑底白字) --- */
    background-color: rgba(0, 0, 0, 0.85) !important;
    color: #fff !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    z-index: 20 !important;
    
    display: none; /* 平时隐藏 */
}

/* 2. 小箭头：指向右边 (指着灯泡) */
.fc-tooltip::after {
    content: '';
    position: absolute;
    
    /* 定位在气泡的最右侧中间 */
    top: 50%;
    left: 100%; 
    margin-top: -5px;
    
    /* 画三角形 */
    border-width: 5px;
    border-style: solid;
    /* 左边是黑色，这就形成了一个指向右边的箭头 */
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.85) !important;
}

/* 3. 什么时候显示？ (悬浮 OR 点击激活) */
.fc-hint-icon:hover .fc-tooltip,
.fc-hint-icon.active .fc-tooltip {
    display: block !important;
}

/* 闪卡音频播放按钮样式 */
.fc-audio-play img { 
    width: 32px;                      /* 宽度32像素 */
    height: 32px;                     /* 高度32像素 */
    cursor: pointer;                  /* 鼠标指针为手形 */
    opacity: 0.8;                     /* 透明度80% */
    transition: 0.2s;                 /* 过渡动画0.2秒 */
    margin-top: 10px;                 /* 顶部外边距10像素 */
}

/* 闪卡音频播放按钮悬停效果 */
.fc-audio-play:hover img { 
    transform: scale(1.1);            /* 放大1.1倍 */
    opacity: 1;                       /* 完全不透明 */
}

/* --- 闪卡背面的详情按钮 (固定在右下角) --- */
.fc-detail-btn { 
    position: absolute !important;
    bottom: 18px !important;
    right: 18px !important;
    margin: 0 !important;
    
    padding: 6px 16px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 20px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}
.fc-detail-btn:hover {
    background: #f5f5f5;
    color: #35BAF3;
    border-color: #35BAF3;
}

/* =======================================================
   ★ 修复问题①：闪卡背面普通状态布局 (上半部分居中)
   ======================================================= */

/* 使用 :not(.detail-mode) 确保只影响普通背面，不影响详情展开后 */
.fc-face.fc-back:not(.detail-mode) {
    /* 1. 强制垂直排列 */
    display: flex !important;
    flex-direction: column !important;
    
    /* 2. 核心：内容从顶部开始排列 (留出下半部分给未来的图片) */
    justify-content: flex-start !important;
    
    /* 3. 核心：水平绝对居中 */
    align-items: center !important;
    text-align: center !important;
    
    /* 4. 顶部留白：让文字处于视觉上的"上半部分" */
    padding-top: 60px !important; 
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* 释义文字微调：防止太宽贴边 */
.fc-face.fc-back:not(.detail-mode) .fc-meaning {
    width: 100% !important;
    margin-bottom: 15px !important;
    margin-top: 0 !important;
    line-height: 1.3 !important;
}

/* 标签容器微调：保证居中 */
.fc-face.fc-back:not(.detail-mode) .word-card-meta-tags {
    justify-content: center !important;
    margin-top: 0 !important;
}

/* =======================================================
   ★ 强力修复问题①：闪卡背面普通状态 (强制上半部分居中)
   ======================================================= */

/* 使用 ID #current-flashcard 提升权重，打败之前的样式 */
#current-flashcard .fc-face.fc-back:not(.detail-mode) {
    /* 1. 布局模式：弹性盒子 */
    display: flex !important;
    flex-direction: column !important;
    
    /* 2. 垂直方向：从顶部开始往下排 (核心！) */
    justify-content: flex-start !important;
    
    /* 3. 水平方向：绝对居中 */
    align-items: center !important;
    text-align: center !important;
    
    /* 4. 位置控制：往下推 80px，让它呆在视觉上的"上半部分" */
    padding-top: 80px !important; 
    padding-left: 15px !important;
    padding-right: 15px !important;
    
    /* 5. 确保背景是白色的 */
    background: #fff !important;
}

/* 强制标签容器居中 */
#current-flashcard .fc-face.fc-back:not(.detail-mode) .word-card-meta-tags {
    justify-content: center !important;
    margin-top: 15px !important;
    width: 100% !important;
}

/* 强制释义文字大小和位置 */
#current-flashcard .fc-face.fc-back:not(.detail-mode) .fc-meaning {
    font-size: 24px !important;
    margin-bottom: 5px !important;
    width: 100% !important;
}

/* =======================================================
   ★ 闪卡原地变身模式 (Detail Mode) - 终极修复版
   ======================================================= */

/* 1. 闪卡背面容器：变身后的状态 */
.fc-back.detail-mode {
    display: block !important;              /* 不再是 flex 居中 */
    padding: 20px !important;               /* 给内容留点呼吸空间 */
    overflow-y: auto !important;            /* 允许上下滑动 */
    scrollbar-width: none;                  /* 隐藏滚动条 */
    text-align: left !important;            /* 强制左对齐 */
    background: #fff !important;
}
.fc-back.detail-mode::-webkit-scrollbar { display: none; }

/* 2. 注入的详情卡样式重置 */
.fc-back.detail-mode .learning-card-item {
    position: relative !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;                  /* 内边距交给外层 .fc-back */
    background: transparent !important;
    pointer-events: auto !important;
}

/* 3. 修复标题行 & 音频按钮被切掉的问题 */
.fc-back.detail-mode .word-card-header-wrapper {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;           /* 强制不换行，保护音频按钮 */
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 15px !important;
}
.fc-back.detail-mode .word-card-header {
    font-size: 24px !important;             /* 标题稍微改小，防止挤压 */
    margin-right: 10px !important;
    line-height: 1.2 !important;
}

/* 4. 修复列表乱糟糟 (搭配/辨析) */
.fc-back.detail-mode .sub-toggle-content ul {
    margin: 0 !important;
    padding-left: 18px !important;          /* 修正缩进 */
    list-style-type: disc !important;       /* 恢复圆点 */
    list-style-position: outside !important;
}
.fc-back.detail-mode .sub-toggle-content li {
    margin-bottom: 5px !important;
    text-align: left !important;
    line-height: 1.5 !important;
}

/* 5. 修复字体和颜色 */
.fc-back.detail-mode * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    color: #333;
}

/* 6. 关闭按钮 (X) - 固定在右上角 */
.fc-inner-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 100;
    font-size: 28px;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    
    /* ★ 平时：非常浅的灰色 (比之前的更浅) ★ */
    color: #cccccc !important; 
    transition: color 0.2s ease; /* 加个渐变动画，更丝滑 */
}

.fc-inner-close-btn:hover { 
    /* ★ 悬停：变成深灰色 (不要纯黑) ★ */
    color: #666666 !important; 
}

/* =======================================================
   ★ 修复问题②：详情模式头部排版 & 按钮防撞
   ======================================================= */

/* 1. 让音频按钮紧挨着单词 (取消两端对齐) */
.fc-back.detail-mode .word-card-header-wrapper {
    justify-content: flex-start !important; /* 靠左排列 */
    gap: 15px !important;                   /* 单词和喇叭之间留点空隙 */
    padding-right: 80px !important;         /* 右边留出空间给爱心和X，防止文字被遮住 */
}

/* 2. 关闭按钮 (X)：定死在最右上角 */
.fc-inner-close-btn {
    position: absolute !important;
    top: -10px !important;
    right: -1px !important;
    z-index: 200 !important;       /* 层级最高，点它最准 */
    width: 30px !important;
    height: 30px !important;
    background: rgba(255,255,255,0.8) !important; /* 加个半透明白底，防止看不清 */
    border-radius: 50% !important;
}

/* 3. 爱心按钮：往左挪，给 X 让座 */
.fc-back.detail-mode .fav-interaction-wrapper {
    right: 20px !important;        /* 距离右边 45px (在 X 的左边) */
    top: -5px !important;           /* 稍微对齐一下 */
    z-index: 190 !important;
}

/* =======================================================
   ★ 修复：让闪卡详情里的"默认"标签变回蓝色
   ======================================================= */
.fc-back.detail-mode .default-tag {
    color: #35BAF3 !important;       /* 强制变蓝 */
    border-color: #35BAF3 !important; /* 边框也变蓝 */
}

/* =======================================================
   ★ 终极修复：闪卡详情模式 - 全端强制"左右分栏"
   ======================================================= */

/* 1. 电脑端：默认左右比例 (1.8 : 1) & 开启网格 */
.fc-back.detail-mode .card-middle-split {
    display: grid !important;
    grid-template-columns: 1.8fr 1fr !important; 
    gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
}

/* 2. 占位图修复：没图片时也要显示占位框，否则右边会消失 */
.fc-back.detail-mode .img-placeholder {
    display: block !important;       /* 强制显示 */
    width: 100% !important;
    height: 100% !important;         /* 撑满右侧格子 */
    min-height: 100px !important;    /* 最小高度 */
    background: #f8f9fa !important;
    border: 2px dashed #e0e0e0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

/* 3. ★★★ 手机端关键修改 ★★★ */
@media (max-width: 768px) {
    /* 强制手机端也维持左右分栏，比例 1.2 : 1 (与学习模式一致) */
    .fc-back.detail-mode .card-middle-split {
        grid-template-columns: 1.1fr 1fr !important; 
        gap: 10px !important;
    }

    /* 手机端图片区域稍微调小一点，避免把文字挤得太窄 */
    .fc-back.detail-mode .img-placeholder {
        min-height: 120px !important;
    }
}

/* 7. 布局优化：中间分栏在手机上变成单列 */
@media (max-width: 768px) {
    .fc-back.detail-mode .card-middle-split {
        grid-template-columns: 1.2fr 1fr !important;
        gap: 10px !important;
    }
    .fc-back.detail-mode .word-detail-img {
        max-width: 100% !important;
        height: auto !important;
        margin-top: 10px;
    }
}

/* 闪卡三个控制按钮容器样式 */
.fc-controls-three { 
    display: flex;                    /* 弹性布局 */
    gap: 15px;                        /* 子元素之间间距15像素 */
    margin-top: 30px;                 /* 顶部外边距30像素 */
}

/* ===================================================================
   PART 12. 强制闪卡按钮与卡片宽度对齐
   =================================================================== */

/* 电脑端：确保闪卡按钮容器与卡片宽度完全一致 */
@media (min-width: 769px) {
    .fc-controls-three {
        width: 95% !important;
        max-width: 600px !important;
        margin: 50px auto 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: space-between !important; /* 按钮之间充满空间 */
        align-items: center !important;
        gap: 15px !important;
        box-sizing: border-box !important;
    }
    
    .fc-btn-lg {
        flex: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 15px 0 !important;
    }
}

/* 闪卡大按钮样式 */
.fc-btn-lg { 
    flex: 1;                          /* 等宽 */
    padding: 15px 0;                  /* 内边距上下15像素，左右0 */
    border: none;                     /* 无边框 */
    border-radius: 12px;              /* 12像素圆角 */
    font-size: 16px;                  /* 字体大小16像素 */
    font-weight: 600;                 /* 加粗字重 */
    cursor: pointer;                  /* 鼠标指针为手形 */
    transition: 0.2s;                 /* 过渡动画0.2秒 */
}

/* 在现有样式基础上添加 */
.fc-btn-lg {
    flex: 1;
    max-width: 200px;  /* 限制最大宽度 */
    min-width: 100px;  /* 限制最小宽度 */
}

/* 不认识按钮样式 */
.btn-unknown { 
    background-color: #FFF0F0 !important;  /* 浅红色背景 */
    color: #D32F2F !important;             /* 红色文字 */
}

/* 模糊按钮样式 */
.btn-vague { 
    background-color: #FFF8E1 !important;  /* 浅黄色背景 */
    color: #F57C00 !important;             /* 橙色文字 */
}

/* 认识按钮样式 */
.btn-know { 
    background-color: #E8F5E9 !important;  /* 浅绿色背景 */
    color: #2E7D32 !important;             /* 绿色文字 */
}

/* 底部静态控制按钮容器样式 */
.learning-controls-static { 
    display: flex;                    /* 弹性布局 */
    gap: 15px;                        /* 子元素之间间距15像素 */
    max-width: 600px;                /* 最大宽度1000像素 */
	width: 95% !important;            /* ★★★ 改为与卡片相同的百分比宽度 ★★★ */
    margin: 30px auto 50px;           /* 上下外边距30像素和50像素，水平居中 */
    padding: 0 15px;                  /* 内边距上下0，左右15像素 */
    box-sizing: border-box;           /* 盒模型计算包含内边距和边框 */
	justify-content: center;          /* ★★★ 添加：让按钮在容器内居中 ★★★ */
}

/* 精确计算宽度方案 */
.learning-controls-static {
    width: 90% !important;
    max-width: 600px !important;
    margin: 30px auto 50px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: space-between !important; /* 按钮之间充满空间 */
    align-items: center !important;
}

/* 学习控制按钮样式 */
.lc-btn { 
    flex: 1 !important;               /* ★★★ 使用1让两个按钮等分容器 ★★★ */
    min-width: 140px !important;      /* 最小宽度确保按钮不太小 */
    max-width: 280px !important;      /* 最大宽度限制 */
    padding: 15px 0;                  /* 内边距上下15像素，左右0 */
    border: none;                     /* 无边框 */
    border-radius: 12px;              /* 12像素圆角 */
    font-size: 16px;                  /* 字体大小16像素 */
    font-weight: 600;                 /* 加粗字重 */
    cursor: pointer;                  /* 鼠标指针为手形 */
    transition: transform 0.1s;       /* 变换过渡动画0.1秒 */
}

.lc-btn {
    width: calc(50% - 7.5px) !important; /* 减去一半的间隔 */
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-align: center !important;
    line-height: 50px !important;
    box-sizing: border-box !important;
}

/* 在现有样式基础上添加 */
.lc-btn {
    flex: 1;
    max-width: 250px;  /* 限制最大宽度 */
    min-width: 140px;  /* 限制最小宽度 */
}

/* 学习控制按钮激活（点击）效果 */
.lc-btn:active { 
    transform: scale(0.98);           /* 缩小到0.98倍 */
}

/* 禁用状态的学习控制按钮 */
.lc-btn:disabled { 
    opacity: 0.5;                     /* 透明度50% */
    cursor: not-allowed;              /* 鼠标指针为禁止符号 */
}

/* 上一个按钮样式 */
.btn-prev { 
    background-color: #f5f5f5 !important;  /* 浅灰色背景 */
    color: #666 !important;                /* 灰色文字 */
}

/* 下一个按钮样式 */
.btn-next { 
    background-color: #E8F5E9 !important;  /* 浅绿色背景 */
    color: #2E7D32 !important;             /* 绿色文字 */
}

/* ===================================================================
   PART 8. 日历组件 (Calendar)
   =================================================================== */

/* 日历遮罩层样式 */
.calendar-overlay { 
    position: fixed;                  /* 固定定位 */
    top: 0;                           /* 顶部对齐 */
    left: 0;                          /* 左侧对齐 */
    width: 100%;                      /* 宽度100% */
    height: 100%;                     /* 高度100% */
    background: rgba(255, 255, 255, 0.85);  /* 85%透明度的白色背景 */
    backdrop-filter: blur(8px);       /* 背景模糊8像素 */
    z-index: 999999 !important;       /* 最高层级 */
    display: flex;                    /* 弹性布局 */
    align-items: center;              /* 垂直居中 */
    justify-content: center;          /* 水平居中 */
    animation: fadeIn 0.25s ease-out; /* 淡入动画，0.25秒，缓出函数 */
}

/* 日历卡片样式 */
.calendar-card { 
    background: #fff;                 /* 白色背景 */
    width: 90%;                       /* 宽度90% */
    max-width: 420px;                 /* 最大宽度420像素 */
    border-radius: 30px;              /* 30像素圆角 */
    padding: 35px;                    /* 内边距35像素 */
    box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02);  /* 多层阴影效果 */
    text-align: center;               /* 文本居中 */
    position: relative;               /* 相对定位 */
    animation: scaleUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);  /* 缩放动画，0.3秒，自定义缓动函数 */
}

/* 日历关闭按钮样式 */
.calendar-close-btn { 
    position: absolute;               /* 绝对定位 */
    top: 15px;                        /* 距离顶部15像素 */
    right: 20px;                      /* 距离右侧20像素 */
    font-size: 28px;                  /* 字体大小28像素 */
    color: #ccc;                      /* 浅灰色文字 */
    cursor: pointer;                  /* 鼠标指针为手形 */
    line-height: 1;                   /* 行高1倍 */
}

/* 日历关闭按钮悬停效果 */
.calendar-close-btn:hover { 
    color: #333;                      /* 文字颜色变为深灰色 */
}

/* 日历头部标题样式 */
.calendar-header h2 { 
    color: #87CEEB;                   /* 天蓝色文字 */
    font-size: 26px;                  /* 字体大小26像素 */
    font-weight: 800;                 /* 超粗字重 */
    margin: 0 0 30px 0;               /* 底部外边距30像素，其他为0 */
    letter-spacing: 0.5px;            /* 字间距0.5像素 */
}

/* 日历星期标题容器样式 */
.calendar-weekdays { 
    display: grid;                    /* 网格布局 */
    grid-template-columns: repeat(7, 1fr);  /* 7等分列 */
    margin-bottom: 15px;              /* 底部外边距15像素 */
}

/* 日历星期标题样式 */
.calendar-weekdays span { 
    color: #A0D8EF;                   /* 浅蓝色文字 */
    font-size: 13px;                  /* 字体大小13像素 */
    font-weight: 700;                 /* 加粗字重 */
    text-transform: uppercase;        /* 文本大写 */
}

/* 日历网格容器样式 */
.calendar-grid { 
    display: grid;                    /* 网格布局 */
    grid-template-columns: repeat(7, 1fr);  /* 7等分列 */
    gap: 10px;                        /* 网格间隙10像素 */
    row-gap: 12px;                    /* 行间隙12像素 */
}

/* 日历日期单元格样式 */
.calendar-day { 
    aspect-ratio: 1/1;                /* 宽高比1:1 */
    display: flex;                    /* 弹性布局 */
    align-items: center;              /* 垂直居中 */
    justify-content: center;          /* 水平居中 */
    font-size: 15px;                  /* 字体大小15像素 */
    color: #444;                      /* 灰色文字 */
    border-radius: 14px;              /* 14像素圆角 */
    font-weight: 500;                 /* 中等字重 */
}

/* 有学习记录的日期单元格样式 */
.calendar-day.has-learning { 
    background-color: #87CEEB;        /* 天蓝色背景 */
    color: #fff;                      /* 白色文字 */
    font-weight: 700;                 /* 加粗字重 */
    box-shadow: 0 4px 12px rgba(135, 206, 235, 0.5);  /* 阴影效果 */
    cursor: pointer;                  /* 鼠标指针为手形 */
    transition: transform 0.2s;       /* 变换过渡动画0.2秒 */
}

/* 有学习记录的日期单元格悬停效果 */
.calendar-day.has-learning:hover { 
    transform: scale(1.1);            /* 放大1.1倍 */
}

/* 缩放动画定义 */
@keyframes scaleUp { 
    from { 
        transform: scale(0.9);        /* 开始缩放90% */
        opacity: 0;                   /* 完全透明 */
    }
    to { 
        transform: scale(1);          /* 正常大小 */
        opacity: 1;                   /* 完全不透明 */
    }
}

/* 淡入动画定义 */
@keyframes fadeIn { 
    from { 
        opacity: 0;                   /* 完全透明 */
    }
    to { 
        opacity: 1;                   /* 完全不透明 */
    }
}

/* ===================================================================
   PART 9. 移动端适配 (Media Queries)
   =================================================================== */

@media (max-width: 768px) {
    /* 卡片尺寸调整 */
    #learning-cards-wrapper, 
    .flashcard-container { 
        width: 90% !important;
        height: auto !important;
        min-height: 420px !important;
        margin: 15px auto !important;
    }
    
    /* 左右分栏 */
    .card-middle-split { 
        grid-template-columns: 1.2fr 1fr !important;
        gap: 10px;
    }
    
    /* 卡片内边距 */
    .learning-card-item { padding: 20px 15px; }
    
    /* 标题字号 */
    .word-card-header { font-size: 26px; }
    
    /* 图片占位 */
    .img-placeholder { 
        display: block !important;
        background: #f9f9f9;
        border-radius: 8px;
        height: 100px;
    }
    
    /* 侧边栏高度 */
    #universal-word-drawer {
        top: 53px !important;
        height: calc(100vh - 56px) !important;
    }
    
    /* 移动端（宽度≤768px）适配覆盖样式 */
    /* 学习卡片包装器和闪卡容器在移动端调整 */
    #learning-cards-wrapper, 
    .flashcard-container { 
        width: 96% !important;        /* 宽度96% */
        height: auto !important;      /* 高度自适应 */
        min-height: 530px !important; /* 最小高度520像素 */
        margin: 15px auto !important; /* 上下外边距15像素，水平居中 */
    }
    
    /* 卡片左右分栏在移动端调整为1.2:1比例 */
    .card-middle-split { 
        grid-template-columns: 1.2fr 1fr !important;  /* 左右分栏比例1.2:1 */
        gap: 15px;                    /* 网格间隙15像素 */
    }
    
    /* 学习卡片项在移动端调整内边距 */
    .learning-card-item { 
        padding: 20px 20px;           /* 内边距上下25像素，左右20像素 */
    }
    
    /* 单词卡片标题在移动端调整字体大小 */
    .word-card-header { 
        font-size: 28px;              /* 字体大小30像素 */
    }
    
    /* 在移动端显示图片占位符 */
    .img-placeholder { 
        display: block !important;    /* 块级显示 */
        background: #f9f9f9;          /* 浅灰色背景 */
        border-radius: 8px;           /* 8像素圆角 */
    }
	  #universal-word-drawer {
        top: 53px !important;              /* 手机端导航栏高度 */
        height: calc(100vh - 56px) !important; /* 手机端剩余高度 */
    }
	/* ============================
       音频按钮组 - 手机端专属调整
       ============================ */

    /* 1. 控制条整体 (胶囊外壳) */
    .audio-control-card {
        height: 30px !important;       /* 【高度】：原来是32px，这里改小 */
        padding: 0 10px !important;     /* 【左右内边距】：改小让它更短 */
        gap: 14px !important;           /* 【图标间距】：图标挤得紧一点 */
        border-radius: 14px !important;/* 圆角随高度调整 (高度的一半) */
    }

    /* 2. 里面的图标 (喇叭、循环、倍速图标) */
    .audio-control-card .action-btn img {
        width: 16px !important;        /* 【图标宽度】：原来是18px，改小 */
        height: 16px !important;       /* 【图标高度】：保持一致 */
    }
    
    /* 3. 如果有文字 (比如 x3 这种状态显示，如果有的话) */
    .audio-control-card span {
        font-size: 12px !important;
    }
	/* 底部按钮容器在移动端 */
    .learning-controls-static {
        width: 90% !important;        /* 与移动端卡片宽度一致 */
        max-width: none !important;   /* 移除最大宽度限制 */
    }
    
    /* 学习模式按钮在手机上缩小 */
    .lc-btn {
        width: 140px !important;      /* 移动端按钮宽度 */
        font-size: 14px !important;
    }
}
/* =======================================================
   PART 10. 生词本列表容器 & 卡片 (V10.0 稳定版)
   ======================================================= */

/* 1. 列表外层容器 */
.folder-list-wrapper {
    max-width: 600px !important;
    margin: 30px auto !important;
    padding: 0 15px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    box-sizing: border-box !important;
}

/* 2. 生词本单行卡片 */
.folder-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #fff !important;
    min-height: 72px !important;
    padding: 0 20px !important;
    border-radius: 16px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02) !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    
    /* ★ 关键：相对定位，z-index:1，允许 JS 把它提起来解决遮挡 */
    position: relative; 
    z-index: 1; 
}

.folder-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
}

/* 3. 卡片内部布局 */
.folder-left-part { display: flex !important; align-items: center !important; flex: 1 !important; overflow: hidden !important; }
.folder-right-part { display: flex !important; align-items: center !important; gap: 10px !important; flex-shrink: 0 !important; }

/* 4. 图标与文字 */
.folder-icon-pure { width: 20px; height: 20px; margin-right: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.folder-icon-pure img { width: 100% !important; height: 100% !important; object-fit: contain; opacity: 0.8; }
.folder-item:not(:first-child) .folder-icon-pure { display: none !important; }
.folder-item:not(:first-child) .folder-left-part { padding-left: 0 !important; }

.folder-name { font-size: 16px !important; color: #333 !important; font-weight: 500 !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.word-count { font-size: 14px !important; color: #999 !important; white-space: nowrap !important; }


/* =======================================================
   PART 11. 菜单样式 (三个点 & 悬浮卡片)
   ======================================================= */

/* 1. 三个点容器 */
.folder-menu-wrapper {
    position: relative !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    z-index: auto !important;
}

/* 2. 三个点按钮 */
.folder-action-dots {
    font-size: 22px !important; color: #ccc !important; width: 30px !important; height: 30px !important;
    display: flex !important; align-items: center; justify-content: center; cursor: pointer !important; line-height: 1 !important; border-radius: 50% !important;
}
.folder-action-dots:hover { color: #666 !important; background: #f5f5f5 !important; }

/* 3. 悬浮菜单卡片 */
.folder-popover-menu {
    display: none;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    width: 110px !important;
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    padding: 6px 0 !important;
    border: 1px solid #eee !important;
    z-index: 999 !important;
}

/* 4. 菜单项 */
.menu-item { padding: 10px 15px !important; font-size: 14px !important; color: #333 !important; cursor: pointer !important; text-align: left !important; display: block !important; }
.menu-item:hover { background: #f7f9fa !important; }

/* 删除项：黑色文字，红色悬停 (防误触) */
.menu-item.delete { color: #333 !important; border-top: 1px solid #f9f9f9 !important; }
.menu-item.delete:hover { background: #fff1f0 !important; color: #ff4d4f !important; }


/* =======================================================
   PART 12. 新建/重命名 弹窗 (使用 ID 锁定权重)
   ======================================================= */

/* 1. 遮罩层 */
.custom-modal-overlay { z-index: 100000 !important; }

/* 2. 白盒子 (ID锁定，确保留白生效) */
#custom-folder-modal .custom-modal-box {
    padding-top: 30px !important;  /* 恢复到 50px，确保有空白 */
    padding-bottom: 10px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    
    border-radius: 20px !important;
    width: 280px !important;
    background: #fff !important;
    text-align: center !important;
    display: block !important;
}

/* 3. 标题 */
#custom-folder-modal .modal-title {
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-bottom: 20px !important;
    margin-top: 0 !important;
    color: #333 !important;
}

/* 4. 输入框 (细蓝线 0.9px) */
#new-folder-name {
    width: 85% !important;
    border: 0.9px solid #35BAF3 !important;
    background: #fff !important;
    border-radius: 8px !important;
    padding: 10px !important;
    font-size: 14px !important;
    color: #333 !important;
    outline: none !important;
    margin-bottom: 25px !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
}

/* 5. 按钮 */
#custom-folder-modal .modal-buttons { display: flex !important; justify-content: space-between !important; padding: 0 20px !important; gap: 20px !important; }
#custom-folder-modal .modal-btn { background: transparent !important; border: none !important; box-shadow: none !important; font-size: 14px !important; cursor: pointer !important; padding: 5px 10px !important; }
#custom-folder-modal .modal-btn.cancel { color: #999 !important; font-weight: 400 !important; }
#custom-folder-modal .modal-btn.confirm { color: #35BAF3 !important; font-weight: 500 !important; }


/* =======================================================
   PART 13. 删除确认弹窗 (修复按钮布局与背景)
   ======================================================= */

/* 1. 确保删除弹窗也是白盒子 */
#delete-confirm-modal .custom-modal-box {
    padding-top: 20px !important;
    padding-bottom: 5px !important; /* 底部留点空间 */
    border-radius: 20px !important;
    width: 280px !important;
    background: #fff !important;
    text-align: center !important;
    
    /* 核心修复：确保盒子内部元素垂直排列 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* 2. 中间文字 (带边框的警告框) */
#delete-confirm-modal .modal-message {
    margin-top: 15px !important;
    margin-bottom: 20px !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
    color: #666 !important;
    
    border: 1px solid #e5e5e5 !important;
    padding: 15px 5px !important;
    border-radius: 8px !important;
    width: 85% !important;
    box-sizing: border-box !important;
}

/* 3. ★★★ 按钮容器修复 (关键) ★★★ */
/* 强制让两个按钮左右撑开，不要挤在中间 */
#delete-confirm-modal .modal-buttons {
    display: flex !important;
    justify-content: space-between !important; /* 左右分布 */
    width: 100% !important;                    /* 撑满宽度 */
    padding: 0 20px !important;                /* 左右留白 */
    box-sizing: border-box !important;
    gap: 0 !important;
}

/* 4. ★★★ 按钮样式修复 (关键) ★★★ */
/* 强制去掉背景色，变回纯文字 */
#delete-confirm-modal .modal-btn { 
    font-size: 14px !important; 
    background: transparent !important; /* 去掉灰色/蓝色背景块 */
    border: none !important;
    box-shadow: none !important;
    padding: 10px !important;           /* 增加点击范围 */
    cursor: pointer !important;
    margin: 0 !important;
}

/* 取消按钮 */
#delete-confirm-modal .modal-btn.cancel {
    color: #999 !important;
    font-weight: 400 !important;
}

/* 删除按钮 */
#delete-confirm-modal .modal-btn.delete-confirm { 
    color: #35BAF3 !important; 
    font-weight: 500 !important; 
}


/* =======================================================
   PART 14. 底部新建按钮
   ======================================================= */
.add-folder-btn {
    background: #fff !important; min-height: 72px !important; border-radius: 16px !important; border: 1px solid #f0f0f0 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.02) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important; font-size: 15px !important; color: #888 !important; font-weight: 500 !important; width: 100% !important; margin-top: 5px !important;
}
.add-folder-btn:hover { background: #fafafa !important; color: #35BAF3 !important; }

/* 手机端隐藏顶部栏 */
@media (max-width: 768px) {
    body.hide-mobile-header .wv-mobile-top-bar {
        display: none !important;
    }
    
    body.hide-mobile-header .wv-main-body {
        padding-top: 0 !important;
    }
}
/* 手机端隐藏顶部栏时的完整修正 */
@media (max-width: 1000px) {
    body.hide-mobile-header .wv-mobile-top-bar {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* 关键修复：覆盖 html body .wv-main-body 的 padding-top */
    html body.hide-mobile-header .wv-main-body {
        padding-top: 0 !important;
    }
    
    /* 还需要覆盖内容区的内边距 */
    html body.hide-mobile-header .wv-content-inner {
        padding-top: 0 !important !important;
    }
}