/* ==================================================================
 * mir 独立站 - 前台样式（经典传奇发布站表格版式）
 * ------------------------------------------------------------------
 * 这套版式的实测规格（早期用现代卡片/flex 写对不上，根因就在这儿）：
 *   · body 纯白 #FFFFFF，无背景图、无阴影、无圆角；
 *   · 字体按同一套规格：内容 12px 微软雅黑、行高 30px，
 *     表头 14px 微软雅黑、font-weight:400（不粗体）、行高 32px，分段标题行高 27px，
 *     开区块一律 white-space:nowrap + overflow:hidden（超宽直接裁掉，不换行）；
 *     本站表格带 cellpadding=3，所以写进 CSS 的行高要减掉这 6px（30→24、32→26、27→21）；
 *   · 链接黑字、hover 红、active 绿，全站一律不带下划线；
 *   · 蓝色网格线由 “table bgcolor=#6490E4 + cellspacing=1” 透底实现，
 *     不靠单元格 border —— 所以这里绝不给 td/th 设 border；
 *   · 所有元素固定 1000px 宽、同边界居中（table align=center + margin auto）。
 * 行底色/图标/文字颜色全部是 HTML 属性级写法（bgcolor/font），由 JS 输出，
 * 本文件只负责：全局字体链接规则、悬停、加载动画、底部（友链+页脚）排版。
 * ================================================================== */

/* ★经典表格布局必须用 content-box（浏览器默认）：
   绝对不能加 * { box-sizing:border-box } 之类的现代 reset！
   border-box 会让 td 的 width 属性含上 padding，每列实际内容宽被吃 6px：
   列宽总和不够 → 表右侧漏出 bgcolor 蓝带；“点击查看”列放不下 4 字 → 竖排换行撑高行距。
   这套版式属于纯 content-box 时代，这里保持默认才对得上上面的规格。 */
html, body {
    margin: 0;
    padding: 0;
    background: #FFFFFF;                 /* 页外留白是纯白，不是灰 */
    color: #000000;
    /* 字体族按原规格：表头声明 "微软雅黑"，内容不声明 family
       （浏览器默认就是雅黑）。本站原来写 Arial→SimSun 回退，中文落到宋体，
       这就是“字体看着不一样”的根因，所以这里显式锁定雅黑。 */
    font: 12px/21px "Microsoft YaHei", "微软雅黑", sans-serif;
}

/* 链接规则按这套版式的 STYLE 块，只有一处不同：全站链接一律不带下划线（含 hover）。
 *   可点的地方靠变色（hover 变红）和已有的底色/边框提示，不再靠那根线；
 *   第一行 a{} 是兜底，focus 之类没被下面四个状态覆盖到的也不会漏出默认下划线。 */
a         { text-decoration: none; }
a:link    { color: black; text-decoration: none; }
a:visited { color: black; text-decoration: none; }
a:active  { color: green; text-decoration: none; }
a:hover   { color: red;   text-decoration: none; }

img { border: 0; }

/* ---------- 主体容器：宽度由 JS 按 cfg.pageWidth 设为内联 style ---------- */
.mir-app {
    margin: 0 auto;
    background: #FFFFFF;
}

/* ---------- 热门版本快捷筛选条（表头上方那一排版本标签）----------
   宽度不在这里写死：它是 .mir-app 里的普通块级盒，width:auto 时内容宽会自动让开两侧的 1px 边框，
   整条正好和下面那张表同宽（本站没设 box-sizing:border-box，就是 content-box）。
   ★垂直对齐的口径：条内只有一根 26px 的中线，前缀、标签、搜索框三块都算成 26px 高 ——
     文字块靠 line-height:26，标签与输入框/按钮靠 24px 内容高 + 上下各 1px 边框。
     三块等高之后一律顶端对齐就是水平居中，不用 vertical-align 去猜基线：基线对齐会被行距、
     占位文字这些因素影响，差个两三 px 就能看出来“没对齐”。
   外框用黑色实线：这一条上面就是首页公告条，浅灰边框压不住，两者会糊成一片。 */
.mir-vf {
    overflow: hidden;
    margin: 0 auto;
    padding: 3px 6px;
    border: 1px solid #000000;
    background: #FFFFFF;
    font-size: 12px;
    line-height: 26px;
}
.mir-vf-label { float: left; margin-right: 6px; color: #9C0301; font-weight: bold; }
.mir-vf-tag {
    float: left;
    margin: 0 4px 0 0;
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
    border: 1px solid #D3D3D3;
    background: #F7F7F7;
    color: #333333;
    text-decoration: none;
    white-space: nowrap;
}
.mir-vf-tag:hover { border-color: #FF9900; color: #E07B00; }
/* 生效中的那个标签：橙色跟首页分段横条同一族，不另开新色 */
.mir-vf-on, .mir-vf-on:hover { background: #FF9900; border-color: #E07B00; color: #FFFFFF; }
.mir-vf-search { float: right; }
.mir-vf-input {
    width: 130px;
    height: 24px;
    padding: 0 4px;
    border: 1px solid #D3D3D3;
    font-size: 12px;
    line-height: 24px;
    vertical-align: top;
}
.mir-vf-btn {
    display: inline-block;
    width: 42px;
    height: 24px;
    margin-left: 3px;
    border: 1px solid #E07B00;
    background: #FF9900;
    color: #FFFFFF;
    text-align: center;
    line-height: 24px;
    vertical-align: top;
    text-decoration: none;
    cursor: pointer;
}
.mir-vf-btn:hover { background: #E07B00; }
/* 命中 0 行时才亮起来（默认由 JS 写成 display:none）：跟在筛选条后面，
   上边框去掉、直接共用上面那条黑实线，看着像从那一条里长出来的，不多一圈“框中框”；
   剩下三边用同色虚线，与主条的黑实线区分开“提示”和“工具” */
.mir-vf-none {
    clear: both;
    margin: 0 auto;
    padding: 6px 0;
    border: 1px dashed #000000;
    border-top: 0;
    color: #666666;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
}

/* ---------- 经典表格：居中靠 align=center 属性 + margin auto（table 本身是块级盒，
   不要加 display:block，不改变表格原生布局行为） ---------- */
table.mir-tb, .mir-app > table {
    margin: 0 auto;                      /* 各表同宽同边界，首尾相接成连续网格 */
}

/* ---------- banner 表：主图与右侧授权条必须紧贴（实测间隙应为 0），
   显式加固：collapse 消除默认 border-spacing；td 去 padding；img 块级化去 inline 基线缝 ---------- */
table.mir-banner-tb {
    border-collapse: collapse;
}
table.mir-banner-tb > tbody > tr > td {
    padding: 0;
}
table.mir-banner-tb img {
    display: block;
}
/* 字号/行高基线：banner、公告条这些非开区行保持 12px/21px */
.mir-app table td {
    font-size: 12px;
    line-height: 21px;
}
/* 开区表数据行：按 .r/.c1~.c7 这套规格 —— 不换行 + 超宽裁掉，
   行高 30px 因 cellpadding=3 而写成 24px（24+6=30，行高才不会跳） */
.mir-app table.mir-tb td {
    white-space: nowrap;
    line-height: 24px;
}
/* 分段橙色横条（带 colspan 的那格）：.lst_title 高 27px → 27-6=21px */
.mir-app table.mir-tb td[colspan] {
    line-height: 21px;
}
/* 表头：table.lst-header th = 微软雅黑 14px、font-weight:400、行高 32px（→26+6）。
   JS 虽然用 <b> 输出列名，这里的 400 会把它压回常规字重，避免“雅黑+粗体”双粗。 */
.mir-app table.mir-tb td.mir-th {
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
}
table.mir-tb td img { vertical-align: middle; }

/* 行悬停：整行变淡蓝，图标格保持白底（沿用 onmouseover 那套行为） */
tr.mir-row:hover td              { background: #E3F3FF !important; }
tr.mir-row:hover td.mir-c-icon   { background: #FFFFFF !important; }

/* ---------- 底部：友情链接 + VIP 入口 + 底部内容（由 index.php 服务端直出） ----------
   宽度不在这里写死：index.php 按后台的“页面主体宽度”把它写成内联 style，
   所以改宽度只改后台，这里不跟着改也不会对不齐。 */
.mir-bottom {
    margin: 10px auto 0;
    padding-bottom: 18px;
    font-size: 12px;
    color: #000000;
    text-align: center;                 /* 这个居中只作用到底部那几行文字上；友情链接那一块下面单独改回靠左 */
}

/* 友情链接：淡蓝底 + 细边框，让这一堆链接看着是“一块”，不是散在页尾的一行字。
   文字靠左（覆盖上面 .mir-bottom 的居中）：“友情链接：”和第一条从框内左边开始排，
   条目多了自动折行也是从左边接着往下排，跟上面开区表一样的读法。
   框本身不收缩：它跟开区表同宽同边界（宽度由 index.php 按后台“页面主体宽度”写在内联 style 上）。 */
.mir-bottom-links {
    padding: 7px 10px;
    background: #F5F8FC;
    border: 1px solid #DCE6F1;
    line-height: 22px;
    text-align: left;
}
.mir-bottom-tag { color: #666666; font-weight: 700; }
/* 每条链接连它后面的竖线一起 nowrap：分隔符写在 CSS 而不是 PHP 拼字符串，
   是为了让竖线跟着自己那条走——换行时不会孤零零掉到行首，
   最后一条靠 :last-child 去掉，PHP 里不用判“是不是最后一个”。 */
.mir-bottom-ln              { white-space: nowrap; }
.mir-bottom-ln::after       { content: "|"; color: #B9C7D6; margin: 0 7px; }
.mir-bottom-ln:last-child::after { content: ""; margin: 0; }

/* 底部内容：后台那一框一行一个 div，居中；行距给足，写多了也不挤在一起 */
.mir-bottom-text {
    margin-top: 10px;
    line-height: 22px;
}

/* ---------- 加载动画（本站自有：JS 渲染完成前的过渡） ----------
   只跟浏览器窗口有关，跟开区表、跟后台那个“页面主体宽度”都不相干：
   position:fixed + 四边归零 = 永远铺满当前可视区（实测容器宽 == documentElement.clientWidth，
   7 档宽度下面板中心都落在可视区中点上），再由 flex 横竖居中。
   不透明白底（默认吃鼠标）：加载期间只留中间这个面板，底下那些服务端直出的东西
   （友情链接框、页脚文字、SEO 文字段）先盖住，等表格渲染完、这层 display:none 收掉，
   它们再跟着露出来——不然就是“上面一串页脚 + 中间一个面板”的坏版。
   盖住 ≠ 从页面里删掉：友链与页脚照常写在 HTML 源码里、也有自己的布局盒子，爬虫照读不误；
   所以这里绝不改成 display:none / visibility:hidden 去藏它们（那才是真把服务端直出的意义废了）。
   mir.js 只用内联 display 收放这个容器（none ↔ flex），与这里的定位互不干涉。 */
.mir-loading {
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 80;                    /* 压住普通文档流内容，但仍在返回顶部按钮（90）下面 */
    background: #FFFFFF;            /* 与 body 同色：要的是“白屏 + 居中面板”，不是半透灰遮罩 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #666;
}
/* 没跑 JS（禁用脚本 / 只读源码的爬虫）时整块收起：它只是 JS 渲染期间的过渡，
   钉成覆盖层后常驻在屏幕中间会挡住下面的文字版开区表。
   选择器比上面那条多一层 html 与一个类，优先级已经够，不用靠书写顺序压。 */
html:not(.mir-js) .mir-loading { display: none; }

/* 加载失败（mir.js 给容器加上 mir-error 类）时退回文档流：这时候已经没有开区表可看了，
   再拿白底盖满整屏，用户就只剩“看不见却得点”的份——红字提示回到页面顶部，
   底下的友情链接与页脚照常可见可点（出错时能做的就只有刷新或者点走）。
   position:static 之后上面那四条归零与 z-index 自然失效，flex 居中照旧生效。 */
.mir-loading.mir-error {
    position: static;
    background: transparent;
    min-height: 200px;
}

/* 进度条版（默认）：外层面板 + 填充条 + 百分比 + 状态行 + 轮播提示。
   轨道底色/填充渐变/边框/文字色都写在 index.php 的内联 style 里（后台可改），
   这里只留结构性样式，所以 border-color 等不写死，交给内联值覆盖。
   注意：后台“外观设置”的配色预览是这一组尺寸的镜像（见 admin.css 的 .ld-prev-*），
   改下面的 width/padding/字号时那一份要跟着改，不然后台预览就跟不上前台实际。 */
.mir-ld {
    display: none;
    width: 380px;
    max-width: 86vw;
    padding: 18px 20px;
    border: 1px solid #E5E5E5;
    background: #FAFAFA;
    border-radius: 3px;
}
.mir-ld-title {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    color: #444;
}
.mir-ld-barwrap { display: flex; align-items: center; gap: 8px; }
.mir-ld-bar {
    position: relative;
    flex: 1;
    height: 18px;
    border: 1px solid #B0B0B0;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18);
}
.mir-ld-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    /* 后台渐变是 background-image，条纹叠在 ::after 上，两者互不覆盖 */
    transition: width .2s linear;
}
.mir-ld-fill::after {
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background-image: linear-gradient(45deg,
        rgba(255, 255, 255, .28) 25%, transparent 25%, transparent 50%,
        rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, .28) 75%,
        transparent 75%, transparent);
    background-size: 32px 32px;
    animation: mir-ld-strip .7s linear infinite;
}
@keyframes mir-ld-strip { from { background-position: 0 0; } to { background-position: 32px 0; } }
.mir-ld-pct { font-size: 12px; width: 3.4em; text-align: right; }
.mir-ld-status { margin-top: 10px; font-size: 12px; text-align: center; }
.mir-ld-tips { margin-top: 6px; font-size: 12px; line-height: 18px; min-height: 18px; text-align: center; color: #999; transition: opacity .25s; }

/* 老式转圈：仅在后台关掉进度条（ld-off）或接口报错时出现 */
.mir-spinner {
    display: none;
    width: 44px;
    height: 44px;
    border: 4px solid #d6e4ff;
    border-top-color: #2c5aa0;
    border-radius: 50%;
    animation: mir-spin 0.9s linear infinite;
}
@keyframes mir-spin { to { transform: rotate(360deg); } }
.mir-loading-text { display: none; font-size: 14px; }

/* 显示切换：进度条 ↔ 转圈 ↔ 错误态（错误态一律只显示一行红字，进度条收起） */
.mir-loading:not(.ld-off) .mir-ld { display: block; }
.mir-loading.ld-off .mir-spinner,
.mir-loading.ld-off .mir-loading-text { display: block; }
.mir-loading.mir-error .mir-ld,
.mir-loading.mir-error .mir-spinner { display: none; }
.mir-loading.mir-error .mir-loading-text { display: block; color: #c0392b; }
/* 进度条模式下收起 flex 间距，避免面板与隐藏元素之间留白 */
.mir-loading:not(.ld-off):not(.mir-error) { gap: 0; }

/* ==================================================================
 * SEO 区块（后台“SEO 设置”产出，与经典版式互不干扰）
 *   #mir-ssr     文字版开区表：只写在 HTML 源码里给不执行 JS 的爬虫读。
 *                index.php 在 <head> 里给 <html> 加了 mir-js 类，所以只要 JS
 *                在跑就立即隐藏（无闪烁）；禁用 JS 时它正常可见，不算隐藏文本。
 *   .mir-seo-copy 后台可编的导言/结尾段（宽度由内联 style 跟随页面主体）；
 *                对访客的可见性分三档，见下面 -fade / -hide 两个修饰类。
 * ================================================================== */
.mir-ssr {
    width: 1000px;
    margin: 0 auto;
    padding: 8px 0 0;
    color: #333;
    font-size: 12px;
    line-height: 22px;
}
.mir-js .mir-ssr { display: none; }        /* 有 JS：表格已由 JS 渲染，文字版直接收起 */
.mir-ssr h1 { font-size: 18px; font-weight: 600; margin: 6px 0; }
.mir-ssr h2 { font-size: 14px; font-weight: 600; margin: 8px 0 4px; }
.mir-ssr ul { list-style: none; margin: 0; padding: 0; }
.mir-ssr li { white-space: normal; }
.mir-ssr .tag { color: #c00; }

/* 页面上可见的主标题（后台 h1_show=1 才输出，默认关闭以保持版式紧凑） */
.mir-h1 {
    width: 1000px;
    margin: 0 auto;
    padding: 6px 0 2px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: #333;
}

/* 首页 SEO 文字段：朴素老式风格，不抢开区表的视觉主体 */
.mir-seo-copy {
    margin: 10px auto 0;
    padding: 8px 10px;
    border: 1px solid #E3E3E3;
    background: #FAFAFA;
    font-size: 12px;
    line-height: 22px;
    color: #555;
    text-align: left;
}
.mir-seo-copy p { margin: 0 0 6px; }
.mir-seo-copy p:last-child { margin-bottom: 0; }
/* 后台“首页文字内容 → 访客可见性”的另两档（show 档就是上面那个根样式） */
/* fade：字还在、但不抢版面 —— 去框去底、小字淡色，适合想让访客看到又不想破经典版式 */
.mir-seo-copy-fade {
    border: 0;
    background: none;
    padding: 6px 0 0;
    color: #999;
    line-height: 20px;
}
/* hide：完全移出视口，只在 HTML 源码里给爬虫。
   不用 display:none —— 部分爬虫直接跳过不渲染的节点，写了等于没写；
   也不用 height:0 + overflow:hidden 去裁，保留完整排版，文本在渲染树里确实是“存在”的。 */
.mir-seo-copy-hide {
    position: absolute;
    left: -9999px;
    top: 0;
}

/* ---------- 返回顶部：右下角浮动小块（本站自有：页面是上千行的长表格，滚下去就得上拖滚动条） ----------
   默认（不执行 JS）常驻可见，点 href="#" 原生跳顶；html.mir-js 由 <head> 里的打标脚本加上，
   有 JS 时先把按钮藏起来，什么时候露出交给 mir.js：滚过阈值才加上 .mir-show。 */
.mir-top {
    position: fixed;
    /* 水平位置：贴内容区右边界外 10px，而不是贴浏览器右边缘。
       left:50% 先把锚点放到视口中线，再用 margin-left 推出「半屏内容宽 + 间距」；
       那个值由 index.php 按后台 pageWidth 算好、通过 CSS 变量 --mir-top-x 交进来
       （页面宽度后台可改，这里写死 510px 的话一改版式就错位）。变量缺失时兜底 510px。 */
    left: 50%;
    margin-left: var(--mir-top-x, 510px);
    bottom: 70px;
    z-index: 90;
    display: inline-block;
    padding: 7px 9px 6px;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    color: #5a5a5a;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.mir-top:hover {
    color: #c00;
    border-color: #c00;
    background: #fff;
}
html.mir-js .mir-top { display: none; }
html.mir-js .mir-top.mir-show { display: block; }

/* 视口比内容区还宽才有地方放右侧那 10px：屏幕不够宽时按钮会被推出可视区，
   所以退回老行为——贴浏览器右边缘，至少保证看得到、点得到。
   断点按默认 pageWidth=1000 算（1000/2 + 按钮宽 40 + 两侧余量 ≈ 1130）；
   后台把页面宽度调到 1100 以上时，CSS 变量能跟着变但这个断点要同步抬。 */
@media (max-width: 1130px) {
    .mir-top { left: auto; right: 12px; margin-left: 0; }
}