/* =========================================================
   1. 重置 & 基础
   ========================================================= */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img,
sub, sup, dl, dt, dd, ol, ul, li, form, input, button, label,
textarea, table, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font: normal 400 12px/1.5 "Microsoft YaHei", Arial, sans-serif;
    color: #2C3E50;
    background: #F7F9FB;
}

a { text-decoration: none; color: #2C5F8D; transition: color .2s; }
a:hover { color: #C9A961; text-decoration: none; font-weight: bold; }
a:active { text-decoration: none; color: #2C5F8D; }

FONT { display: inline; }
h1, h2, h3, h4, h5, h6, strong { font-weight: 800; font-size: 100%; }
em { font-style: normal; }
h1 { font-size: 18px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 12px; }

label, input, select, textarea {
    vertical-align: middle;
    font-family: "Microsoft YaHei", Arial;
}
img, button { background: none; border: none; }
ol, ul, li { list-style: none; }
ul { list-style-type: none; clear: both; text-align: left; }
form { margin: 0; }
td { font: 12px; }
div { text-align: left; font-family: "Microsoft YaHei"; margin: 0 auto; }
img { border: 0; }
p { margin: 0; }
t { color: #C9A961; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #B8D0E8; border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: #C9A961; color: #fff; }

/* =========================================================
   2. 顶部导航
   ========================================================= */
#top {
    width: 100%;
    background: #3D5A80;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    box-shadow: 0 2px 8px rgba(61,90,128,.15);
    padding-bottom: 6px;
}
#topZan { height: 50px; }
#top .topMain {
    width: 100%;
    height: 50px;
    background: #3D5A80;
    text-align: center;
    line-height: 50px;
    position: relative;
}
#top .topTit { font-size: 18px; color: #fff; font-weight: 800; }
#top .topTit img { height: 30px; margin-top: 10px; }
.topBack { height: 50px; width: 50px; position: absolute; top: 0; left: 0; }
.topBack img { height: 50px; }
.topNav {
    width: 62px; height: 30px; float: right;
    background: url(navBtn1.png) 0 0 no-repeat;
    background-size: 62px 30px;
    position: absolute; top: 5px; right: 7px;
}
.topNavCur {
    width: 62px; height: 30px; float: right;
    background: url(navBtn.png) 0 0 no-repeat;
    background-size: 62px 30px;
    position: absolute; top: 5px; right: 7px; display: none;
}

/* ===== 顶部导航下拉菜单 ===== */
.disNav {
    background: rgba(255,255,255,.9) !important;   /* 半透明白，能看清又不厚重 */
    border-bottom: none !important;       /* 去掉底边线 */
    box-shadow: none !important;          /* 去掉阴影 */
    width: 100%;
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 999;
    padding: 12px 8px !important;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.disNav .navList {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    overflow: visible !important;
}

.disNav .navList li {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    background: none !important;
}

.disNav .navList li a {
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 8px 16px !important;
    background: #3D5A80 !important;      /* 从 #EDF3F9 改成深蓝 */
    color: #fff !important;              /* 从 #3D5A80 改成白色 */
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: all .2s;
    box-shadow: 0 2px 6px rgba(61,90,128,.25);   /* 加一点阴影，浮起来 */
}

.disNav .navList li a:hover {
    background: #2C4A6E !important;      /* 悬停更深蓝 */
    color: #fff !important;
}

.disNav .navList li a img { display: none !important; }

.logo { float: left; margin-top: 0; padding: 7px 0 3px 8px; }
.logo h1 { color: #fff; letter-spacing: 1px; }
.logo h1 a, .logo h1 a:link { text-decoration: none; color: #fff; }

/* ===== 搜索框：一行居中 ===== */
.topso {
    float: none;
    width: 100%;
    padding: 2px 8px;
}
.topso form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
#searchtype {
    flex: 0 0 22%;
    height: 28px;
    border: 1px solid #D6E4F0;
    border-radius: 4px;
    background: #fff;
    color: #3D5A80;
    outline: none;
    font-size: 13px;
    padding: 0 4px;
}
.searchtxt {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    border: 1px solid #D6E4F0;
    border-radius: 4px;
    padding: 0 8px;
    outline: none;
    font-size: 13px;
    transition: border-color .2s;
}
.searchtxt:focus { border-color: #3D5A80; }
.submit {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 14px;
    background: #3D5A80;
    color: #fff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background .2s;
}
.submit:hover { background: #2C4A6E; }

.f12 { font-size: 12px; }
.f14 { font-size: 14px; }
.f16 { font-size: 16px; }
.f18 { font-size: 18px; }

/* =========================================================
   3. 卷/章下拉菜单（悬浮第一行，多行显示）
   ========================================================= */
.topty {
    position: absolute;
    top: 22px;
    left: calc(50% + 40px);
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    width: auto;
    z-index: 1001;
    font-size: 12px;
    font-weight: bold;
}

#nav {
    line-height: normal;
    list-style-type: none;
    background: transparent;
    font-size: 13px;
    padding: 0;
    text-align: center;
}

/* 子菜单初始隐藏 */
#nav ul { display: none; }

/* 顶层 li：默认透明底白字 */
#nav > li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: auto;
    background: transparent;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 4px;
    padding: 0;
    margin: 0 2px;
    transition: all .2s;
    vertical-align: middle;
    position: relative;
    min-height: 26px;
}
#nav > li > a {
    display: flex;
    align-items: center;
    padding: 3px 8px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    transition: all .2s;
    border-radius: 3px;
}
#nav > li > a:hover {
    background: rgba(255,255,255,.2);
    color: #fff;
}

/* 展开状态：白底 + 深蓝字 */
#nav > li.open {
    background: #fff;
    border-color: #fff;
}
#nav > li.open > a {
    background: #fff;
    color: #3D5A80;
}

/* ===== 卷/章子菜单：居中 + 多行换行 ===== */
#nav > li > ul {
    position: fixed;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 20px;
    list-style-type: none;
    text-align: left;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    background: #3D5A80;
    padding: 6px;
    z-index: 2000;
    min-width: 240px;
    max-width: 90vw;
    margin-top: 0;
}

/* 子菜单项：浮动换行 */
#nav > li > ul li {
    float: left;
    padding: 0;
    margin: 1px;
    background: transparent;
    border-radius: 3px;
    overflow: hidden;
}

/* 子菜单项：未选中透明底白字 */
#nav > li > ul a {
    display: block;
    padding: 5px 12px;
    color: #fff;
    text-align: left;
    font-size: 20px;
    line-height: 1.3;
    transition: background .15s;
    border-radius: 3px;
    background: transparent;
}
#nav > li > ul a:link,
#nav > li > ul a:visited { color: #fff; text-decoration: none; }
#nav > li > ul a:hover {
    background: rgba(255,255,255,.15);
    color: #fff;
    font-weight: normal;
}

/* 子菜单项：选中白底深蓝字 */
#nav > li > ul a.b {
    background: #fff;
    color: #3D5A80;
    font-weight: bold;
}

#content { clear: left; }

/* =========================================================
   4. 内容区
   ========================================================= */
.aa {
    border-bottom: 1px solid #D6E4F0;
    padding: 10px 8px;
    line-height: normal;
    width: 99%;
    background: #F2F6FA;
    font-weight: normal;
    overflow: hidden;
    font-size: 17px;
}

.bb {
    border-bottom: 1px solid #FF6600;
    padding: 10px 8px;
    line-height: normal;
    width: 99%;
    background: #F2F6FA;
    font-weight: bold;
    overflow: hidden;
    font-size: 17px;
}

.fa { background: none transparent scroll repeat 0 0; }
.ga { color: #C9A961; font-weight: bold; }

#mym { width: 99%; margin-bottom: 5px; margin-top:20.5%; }

.mulu {
    border: 1px solid #D6E4F0;
    width: 17%;
    height: auto;
    background: #F7FAFC;
    float: left;
    padding: 5px 0;
    border-radius: 4px;
}
.mulu a {
    clear: both;
    text-indent: 0.5em;
    width: 100%;
    display: block;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #E8EFF6;
    overflow: hidden;
    transition: all .2s;
}
.mulu a:hover { background: #E8F2FC; }
.mulu li {
    clear: both;
    text-indent: 0.5em;
    float: left;
    width: 100%;
    list-style-type: none;
    height: 20px;
}

.jinwen {
    background: #fff;
    border: 1px solid #D6E4F0;
    float: right;
    margin-left: 2px;
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(61,90,128,.06);
}
.zhang1 {
    padding-top: 0;
    height: auto;
    background: #E4ECF3;
    width: 100%;
    padding-bottom: 0;
    display: block;
    overflow: hidden;
}
.zhang1 a {
    padding-right: 0;
    padding-left: 2px;
    line-height: normal;
}

/* ===== 播放器三栏 flex 布局（真机自适应） ===== */
.zhang1 .aa {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.left  { flex: 1 1 0; min-width: 0; text-align: left; overflow: hidden; }
.center{ flex: 0 0 auto; text-align: center; padding: 0 4px; }
.right {
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    display: flex;              /* 新增 */
    align-items: center;        /* 新增 */
    justify-content: flex-end;  /* 新增 */
    gap: 4px;                   /* 新增：元素间距 */
}

.page {
    width: 100%;
    text-indent: 0;
    padding: 12px 0;
    height: auto;
    background: #E4ECF3;
    font-size: 14px;
    margin: 0 auto;
    text-align: center;
    border-top: 1px solid #D6E4F0;
    border-bottom: 1px solid #D6E4F0;
    color: #3D5A80;
}
.page a { color: #3D5A80; font-weight: 600; }
.page a:hover { color: #C9A961; }

.di {
    border: 1px solid #D6E4F0;
    padding-top: 7px;
    padding-bottom: 7px;
    text-indent: 1em;
    width: 99%;
    font-size: 12px;
    margin-bottom: 5px;
    text-align: center;
    display: inline-block;
    border-radius: 4px;
    color: #6B7C8E;
}

/* =========================================================
   5. 正文条目
   ========================================================= */
#zoom p {
    background: #fff;
    display: flex;
    align-items: flex-start;
    font-weight: normal;
    padding-bottom: 10px;
    overflow: hidden;
    width: 100%;
    line-height: 1.6;
    padding-top: 12px;
    border-bottom: 1px solid #E8EFF6;
    transition: background .2s;
}
#zoom p:hover { background: #FBFDFF; }
#zoom p font {
    flex: 0 0 12%;
    padding-left: 4px;
    padding-top: 4px;
    color: #3D5A80;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    overflow: hidden;
}
#zoom p span {
    flex: 1 1 auto;
    font-size: 28px;
    color: #2C3E50;
}
#zoom p span strong { color: #FF3300; }
#zoom p b {color: #8A99A8; padding-right: 3px; }
#zoom .cv { background: #F4F8FC; }
#zoom .ev {
    display: inline-block;
    text-indent: 0.5em;
    width: 100%;
    line-height: normal;
    padding-top: 10px;
    border-bottom: 1px solid #E8EFF6;
    background: #F7FAFC;
}
#zoom .ev font { display: none; }
#zoom .dd {
    display: inline-block;
    padding-left: 5px;
    font-weight: normal;
    background: #fff;
    padding-bottom: 4px;
    width: 100%;
    color: #C9A961;
    line-height: normal;
    padding-top: 10px;
    border-bottom: 1px solid #E8EFF6;
}

/* 当前节高亮（p.b） */
#zoom p.b {
    background: #FFF8E1;              /* 淡金色底，突出显示 */
    border-left: 3px solid #C9A961;   /* 左边金色竖条 */
    padding-left: 6px;
}
#zoom p.b font {
    color: #C9A961;                   /* 节号也变金色 */
    font-weight: bold;
}
#zoom p.b span {
    color: #8B5A2B;                   /* 经文变深棕/金棕色 */
    font-weight: bold;
}

.gongju {
    float: left;
    background: #67A221;
    padding: 3px;
    margin-right: 12px;
    border-radius: 3px;
}
.gongju a { color: #fff; }

.b { font-weight: bold; color: #C9A961; font-size: 18px; }

/* =========================================================
   6. 注释区
   ========================================================= */
.zhushi {
    width: 100%;
    background: #F2F6FA;
    margin-top: 3px;
    border-radius: 4px;
    padding: 6px 0;
}
.zhushi .bt {
    margin-bottom: 6px;
    background: #ffffff;
    text-indent: 0.5em;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 3px;
}
.zhushi .bt a { font-size: 14px; }
.zhushi b { font-size: 18px; color: #3D5A80; padding-left: 6px; }
/* 注释资料这一行 */
.zhushi dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    margin: 0;
    width: 100%;
}

.zhushi dl b {
    font-size: 17px;
    color: #3D5A80;
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
}

.zhushi dl span {
    text-align: right;
    font-size: 13px;
    color: #6B7C8E;
    margin-left: 10px;
    flex: 1 1 auto;
    min-width: 0;
}
/* =========================================================
   7. 列表卡片
   ========================================================= */
.navList { overflow: hidden; margin: 0 0 3%; }
.navList li { float: left; width: 30%; margin: 3% 0 0 2.6%; }
.navList li a {
    width: 100%;
    display: block;
    background: #3D5A80;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    transition: all .2s;
}
.navList li a:hover { background: #2C4A6E; transform: translateY(-1px); }
.navList li a img { width: 100%; display: block; border-radius: 6px; }
.navList li a span {
    padding: 5px 10px;
    display: block;
    line-height: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 6px;
}
.navList li.goback a { background: #8A99A8; }

.jingList { overflow: hidden; margin:20.5% 0 3%; }
.jingList li {
    float: left;
    height: auto;
    width: 30%;
    margin: 3% 0 0 2.6%;
    background: #3D5A80;
    border-radius: 6px;
    transition: all .2s;
}
.jingList li:hover { background: #2C4A6E; transform: translateY(-1px); }
.jingList li a {
    width: 100%;
    height: 100%;
    display: block;
    color: #fff;
    overflow: hidden;
}
.jingList li a:hover { text-decoration: none; }
.jingList li a strong {
    font-size: 28px;
    height: auto;
    line-height: auto;
    font-weight: 800;
    margin: 0 0 0 10px;
    display: block;
    overflow: hidden;
}
.jingList li a span {
    font-size: 12px;
    height: auto;
    line-height: auto;
    font-weight: 400;
    padding-bottom:5px;
    margin: 0 0 0 10px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
}

/* =========================================================
   8. 浮动按钮 & 提示
   ========================================================= */
#backTop {
    width: 40px;
    height: 40px;
    position: fixed;
    right: 10px;
    bottom: 30%;
    display: none;
    border-radius: 50%;
    background: url(backTop.png) 0 0 no-repeat;
    background-size: 40px 40px;
    box-shadow: 0 2px 8px rgba(61,90,128,.25);
}
#backTop img { width: 100%; height: 100%; display: block; border-radius: 50%; }

#notice {
    background: #3D5A80;
    opacity: 0.9;
    color: #fff;
    padding: 10px;
    position: fixed;
    top: 40%;
    left: 15%;
    width: 70%;
    text-align: center;
    overflow: hidden;
    line-height: 30px;
    height: 30px;
    font-size: 16px;
    border-radius: 6px;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
#playerNotice {
    background: rgba(61,90,128,.7);
    color: #fff;
    position: fixed;
    bottom: 55px;
    left: 0;
    width: 100%;
    text-align: center;
    overflow: hidden;
    line-height: 30px;
    height: 30px;
    font-size: 16px;
    z-index: 9999;
}

/* =========================================================
   9. 播放器
   ========================================================= */
.player-center {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
    line-height: normal;
    white-space: nowrap;
}

#playBtn {
    position: relative;
    width: 44px;
    height: 44px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}
#playBtn svg { display: block; width: 44px; height: 44px; }
#playBtn .ring-bg { fill: none; stroke: #D6E4F0; stroke-width: 3; }
#playBtn .ring-progress {
    fill: none;
    stroke: #3D5A80;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 163.36;
    stroke-dashoffset: 163.36;
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(-90deg);
    transition: stroke-dashoffset 0.2s linear;
}
#playBtn .icon-shape { fill: #3D5A80; }

/* 单版/多版/版本按钮（更紧凑，真机字体放大也能放下） */
.tab-btn {
    display: inline-block;
    padding: 2px 6px;
    font-size: 11px;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
    margin-left: 1px;
    transition: all .2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.tab-btn.active {
    background: #3D5A80;
    color: #fff;
    box-shadow: 0 2px 4px rgba(61,90,128,.25);
}
.tab-btn.normal {
    background: #EDF3F9;
    color: #3D5A80;
    border: 1px solid #D6E4F0;
}
.tab-btn:hover { transform: translateY(-1px); }

/* =========================================================
   10. 连播小开关
   ========================================================= */
.auto-next-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    margin-left: -2px;
    position: relative;
    flex-shrink: 0;
}
.auto-next-toggle input { display: none; }
.auto-next-toggle .toggle-track {
    display: block;
    width: 22px;
    height: 12px;
    background: #D6E4F0;
    border-radius: 6px;
    position: relative;
    transition: background 0.2s;
}
.auto-next-toggle .toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: transform 0.2s;
}
.auto-next-toggle input:checked + .toggle-track { background: #3D5A80; }
.auto-next-toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(10px); }

.toggle-tip {
    position: absolute;
    left: 50%;
    top: auto;
    bottom: -24px;
    transform: translateX(-50%);
    background: rgba(61,90,128,.9);
    color: #fff;
    font-size: 8px;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    z-index: 9999;
}
.toggle-tip.show { opacity: 1; }
.toggle-tip::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -4px;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-bottom-color: rgba(61,90,128,.9);
    border-top: 0;
}

/* =========================================================
   11. 版本选择面板
   ========================================================= */
#verPanel {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(61,90,128,.18);
    z-index: 9999;
    max-width: 90%;
    width: 320px;
    max-height: 80vh;
    overflow-y: auto;
}
#verMask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(61,90,128,.25);
    z-index: 9998;
}
.ver-header {
    padding: 14px 18px;
    border-bottom: 1px solid #E8EFF6;
    font-weight: bold;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #3D5A80;
}
.ver-close { cursor: pointer; color: #8A99A8; font-size: 20px; transition: color .2s; }
.ver-close:hover { color: #3D5A80; }
.ver-list { padding: 10px 18px; }
.ver-list label {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    color: #2C3E50;
    cursor: pointer;
}
.ver-list label:hover { color: #3D5A80; }
.ver-list input[type=checkbox] { margin-right: 6px; accent-color: #3D5A80; }

.ver-footer {
    padding: 12px 18px;
    border-top: 1px solid #E8EFF6;
    display: flex;
    gap: 8px;
    align-items: center;
}
.ver-footer button {
    flex: 1;
    padding: 7px 0;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    transition: all .2s;
}
.ver-btn-all {
    background: #EDF3F9;
    color: #3D5A80;
    border: 1px solid #D6E4F0;
}
.ver-btn-all:hover { background: #E0EAF4; }
.ver-btn-none {
    background: #F7F9FB;
    color: #8A99A8;
    border: 1px solid #E8EFF6;
}
.ver-btn-none:hover { background: #E8EFF6; color: #3D5A80; }
.ver-btn-ok {
    background: #3D5A80;
    color: #fff;
    border: 0;
}
.ver-btn-ok:hover { background: #2C4A6E; }

/* =========================================================
   12. 工具类
   ========================================================= */
.none { display: none; }