/*一般性画布设置 - 颜色变量*/
/* 1. color的命名就是颜色, 而不是语义化的背景色、内容框色、警告色*/
/* 2. color的使用需要克制，限制为若干几种，以确保色彩体系的简约和可管理性*/
:root {
    --paper-white:  #fffdf5; /*纸白色，《《《这里是最终在网页中使用的纸白色，前面是可选的几种备用*/
    --gray-white:   #eeeeee; /*gray-white 灰白色，一种浅灰*/
    --fine-gray:    #d4ddd4; /*一种灰色，显得高级*/
    --elfin-green:  #a8f0e630; /*仙灵绿，用于某些特殊的场合，比如页头或者页脚，*/
    --light-green: #2ecc71;/*明亮的绿色*/
    --dark-green: #4caf50;/*略深的绿色*/
    --milk-orange:  #fdeddf; /*奶油色*/
    --milk-yellow:  #fff9f4; /*奶油色，略淡*/
    --light-blue:   #e8f4f8; /*一种略淡的蓝色*/
    --dark-blue:    #00247D;   /*深蓝色，目前似乎只有在版本切换的圆形按钮用作底色*/
    --steel-blue:   #4682B4; /*一种蓝色，颜色值也可以使用“var(--steel-blue)”，钢蓝色，链接常用这个颜色*/
    --nice-blue:    #3498db; /*一种漂亮的蓝色，可以用来做nav，button色*/
    --header-blue: #1e3c72; /*一种稳重的蓝色，可以用来做h3,课文标题色*/
    --dark-brown:   #8b4513; /*一种棕色，用于链接hover,文章首字母艺术体 课文标题波浪下划线等*/
    --blink-blue: #70ff94;   /*一种亮瞎眼的绿蓝色，用于search捕捉到的文章中的高亮词汇*/
    --nav-1-color: #4caf50;
    --nav-2-color: #3498db;
    --nav-3-color: #FF9800;
    --nav-4-color: #8b4513;
    --nav-words-color: #83649e;
    --nav-grammar-color: #af9a71;
    --nav-900-color: #529ca9;
    --nav-shares-color:#ff6b6b;
    --nav-bbs-color:#b98484;
    --nav-search-color:#be5c5c;
    
    
/*下面的颜色备用*/  
    --paper-white-1:#ffffff; /*纯白*/
    --paper-white-2:#fffff9; /*纸白色，比纯白似乎要黄一点，色数的最后一个HEX写成了9，*/
    --paper-white-3:#fffff8; /*纸白色，比纯白似乎要黄一点，色数的最后一个HEX写成了8，*/
    --paper-white-4:#fffff0; /*标准的象牙白（Ivory），比纯白似乎要黄一点，色数的最后一个HEX写成了0，*/
    --paper-white-5:#FEFCF3; /*纸白色，比纯白似乎要黄一点，*/ 
    --paper-white-6:#f2e6ce; /*荔肉白，比纯白似乎要黄一点，*/
    --elfin-green-1:#6aedd640; /*仙灵绿，用于某些特殊的场合，比如页头或者页脚，*/
    --cool-blue:   #1890ff; /*另外一种漂亮的蓝色,button可以用这个,多余的颜色？*/
    --color-primary: #5C6BC0;
    --color-secondary: #26A69A;
    --color-bg: #FAFAFA;
    --color-surface: #FFFFFF;
    --color-accent: #FFB74D;
    --color-text: #333333;
    --color-text-secondary: #666666;
    --color-primary: #A5D6A7;       /* 主色：清新的薄荷绿，替代之前的蓝紫，更柔和 */
    --color-secondary: #80CBC4;     /* 辅助色：蒂芙尼蓝，保持宁静感但更明亮 */
    --color-accent: #FFCC80;        /* 强调色：奶油杏黄，温暖且醒目 */

/* 中性色板 - 为马卡龙色调定制 */
  --color-bg: #FFF9F4;            /* 背景：极浅的奶油桃色，奠定温暖基调 */
  --color-surface: #FFFFFF;       /* 表面：纯白，确保内容清晰 */
  --color-surface-variant: #F3E5F5; /* 表面变体：极浅的薰衣草紫，用于特殊模块 */

/* 文字色 - 与浅色背景保持良好对比 */
  --color-text: #5D4037;          /* 主文字：暖棕灰，比冷黑更协调 */
  --color-text-secondary: #8D6E63; /* 次要文字：浅一度的棕灰 */
  --color-text-on-color: #FFFFFF;  /* 在彩色背景上的文字：固定为白色 */
  
/* 边框与阴影 */
  --color-border: #E0E0E0;        /* 边框：浅灰色 */
  --color-shadow: rgba(141, 110, 99, 0.1); /* 阴影：带棕灰调的柔和阴影 */

}


/* 引入字体文件 */
@font-face {font-family: "mywebfont"; src: url("fonts/ncetitle.woff2");}/*网站标题中文篆体字*/
@font-face {font-family: "adele"; src: url("fonts/nce.com.woff2");}/*课程标题英文艺术字*/
@font-face {font-family: "HelloSolid"; src: url("fonts/HarlowSolid.woff2");}/*会员名称英文艺术字*/
@font-face {font-family: "SmallCaps"; src: url("fonts/Fontin-SmallCaps.otf");}

/*整体设计*/
* {box-sizing: border-box;} /*box-sizing的定义确保对象的宽度为全部宽度，并通过hidden防止水平滚动条意外出*/
html {
    background-color: var(--paper-white); /* 页面背景色 一种极淡的象牙色 */
    overflow-x: hidden; /* 将原本在body的声明移至html，防止整个页面横向滚动 */
}

body {
    min-height: 100vh; /* 至少占满整个视口高度 */
    line-height: 1.5;
    max-width: 768px;
    margin: 0 auto; /* 水平居中 */
    padding: 1em;
    font-family: "Source Han Sans SC", "Source Han Sans TC", "Source Han Sans HC", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Segoe UI", Verdana, Geneva, sans-serif;
}

@media (max-width: 480px) {
    body {
        padding: 0.7em; /* 遇见小屏幕的时候，内边距相应缩小 */
        font-size: 0.9em; /* 更佳的可访问性实践 */
    }
}

/*一些基本元素的设计----波浪线、按钮、特殊字体、小屏基本设计、常用标签和选择器惯例*/
.wavy{text-decoration: underline wavy var(--dark-brown);}/*67版会使用深蓝色的波浪线，待查*/

/*基本button设计，特殊情况在这个基础上作设计*/
button{color:white;padding: 12px 16px; margin: 0px; background: var(--nice-blue); border: none; border-radius: 8px; cursor: pointer; font-size: 14px;font-weight:600;}
/*各册单词表使用的按钮*/
.filter-container {display: flex; flex-wrap: wrap; gap: 12px;}
.filter-btn {padding: 10px 28px; background-color: var(--fine-gray); border-radius: 20px; transition: all 0.3s; color:#666}
.filter-btn:hover {background-color: var(--nice-blue);color:white}
.filter-btn.active {background-color: var(--nice-blue);color:white}

/*用户注册、登录、保存设置、退出登录等按钮*/
.action-btn{flex:1;padding:8px 0;text-decoration:none;transition:all 0.3s;display:inline-block}
.action-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}

a {text-decoration: none; color: var(--steel-blue);transition: color 0.3s ease; /* 添加平滑过渡 */}
a:hover {color: var(--dark-brown); text-shadow: 2px 2px 4px rgba(139, 69, 19, 0.3); }
ul {padding-left:1em;}
li {margin: 0 ;}
h3 {color: var(--header-blue); margin: 0; font-size: 1.3rem;}
.title-meta {margin-bottom: 0.8em;padding-bottom: 0.5em;border-bottom: 1px solid #f0f0f0;}

.art-fonts {font-family: "adele"; font-weight: bold; font-size: 1.8em;} /*专门给书名、课程名称使用的一种艺术字体*/
img {margin: 0 0 -0.6em 0; padding: 0; border: 0;}


/*页头部分的设置: 标题、子标题、版本切换按钮*/
#siteheader {position: relative;border-radius: 16px 16px 0 0; display: block; margin: 0; padding: 0.6em 0; text-align: center; font: xxx-large mywebfont; font-weight: normal; background-color: var(--gray-white);}
#siteheader a {color: black;}
#siteheader a:hover {color: black;text-shadow: none}
#slogan {display: block;margin: 0; padding-top: 12px; text-align: center; font-size: .5em; font-family: "adele"; font-weight: bold;}
.version-form { position:absolute; left:calc(50% + 114px); top:20%; margin:0; padding:0; }
.nce-ver { width:28px; height:28px; border-radius:50%; background: var(--dark-blue); cursor:pointer; display:flex; align-items:center; justify-content:center;font-weight:bold; font-size:14px; box-shadow:0 4px 8px rgba(0,0,0,0.15); transition:all 0.2s; padding:0; margin:0; }
.nce-ver:hover { transform:translateY(-5px); box-shadow:0 8px 20px rgba(255,107,107,0.6); background-color:#ff5252; }

/*导航栏样式*/
nav {margin: 0; padding: 0.5em 0.5em; background: var(--milk-orange); font-size: 1em; font-weight: bold; border-bottom: solid 3px #5F9EA0; justify-content: center;}
nav a {color: #999;}
#nav-left {display: inline; margin: 0; padding: 0 0.5em 0 0; text-align: left;}
#nav-left a {padding: 0.5em 0.1em 0.3em 0.1em;}
#nav-left a:hover {background-position: top center;}
#nav-right {float: right; display: inline; margin: 0; padding: 0; text-align: right; color: #999; font-size: 1em; font-weight: bold;}
#nav-right a {padding: 0.5em;}
#nav-right a:hover {color: #00B4FF; background-position: top center;}

.circle-link {display: inline-flex; justify-content: center; align-items: center; width: 22px; height: 22px; color: white; border-radius: 50%; text-decoration: none; font-size: 12px; font-weight: bold; transition: all 0.3s ease; line-height: 1; vertical-align: middle;}
.circle-link:hover {transform: translateY(-5px); box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6); background-color: #ff5252; color: white;}

.oval-link {display: inline-flex; justify-content: center; align-items: center; width: 60px; height: 30px; color: white; border-radius: 18px; text-decoration: none; font-size: 14px; font-weight: bold; transition: all 0.3s ease;}
.oval-link:hover {transform: translateY(-5px); box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6); background-color: #ff5252;}

.centered-icon {display: inline-block; vertical-align: middle; line-height: 1; font-size: 12px; transform: translateY(-0.1em);}
.centered-icon:hover {color: white;}

.spaced-list {list-style: none; padding-left: 0.5em;}
.spaced-list li {margin-bottom: 1px; padding: 3px;}

.small-circle-link {display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; color: white; border-radius: 50%; text-decoration: none; font-size: 12px; font-weight: bold; transition: all 0.3s ease; line-height: 1; vertical-align: middle;}
.small-circle-link:hover {transform: translateY(-5px); box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6); background-color: #ff5252; color: white;}

.icon {display: inline-block; vertical-align: middle; line-height: 1; font-size: 10px; transform: translateY(-0em);}

.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}


/*文章部分，每一个页面都是一个article,导航结束后就是文章开始，文章结束后就是页脚部分*/
main {overflow: auto; background-color: var(--light-blue); color: #444; margin: 0; padding: 1em; }

/*table样式，table在本站使用于每册书的目录，仅此而已*/
table {margin: 1em 0; width: 100%; border-collapse: collapse; font-size: small; line-height: 1.6em;}
th {padding: .8em; border: solid lightgray 1px; vertical-align: middle; text-align: center; font-weight: normal; background: #fff;}
td {padding: 0.2em .8em; border: solid lightgray 1px; vertical-align: top;}

/*footer的样式*/
footer {border-radius: 0 0 16px 16px; background-color: var(--gray-white); color: #333; padding: 0.5em 1em; line-height: 1em; clear: both; text-align: left; margin: 0 auto; font-size:small;border-top: solid 3px #5F9EA0; }

/*音频视频播放器的样式*/
.avplayer{text-align: center;font-size: 14px;}
.audiobox {display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: nowrap; gap: 10px; margin: 0; padding:1em 0; background: var(--milk-yellow);}

@media (max-width: 480px) {
#tapequestion {font-size:11px;}
}



/*课文标题的样式*/
.course-title {overflow: auto;clear: both; padding: 0.5em 0 0 0;background: var(--milk-yellow); margin: 1em 0 0 0; text-align: center;line-height: 0.5em;font: 1.5em "Microsoft YaHei"; font-weight: bold;}
.course-title p {font-size: 1.5em;color: var(--header-blue);margin: 0.5em 0;display: inline-block; padding-bottom: 10px;background-repeat: repeat-x;background-position: bottom;background-image: var(--wave);} /* 父级定义变量，子级使用 */
.course-title[data-version="97"] { --wave: var(--wave-brown);}
.course-title[data-version="67"] {--wave: var(--wave-blue);}

.course-title-cn {overflow: auto;clear: both; padding: 0;background: var(--milk-yellow); margin: 0; text-align: center;line-height: 0.5em;font: 1.2em "Microsoft YaHei"; font-weight: normal;}
.course-title-cn p {font-size: 1.5em;color: var(--header-blue);margin: 0.5em 0;display: inline-block; padding-bottom: 10px;background-repeat: repeat-x;background-position: bottom;background-image: var(--wave);} /* 父级定义变量，子级使用 */
.course-title-cn[data-version="97"] { --wave: var(--wave-brown);}
.course-title-cn[data-version="67"] {--wave: var(--wave-blue);}

/*课文的样式*/
.nce {overflow: auto; clear: both; padding: 1em; margin: 1em 0; background-color: var(--milk-yellow);}
.nce-lessons {color: #385c6d; line-height: 2em; font-family: Georgia; margin-top:0; padding-top:0px;}
.nce-lessons h3 {display: none;}
.lesson-source p {font-family: SmallCaps;}
@media (max-width: 480px) {
.nce-lessons {font-size:14px;}
}

.contents-box,blockquote {
    /* 1. 布局与盒模型 (最核心的结构) */
    position: relative; /* 为可能的内部绝对定位元素提供参考 */
    display: block; /* 确保它是一个块级元素 */
    clear: both; /* 清除浮动，防止布局错乱 */
    overflow-wrap: break-word; /* 首选：在任意字符间强制断行，避免溢出 */
    margin: 1em 0; /* 统一上下外边距为1em，左右为0 */
    padding: 1em; /* 统一内边距为1em */

    /* 2. 尺寸控制 */
    height: auto; /* 高度由内容决定 */
    min-height: auto; /* 最小高度也由内容决定 */
    max-height: none; /* 不限制最大高度 */

    /* 3. 视觉装饰 */
    background: var(--paper-white); /* 主背景色，可考虑使用CSS变量如 --paper-white */
    border-radius: 8px; /* 采用较大的8px圆角，视觉上更现代（原.panshares的值） */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 细微的投影，提升层次感 */

    /* 4. 文字排版 */
    font-size: small; /* 较小字号，适用于说明、注释类内容 */
    line-height: 1.6em; /* 舒适的行高，利于阅读 */

}
.contents-box ul.spaced-list {margin-right: 350px; /* 为右侧区域留出空间 */}
.category-meta,blockquote {background-color: var(--milk-yellow); margin-top: 0; margin-bottom: 0;}
.center-box {text-align: center;margin-bottom: 1em;padding-bottom: 1em; line-height:1.6}
.introduction-section {background: var(--paper-white);}
.morphology-section {background: var(--milk-yellow);}
.syntax-section {background: var(--milk-orange);}



.bigimg {width: 100%; margin: 1em 0; border: 0; padding: 0;}
.smallimg {float: left; border: 0; margin-right: 1em;}
.nce table {background: white;}


.nce-section-title {display: none; overflow: auto; clear: both; padding: 0.5em; margin: 0; background: #D6D2CA; border-top: solid 4px black;}
.tips {display: inline; color: var(--steel-blue); font-weight: bold;}

/*英文课文首段落首字母经典下沉式设计*/
.drop-cap-classic {font-family: 'Georgia', serif; float: left; font-size: 4em; line-height: 0.85; padding: 0.15em 0.05em 0.05em 0; color: var(--dark-brown); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); margin: -0.3em 0.05em 0 0; position: relative; z-index: 1;}

/*-----以下是文章中出现的蓝色MP3播放按钮，主要给小编带读和小编笔记用--------*/
.audio-container {display: inline-block; vertical-align: middle; margin: 0 5px;}
.play-button {width: 24px; height: 24px; background-color: #4a6ee0; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: all 0.2s ease;}
.play-button:hover {transform: scale(1.1); background-color: #3a5ecc;}
.play-icon {width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid white; margin-left: 2px; transition: all 0.3s ease;}
.pause-icon {width: 8px; height: 10px; position: relative;}
.pause-icon:before, .pause-icon:after {content: ''; position: absolute; width: 2px; height: 100%; background-color: white; border-radius: 1px;}
.pause-icon:before {left: 0;}
.pause-icon:after {right: 0;}
/*-----以上是文章中出现的蓝色MP3播放按钮，主要给小编带读和小编笔记用--------*/

.title {margin: 0; border-top: solid 0px #5F9EA0; background-color: #e8f4f8;}
.title {margin: 1em 0; padding: 0.1em 1em 1em 1em; border-left: 4px solid gray; background: #f9eeee; font-size: small; line-height: 1.8em;}
.title h2 {text-align: center; font-size: large; margin: 1em 1em 0.5em 1em; color: #666;}
.subtitle {text-align: center; margin-top: 0;}

/*教师笔记样式*/
.intro {background-color: #fff3cd; border-left: 2px solid #ffc107; padding: 1em; margin: 0;}
.intro h3 {color: #856404; margin-top: 0;}
.intro p {margin-bottom: 10px;}

/*用法卡片样式*/
.usage-card, .extension-card, .practice-card, .cultural-card, .summary-card {background-color: #f8f9fa; border-left: 4px solid #2a5298; padding: 1em; margin-bottom: 20px; border-radius: 0 5px 5px 0;}
.example {background-color: #e9ecef; padding: 12px; border-radius: 5px; margin-top: 10px;}
.example p {margin-bottom: 5px;}

/*教学提示样式*/
.teaching-tip {background-color: #d1ecf1; border-left: 4px solid #0dcaf0; padding: 10px; margin-top: 10px; border-radius: 0 5px 5px 0; font-size: 0.9rem;}

/*比较表格样式*/
.comparison-table {overflow-x: auto; margin-bottom: 20px;}
table {width: 100%; border-collapse: collapse;background-color: var(--paper-white); }
th, td {border: 1px solid #ddd; padding: 8px 12px; text-align: left;}
th {background-color: #e8f4f8; color: var(--header-blue);}
tr:nth-child(even) {background-color: #f2f2f2;}
#ef-table tr {background-color: #ffffff !important;}
.biji-list tr:nth-child(even) {background-color: transparent;}

/*练习区域样式*/
.practice-question {background-color: #e8f4f8; padding: 15px; border-radius: 5px; margin-bottom: 15px;}
.practice-question ol, .practice-card ol {margin-left: 20px; margin-top: 10px;}
.practice-question li, .practice-card li {margin-bottom: 8px;}
.answer {background-color: #d4edda; padding: 15px; border-radius: 5px;}
.answer ol {margin-left: 20px;}

/*课后作业样式*/
.homework {background-color: #e2e3e5; padding: 15px; border-radius: 5px; margin-top: 15px;}
.homework ol {margin-left: 20px; margin-top: 10px;}

/*******课文中的对话(第一课以外使用这个)*********/
.dialogue-area {padding: 1em 0; display: flex; flex-direction: column; gap: 8px;}
.message {display: flex; align-items: flex-start; max-width: 100%;}
.message.left {align-self: flex-start;}
.message.right {align-self: flex-start;}
.message-bubble {padding: 7px; border-radius: 18px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);}
.left .message-bubble {background-color: #eeeedd; border-top-left-radius: 4px; color: #333;}
.right .message-bubble {background-color: #d2edd8; color: #333; border-top-left-radius: 4px;}
.message-sender {display: inline-block; font-size: 1em; font-weight: bold; opacity: 0.8; margin-right: 4px; color: #5c7cbe;}
.left .message-sender {color: #5c7cbe;}
.right .message-sender {color: #5c7cbe; text-align: left;}
.message-content {display: inline; font-size: 1em;}
.quote {margin: 1px; padding: 10px 15px; border-left: 0px solid #a8c0f0; background-color: rgba(255, 255, 255, 0.5); border-radius: 8px; font-size:smaller}
.scene-divider {text-align: center; margin: 20px 0; position: relative;}
.scene-divider:before {content: ""; position: absolute; top: 50%; left: 10%; right: 10%; height: 1px; background-color: #e0e0e0;}
.scene-divider span {padding: 0 15px; color: #666; font-size: 14px; position: relative;}
.scene-divider-2 {margin:22px 0 28px 0}
/*******课文中的对话(第一册专用)*********/
.message-bubble {display: flex; gap: 10px; align-items: flex-start; align-self: flex-start; max-width: 100%; padding: 4px 7px; border-radius: 18px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); color: #333;}
.role-a {background-color: #f0e8d8; border-top-left-radius: 4px;}
.role-b {background-color: #d2edd8; border-top-left-radius: 4px;}
.role-c {background-color: mistyrose; border-top-left-radius: 4px;}

/*英语900句的CSS*/
.search-box {background-color: #e8f4f8; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);}
#searchInput_900 {width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; outline: none; transition: border-color 0.3s;}
#searchInput_900:focus {border-color: #3498db; box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);}
.toc {background-color: #e8f4f8; border-radius: 8px; padding: 16px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);}
.toc h2 {margin-top: 0;}
.toc ul {list-style-type: none; columns: 3;}
.toc li {margin-bottom: 8px;}
.toc a {color: #3498db; text-decoration: none; transition: color 0.2s;}
.toc a:hover {color: #2980b9; text-decoration: underline;}
.volume {background-color: #e8f4f8; border-radius: 8px; padding: 16px; margin-bottom: 30px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);}
.lesson {margin-bottom: 25px; padding: 1em; font-size: 14px; background-color: #fff;}
.sentences {margin-top: 15px;}
.sentence {margin-bottom: 12px; padding-left: 10px; border-left: 1px solid #e0e0e0; transition: all 0.2s;}
.sentence:hover {border-left-color: #3498db; background-color: #f8f9fa;}
.sentence.highlight {border-left-color: #e74c3c; background-color: #fff9e6;}
.english {font-weight: bold; color: #2c3e50;}
.chinese {font-size: 12px; color: #7f8c8d;}
.back-to-top {display: block; text-align: center; margin: 30px 0; color: #3498db; text-decoration: none; padding: 8px 16px; border: 1px solid #3498db; border-radius: 4px; transition: all 0.2s;}
.back-to-top:hover {background-color: #3498db; color: white;}

@media (max-width: 480px) {
    h1 {font-size: 24px;}
    h2 {font-size: 20px;}
    .volume, .toc, .search-box {padding: 15px;}
    .toc ul {columns: 2;}
}

/*B站视频CSS*/
.iframe_video {position: relative; width: 100%;}
@media only screen and (max-width: 767px) {.iframe_video {height: 15em;}}
@media only screen and (min-width: 768px) and (max-width: 1080px) {.iframe_video {height: 20em;}}
@media only screen and (min-width: 992px) and (max-width: 1140px) {.iframe_video {height: 30em;}}
@media only screen and (min-width: 1440px) {.iframe_video {height: 40em;}}
.iframe_cross {position: relative; width: 100%; height: 0; padding-bottom: 75%;}
.iframe_cross iframe {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}

/*新概念英语单词表CSS*/
.controls {display: flex; flex-wrap: wrap; gap: 15px; margin: 25px 0; justify-content: center; align-items: center;}
.search-container {flex-grow: 1; max-width: 500px;}
#searchInput {width: 100%; padding: 12px 20px; border: 2px solid #ddd; border-radius: 30px; font-size: 1rem; transition: all 0.3s;}
#searchInput:focus {border-color: #3498db; outline: none; box-shadow: 0 0 8px rgba(52, 152, 219, 0.3);}
.stats {color: #7f8c8d; font-size: 0.9rem; text-align: center; margin: 10px 0;}
.lesson-section {margin-bottom: 40px; background-color: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow: hidden;}
.lesson-header {background-color: #e8f4f8; color: black; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;}
.lesson-title {font-size: 1.3rem; font-weight: 600;}
.word-count {background-color: var(--fine-gray); padding: 5px 10px; border-radius: 20px; font-size: 0.9rem;}
.word-table {width: 100%; border-collapse: collapse;margin:0}
.word-table th {background-color: #f8f9fa; padding: 12px 15px; text-align: left; border-bottom: 2px solid #e1e4e8; font-weight: 600; color: #2c3e50;}
.word-table td {padding: 12px 15px; border-bottom: 1px solid #e1e4e8;}
.word-table tr:hover {background-color: #f8f9fa;}
.word {font-weight: 600; color: #2c3e50;}
.phonetic {color: #e74c3c; font-family: 'Arial', sans-serif;}
.pos {color: #9b59b6; font-style: italic;}
.meaning {color: #27ae60;}
.no-results {text-align: center; padding: 30px; color: #7f8c8d;}

@media (max-width: 768px) {
    .word-table th, .word-table td {padding: 8px 10px;}
    .controls {flex-direction: column;}
    .search-container {width: 100%;}
    .phonetic {display: none;} /* 在小屏幕上隐藏音标列 */
}


/*刷题页面*/
:root {
    --testing-primary-color: #4a6fa5;
    --testing-secondary-color: #6b8cbc;
    --testing-correct-color: #4caf50;
    --testing-incorrect-color: #f44336;
    --testing-light-color: #f5f7fa;
    --testing-dark-color: #2c3e50;
}
.testing-stats-title {font-size: 1.3rem; margin-bottom: 15px; color: var(--testing-dark-color);}
.testing-stats-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;}
.testing-stats-item {padding: 10px; background-color: white; border-radius: 6px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);}
.testing-stats-label {white-space: nowrap; color: #666; font-size: 0.8rem; margin-bottom: 5px;}
.testing-stats-value {font-weight: 600; color: var(--testing-dark-color); font-size: 0.8rem;}
.testing-progress-bar {height: 8px; background-color: #e9ecef; border-radius: 4px; margin: 15px 0; overflow: hidden;}
.testing-progress-fill {height: 100%; background-color: var(--testing-primary-color); border-radius: 4px; transition: width 0.3s;}

.testing-exam-title {font-size: 1.3rem; margin-bottom: 15px; color: var(--testing-dark-color);}
.testing-filter-buttons {display: flex; justify-content: space-between; gap: 6px; width: 100%; flex-wrap: wrap;}
.testing-filter-btn {padding: 6px 8px; background-color: white; color: #333; border: 1px solid #dee2e6; border-radius: 18px; cursor: pointer; font-size: 0.8rem; transition: all 0.3s; text-align: center; flex-wrap: nowrap;}
.testing-filter-btn:hover {background-color: #e9ecef;}
.testing-filter-btn.active {background-color: var(--testing-primary-color); color: white; border-color: var(--testing-primary-color);}

.testing-question-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #dee2e6;}
.testing-question-number {font-size: 1.2rem; font-weight: 600; color: var(--testing-dark-color);}
.testing-question-type {background-color: white; padding: 5px 10px; border-radius: 20px; font-size: 0.9rem; color: var(--testing-dark-color); border: 1px solid #dee2e6;}
.testing-question-text {font-size: 1.1rem; margin-bottom: 25px; line-height: 1.7; color: #1e3096; font-weight: bold;}
.testing-options-list {list-style: none;margin: 0 3em 0 0; }
.testing-option-item {margin-bottom: 15px; padding: 15px; border: 1px solid #dee2e6; border-radius: 6px; cursor: pointer; transition: all 0.2s; background-color: white;}
.testing-option-item:hover {background-color: #f8f9fa;}
.testing-option-item.selected {border-color: var(--testing-primary-color); background-color: rgba(74, 111, 165, 0.05);}
.testing-option-item.correct {border-color: var(--testing-correct-color); background-color: rgba(76, 175, 80, 0.1);}
.testing-option-item.incorrect {border-color: var(--testing-incorrect-color); background-color: rgba(244, 67, 54, 0.1);}
.testing-option-label {display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; background-color: #e9ecef; border-radius: 50%; margin-right: 15px; font-weight: 600;}
.testing-option-item.selected .testing-option-label {background-color: var(--testing-primary-color); color: white;}
.testing-option-item.correct .testing-option-label {background-color: var(--testing-correct-color); color: white;}
.testing-option-item.incorrect .testing-option-label {background-color: var(--testing-incorrect-color); color: white;}
.testing-action-buttons {display: flex; justify-content: space-between; margin-top: 30px; padding: 0; gap: 10px;}
.testing-btn {padding: 10px; background-color: var(--testing-primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.8rem; transition: background-color 0.3s;}
.testing-btn:hover {background-color: var(--testing-secondary-color);}
.testing-btn-submit {background-color: var(--testing-primary-color);}
.testing-btn-next {background-color: var(--testing-secondary-color);}
.testing-btn-show-answer {background-color: #ff9800;}
.testing-explanation-section {margin: 30px -12px; padding: 20px; background-color: white; border-radius: 6px; display: none; border: 1px solid #dee2e6;}
.testing-explanation-title {font-size: 1.1rem; margin-bottom: 10px; color: var(--testing-dark-color);}
.testing-result-feedback {padding: 15px; border-radius: 6px; margin-bottom: 20px; display: none;}
.testing-result-correct {background-color: rgba(76, 175, 80, 0.1); border-left: 4px solid var(--testing-correct-color);}
.testing-result-incorrect {background-color: rgba(244, 67, 54, 0.1); border-left: 4px solid var(--testing-incorrect-color);}

/*单词表部分*/
.course-words {margin: 1.5rem 0; padding: 1rem; background: #f8fafc; border-radius: 6px; border: 1px solid #e2e8f0;}
.words-title {color: #2d3748; margin-bottom: 1rem; font-size: 1.1rem; font-weight: 600; text-align: center;}
.words-table {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 1em;}
.word-card {background: transparent; border-radius: 18px; perspective: 1000px; height: 100px;}
.word-item {position: relative; width: 100%; height: 100%; transition: transform 0.6s ease; transform-style: preserve-3d; cursor: pointer;}
.word-front {position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; background: white; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); height: 100%; padding: 15px 8px; flex-direction: column;}
.word-back {position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0; box-sizing: border-box; background: #f7fafc; border: 1px solid #cbd5e0; transform: rotateY(180deg); text-align: center;}
.word-text {font-weight: 900; color: #2d3748; margin-bottom: 0.3rem; line-height: 1.1; text-align: center; flex: 1; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; font-size: 1rem;}
.word-pron {color: #718096; font-family: 'Charis SIL CDN', "Arial Unicode MS", "Segoe UI Symbol", sans-serif; line-height: 1.1; text-align: center; flex: 1; display: flex; align-items: center; justify-content: center; padding: 3px 0; color: #666; font-size: 0.9rem;}
.word-details {display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 100%;}
.word-pos {color: #065f46; font-weight: 500; font-size: 0.7rem; background: #d1fae5; padding: 0.15rem 0.5rem; border-radius: 4px; white-space: nowrap;}
.word-def {color: #2d3748; font-weight: 900; font-size: 0.75rem; line-height: 1.2; text-align: center; word-break: break-word;}
.word-card:hover .word-item {transform: none;}
.word-item.flipped {transform: rotateY(180deg);}
.word-audio-buttons {display: flex; flex: 1; align-items: flex-start; justify-content: center; padding-top: 5px; gap: 12px;}
.audio-btn {display: inline-flex; align-items: center; justify-content: center; gap: 2px; padding: 2px 8px; transition: opacity 0.2s; }
.audio-btn:hover {opacity: 0.9;}
.audio-btn:active {transform: translateY(1px);}
.uk-btn,.us-btn {background-color: var(--milk-orange);color:var(--nice-blue); padding:4px 6px;font-weight:400}
.lesson-allwords-btn {padding: 0.5em; border: solid 2px #8b4513;background-color: var(--milk-orange);color:var(--nice-blue)}
.audio-icon {font-size: 0.8rem;}
.audio-label {font-size: 0.8em; display: inline-block; vertical-align: middle;}
.word-pos:empty {display: none;}
.word-pron:empty {display: none;}
.word-back:has(.word-pos:empty) .word-def {font-size: 0.9rem; margin-top: 0.2rem;}
@media (max-width: 768px) {
    .words-table {grid-template-columns: repeat(3, 1fr); gap: 0.6rem;} 
    .word-card {height: 100px;} 
    .word-audio-buttons {gap: 4px;} 
}
@media (max-width: 480px) {
    .words-table {grid-template-columns: repeat(2, 1fr); gap: 0.5rem;} 
    .course-words {padding: 0.75rem; margin: 1rem 0;} 
    .word-card {height: 85px;} 
    .word-text {font-size: 0.9rem;} 
    .word-audio-buttons {gap: 3px;} 
}


/* 词性单元格高亮样式 */
.word-table td.pos {
    font-weight: 500;
    color: #9b59b6;
    position: relative;
}

.word-table td.pos:hover::after {
    content: attr(title);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
}

/* 搜索高亮样式 */
.word-table mark {
    background-color: #fff3cd;
    padding: 0 2px;
    border-radius: 3px;
    font-weight: bold;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .pos-quick-search {
        padding: 10px;
    }
    
    .pos-quick-btn {
        padding: 4px 8px;
        font-size: 12px;
    }
    
    .word-table td.pos:hover::after {
        font-size: 10px;
        padding: 3px 6px;
    }
}

@media (max-width: 480px) {
    .pos-quick-search {
        padding: 8px;
    }
    
    .pos-quick-btn {
        padding: 3px 6px;
        font-size: 11px;
    }
    
    #searchInput {
        font-size: 14px;
        padding: 10px 15px;
    }
    
    .pos-quick-btn span:last-child {
        display: none; /* 在小屏幕上隐藏数量 */
    }
}



/*语法目录区域的CSS*/
.directory-container {background-color: mistyrose; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); padding: 0px; margin-bottom: 15px;}
.directory-grid {margin-top: 1em; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;font-size:small; }
.directory-link {display: block; padding: 6px 2px 6px 6px; background-color: #e8f4f8; color: var(--header-blue); text-decoration: none; border-radius: 3px; text-align: center; font-weight: 500; transition: all 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 28px; display: flex; align-items: center; justify-content: left;}
.directory-link-center {display: block; padding: 6px 2px 6px 6px; background-color: #e8f4f8; color: var(--header-blue); text-decoration: none; border-radius: 3px; text-align: center; font-weight: 500; transition: all 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 28px; display: flex; align-items: center; justify-content: center;}
.directory-link:hover {background-color: lightgreen; transform: translateY(-1px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);}
.directory-link:active {transform: translateY(0);}

@media (max-width: 768px) {
    .directory-grid {grid-template-columns: repeat(3, 1fr); gap: 5px;}
    .directory-link {padding: 5px 3px; font-size: 10px; min-height: 26px;}
}

@media (max-width: 480px) {
    .directory-container {padding: 8px;}
    .directory-grid {grid-template-columns: repeat(3, 1fr); gap: 4px;}
    .directory-link {padding: 4px 2px; font-size: 9px; min-height: 24px;}
}

@media (max-width: 360px) {
    .directory-link {font-size: 10px; padding: 3px 0px 2px 3px; min-height: 22px;}
    .directory-grid {gap: 3px;}
}

.nceg-grid {margin-top: 1em; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;font-size:small; }
.nceg-link {display: block; padding: 6px 2px 6px 6px; background-color: #e8f4f8; color: var(--header-blue); text-decoration: none; border-radius: 3px; text-align: center; font-weight: 500; transition: all 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 28px; display: flex; align-items: center; justify-content: left;}
.nceg-cat {display: block; padding: 6px 2px 6px 6px; background-color: #e8f4f8; color: #fff; text-decoration: none; border-radius: 3px; text-align: center; font-weight: 500; transition: all 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 28px; text-align: center;font-weight:bold;background-color:var(--nice-blue); }

/* =============================================================================
   Real Tab Switching - 修复CSS选择器
   ============================================================================= */

.real-tab-container {
    /* 不添加margin/padding，保持原有布局 */
}

.real-tab-nav {
    display: flex;
    border-bottom: 2px solid #e0e0e0;
    background: #f8f9fa;
    margin: 0;
}

/* 隐藏radio input */
.real-tab-nav input[type="radio"] {
    display: none;
}

.real-tab-label {
    flex: 1;
    padding: 12px 16px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    color: #666;
    margin: 0;
}

.real-tab-label:hover {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
}

/* 修复：正确的选择器层级 */
.real-tab-container #real-tab-textbook:checked ~ .real-tab-nav .real-tab-label[for="real-tab-textbook"],
.real-tab-container #real-tab-community:checked ~ .real-tab-nav .real-tab-label[for="real-tab-community"], 
.real-tab-container #real-tab-mynotes:checked ~ .real-tab-nav .real-tab-label[for="real-tab-mynotes"] {
    background: white;
    border-bottom: 3px solid var(--nice-blue);
    color: var(--nice-blue);
}

.real-tab-content {
    position: relative;
    min-height: 400px;
    margin: 0;
    padding: 0;
}

.real-tab-pane {
    display: none;
    margin: 0;
    padding: 0;
}

/* 修复：正确的pane显示控制 */
.real-tab-container #real-tab-textbook:checked ~ .real-tab-content #real-pane-textbook,
.real-tab-container #real-tab-community:checked ~ .real-tab-content #real-pane-community,
.real-tab-container #real-tab-mynotes:checked ~ .real-tab-content #real-pane-mynotes {
    display: block;
}

/* 默认显示第一个pane */
#real-pane-textbook {
    display: block;
}

.tab-placeholder {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    background: #e8f4f8; /* 添加背景色使其可见 */
    margin: 20px 0;
    border-radius: 8px;
}

.tab-placeholder h3 {
    margin-bottom: 16px;
    color: #2c3e50;
}

/* =============================================================================
   笔记系统样式 (nce-biji) - 卡片式红色主题版
   ============================================================================= */

.nce-biji h3 {
    border-bottom: 2px solid #e74c3c;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

/* 笔记项样式 - 卡片式 */
.biji-note-item {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.biji-note-item:last-child {
    margin-bottom: 0;
}

/* 笔记头部 */
.biji-note-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.biji-author {
    font-weight: bold;
    color: #2c3e50;
    margin-right: 15px;
    font-size: 14px;
}

/* 小编作者特殊样式 */
.biji-editor .biji-author {
    font-weight: bold;
    background-color: var(--nav-3-color);
    padding: 3px 5px;
    border-radius: 4px;
}

.biji-time {
    color: #7f8c8d;
    font-size: 13px;
    margin-right: auto;
}

/* 点赞样式 */
.biji-likes {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
    display: inline-block;
    vertical-align: middle; 
    border: none;
    cursor: pointer;
    font-size: 0.9em;
    padding: 8px 8px 2px 11px;
    border-radius: 12px;
    transition: all 0.2s ease;
    color: var(--nav-shares-color);
    background: #fff0f0;
}

/* 笔记内容区域 */
.biji-note-content {
    line-height: 1.6;
    color: #2c3e50;
}

.biji-content-part {
    margin-bottom: 12px;
}

.biji-content-part:last-child {
    margin-bottom: 0;
}

/* 小编内容中的图片样式 */
.biji-editor .biji-note-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 10px 0;
}

/* 安全标记链接样式 */
.course-ref, .grammar-ref {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
    font-size:smaller;
    padding: 1px 4px;
    border-radius: 3px;
    background: #ecf0f1;
}

.course-ref:hover, .grammar-ref:hover {
    background: #3498db;
    color: white;
    text-decoration: none;
}

/* 外部链接样式 */
.biji-note-content a {
    color: #e74c3c;
    text-decoration: underline;
}

.biji-note-content a:hover {
    color: #c0392b;
    text-decoration: none;
}

/* 小编内容中的其他HTML元素样式 */
.biji-editor .biji-note-content strong {
    color: #e74c3c;
}

.biji-editor .biji-note-content em {
    color: #9b59b6;
    font-style: italic;
}

.biji-editor .biji-note-content code {
    background: #f8f8f8;
    color: #e74c3c;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
}

.biji-editor .biji-note-content blockquote {
    border-left: 3px solid #e74c3c;
    margin: 10px 0;
    padding: 10px 15px;
    background: #fdf2f2;
    font-style: italic;
}

/* V8 音频同步样式 */
.audio-sync-container {
    position: relative;
}

.audio-sync-wrapper {
    position: relative;
}

.lesson-text-wrapper {
    position: relative;
    line-height: 1.8;
}

.sync-paragraph {
    margin-bottom: 1em;
    position: relative;
}

.sync-word {
    display: inline-block;
    padding: 2px 1px;
    margin: 0 1px;
    transition: all 0.2s ease;
    border-radius: 2px;
}

.sync-word.current-word {
    background-color: rgba(255, 107, 107, 0.15);
    color: #d63031;
}

.progress-underline {
    position: absolute;
    bottom: -2px;
    height: 3px;
    background: linear-gradient(90deg, #ff6b6b, #ff8e8e);
    border-radius: 2px;
    transition: all 0.1s ease;
    box-shadow: 0 1px 3px rgba(255, 107, 107, 0.3);
    z-index: 10;
    pointer-events: none;
    opacity: 0;
}

.audio-playing .sync-word {
    transition: all 0.3s ease;
}

/* ============================================
   BBS 页面样式
   ============================================ */
.nce-bbs {margin-top:0; margin-bottom:0}
.bbs-description {
    color: #666;
    text-align: left;
    margin-top:0;
    margin-bottom: 1em;
    font-style: italic;
}

.bbs-form {
    background: var(--paper-white);
    padding: 1em;
    border-radius: 8px;
}

.form-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.form-row:first-child {
    margin-bottom: 0.8em;
}

.bbs-form textarea {
    flex: 1;
    min-height: 60px;
    padding: 0.8em;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    font-family: inherit;
    font-size: 1em;
}

.bbs-form input {
    flex: 0.3;
    min-width: 120px;
    padding: 0.6em;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
}

/* 移除输入框焦点样式 */
.bbs-form textarea:focus,
.bbs-form input:focus {
    outline: none;
    border-color: #ddd; /* 保持原边框颜色 */
}

.search-input-box{width: 75%; padding: 12px; font-size: 12px; border: 1px solid var(--nice-blue); border-radius: 8px;}
.search-input-box:focus{border: 1px solid var(--nice-blue);outline: none; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);  }

.bbs-submit {
    flex: 0.2;
    min-width: 100px;
    background: var(--nice-blue);
    color: white;
    padding: 0.6em 1em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    white-space: nowrap;
}

.bbs-submit:hover {
    opacity: 0.9;
}

.bbs-message {
    position: relative; /* 为伪元素定位做准备 */
    background: var(--paper-white)/*#fffef8*/;
    padding: 1.5em;
    margin-top: 1em;
    margin-bottom: 1em;
    border-radius: 8px;
    border-left: 0px solid var(--nav-4-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.bbs-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #f0f0f0;
}

.bbs-meta-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbs-author {
    font-weight: normal;
    color: var(--nice-blue);
    font-family: hellosolid;
    font-size:larger;
}

.bbs-time {
    color: #888;
    font-size: 0.8em;
}

/* 点赞按钮样式 */
.like-form {
    display: inline-block;
    margin: 0;
}

.like-btn {
    display: inline-block;
    vertical-align: middle; 
    border: none;
    cursor: pointer;
    font-size: 0.9em;
    padding: 8px 8px 2px 11px;
    border-radius: 12px;
    transition: all 0.2s ease;
    color: var(--nav-shares-color);
    background: #fff0f0;
}

.like-btn:hover {
    /*background: #fff0f0;
    color: #e25555;*/
}

.like-count {
    font-size: 0.85em;
}

.bbs-content {
    line-height: 1.6;
    color: #333;
    font-size:14px;
}

.bbs-empty {
    text-align: center;
    padding: 3em;
    color: #888;
    font-style: italic;
}

/* 添加到 style.css 末尾 */

/* ========== 语法栏目样式 ========== */

/* 语法导航按钮 */
.grammar-subnav {
    display: flex;
    gap: 15px;
    margin: 25px 0 30px;
    flex-wrap: wrap;
}

.grammar-nav-btn {
    padding: 12px 24px;
    background: #f8f9fa;
    border: 2px solid #ddd;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 1em;
    transition: all 0.3s ease;
    min-width: 140px;
    text-align: center;
}

.grammar-nav-btn:hover {
    background: #e9ecef;
    border-color: #3498db;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.grammar-nav-btn.active {
    background: #3498db;
    color: white;
    border-color: #2980b9;
}

/* 语法预览 */
.grammar-preview {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin-top: 25px;
    border-left: 5px solid #3498db;
}

.grammar-preview h3 {
    margin-top: 0;
    color: #2c3e50;
}

.grammar-preview ul {
    margin: 15px 0 0 20px;
    padding: 0;
}

.grammar-preview li {
    margin-bottom: 8px;
    line-height: 1.5;
    list-style: none;
}

/* 语法网格页面 */
.grammar-start-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 15px;
}

.grammar-description {
    font-size: 1.1em;
    color: #555;
    margin: 15px 0 30px;
    line-height: 1.6;
    text-align: center;
}




.grid-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.grid-btn {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 25px 20px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.08);
    display: block;
    height: 100%;
}

.grid-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.12);
    border-color: #3498db;
    text-decoration: none;
}

.btn-title {
    font-size: 1.25em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #2c3e50;
}

.btn-desc {
    font-size: 0.95em;
    color: #7f8c8d;
    line-height: 1.4;
}

/* 语法内容页面 */


.grammar-content-header {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #eee;
}

.grammar-content-header h1 {
    margin: 0 0 10px 0;
    color: #2c3e50;
}

.grammar-breadcrumb {
    font-size: 0.9em;
    color: #7f8c8d;
}

.grammar-breadcrumb a {
    color: #3498db;
    text-decoration: none;
}

.grammar-breadcrumb a:hover {
    text-decoration: underline;
}

.grammar-main-content {
    line-height: 1.7;
    font-size: 1.05em;
}

.grammar-main-content h2 {
    color: #0757a7;
    margin: 0;
    padding: 0.5em 0;
    border-bottom: 1px solid #eee;
}

.grammar-main-content h3 {
    color: #3498db;
    margin: 25px 0 12px;
    font-size: 1.2em;
}

.grammar-main-content p {
    margin-bottom: 16px;
    text-align: justify;
}

.grammar-highlight-box,
.grammar-example-box {background-color:#f8f9fa; padding: 1em;}

/* 语法导航 */
.grammar-navigation {
    display: flex;
    justify-content: space-between;
    margin: 40px 0 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.nav-btn {
    padding: 10px 20px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-decoration: none;
    color: #555;
    font-weight: bold;
    transition: all 0.3s;
}

.nav-btn:hover {
    background: #3498db;
    color: white;
    border-color: #2980b9;
    text-decoration: none;
}

.home-btn {
    background: #e8f4fd;
    color: #3498db;
}

/* 建设中页面 */
.wip-page {
    text-align: center;
    padding: 60px 20px;
}

.wip-icon {
    font-size: 4em;
    color: #f39c12;
    margin-bottom: 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .grammar-subnav {
        justify-content: center;
    }
    
    .grammar-nav-btn {
        flex: 1;
        min-width: 100px;
        padding: 12px 15px;
        font-size: 0.95em;
    }
    
    .grid-buttons {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
    }
    
    .grid-btn {
        padding: 20px 15px;
    }
    
    .grammar-navigation {
        flex-direction: column;
        gap: 15px;
    }
    
    .nav-btn {
        text-align: center;
    }
}

.summary-table {
            background-color: #e8f6f3;
            border: 1px solid #1abc9c;
        }

.summary-table th {
    background-color: #1abc9c;
}

.signal-words {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.signal-word {
    background-color: #f1c40f;
    color: #2c3e50;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.verb-formula {
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #e74c3c;
    margin: 20px 0;
    padding: 15px;
    background-color: #fef5e7;
    border-radius: 8px;
}

.section-divider {
    height: 2px;
    margin: 30px 0;
}

/*资源分享页面的CSS*/
    .category-links {
        line-height: 1.6em;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 6px;
        justify-content: left;
    }
    .category-link {
        text-decoration: none;
        cursor: pointer;
        display: inline-block;
        transition: all 0.3s;
        white-space: nowrap;
        font-size: 12px;
        padding: 0 9px 6px 9px;
        border-radius: 8px;
        background-color: var(--milk-orange);
    }
    .category-link:hover, .category-link.active {
        background-color: var(--light-blue);
    }
    .count-sup {
        font-size: 10px;
        vertical-align: super;
        color: inherit;
        margin-left: 1px;
    }
    .count-sup::before { content: "["; }
    .count-sup::after { content: "]"; }
    .count-sup.new {
        color: #e74c3c;
    }

    .form-row {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
        align-items: center;
    }
    .form-row input[type="text"], .form-row input[type="url"], .form-row textarea {
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-sizing: border-box;
        font-family: inherit;
    }
    .form-row input[type="text"] { width: 60%; min-width: 120px; }
    .form-row select { 
        width: 40%; 
        min-width: 100px; 
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-family: inherit;
    }
    .form-row input[type="url"], .form-row textarea { width: 100%; }
    .form-row textarea { resize: vertical; min-height: 60px; }
    .form-actions {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: flex-start;
    }
    .form-actions input { 
        width: 35%; 
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    .checkbox-group {
        width: 20%;
        display: flex;
        align-items: center;
        gap: 3px;
        justify-content: center;
    }
    .form-actions button {
        width: 35%;
        min-width: 40px;
        background: var(--nice-blue);
        color: white;
        padding: 8px 12px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        white-space: nowrap;
    }
    .form-actions button:disabled {
        background: #95a5a6;
        cursor: not-allowed;
    }
    .message {
        padding: 10px 10px 10px 30px;
        border-radius: 4px;
        margin: 10px 0;
        text-align: left;
        line-height: 1.5;
    }
    .success {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    .error {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    .pinned {
        border-left: 4px solid #e74c3c;
    }
    .new-resource-highlight {
        border: 2px solid #27ae60;
        background: #f8fff8;
    }


    
/*=============================== 新首页样式============================== */
.new-home-portal {
    margin: 0 auto;
    padding: 1em;
}

/* 动态表单样式 */
.auth-container {
    background: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    max-width: 360px;
    margin: 0 auto 30px;
}

/* 选项卡样式 */
.auth-tabs {
    display: flex;
    margin-bottom: 25px;
    border-bottom: 2px solid #eaeaea;
}

.auth-tab {
    flex: 1;
    padding: 12px 0;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    position: relative;
    transition: all 0.3s;
}

.auth-tab:hover {
    color: #3498db;
}

.auth-tab.active {
    color: #3498db;
    font-weight: bold;
}

.auth-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: #3498db;
    border-radius: 3px 3px 0 0;
}

/* 表单切换 */
.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* 表单元素 */
.form-group {
    margin-bottom: 20px;
}

.form-group input {
    width: 100%;
    padding: 8px 15px;
    border: 2px solid #eaeaea;
    border-radius: 6px;
    font-size: 12px;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

.form-group input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
}

.auth-btn {
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.auth-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

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

.login-btn {
    background: #3498db;
    color: white;
}

.login-btn:hover:not(:disabled) {
    background: #2980b9;
}

.register-btn {
    background: #2ecc71;
    color: white;
}

.register-btn:hover:not(:disabled) {
    background: #27ae60;
}

.forgot-password {
    color: #7f8c8d;
    text-decoration: none;
    font-size: 14px;
}

.forgot-password:hover {
    color: #3498db;
    text-decoration: underline;
}

/* 注册优势 */
.register-benefits {
    margin-top: 25px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 14px;
}

.register-benefits ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.register-benefits li {
    margin-bottom: 5px;
    color: #555;
}

/* 快速提示 */
.auth-hint {
    margin-top: 15px;
    padding: 4px;
    background: #fff8e1;
    border-radius: 4px;
    font-size: 12px;
    color: #e67e22;
    text-align: center;
}

/* 消息样式 */
#auth-result .auth-message {
    padding: 15px;
    margin: 10px 0;
    border-radius: 6px;
    font-weight: 500;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

#auth-result .auth-message.success {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

#auth-result .auth-message.error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* 用户仪表盘样式 */
.user-welcome {
    background: var(--bg-content);
    color: #333;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 30px;
}

.user-quick-stats {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

.stat-item {
    flex: 1;
    background: var(--gray-white);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    color: var(--steel-blue);
    transition: background 0.3s;
}

.stat-item:hover {
    background: var(--gray-white);
    transform: translateY(-2px);
}

.stat-number {
    display: block;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
}

.stat-label {
    position:relative;
    font-size: 14px;
    opacity: 0.9;
    left:0;
    top:-1em;
}

.user-quick-actions {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}


/* 响应式设计 */
@media (max-width: 768px) {
    .auth-container {
        max-width: 100%;
        padding: 20px;
    }
    
    .auth-tabs {
        margin-bottom: 20px;
    }
    
    .form-actions {
        /*flex-direction: column;*/
        gap: 10px;
        align-items: stretch;
    }
    
    .auth-btn {
        width: 100%;
    }
    
    .user-quick-stats {
        flex-direction: column;
        gap: 10px;
    }
    
    .user-quick-actions {
        flex-wrap: wrap;
    }
    
    .content-columns {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* TAB式认证容器 */
.tabbed-auth-container {
    max-width: 768px;
    margin: 0 auto 40px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* TAB导航 */
.tab-nav {
    display: flex;
    background: #f8f9fa;
    border-bottom: 1px solid #eaeaea;
    padding: 0 20px;
}

.tab-btn {
    flex: 1;
    padding: 18px 0;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    position: relative;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.tab-btn:hover {
    color: #3498db;
    background: rgba(52, 152, 219, 0.05);
}

.tab-btn.active {
    color: #3498db;
    font-weight: 600;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: #3498db;
    border-radius: 3px 3px 0 0;
}

.tab-icon {
    font-size: 18px;
}

.tab-label {
    font-size: 15px;
}

/* TAB内容区域 */
.tab-content {
    padding: 30px;
}

.tab-pane {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 完整宽度表单 */
.auth-form-full {
    width: 100%;
}

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

.auth-form-full .form-input {
    width: 100%;
    padding: 16px;
    font-size: 16px;
}

/* 完整宽度仪表盘 */
.dashboard-full {
    width: 100%;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .tabbed-auth-container {
        margin: 0 auto 30px;
        border-radius: 8px;
    }
    
    .tab-nav {
        padding: 0 10px;
    }
    
    .tab-btn {
        padding: 15px 0;
        font-size: 14px;
        gap: 6px;
    }
    
    .tab-icon {
        font-size: 16px;
    }
    
    .tab-label {
        font-size: 13px;
    }
    
    .tab-content {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .tabbed-auth-container {
        border-radius: 0;
        margin: 0 -20px 20px;
        width: calc(100% + 40px);
        box-shadow: none;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }
    
    .tab-btn {
        padding: 12px 0;
    }
    
    .tab-label {
        display: none; /* 超小屏幕只显示图标 */
    }
    
    .tab-btn:not(.active) .tab-icon {
        opacity: 0.6;
    }
}


/*=====================================================================*/


.user-auth-section {
    width: 320px;
    position: absolute;
    right: 2em;
    top: 7em;
}

/* 美化用户认证区域 */
.user-welcome, .auth-container {
    background: white;
    border-radius: 8px;
    padding: 15px;
}

.auth-tabs {
    display: flex;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 20px;
}

.auth-tab {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    border-bottom: 3px solid transparent;
}

.auth-tab.active {
    color: #1890ff;
    border-bottom-color: #1890ff;
    font-weight: bold;
}

/* 响应式调整 */
@media (max-width: 900px) {
    .contents-box ul.spaced-list {
        margin-right: 0;
    }
    .user-auth-section {
        position: static;
        width: 100%;
        margin-top: 30px;
    }
}
/* 版权声明样式 */
.copyright-notice {
    margin: 20px 0;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.password-notice{
    margin: 20px 0;
    padding: 2px 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    font-size:12px;
}

.form-text{
    font-size:12px;
    padding-left: 4px;
    color: #666;
}



.notice-text {
    align-items: center;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    margin-bottom: 15px;
}

.notice-text strong {
    color: #e74c3c;
}

.checkbox-group-copyright {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-group label {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    cursor: pointer;
    user-select: none;
}

/* 必填项样式 */
.checkbox-group input[type="checkbox"]:required + label::after {
    content: " *";
    color: #e74c3c;
}

/* ====== 用户设置区域样式 ====== */

.user-setting {
    margin-top: 10px;
}

.settings-area {
    background: white;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* TAB导航 */
.settings-tabs {
    display: flex;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.settings-tab {
    flex: 1;
    padding: 12px 8px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.settings-tab:hover {
    color: #3498db;
    background: rgba(52, 152, 219, 0.05);
}

.settings-tab.active {
    color: #3498db;
    border-bottom-color: #3498db;
    font-weight: 600;
    background: white;
}

/* TAB内容区域 */
.settings-content {
    padding: 20px;
}

.settings-tab-content {
    display: none;
}

.settings-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 设置区标题 */
.settings-section h4 {
    margin: 0 0 20px 0;
    color: #2c3e50;
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 2px solid #f8f9fa;
}

/* 设置表单 */
.settings-form .form-group {
    margin-bottom: 10px;
}

.settings-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #495057;
    font-size: 14px;
}

.settings-form input[type="text"],
.settings-form input[type="email"],
.settings-form input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s;
    box-sizing: border-box;
}

.settings-form input[type="text"]:focus,
.settings-form input[type="email"]:focus,
.settings-form input[type="password"]:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.settings-form .form-text {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #6c757d;
}

/* 单选按钮组 */
/* 最简单的横向排列 */
.radio-group {
    display: flex;
    flex-direction: row;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
}

.radio-label input[type="radio"] {
    margin-right: 6px;
    width: 16px;
    height: 16px;
}

/* 复选框组 */
.checkbox-group {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
}

.checkbox-label input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* 按钮样式 */
.form-actions {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.settings-btn {
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    background: #2ecc71;
    color: white;
}

.settings-btn:hover {
    background: #27ae60;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
}

.warning-btn {
    background: #e74c3c;
}

.warning-btn:hover {
    background: #c0392b;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
}

/* 危险操作区 */
.danger-zone {
    margin-top: 30px;
    padding: 20px;
    background: #fff5f5;
    border: 1px solid #f8d7da;
    border-radius: 8px;
}

.danger-zone h5 {
    margin: 0 0 15px 0;
    color: #721c24;
    font-size: 15px;
    font-weight: 600;
}

.danger-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.danger-btn {
    flex: 1;
    padding: 10px;
    border: 2px solid #e74c3c;
    background: white;
    color: #e74c3c;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.danger-btn:hover {
    background: #e74c3c;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.2);
}

.danger-text {
    color: #721c24;
    font-size: 12px;
    font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .settings-content {
        padding: 15px;
    }
    
    .settings-tab {
        padding: 10px 5px;
        font-size: 12px;
    }
    
    .danger-actions {
        flex-direction: column;
    }
}
    /* ef扩展阅读文章主标题区域 */
        .article-title-en {
            font-size: 2em;
            font-weight: 300;
            letter-spacing: -0.02em;
            margin-top: 0.2em;
            margin-bottom: 0.2em;
            color: #2c3e50;
            font-family: Georgia, 'Times New Roman', Times, serif;
        }
        
        .article-title-zh {
            font-size: 1.8em;
            font-weight: 400;
            margin-top: 0.2em;
            margin-bottom: 0.2em;
            color: #7f8c8d;
        }
        
        .article-meta {
            font-size: 0.95em;
            color: #95a5a6;
        }
        
        .article-author-en {
            font-style: italic;
        }
        
        .article-author-zh {
            margin-bottom: 0.5em;
        }
        
        /* 章节标题 */
        .section-title {
            font-size: 1.6em;
            font-weight: 600;
            margin: 0;
            color: #2c3e50;
        }
        
        .section-subtitle {
            font-size: 1em;
            font-weight: 500;
            margin: 0 0 1em 0;
            color: #2c3e50;
            padding-bottom: 0.5em;            
            border-bottom: 2px solid #3498db;
        }
        
        /* 段落容器 */
        .paragraph-block {
            margin: 1em 0;
            padding: 1em;
            background: white;
            border-radius: 4px;
        }
        
        

        /* 英文原文样式 */
        .original-en {
            font-size: 1.1em;
            color: #2c3e50;
                        padding: 0.8em;
            font-family: 'Georgia', serif;
        }
        
        /* 中文翻译样式 */
        .translation-zh {
            font-size: 1em;
            color: #555;
            padding-left: 1em;
            padding: 0.8em;
            border-radius: 0 5px 5px 0;
        }
        

        /* 响应式设计 */
        @media (max-width: 768px) {
            
            .article-title-en {
                font-size: 2.2em;
            }
            
            .article-title-zh {
                font-size: 1.5em;
            }
            
            .section-title {
                font-size: 1.4em;
            }
            
            .paragraph-block {
                padding: 0.8em;
            }
        }
        
        /* 打印样式 */
        @media print {
            body {
                background-color: white;
                color: black;
                font-size: 12pt;
                max-width: 100%;
            }
            
            .paragraph-block {
                box-shadow: none;
                border: 1px solid #ddd;
                page-break-inside: avoid;
            }
        }
        
/* ========== 游戏专属样式 ========== */

/* ========== 游戏标题组件 ========== */
.game-title {
    color: var(--nav-words-color);
}
/* ========== 统计信息组件 ========== */
.game-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 15px;
}
.stat-card {
    background: var(--gray-white);
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 8px var(--shadow-color);
    border: 1px solid var(--border-color);
}
.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: var(--important-color);
    margin: 1em 0;
}
.stat-label {
    font-size: 14px;
    color: var(--text-secondary);
}
/* ========== 登录提示组件 ========== */
.login-notice {
    text-align: center;
    padding: 15px;
    background: var(--milk-orange);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}
.login-notice p {
    margin: 0;
    color: var(--text-color);
    font-size: 14px;
}
/* ========== 难度选择组件 ========== */
.difficulty-selector {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.difficulty-btn {
    flex: 1;
    padding: 0;
    background: var(--milk-orange);
    color: var(--text-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
    font-size: smaller;
    margin: 0;
    border: 1px solid transparent;
}
.difficulty-btn.active {
    background: var(--nav-words-color);
    color: white;
}
.difficulty-btn:hover:not(.active) {
    border-color: var(--important-color);
    color: var(--important-color);
}
.words-stat-item {
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.words-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 5px;
}
.words-stat-value {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-color);
}
/* ========== 游戏区域组件 ========== */
.game-area {
    display: none;
}
#game-screen {
    background: var(--bg-content);
    border-radius: 15px;
    padding: 16px;
    box-shadow: 0 4px 20px var(--shadow-color);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.word-display {
    font-size: 36px;
    font-weight: bold;
    color: var(--nav-words-color);
    margin-bottom: 10px;
    text-align: center;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.word-phonetic {
    font-size: 20px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    font-style: italic;
}
.meaning-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
.guru-question-text {
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 25px;
    min-height: 80px;
    padding: 20px;
    background: var(--milk-yellow);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    line-height: 1.6;
}

@media (max-width: 600px) {
    .meaning-options {
        grid-template-columns: 1fr;
    }
}
.meaning-option {
    background: var(--milk-orange);
    border-radius: 10px;
    padding: 20px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.meaning-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-color);
}
.meaning-option.correct {
    background: var(--dark-green);
    border-color: #c3e6cb;
    color: #155724;
}
.meaning-option.wrong {
    background: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}
.meaning-option.selected {
    border-color: var(--important-color);
    box-shadow: 0 0 0 3px rgba(var(--important-color-rgb), 0.2);
}
/* ========== 进度条组件 ========== */
.game-progress {
    width: 100%;
    height: 20px;
    background: var(--milk-orange);
    border-radius: 5px;
    margin: 8px 0;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background: var(--nice-blue);
    width: 0%;
    transition: width 0.3s ease;
}
.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--text-secondary);
}
/* ========== 控制按钮组件 ========== */
.game-controls {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 16px;
}
.game-btn {
    padding: 12px 30px;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 100px;
}
.start-btn {
    background-color: var(--nav-words-color);
    color: white;
}
.start-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(var(--important-color-rgb), 0.3);
}

.next-btn:hover {
    background: #27ae60;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(46, 204, 113, 0.2);
}
.quit-btn {
    background: #e74c3c;
    color: white;
}
.quit-btn:hover {
    background: #c0392b;
}
/* ========== 结果页面组件 ========== */
.result-screen {
    display: none;
    text-align: center;
    padding: 40px;
}
.result-title {
    font-size: 36px;
    color: var(--important-color);
    margin-bottom: 20px;
}
.score-display {
    font-size: 72px;
    font-weight: bold;
    color: var(--important-color);
    margin: 20px 0;
}
.result-message {
    font-size: 20px;
    color: var(--text-secondary);
    margin-bottom: 30px;
}
.result-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 20px;
    margin: 30px 0;
}
.result-card {
    background: var(--bg-content);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px var(--shadow-color);
}
.result-value {
    font-size: 32px;
    font-weight: bold;
    color: var(--important-color);
    margin-bottom: 5px;
}
.result-label {
    font-size: 14px;
    color: var(--text-secondary);
}
/* ========== 动画效果 ========== */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.word-display.new {
    animation: pulse 0.5s ease;
}