/* CSS Document */
/* 基础样式 */
body {margin:0px;background:#fff;font-size:18px;}
td,th,span,div,input,select,textarea {font-family:Arial,Tohoma,'microsoft yahei','simsun';color:#000;line-height:160%;}
a {color:#0197fe;text-decoration:none;}
a:hover,a:focus{color:#f00;text-decoration:none;}
ol,ul,li,dl,dd,dt,p {margin:0px;padding:0px;list-style:none;}
.clear {clear:both;height:1px;margin-top:-1px;overflow:hidden;}
.clear30 {clear:both;height:30px;overflow:hidden;}
.clear60 {clear:both;height:60px;overflow:hidden;}
.aClear:after {display:block;clear:both;content:'.';visibility:hidden;height:0;}.aClear {zoom:1;}

/* 菜单和布局样式 */
.menu {height:14px;background:url(../img/menu_bg.gif) repeat-x;}
.body {}
.doms {width:100%;padding:0.4rem 0;}
    .doms li {float:left;width:30%;margin-left:2.7%;}
    .doms li a {display:block;height:3rem;font-size:1rem;text-align:center;line-height:3rem;border:1px #339BDE solid;background:#EAF7FF;}
    .doms li a.odd {border-color:#f88;background:#FFFBF0;color:#f0615a;}
    .doms .line_ {clear:left;display:block;height:1.5rem;}

/* 列表样式 */
.list {padding:1rem;}
    .list h5 {display:inline-block;margin:0;padding:0.3rem 0.7rem;font-size:1rem;font-weight:normal;color:#2165A3;border:1px #339BDE solid;background:#EAF7FF;}
    .list li {margin:2rem 0 0;}
        .list li .img_ {float:left;width:100%;}
        .list li .info_ {float:right;width:66%;}
        .list li .info_ a {font-size:1rem;color:#f60;}
        .list li .info_ dl {margin-top:0.2rem;color:#333;line-height:1rem;font-size:0.8rem;}
        .list li .info_ dl * {line-height:1rem;font-size:0.8rem;}
        .list li .info_ dl dd {clear:left;}
        .list li .info_ dl p {clear:left;}

/* 详情页样式 */
.view {padding:15px;}
    .view h5 {display:inline-block;margin:0;padding:0.3rem 0.7rem;font-size:1rem;font-weight:normal;color:#2165A3;border:1px #339BDE solid;background:#EAF7FF;}
    .view h1 {display:block;margin:0px;padding:2rem 0 1rem;font-size:1.4rem;font-weight:normal;color:#f60;text-align:center;}
    .view .attr_ {color:#999;padding:0.6rem 3.6rem;font-size:0.8rem;border-top:1px #eee solid;border-bottom:1px #eee solid;}
    .view .info_ {padding:0.6rem 0;font-size:0.8rem;color:#333;border-top:1px #eee solid;border-bottom:1px #eee solid;}
    .view .info_ * {line-height:1rem;font-size:0.8rem;}
    .view .info_ dd {float:left;width:50%;}
    .view .info_ p {width:100%;clear:left;}
    .view .img_ {padding:0.8rem 0 0.6rem;text-align:center;font-size:1rem;}
    .view .img_ img {margin:8px 0px;}
    .view .body_ {font-size:1rem;}
    .view .body_ p {text-indent:2em;}

/* 关闭按钮 */
.close {text-align:right;margin-bottom:1rem;}
    .close a {display:inline-block;line-height:1.6rem;color:#111;font-size:0.8rem;width:20%;margin:0px 10px;text-align:center;border:1px #8FBEDD solid;background:url(../img/but_bg.jpg) repeat-x;}

/* 搜索样式 */
.search {padding:15px;}
    .search h5 {display:inline-block;margin:0;padding:0.3rem 0.7rem;font-size:1rem;font-weight:normal;color:#2165A3;border:1px #339BDE solid;background:#EAF7FF;}
    .search form {margin:0px;padding:1rem 0;}
    .search dl {padding:10px 0px;}
    .search dl dt {float:left;width:80px;padding-top:0.5rem;color:#f60;}
    .search dl select {font-size:0.9rem;padding:0.1rem;}
    .search dl input {font-size:1rem;padding:0.2rem;line-height:1.4rem;border:1px #bbb solid;border-radius:3px;}
    .search dl input.but_ {width:6rem;height:2.5rem;font-size:1rem;border:1px #8FBEDD solid;background:url(../img/but_bg.jpg) repeat-x;cursor:pointer;}

/* 工具栏 */
.tool {position:fixed;left:0px;bottom:0px;width:100%;padding:0.6rem 0;text-align:center;background:#fff;border-top:1px #eee solid;}
    .tool a {display:inline-block;height:30px;line-height:30px;color:#666;font-size:20px;width:auto;margin:0 0.7%;text-align:center;border:1px #8FBEDD solid;background:url(../img/but_bg.jpg) repeat-x;}

/* 内容区域样式 */
.title_center {margin-left:2%;word-break:break-all;display:block;border:1px solid #CCC;height:auto;line-height:40px;margin-bottom:20px;background-color:#EEFFF7;width:96%;font-size:18px;text-align:center;}
.content_ai_area {word-break:break-all;display:block;border:1px solid #999;height:auto;line-height:40px;margin-bottom:20px;background-color:#FEFFE1;color:#333;width:255px;font-size:18px;text-align:center;}
.content_center {margin-left:5%;word-break:break-all;display:block;border:1px solid #999;height:auto;line-height:40px;margin-bottom:20px;background-color:#FEFFE1;color:#333;width:89%;font-size:18px;text-align:center;}
.content_left {word-break:break-all;display:block;border:1px solid #999;height:auto;line-height:40px;margin-bottom:20px;background-color:#FEFFE1;color:#333;width:255px;font-size:18px;text-align:left;}
.sponsor_info_center {word-break:break-all;display:block;border:1px solid #999;height:auto;line-height:40px;margin-bottom:20px;background-color:#FEFFE1;color:#333;width:255px;font-size:18px;text-align:center;}
.detail_listen {word-break:break-all;display:block;border:1px solid #999;height:auto;line-height:40px;margin-bottom:20px;background-color:#FFF;color:#333;width:255px;font-size:18px;text-align:left;}

/* 按钮样式 */
.read_button {display:block;width:auto;height:40px;line-height:40px;float:left;margin-left:15%;text-align:center;text-decoration:none;border:1px solid #82b4d7;background:#FFC;cursor:pointer;font-size:18px;}
.no_data {cursor:default;color:#00F;width:100%;text-align:center;display:block;height:40px;line-height:40px;text-decoration:none;border:1px solid #CCC;background:#EEFFFA;font-size:18px;}
.search_result {color:#00F;width:100%;text-align:left;display:block;height:40px;line-height:40px;text-decoration:none;border:1px solid #CCC;background:#EEFFFA;cursor:pointer;font-size:17px;}
.leave_message {display:block;width:auto;float:right;margin-right:10%;text-align:center;margin-top:20px;text-decoration:none;border:1px solid #82b4d7;background:#FFC;cursor:pointer;font-size:18px;color:#00F;line-height:40px;}

/* 选择框样式 */ 
.select-container {display:flex;justify-content:center;align-items:center;margin-top:10px;width:100%;}
.centered-select {line-height:45px;height:45px;width:280px;font-size:22px;text-align:center;text-align-last:center;-moz-text-align-last:center;padding:0 15px;border:1px solid #999;background-color:#FFFFFF;border-radius:5px;box-sizing:border-box;}
.centered-select option {text-align:center;padding:8px 0;font-size:22px;}

/* 替换内联样式 */
.inline-button {display:inline-block;width:150px;text-align:center;text-decoration:none;border:1px solid #82b4d7;background:#E6FFDD;height:45px;line-height:45px;font-size:20px;}
.inline-button:hover {background:#D6FFCD;}

/* 通用布局样式 */
.margin-5 { margin: 5px; }
.width-150 { width: 150px; }
.margin-top-10 { margin-top: 10px; }
.margin-top-15 { margin-top: 15px; }
.margin-top-20 { margin-top: 20px; }
.margin-top-25 { margin-top: 25px; }
.margin-top-35 { margin-top: 35px; }
.margin-top-40 { margin-top: 40px; }
.margin-bottom-15 { margin-bottom: 15px; }
.margin-bottom-20 { margin-bottom: 20px; }
.margin-bottom-25 { margin-bottom: 25px; }
.margin-bottom-40 { margin-bottom: 40px; }
.margin-bottom-80 { margin-bottom: 80px; }

/* 专门为按钮容器创建的样式类 */
.button-container {
    margin: 10px auto 5px auto; 
    width: 350px;
}

/* "背会了"按钮特殊样式 */
.learned-button {
    display: inline-block;
    width: 150px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #82b4d7;
    background: #E6FFDD;
    height: 45px;
    line-height: 45px;
    font-size: 20px;
    color: #333;
    border-radius: 4px;
    transition: all 0.3s ease;
    margin-bottom: 50px;
}

.learned-button:hover {
    background: #D6FFCD;
    border-color: #66a3d2;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.learned-button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* "背会了"按钮容器 */
.learned-button-container {
    margin: 5px;
    width: 150px;
    margin-top: 10px;
    margin-bottom: 50px;
    text-align: center;
}

.main-container {
    text-align: center;
    margin-top: 5px;
}


.main {
    width: 100%;
    margin: 0 auto;
}

.main-content {
    height: auto;
    width: 100%;
}

.content-box {
    display: block;
    width: 80%;
    height: auto;
    border: 1px solid #FFE699;
    margin: 0 auto;
}

.title-section {
    margin-top: 10px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
}

.main-button {
    display: inline-block;
    border-radius: 20px;
    height: auto;
    line-height: 45px;
    width: 80%;
    background: #E6FFDD;
    border: 1px solid #CCC;
    font-size: 20px;
    text-decoration: none;
    margin-top: 10px;
}

.main-button-red {
    color: #F00;
    margin-top: 20px;
}

.main-button-blue {
    color: #00F;
}

.tool-button {
    font-size: 24px;
    color: #666;
    width: auto;
}

.menu-button {
    display: inline-block;
    width: 80%;
    border-radius: 20px;
    height: auto;
    line-height: 45px;
    background: #EEFFF7;
    border: 1px solid #CCC;
    font-size: 20px;
    text-decoration: none;
    margin-bottom: 10px;
}

.menu-button-red {
    color: #F00;
}

.menu-button-black {
    color: #333;
}

.menu-button-container {
    text-align: center;
    margin-top: 10px;
}

.logout-button {
    font-size: 20px;
    color: #666;
    width: auto;
}

.exam-container {
    margin-top: 10px;
}

.exam-header {
    text-align: center;
    font-size: 20px;
    color: #F00;
    margin-top: 10px;
}

.exam-user-info {
    margin-top: 10px;
    text-align: center;
    font-size: 20px;
    color: #F00;
}

.exam-title {
    margin-top: 10px;
    text-align: center;
    font-size: 20px;
    color: #00F;
}

.exam-subtitle {
    margin-top: 10px;
    text-align: center;
    font-size: 20px;
    color: #F00;
}

.exam-stats-container {
    width: 90%;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

.exam-stats-row {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.exam-stat-item {
    margin: 0 5px;
}

.exam-stat-label {
    font-size: 20px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    color: #666;
}

.exam-stat-label-inline {
    color: #666;
    flex: 0 0 50px;
}

.exam-stat-value {
    color: #00F;
    flex: 1;
    text-align: left;
    overflow: hidden;
    padding-left: 2px;
}

.exam-stat-value-red {
    color: #F00;
    flex: 1;
    text-align: left;
    overflow: hidden;
    padding-left: 2px;
}

.exam-content {
    font-size: 20px;
    text-align: center;
    display: flex;
    padding: 5px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
}

.exam-phonetic {
    margin: 5px;
    font-size: 26px;
    text-align: center;
    color: #00F;
    margin-top: 10px;
}

.exam-word {
    margin: 5px;
    font-size: 26px;
    text-align: center;
    color: #00F;
    margin-top: 20px;
}

.exam-word-hidden {
    margin: 5px;
    font-size: 26px;
    text-align: center;
    color: #666;
    margin-top: 20px;
}

.exam-translation {
    margin: 5px;
    font-size: 20px;
    text-align: center;
    color: #00F;
    margin-top: 20px;
}

.exam-translation-hidden {
    margin: 5px;
    font-size: 20px;
    text-align: center;
    color: #666;
    margin-top: 20px;
}

.exam-example {
    margin: 5px;
    font-size: 20px;
    text-align: center;
    color: #666;
    margin-top: 20px;
}

.exam-action-button {
    display: inline-block;
    width: 150px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #82b4d7;
    background: #E6FFDD;
    height: 45px;
    line-height: 45px;
    font-size: 20px;
    margin: 5px;
    margin-top: 10px;
}

.exam-action-button-container {
    margin: 5px;
    width: 150px;
    margin-top: 10px;
}

.exam-error-button {
    margin: 0 auto;
    width: 120px;
    margin-top: 25px;
    text-align: center;
    display: block;
    width: 150px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #82b4d7;
    background: #E6FFDD;
    height: 45px;
    line-height: 45px;
    margin-bottom: 25px;
}

.exam-error-button-link {
    font-size: 20px;
    color: #F00;
    width: auto;
}

.exam-tool-button {
    font-size: 20px;
    color: #F00;
    width: auto;
}

.exam-speak-button {
    margin: 5px;
    width: 150px;
    margin-top: 10px;
}

.exam-image {
    margin-top: 10px;
    text-align: center;
}

.exam-image img {
    width: 15%;
}

/* 登录页面专用样式 */
.login-container {
    width: 100%;
    height: auto;
    overflow: hidden;
    border: 1px solid #dbeaf8;
    background: #f9fdff;
    margin: auto;
}

.flyd_c {
    margin-top: 15px;
    text-align: center;
}

.login-form-container {
    display: flex;
    justify-content: center;
}

.login-form {
    width: 100%;
    max-width: 300px;
}

.login-input {
    margin-top: 20px;
    text-align: center;
    width: 190px;
    font-size: 20px;
    height: 45px;
    line-height: 45px;
    border: 1px solid #bbb;
    border-radius: 3px;
    background: white;
}

.login-input:read-only {
    background-color: #f5f5f5;
    color: #666;
}

.login-submit {
    margin-top: 35px;
    background-color: #E6FFDD;
    cursor: pointer;
    font-size: 20px;
    color: #F00;
    line-height: 40px;
    width: 150px;
    margin-bottom: 15px;
    border: 1px solid #82b4d7;
    border-radius: 3px;
}

.login-submit:hover {
    background-color: #D6FFCD;
}

.error-message {
    margin-top: 35px;
    color: #F00;
    font-size: 18px;
}

.hidden {
    display: none;
}

.text-center {
    text-align: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-container {
    margin-top: 10px;
}

.form-content-box {
    width: 80%;
    height: auto;
    border: 1px solid #FFE699;
    background: #f9fdff;
    margin: 0 auto;
}

.form-title {
    color: #333;
    font-size: 20px;
    width: auto;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.form-description {
    color: #999;
    font-size: 20px;
    text-align: center;
}

.error-notification {
    text-align: center;
    margin-bottom: 20px;
    color: #F00;
    font-size: 22px;
}

.submit-button {
    background-color: #E6FFDD;
    width: 120px;
    font-size: 20px;
    cursor: pointer;
    height: 45px;
    line-height: 45px;
    border: 1px solid #82b4d7;
    border-radius: 3px;
}

.exam-word-text {
    font-size: 26px;
}

.exam-phonetic-text {
    font-size: 24px;
    margin-top: 20px;
}

.exam-example-text {
    font-size: 24px;
}

.exam-button-center {
    margin: 0 auto;
    width: 150px;
    margin-top: 25px;
    text-align: center;
    display: block;
    text-decoration: none;
    border: 1px solid #82b4d7;
    background: #E6FFDD;
    height: 45px;
    line-height: 45px;
    margin-bottom: 25px;
}

.exam-speak-button-link {
    display: inline-block;
    width: 150px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #82b4d7;
    background: #E6FFDD;
    height: 45px;
    line-height: 45px;
    font-size: 20px;
}

.exam-tool-button-link {
    font-size: 20px;
    color: #F00;
    width: auto;
}

.phonetic-section {
    margin-top: 15px;
    font-size: 20px;
    text-align: center;
    color: #00F;
}

.phonetic-text {
    color: #00F;
    font-size: 22px;
}

.word-section {
    font-size: 20px;
    text-align: center;
    color: #00F;
    margin-top: 20px;
}

.word-text {
    font-size: 26px;
}

.word-container {
    display: flex;
    justify-content: center;
}

.word-display {
    font-size: 20px;
    text-align: center;
    color: #00F;
    margin-top: 15px;
    width: 160px;
}

.speak-button-container {
    margin: 5px;
    width: 140px;
    margin-top: 10px;
}

.speak-button-rounded {
    border-radius: 8px;
    background-color: #EEFFF7;
    width: 140px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #82b4d7;
    display: inline-block;
    font-size: 20px;
    color: #333;
}

.answer-section {
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
}

.answer-button {
    display: inline-block;
    width: 120px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #82b4d7;
    background: #E6FFDD;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
}

.answer-button-large {
    height: 45px;
    line-height: 45px;
}

.input-section {
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
}

.text-input {
    border-color: #999;
    height: auto;
    line-height: 40px;
    text-align: center;
    color: #00F;
    font-size: 24px;
    width: 200px;
    background-color: #FFF;
    border: 1px solid;
}

.text-input-red {
    border-color: #888;
    color: #F00;
}

.submit-section {
    font-size: 20px;
    text-align: center;
    margin-top: 25px;
}

.submit-button-large {
    background-color: #E6FFDD;
    width: 120px;
    cursor: pointer;
    font-size: 18px;
    height: 45px;
    line-height: 45px;
    border: 1px solid #999;
    color: #333;
    font-size: 20px;
}

.message-section {
    font-size: 20px;
    text-align: center;
    color: #00F;
    margin-top: 20px;
}

.choice-container {
    text-align: center;
    margin-top: 15px;
}

.choice-row {
    font-size: 20px;
    text-align: center;
    display: flex;
    padding: 5px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
}

.choice-item {
    margin: 5px;
    width: 400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.choice-bracket {
    color: #00F;
    font-size: 20px;
    width: 50px;
    text-align: left;
}

.choice-bracket-right {
    color: #00F;
    font-size: 20px;
    width: 50px;
    text-align: right;
}

.choice-content {
    flex: 1;
    text-align: center;
}

.choice-text {
    color: #666;
}

.choice-button-container {
    margin: 5px;
    width: 100px;
}

.choice-button {
    display: inline-block;
    width: 80px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #82b4d7;
    background: #E6FFDD;
    height: 35px;
    line-height: 35px;
    font-size: 20px;
}

.example-section {
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
}

.example-text-red {
    color: #F00;
    font-size: 24px;
}

.example-text-blue {
    color: #00F;
    font-size: 20px;
}

.example-container {
    margin: 5px;
    width: 150px;
    margin: 20px auto 5px;
}

.sentence-section {
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
}

.sentence-button {
    display: inline-block;
    width: 150px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #82b4d7;
    background: #E6FFDD;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
}

.lesson-info {
    font-size: 20px;
    text-align: center;
    color: #00F;
}

.exam-completion-date {
    text-align: center;
    font-size: 20px;
    color: #F00;
    height: 30px;
}

.exam-user-display {
    margin-top: 10px;
    text-align: center;
    font-size: 20px;
    color: #F00;
}

.exam-grade-info {
    text-align: center;
    font-size: 20px;
    width: auto;
    height: 30px;
    color: #00F;
    margin-bottom: 10px;
}

.exam-lesson-info {
    text-align: center;
    font-size: 20px;
    width: auto;
    height: 30px;
    color: #00F;
    margin-bottom: 10px;
}

.exam-word-display {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.exam-current-word {
    font-size: 20px;
    text-align: center;
    color: #00F;
    margin-top: 15px;
    width: 160px;
}

.exam-answer-options {
    margin: 0 auto;
    width: 300px;
    text-align: center;
}

.exam-option-button {
    display: block;
    width: 300px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #82b4d7;
    background: #E6FFDD;
    height: auto;
    line-height: 45px;
    font-size: 20px;
    border-radius: 8px;
    color: #666;
    margin-bottom: 20px;
}

.exam-option-button-small {
    font-size: 24px;
}

.exam-correct-answer {
    font-size: 20px;
    text-align: center;
    color: #00F;
    margin-top: 25px;
}

.exam-answer-blank {
    font-size: 20px;
    text-align: center;
    color: #00F;
    margin-top: 20px;
}

.exam-next-button {
    display: inline-block;
    width: 100px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #82b4d7;
    background: #E6FFDD;
    height: 45px;
    line-height: 45px;
    font-size: 20px;
    padding: 0 10px;
}

.exam-stats-complete {
    width: 210px;
    margin: 0 auto 10px;
}

.exam-time-label {
    color: #00F;
    flex: 0 0 50px;
}

.exam-time-value {
    color: #00F;
    flex: 1;
    text-align: left;
    overflow: hidden;
    padding-left: 2px;
    white-space: nowrap;
}

.exam-score-label {
    color: #00F;
    flex: 0 0 50px;
}

.exam-score-value {
    color: #F00;
    flex: 1;
    text-align: left;
    overflow: hidden;
    padding-left: 2px;
    font-size: 28px;
}

.exam-rank-label {
    color: #00F;
    flex: 0 0 50px;
}

.exam-rank-value {
    color: #F00;
    flex: 1;
    text-align: left;
    overflow: hidden;
    padding-left: 2px;
    font-size: 28px;
}

.ranking-container {
    text-align: center;
    font-size: 20px;
    width: auto;
    height: 30px;
    color: #00F;
    margin-top: 10px;
    margin-bottom: 10px;
}

.ranking-subtitle {
    text-align: center;
    font-size: 20px;
    width: auto;
    height: 30px;
    color: #999;
    margin-top: 10px;
    margin-bottom: 10px;
}

.ranking-item {
    width: 280px;
    margin: 0 auto 10px;
}

.ranking-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1;
}

.ranking-user {
    width: 150px;
}

.ranking-number {
    color: #F00;
    width: 50px;
    display: inline-block;
    font-size: 20px;
}

.ranking-name {
    color: #00F;
    width: 100px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    font-size: 20px;
}

.ranking-score {
    width: 100px;
}

.ranking-score-label {
    color: #00F;
    width: 40px;
    display: inline-block;
    font-size: 20px;
}

.ranking-score-value {
    color: #F00;
    width: 60px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    font-size: 20px;
}

.history-container {
    display: flex;
    flex-direction: column;
    margin: 0 auto 30px;
    width: 300px;
}

.history-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.history-info {
    font-size: 20px;
    display: flex;
    align-items: center;
}

.history-rank {
    color: #666;
    margin-left: 30px;
}

.history-grade {
    color: #F00;
}

.history-score {
    font-size: 20px;
    color: #F00;
}

.history-details {
    display: flex;
    justify-content: flex-end;
    font-size: 20px;
}

.history-lesson {
    color: #00F;
    margin-right: 15px;
}

.history-type {
    color: #00F;
    margin-right: 15px;
}

.history-date {
    color: #666;
}

.pagination {
    margin: 20px 0;
    text-align: center;
}

.page-btn {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px;
    background-color: #E6FFDD;
    color: #333;
    text-decoration: none;
    border: 1px solid #80c080;
    border-radius: 4px;
    font-size: 18px;
}

/* 新提取的样式 - 从源PHP文件中的内联样式转换 */
.exam-stat-label-flex {
    font-size: 20px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding-left: 20px;
}

.exam-stat-value-flex {
    color: #00F;
    flex: 1;
    text-align: left;
    overflow: hidden;
    padding-left: 2px;
}

.exam-stat-value-red-flex {
    color: #F00;
    flex: 1;
    text-align: center;
    overflow: hidden;
    padding-left: 2px;
}

.exam-flex-center {
    display: flex;
    justify-content: center;
}

.exam-flex-between {
    display: flex;
    justify-content: space-between;
}

.exam-flex-column {
    display: flex;
    flex-direction: column;
}

.exam-flex-align-center {
    display: flex;
    align-items: center;
}

.exam-justify-end {
    display: flex;
    justify-content: flex-end;
}

.exam-width-auto {
    width: auto;
}

.exam-height-30 {
    height: 30px;
}

.exam-color-666 {
    color: #666;
}

.exam-color-00F {
    color: #00F;
}

.exam-color-F00 {
    color: #F00;
}

.exam-font-20 {
    font-size: 20px;
}

.exam-font-26 {
    font-size: 26px;
}

.exam-font-28 {
    font-size: 28px;
}

.exam-text-center {
    text-align: center;
}

.exam-text-left {
    text-align: left;
}

.exam-margin-auto {
    margin: 0 auto;
}

.exam-margin-top-10 {
    margin-top: 10px;
}

.exam-margin-top-15 {
    margin-top: 15px;
}

.exam-margin-top-20 {
    margin-top: 20px;
}

.exam-margin-top-25 {
    margin-top: 25px;
}

.exam-margin-bottom-10 {
    margin-bottom: 10px;
}

.exam-margin-bottom-20 {
    margin-bottom: 20px;
}

.exam-margin-bottom-30 {
    margin-bottom: 30px;
}

.exam-margin-bottom-50 {
    margin-bottom: 50px;
}

.exam-padding-0 {
    padding: 0;
}

.exam-padding-left-2 {
    padding-left: 2px;
}

.exam-padding-left-20 {
    padding-left: 20px;
}

.exam-white-space-nowrap {
    white-space: nowrap;
}

.exam-overflow-hidden {
    overflow: hidden;
}

.exam-text-overflow-ellipsis {
    text-overflow: ellipsis;
}

.exam-border-1-solid-82b4d7 {
    border: 1px solid #82b4d7;
}

.exam-border-1-solid-CCC {
    border: 1px solid #CCC;
}

.exam-border-1-solid-999 {
    border: 1px solid #999;
}

.exam-background-E6FFDD {
    background: #E6FFDD;
}

.exam-background-EEFFF7 {
    background: #EEFFF7;
}

.exam-background-FEFFE1 {
    background: #FEFFE1;
}

.exam-border-radius-8 {
    border-radius: 8px;
}

.exam-border-radius-4 {
    border-radius: 4px;
}

.exam-line-height-45 {
    line-height: 45px;
}

.exam-line-height-40 {
    line-height: 40px;
}

.exam-display-block {
    display: block;
}

.exam-display-inline-block {
    display: inline-block;
}

.exam-display-flex {
    display: flex;
}

.exam-width-100 {
    width: 100%;
}

.exam-width-90 {
    width: 90%;
}

.exam-width-80 {
    width: 80%;
}

.exam-width-300 {
    width: 300px;
}

.exam-width-280 {
    width: 280px;
}

.exam-width-255 {
    width: 255px;
}

.exam-width-210 {
    width: 210px;
}

.exam-width-200 {
    width: 200px;
}

.exam-width-160 {
    width: 160px;
}

.exam-width-150 {
    width: 150px;
}

.exam-width-140 {
    width: 140px;
}

.exam-width-120 {
    width: 120px;
}

.exam-width-100px {
    width: 100px;
}

.exam-width-80px {
    width: 80px;
}

.exam-width-60px {
    width: 60px;
}

.exam-width-50px {
    width: 50px;
}

.exam-width-40px {
    width: 40px;
}

.exam-height-auto {
    height: auto;
}

.exam-height-45 {
    height: 45px;
}

.exam-height-40 {
    height: 40px;
}

.exam-height-35 {
    height: 35px;
}

.exam-height-30 {
    height: 30px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .exam-stats-row {
        flex-direction: column;
        align-items: center;
    }
    
    .exam-stat-item {
        margin: 5px 0;
    }
    
    .exam-answer-options {
        width: 100%;
        max-width: 300px;
    }
    
    .exam-option-button {
        width: 100%;
    }
    
    .tool a {
        width: 45%;
        margin: 0 2%;
        font-size: 16px;
    }
    
    .ranking-item,
    .history-container {
        width: 95%;
    }
    
    .exam-word-display {
        flex-direction: column;
    }
}

/* 打印样式 */
@media print {
    .tool {
        display: none;
    }
    
    .exam-completion-date,
    .exam-grade-info,
    .exam-lesson-info {
        color: #000;
    }
    
    .exam-stat-value,
    .exam-stat-value-red {
        color: #000;
    }
}