/* Storava 前端全局样式 —— 抽离自 templates/front/base.html + _popup_announcement.html */
:root {
--primary: #1677ff;
--primary-hover: #4096ff;
--primary-soft: #e8f1ff;
--radius: 10px;
--bg: #f5f7fa;
--card-border: #e5e6eb;
--text: #1d2129;
--text-muted: #86909c;
}
.container { max-width: var(--site-width, 1200px) !important; }
body {
background: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
font-size: 15px;
}
.section-title { position: relative; font-weight: 700; padding-left: 14px; margin-bottom: 16px; }
.section-title::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 4px; height: 18px; border-radius: 3px; background: var(--primary);
}
/* 顶栏 */
.site-navbar {
background: #fff; border-bottom: 1px solid var(--card-border);
box-shadow: 0 2px 10px rgba(0,0,0,.05); position: sticky; top: 0; z-index: 1030;
}
/* 锚点定位：留出吸顶导航高度，避免目标被导航栏遮挡 */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 82px; }
.site-navbar .navbar-brand {
color: var(--primary); font-weight: 800; font-size: 21px; letter-spacing: .5px;
display: inline-flex; align-items: center; gap: 10px;
transition: color .2s ease;
}
.site-navbar .navbar-brand .site-logo {
height: 30px; width: auto; border-radius: 8px; vertical-align: middle;
box-shadow: 0 2px 8px rgba(22,119,255,.18);
transition: transform .2s ease, box-shadow .2s ease;
}
.site-navbar .navbar-brand:hover { color: var(--primary-hover); }
.site-navbar .navbar-brand:hover .site-logo { transform: scale(1.05); box-shadow: 0 4px 12px rgba(22,119,255,.28); }
.site-navbar .navbar-brand i {
background: linear-gradient(135deg, var(--primary), var(--primary-hover));
color: #fff; width: 34px; height: 34px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
margin-right: 0; font-size: 15px;
box-shadow: 0 3px 10px rgba(22,119,255,.25);
}
.site-navbar .nav-link { color: #4e5969; font-weight: 500; padding: .5rem .9rem; position: relative; }
.site-navbar .nav-link::after {
content: ""; position: absolute; left: 50%; right: 50%; bottom: 4px; height: 2px;
background: var(--primary); opacity: 0; border-radius: 2px; transition: .2s ease;
}
.site-navbar .nav-link:hover, .site-navbar .nav-link.active { color: var(--primary); }
.site-navbar .nav-link:hover::after, .site-navbar .nav-link.active::after { left: 18px; right: 18px; opacity: 1; }
.navbar-search { border-radius: 20px; border-color: #e5e6eb; background: #f2f3f5; transition: .2s; }
.navbar-search:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 .15rem rgba(22,119,255,.15); }
/* 通用卡片 */
.card { border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: 0 1px 3px rgba(0,0,0,.04); overflow: hidden; }
.card-content { transition: transform .25s ease, box-shadow .25s ease; }
.card-content:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.10); }
.card-content .card-title a { color: var(--text); text-decoration: none; transition: color .2s; font-weight: bold; }
.card-content .card-title a:hover { color: var(--primary); }
.card-content img { transition: transform .5s ease; }
.card-content:hover img { transform: scale(1.05); }
/* 图文列表缩略图：小屏方形，≥md 16:9 */
.list-thumb { aspect-ratio: 16 / 9; min-height: 100px; }
@media (max-width: 767.98px) {
.list-thumb { aspect-ratio: 1 / 1; min-height: 0; }
}
/* 侧栏宽度与移动端显隐 */
.sidebar-aside { width: var(--sb-w, 340px) !important; flex: 0 0 auto; max-width: 100%; }
/* 启用吸顶跟随时，侧栏不再被 flex 拉伸到整行高度，从而留出可滚动空间 */
aside.sticky-lg-top { align-self: flex-start; }
@media (max-width: 991.98px) {
.sidebar-aside { width: 100% !important; }
.sidebar-aside:not(.show-mobile) { display: none !important; }
}
/* 文本行数截断 */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 无限加载：分页间连续 row/容器衔接处取消负 margin，行距与页内一致 */
#stream-wrap > .row + .row,
#stream-wrap > .small-list-desktop ~ .small-list-desktop > .row { margin-top: 0; }
#stream-wrap > .small-list-mobile ~ .small-list-mobile { margin-top: -1rem; }
/* 文章流 Tag 标签链接 */
.tag-link { transition: all .2s ease; }
a:hover .tag-link { color: var(--primary) !important; border-color: var(--primary) !important; background: var(--primary-soft) !important; }
/* 紧凑列表整行 hover */
.compact-row { position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.compact-row:hover {
transform: translateY(-2px);
border-color: var(--primary) !important;
box-shadow: 0 8px 24px rgba(22,119,255,.12);
background: #fff !important;
}
.compact-row .cpt-title { transition: color .18s ease; }
.compact-row:hover .cpt-title { color: var(--primary-hover); }
/* 有 NEW 角标时右列下移避免遮挡 */
.compact-row.has-new .compact-rightcol { margin-top: 26px; }
/* 小屏（<768px）紧凑排列优化：单列堆叠 */
@media (max-width: 767.98px) {
.compact-row {
flex-wrap: wrap !important;
align-items: flex-start !important;
gap: 8px !important;
padding: 12px !important;
}
.compact-row > .flex-shrink-0.d-flex.align-items-center { order: 1; flex: 0 0 auto; margin-right: auto; }
.compact-row > .flex-grow-1 { order: 2; flex: 1 1 100%; min-width: 0; }
.compact-row > .flex-grow-1 > .d-flex { flex-wrap: wrap; row-gap: 4px; }
.compact-row > .flex-grow-1 > .small { white-space: normal; }
.compact-rightcol {
order: 3 !important;
flex: 1 1 100% !important;
max-width: none !important;
margin-top: 0 !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
justify-content: flex-start !important;
}
.compact-rightcol > div.d-flex.flex-wrap.gap-1 { justify-content: flex-start !important; }
.compact-rightcol .compact-tags { order: 1; }
.compact-rightcol .compact-stats { order: 2; margin-left: auto !important; justify-content: flex-end !important; }
.compact-row.has-new .compact-rightcol { margin-top: 0 !important; }
}
/* 彩虹标题/标签调色板：每项取一种颜色轮换或随机 */
.title-c0 { color: #f5222d !important; }
.title-c1 { color: #fa541c !important; }
.title-c2 { color: #fa8c16 !important; }
.title-c3 { color: #faad14 !important; }
.title-c4 { color: #a0d911 !important; }
.title-c5 { color: #52c41a !important; }
.title-c6 { color: #13c2c2 !important; }
.title-c7 { color: #1677ff !important; }
.title-c8 { color: #2f54eb !important; }
.title-c9 { color: #722ed1 !important; }
.title-c10 { color: #eb2f96 !important; }
.title-c11 { color: #f759ab !important; }
.tag-c0 { color: #f5222d !important; border-color: rgba(245,34,45,.5) !important; background: rgba(245,34,45,.06) !important; }
.tag-c1 { color: #fa541c !important; border-color: rgba(250,84,28,.5) !important; background: rgba(250,84,28,.06) !important; }
.tag-c2 { color: #fa8c16 !important; border-color: rgba(250,140,22,.5) !important; background: rgba(250,140,22,.06) !important; }
.tag-c3 { color: #faad14 !important; border-color: rgba(250,173,20,.5) !important; background: rgba(250,173,20,.10) !important; }
.tag-c4 { color: #a0d911 !important; border-color: rgba(160,217,17,.5) !important; background: rgba(160,217,17,.06) !important; }
.tag-c5 { color: #52c41a !important; border-color: rgba(82,196,26,.5) !important; background: rgba(82,196,26,.06) !important; }
.tag-c6 { color: #13c2c2 !important; border-color: rgba(19,194,194,.5) !important; background: rgba(19,194,194,.06) !important; }
.tag-c7 { color: #1677ff !important; border-color: rgba(22,119,255,.5) !important; background: rgba(22,119,255,.06) !important; }
.tag-c8 { color: #2f54eb !important; border-color: rgba(47,84,235,.5) !important; background: rgba(47,84,235,.06) !important; }
.tag-c9 { color: #722ed1 !important; border-color: rgba(114,46,209,.5) !important; background: rgba(114,46,209,.06) !important; }
.tag-c10 { color: #eb2f96 !important; border-color: rgba(235,47,150,.5) !important; background: rgba(235,47,150,.06) !important; }
.tag-c11 { color: #f759ab !important; border-color: rgba(247,89,171,.5) !important; background: rgba(247,89,171,.06) !important; }
/* 小屏左图右文紧凑列表（后台开关 small_list） */
.small-list-desktop { display: block; }
.small-list-mobile {
display: none; background: #fff; border: 1px solid var(--card-border);
border-radius: 10px; overflow: hidden; padding: 4px 0; margin-bottom: 1rem;
}
@media (max-width: 767.98px) {
.small-list-desktop { display: none !important; }
.small-list-mobile { display: block; }
}
.mobile-list-row { position: relative; overflow: hidden; padding: 10px 14px; border-bottom: 1px solid #f0f1f3; }
.mobile-list-row:last-child { border-bottom: 0; }
.mobile-list-row .mobile-list-thumb {
width: 88px; height: 88px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
display: block; position: relative;
background: linear-gradient(135deg, var(--primary-soft), #f0f5ff);
}
.mobile-list-row .mobile-list-thumb a.ml-img { display: block; width: 100%; height: 100%; }
.mobile-list-row .mobile-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mobile-list-row .mobile-list-thumb .fa-image {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%; color: var(--text-muted); font-size: 1.2rem;
}
.nowrap { white-space: nowrap; }
/* 小屏列表行右上 NEW 丝带（更紧凑） */
.mobile-list-row .ribbon-new.ribbon-sm { width: 70px; top: 8px; right: -18px; font-size: .55rem; padding: 2px 0; }
.mobile-list-row .ribbon-new.ribbon-sm i { margin-right: 2px; }
/* 小屏列表行 hover：标题 */
.mobile-list-row .ml-title { transition: color .18s ease; }
.mobile-list-row .ml-title:hover { color: var(--primary) !important; }
/* 小屏列表行缩略图 hover */
.mobile-list-row .mobile-list-thumb {
transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.mobile-list-row .mobile-list-thumb:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(22, 119, 255, .16);
}
.mobile-list-row .mobile-list-thumb img { transition: transform .3s ease; }
.mobile-list-row .mobile-list-thumb:hover img { transform: scale(1.07); }
/* 缩略图上栏目名角标 hover 美化 */
.mobile-list-row .ml-chan-badge {
pointer-events: none;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.mobile-list-row .mobile-list-thumb:hover .ml-chan-badge {
transform: translateY(-1px) scale(1.06);
background: rgba(0, 0, 0, .82) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
backdrop-filter: blur(6px);
}
/* 紧凑列表 NEW 角标（右上角斜带，仅火焰图标） */
.compact-corner-new {
position: absolute;
top: 0; right: -23px;
width: 62px; padding: 2px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #ff7a45, #ff4d4f);
color: #fff;
transform: rotate(45deg);
z-index: 3; pointer-events: none;
box-shadow: 0 3px 10px rgba(255, 77, 79, .4);
animation: newPulse 1.8s ease-in-out infinite;
}
/* 栏目名链接 hover */
a.chan-link { display: inline-block; border-radius: .375rem; transition: transform .2s ease, box-shadow .2s ease; }
a.chan-link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(22,119,255,.18); }
a.chan-link .badge { transition: background .2s ease, color .2s ease, border-color .2s ease; }
a.chan-link:hover .badge { background: linear-gradient(135deg, var(--primary), var(--primary-hover)) !important; color: #fff !important; }
/* 文章流 NEW 角标（斜置丝带） */
.ribbon-new {
position: absolute;
top: 18px; right: -36px;
width: 120px; text-align: center;
background: linear-gradient(135deg, #ff7a45, #ff4d4f);
color: #fff; font-weight: 700; font-size: .72rem; letter-spacing: 1px;
padding: 5px 0; box-shadow: 0 3px 10px rgba(255, 77, 79, .4);
transform: rotate(45deg); z-index: 2; pointer-events: none;
animation: newPulse 1.8s ease-in-out infinite;
}
@keyframes newPulse {
0%, 100% { box-shadow: 0 3px 10px rgba(255, 77, 79, .4); }
50% { box-shadow: 0 5px 18px rgba(255, 77, 79, .6); }
}
.ribbon-new-left { right: auto; left: -36px; transform: rotate(-45deg); }
/* 图文列表（list_left/right）大屏 NEW 丝带：更小更窄 */
.ribbon-new.ribbon-sm { width: 92px; top: 16px; right: -30px; font-size: .64rem; letter-spacing: .5px; padding: 4px 0; }
.ribbon-new.ribbon-sm.ribbon-new-left { left: -30px; right: auto; }
/* 小屏：NEW 丝带缩小变窄（含 list 专用 ribbon-sm） */
@media (max-width: 767.98px) {
.ribbon-new.ribbon-sm, .ribbon-new { width: 78px; top: 12px; right: -22px; font-size: .58rem; letter-spacing: .5px; padding: 3px 0; }
.ribbon-new.ribbon-sm.ribbon-new-left, .ribbon-new-left { left: -22px; right: auto; }
}
/* 精选组合：右侧 4 小卡 */
.feat-smalls { height: 360px; display: flex; flex-direction: column; gap: 12px; }
.feat-small {
flex: 1; min-height: 0; display: flex; align-items: stretch; gap: 14px;
padding: 5px 14px; background: #fff; border: 1px solid var(--card-border);
border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feat-small:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.feat-small-thumb {
width: 108px; flex-shrink: 0; border-radius: 8px; overflow: hidden; position: relative;
background: linear-gradient(135deg, var(--primary-soft), #f0f5ff);
}
.feat-small-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.feat-small:hover .feat-small-thumb img { transform: scale(1.06); }
.feat-small-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.feat-small-title {
font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--text); margin-bottom: 6px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feat-small:hover .feat-small-title { color: var(--primary); }
.feat-small-meta { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; }
.feat-small-meta i { font-size: 11px; }
.feat-small-meta .badge { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.feat-small-num {
width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
font-weight: 700; font-size: 13px; color: #fff;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--primary), var(--primary-hover));
box-shadow: 0 2px 6px rgba(22,119,255,.28);
position: relative; align-self: center;
}
.feat-small-num::after {
content: ""; position: absolute; inset: 2px; border-radius: 50%;
border: 1px solid rgba(255,255,255,.5);
}
.feat-small:hover .feat-small-num { transform: scale(1.06); }
@media (max-width: 991.98px) {
.feat-smalls { height: auto; }
.feat-small { min-height: 84px; }
.feat-small-thumb { width: 84px; }
}
.list-group-item { transition: background .2s; }
.list-group-item:hover { background: var(--primary-soft); }
/* 侧栏卡片头部色条 */
.card-header.fw-bold { position: relative; }
.card-header.fw-bold::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 4px; height: 16px; border-radius: 2px; background: var(--primary);
}
.rank-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 5px; font-size: 12px; font-weight: 700;
background: #f2f3f5; color: #86909c; flex-shrink: 0;
}
.rank-badge.rank-top { background: linear-gradient(135deg, #ff7a45, #f5222d); color: #fff; box-shadow: 0 2px 6px rgba(245,34,45,.3); }
.list-group-item a:hover { color: var(--primary); }
/* 侧栏文章目录（TOC） */
.toc-nav { max-height: 62vh; overflow-y: auto; padding-right: 2px; }
.toc-nav::-webkit-scrollbar { width: 4px; }
.toc-nav::-webkit-scrollbar-thumb { background: #dfe3e8; border-radius: 4px; }
.toc-list { list-style: none; margin: 0; padding: 0; position: relative; }
.toc-list::before {
content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
width: 2px; border-radius: 2px; background: #eef0f3;
}
.toc-link {
position: relative; display: flex; align-items: flex-start; gap: 8px;
padding: 6px 6px 6px 0; border-radius: 6px; color: #4e5969; text-decoration: none;
font-size: 13px; line-height: 1.5;
transition: color .18s ease, background .18s ease;
}
.toc-link:hover { color: var(--primary); background: #f5f8ff; }
.toc-dot {
flex: 0 0 auto; box-sizing: border-box; z-index: 1;
width: 12px; height: 12px; margin-top: 5px;
border-radius: 50%; background: #fff; border: 2px solid #d6dae0;
transition: all .18s ease;
}
.toc-text { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.toc-item.toc-lv3 .toc-link { font-size: 12.5px; color: #86909c; }
.toc-item.toc-lv3 .toc-dot { width: 8px; height: 8px; margin-top: 7px; margin-left: 2px; }
.toc-item.toc-lv3 .toc-text { padding-left: 12px; }
.toc-link.active { color: var(--primary); font-weight: 600; background: #f0f6ff; }
.toc-link.active .toc-dot {
border-color: var(--primary); background: var(--primary);
box-shadow: 0 0 0 3px rgba(22,119,255,.15);
}
/* 锚点跳转预留吸顶导航高度 */
.content-body h2, .content-body h3 { scroll-margin-top: 90px; }
.footer {
background: linear-gradient(180deg, #ffffff, #f3f6fb);
border-top: 1px solid var(--card-border); padding: 34px 0; margin-top: 30px; color: var(--text-muted);
}
.footer a { color: var(--text-muted); text-decoration: none; }
.footer a:hover { color: var(--primary); }
/* 按钮 */
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-hover));
border: 0; border-radius: 10px; box-shadow: 0 4px 12px rgba(22,119,255,.25); transition: .2s;
}
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 6px 16px rgba(22,119,255,.35); transform: translateY(-1px); }
.btn-outline-primary { border-radius: 10px; }
.badge { font-weight: 600; }
/* 正文排版 */
.article-body { line-height: 1.9; font-size: 16px; color: #2b2f36; }
/* 标题用 em：随后台配置的正文基准字号等比缩放，避免字号调大后标题反而比正文小 */
.article-body h2 { font-size: 1.3em; font-weight: 700; margin: 28px 0 14px; padding-left: 12px; border-left: 4px solid var(--primary); }
.article-body h3 { font-size: 1.1em; font-weight: 700; margin: 22px 0 12px; }
.article-body p { margin-bottom: 16px; }
.article-body img { max-width: 100%; border-radius: 10px; margin: 12px 0; }
.article-body a { color: var(--primary); }
.article-body blockquote {
background: #f0f6ff; border-left: 4px solid var(--primary); border-radius: 8px;
padding: 12px 16px; color: #4e5969; margin: 18px 0;
}
/* 正文排版补充：列表 / 代码 / 表格 / 图片等 */
.article-body h4 { font-size: 1em; font-weight: 700; margin: 18px 0 10px; }
.article-body h5, .article-body h6 { font-size: .95em; font-weight: 700; margin: 16px 0 8px; }
.article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 1.6em; }
.article-body li { margin-bottom: 6px; }
.article-body ul > li { list-style: none; position: relative; }
.article-body ul > li::before {
content: ""; position: absolute; left: -1em; top: .72em;
width: 6px; height: 6px; border-radius: 50%; background: var(--primary); opacity: .65;
}
.article-body ol > li::marker { color: var(--primary); font-weight: 700; }
.article-body strong { font-weight: 700; color: #1d2129; }
.article-body a { text-decoration: none; border-bottom: 1px dashed rgba(22,119,255,.45); }
.article-body a:hover { border-bottom-style: solid; }
.article-body code {
background: #f2f3f5; color: #d93025; padding: .15em .4em;
border-radius: 5px; font-size: .9em;
}
.article-body pre {
background: #1f2430; color: #e6e8ee; border-radius: 10px; padding: 14px 16px;
overflow-x: auto; margin: 18px 0; font-size: .88em; line-height: 1.7;
}
.article-body pre code { background: none; color: inherit; padding: 0; font-size: 1em; }
.article-body table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .92em; }
.article-body th, .article-body td { border: 1px solid #e5e6eb; padding: 8px 12px; }
.article-body th { background: #f7f8fa; font-weight: 700; }
.article-body hr { border: 0; border-top: 1px dashed #e5e6eb; margin: 24px 0; }
.article-body img { display: block; margin: 14px auto; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.article-body figure { margin: 18px 0; text-align: center; }
.article-body figcaption { font-size: .85em; color: #86909c; margin-top: 6px; }
/* ===== 详情页主内容美化 ===== */
.article-title { font-size: 26px; font-weight: 800; line-height: 1.45; letter-spacing: .2px; margin-bottom: 16px; }
@media (max-width: 575.98px) { .article-title { font-size: 21px; } }
/* 标题前 Flag 徽章（置顶/热门/推荐） */
.article-flag-badges {
display: inline-block; margin-right: 6px;
vertical-align: middle; transform: translateY(-2px);
white-space: nowrap; font-size: 0;
}
.article-flag-badges .badge {
font-weight: 600; font-size: 11.5px; padding: .45em .8em;
border-radius: 999px; letter-spacing: .5px; margin-right: 5px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}
.article-flag-badges .badge:last-child { margin-right: 0; }
.article-flag-badges .bg-danger-subtle {
background: linear-gradient(135deg, #fff1f0, #ffe0de) !important;
color: #e5484d !important; border: 1px solid #ffd2cf;
}
.article-flag-badges .bg-warning-subtle {
background: linear-gradient(135deg, #fff7e8, #ffedd0) !important;
color: #d97706 !important; border: 1px solid #ffe3ad;
}
.article-flag-badges .bg-primary-subtle {
background: linear-gradient(135deg, #eaf3ff, #ddeaff) !important;
color: var(--primary) !important; border: 1px solid #c7ddff;
}
/* 详情页 NEW 丝带宿主（卡片右上角斜置丝带） */
.article-card { position: relative; overflow: hidden; }
.ribbon-new.detail-ribbon { top: 8px; right: -30px; width: 100px; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: #86909c; font-size: 13px; }
.article-meta i { opacity: .8; }
/* 元信息行：栏目链接做成柔和胶囊 */
.article-meta .meta-info > a {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 12px; border-radius: 999px;
background: var(--primary-soft, #eaf3ff); color: var(--primary);
font-weight: 500; text-decoration: none; transition: all .18s ease;
}
.article-meta .meta-info > a:hover {
background: var(--primary); color: #fff;
transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22, 119, 255, .18);
}
.article-meta .meta-info > a i { opacity: .9; }
/* 元信息行左右布局：左侧信息 / 右侧操作按钮 */
.article-meta-bar { row-gap: 10px; }
.article-meta-bar .meta-info { gap: 8px 16px; }
/* 资源下载锚链接 */
#resource-deliver { scroll-margin-top: 90px; }
/* 点赞 / 收藏 */
.article-action { border-radius: 999px !important; padding-left: 18px; padding-right: 18px; transition: all .18s ease; }
.article-action:hover { transform: translateY(-1px); }
.article-like.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.article-favorite.active { background: #f59e0b; border-color: #f59e0b; color: #fff; }
/* 摘要 */
.article-summary {
position: relative; background: linear-gradient(180deg, #f8faff, #f1f7ff);
border: 1px solid #e3ecfd; border-left: 4px solid var(--primary);
border-radius: 10px; padding: 12px 16px 12px 42px; margin-bottom: 22px;
color: #5a6472; font-size: 14px; line-height: 1.8;
}
.article-summary-icon { position: absolute; left: 16px; top: 14px; color: var(--primary); opacity: .5; }
/* 标签 / 分类 */
.article-tag-link, .article-cat-link {
display: inline-block; padding: .32em .85em; margin: 0 .4rem .4rem 0;
border-radius: 999px; font-size: 12.5px; text-decoration: none; transition: all .18s ease;
}
.article-tag-link { background: var(--primary-soft, #eaf3ff); color: var(--primary); }
.article-tag-link:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }
.article-cat-link { background: #fff; color: #4e5969; border: 1px solid #e5e6eb; }
.article-cat-link:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.article-tax-label { color: #86909c; font-size: 13px; }
/* 上一篇 / 下一篇 */
.article-nav-link {
display: block; height: 100%; padding: 12px 16px; border-radius: 10px;
background: #fff; border: 1px solid var(--card-border); color: #4e5969;
text-decoration: none; transition: all .2s ease;
}
.article-nav-link:hover {
border-color: var(--primary); color: var(--primary);
transform: translateY(-2px); box-shadow: 0 6px 18px rgba(22,119,255,.10);
}
.article-nav-label { display: block; font-size: 12px; color: #86909c; margin-bottom: 3px; }
/* 上一篇 / 下一篇：始终左右两列，响应式外边距 */
.article-nav-row { margin-top: 16px; }
@media (max-width: 575.98px) {
.article-nav-row { margin-top: 16px; }
.article-nav-link { padding: 10px 12px; border-radius: 8px; }
.article-nav-label { font-size: 11px; margin-bottom: 2px; }
}
/* 相关推荐（左图右文卡片） */
.related-item {
border: 1px solid var(--card-border); border-radius: 10px; padding: 10px;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.related-item:hover {
border-color: var(--primary); transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(22, 119, 255, .10);
}
.related-thumb { width: 108px; height: 76px; border-radius: 8px; overflow: hidden; background: #f2f3f5; }
.related-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.related-item:hover .related-thumb img { transform: scale(1.06); }
.related-thumb-ph {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
color: #c9cdd4; font-size: 20px; background: linear-gradient(135deg, #f7f8fa, #eef1f5);
}
.related-title {
font-size: 14px; font-weight: 600; line-height: 1.5; color: #1d2129;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
transition: color .18s ease;
}
.related-item:hover .related-title { color: var(--primary); }
.related-meta { margin-top: 6px; font-size: 12px; color: #86909c; display: flex; align-items: center; gap: 12px; }
.related-meta i { opacity: .8; }
@media (max-width: 575.98px) {
.related-thumb { width: 92px; height: 66px; }
.related-title { font-size: 13px; }
}
/* ===== 评论区 ===== */
.comment-count-badge {
display: inline-block; background: var(--primary-soft, #eaf3ff); color: var(--primary);
border-radius: 999px; font-size: 12px; padding: 1px 10px; font-weight: 600; vertical-align: 2px;
}
.comment-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid #eef1f5; }
.comment-avatar-ph {
width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #eaf3ff, #d8e8ff); color: var(--primary); font-size: 14px;
}
.comment-item + .comment-item { margin-top: 18px; padding-top: 18px; border-top: 1px solid #f2f3f5; }
.comment-bubble {
background: #f7f8fa; border-radius: 4px 14px 14px 14px;
padding: 10px 14px; transition: background .18s ease;
}
.comment-item:hover .comment-bubble { background: #f2f6fd; }
.comment-name { font-weight: 600; font-size: 13px; color: #1d2129; }
.comment-time { font-size: 12px; color: #86909c; }
.comment-content { font-size: 14px; line-height: 1.7; color: #333; word-break: break-word; }
.comment-actions { display: flex; align-items: center; gap: 16px; margin-top: 6px; padding-left: 4px; font-size: 12.5px; }
.comment-actions a { color: #86909c; text-decoration: none; transition: color .18s ease, transform .18s ease; }
.comment-actions a:hover { color: var(--primary); transform: translateY(-1px); }
.comment-actions a.text-danger { color: #e5484d; }
.comment-actions a.text-danger:hover { color: #e5484d; }
.comment-reply-disabled { color: #c9cdd4; cursor: not-allowed; }
.comment-replies {
margin-top: 10px; padding-left: 12px; border-left: 2px solid #e5e6eb;
display: flex; flex-direction: column; gap: 8px;
}
.comment-reply { background: #f7f8fa; border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; align-items: flex-start; }
.comment-reply-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid #eef1f5; }
.comment-reply-avatar-ph { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eaf3ff, #d8e8ff); color: var(--primary); font-size: 12px; }
.comment-reply-body { flex: 1; min-width: 0; }
.comment-form textarea.comment-input {
border-radius: 12px; border: 1px solid #e5e6eb; resize: vertical;
transition: border-color .18s ease, box-shadow .18s ease;
}
.comment-form textarea.comment-input:focus {
border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22, 119, 255, .08);
}
.comment-submit { border-radius: 999px; padding-left: 20px; padding-right: 20px; }
.comment-login-tip {
background: #f7f8fa; border-radius: 10px; padding: 14px; color: #86909c;
}
.comment-login-tip a { color: var(--primary); }
.comment-empty i { font-size: 34px; color: #e5e6eb; }
/* ===== 会员中心 ===== */
.member-card-head { height: 74px; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); }
.member-avatar-wrap { margin-top: -37px; }
.member-avatar { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 3px 12px rgba(0,0,0,.12); display: inline-flex; }
.member-avatar-ph { background: linear-gradient(135deg, var(--primary-soft), #d8e8ff); color: var(--primary); align-items: center; justify-content: center; font-size: 26px; }
.member-avatar-lg { width: 64px; height: 64px; font-size: 22px; }
.member-badge-vip { background: linear-gradient(135deg, #f7b500, #f59e0b); color: #fff; }
.member-stats { background: #f7f8fa; border-radius: 10px; padding: 10px 0; }
.member-stat-num { font-size: 17px; font-weight: 700; line-height: 1.2; }
.member-stat-label { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.member-menu .list-group-item { font-size: 14px; color: #4e5969; border-color: #f2f3f5; padding: .65rem 1.1rem; transition: all .15s ease; }
.member-menu .list-group-item:hover { background: var(--primary-soft); color: var(--primary); padding-left: 1.35rem; }
.member-menu .list-group-item.active { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; border-color: transparent; }
.member-menu .member-menu-icon { width: 22px; text-align: center; margin-right: 10px; font-size: 13px; }
.member-stat-card { transition: transform .2s ease, box-shadow .2s ease; }
.member-stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.08) !important; }
.member-stat-icon {
width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
/* 每日签到卡片：暖色渐变 + 虚线描边，与普通卡片区分 */
.member-signin-card { background: linear-gradient(135deg, #fff8e9, #fff); border: 1px dashed #ffd98a !important; }
.member-signin-card .btn-warning { font-weight: 600; }
/* 微信扫码二维码容器（登录页与会员中心「微信绑定」共用） */
.wx-qr-box {
width: 190px; height: 190px; margin: 0 auto; padding: 8px;
display: flex; align-items: center; justify-content: center;
background: #fff; border: 1px solid #e5e6eb; border-radius: 14px;
}
.wx-qr-box img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wx-qr-ph { color: #b7bec9; text-align: center; font-size: .8rem; }
.wx-qr-ph i { display: block; font-size: 2.2rem; margin-bottom: .5rem; }
.member-line-item { padding: 10px 16px; border-bottom: 1px solid #f7f8fa; transition: background .15s ease; }
.member-line-item:last-child { border-bottom: none; }
a.member-line-item:hover { background: #f7faff; }
.member-mini-thumb { width: 74px; height: 52px; border-radius: 8px; overflow: hidden; background: #f2f3f5; }
.member-mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.member-mini-thumb-ph {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
color: #c9cdd4; background: linear-gradient(135deg, #f7f8fa, #eef1f5);
}
.member-empty { text-align: center; padding: 26px 0; }
.member-empty i { font-size: 36px; color: #e5e6eb; }
/* 工单对话：客服气泡（右侧、主题色） */
.member-ticket-avatar {
width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--primary), var(--primary-hover));
color: #fff; font-size: 14px;
}
.member-bubble-admin { background: var(--primary-soft); border-radius: 14px 4px 14px 14px; }
/* 移动端：左侧栏顶部化，菜单变胶囊标签组（自动换行，无需滚动） */
@media (max-width: 991.98px) {
.member-menu { padding: 10px; }
.member-menu .list-group { flex-direction: row !important; flex-wrap: wrap; gap: 8px; }
.member-menu .list-group-item {
width: auto; margin: 0 !important; white-space: nowrap;
border: 1px solid var(--card-border) !important;
border-radius: 999px !important;
background: #f7f8fa; color: #4e5969;
padding: .4rem .85rem !important; font-size: 13px;
transition: all .15s ease;
}
.member-menu .list-group-item:hover {
background: var(--primary-soft); color: var(--primary);
padding-left: .85rem !important; transform: none;
border-color: var(--primary) !important;
}
.member-menu .list-group-item.active {
background: linear-gradient(135deg, var(--primary), var(--primary-hover)) !important;
color: #fff !important; border-color: transparent !important;
box-shadow: 0 3px 10px rgba(22, 119, 255, .25);
}
.member-menu .list-group-item .member-menu-icon { margin-right: 6px; font-size: 12px; }
.member-menu .list-group-item.text-danger {
background: #fff5f5; color: #e5484d; border-color: #ffdbdb !important;
}
}
@media (max-width: 575.98px) {
.member-menu { padding: 8px; }
.member-menu .list-group { gap: 6px; }
.member-menu .list-group-item { padding: .32rem .7rem !important; font-size: 12.5px; }
}
/* 相关推荐条目 */
.related-item { transition: background .18s ease; }
.related-item:hover { background: #f7faff; }
.related-item a:hover { color: var(--primary) !important; }
/* 会员中心：纯 CSS 下拉（避免 Bootstrap dropdown 实例化触发的 Popper 报错） */
.site-navbar .nav-item.dropdown { position: relative; }
.site-navbar .dropdown-menu {
display: block; opacity: 0; visibility: hidden; transform: translateY(6px);
transition: all .2s ease; border: 1px solid var(--card-border); border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,.08); padding: .4rem;
}
.site-navbar .nav-item.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.site-navbar .dropdown-menu .dropdown-item { padding: .45rem 1.1rem; font-size: 14px; border-radius: 8px; margin: 0 .3rem; width: auto; }
.site-navbar .dropdown-menu .dropdown-item:hover { background: var(--primary-soft); color: var(--primary); }
.site-navbar .nav-item.dropdown > .dropdown-toggle::after { margin-left: .4em; vertical-align: middle; }
/* 导航栏用户区：头像 + 用户名 */
.site-navbar .nav-link.nav-user {
display: inline-flex; align-items: center; gap: 8px;
padding: .25rem .8rem .25rem .3rem; border-radius: 999px;
transition: background .18s ease;
}
.site-navbar .nav-link.nav-user::after { display: none; }
.site-navbar .nav-link.nav-user:hover { background: var(--primary-soft); }
.nav-user-avatar {
width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
border: 2px solid #fff; box-shadow: 0 0 0 2px var(--primary-soft);
display: inline-flex; flex-shrink: 0;
}
.nav-user-avatar-ph {
align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--primary-soft), #d8e8ff);
color: var(--primary); font-size: 13px;
}
.nav-user-name {
font-weight: 600; font-size: 14px; color: var(--text);
max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-user-caret { font-size: 11px; color: var(--text-muted); transition: transform .2s ease; }
.site-navbar .nav-item.dropdown:hover .nav-user-caret { transform: rotate(180deg); color: var(--primary); }
.nav-user-vip {
display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
background: linear-gradient(135deg, #f7b500, #f59e0b); color: #fff;
font-size: 10px; font-weight: 700; letter-spacing: .5px;
padding: 2px 7px; border-radius: 999px;
box-shadow: 0 2px 6px rgba(245, 158, 11, .35);
}
.nav-user-vip i { font-size: 9px; }
/* 移动端抽屉式菜单头（仅在抽屉态显示） */
.site-nav-drawer-head { display: none; }
.nav-backdrop { display: none; }
/* 移动端：左滑抽屉（占屏一半，点外部关闭） */
@media (max-width: 991.98px) {
.site-nav-drawer-head {
display: flex; font-size: 16px; color: var(--text);
padding: .5rem .25rem .9rem; margin-bottom: .25rem;
border-bottom: 1px solid var(--card-border);
}
.site-nav-drawer-head .navbar-brand { font-size: 18px; margin: 0; color: var(--primary); }
.site-nav-drawer-head .site-logo { height: 26px; }
.site-nav-drawer-head .btn-light { background: #f2f3f5; border: none; width: 34px; height: 34px; }
#navMenu.site-nav-drawer {
position: fixed; top: 0; left: 0; bottom: 0;
width: 50vw; max-width: 360px;
background: #fff; z-index: 1045;
box-shadow: 6px 0 28px rgba(0, 0, 0, .16);
transform: translateX(-100%);
transition: transform .3s cubic-bezier(.4, 0, .2, 1);
display: block !important; overflow-y: auto;
padding: .5rem 1.1rem 1.5rem;
}
#navMenu.site-nav-drawer.open { transform: translateX(0); }
.nav-backdrop {
position: fixed; inset: 0; display: block;
background: rgba(0, 0, 0, .38);
opacity: 0; visibility: hidden;
transition: opacity .3s ease, visibility .3s ease;
z-index: 1040;
}
.nav-backdrop.open { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }
/* 抽屉内条目美化 */
#navMenu .navbar-nav { flex-direction: column; width: 100%; }
#navMenu .navbar-nav.me-auto { margin-right: 0 !important; }
#navMenu .nav-link {
padding: .8rem 1rem; border-radius: 10px; font-size: 15px; font-weight: 600;
color: var(--text);
}
#navMenu .nav-link::after { display: none; }
#navMenu .nav-link:hover, #navMenu .nav-link.active {
background: var(--primary-soft); color: var(--primary);
}
#navMenu form.d-flex { width: 100%; margin: 1rem 0 .5rem; }
#navMenu .navbar-search { width: 100%; }
#navMenu .navbar-nav.ms-2 {
margin-left: 0 !important; margin-top: .5rem;
border-top: 1px solid var(--card-border); padding-top: .5rem;
}
#navMenu .navbar-nav.ms-2 .nav-link { font-size: 14px; font-weight: 500; }
}
/* ===== 弹窗公告（_popup_announcement.html） ===== */
.popup-ann{position:fixed;inset:0;z-index:2000;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;}
.popup-ann[hidden]{display:none;}
.popup-ann__mask{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px);
opacity:0;transition:opacity .3s ease;}
.popup-ann.is-visible .popup-ann__mask{opacity:1;}
/* 对话框（居中 / 浮窗 / 全屏共用） */
.popup-ann__dialog{position:absolute;left:50%;top:50%;max-width:520px;width:92%;
background:#fff;border-radius:16px;padding:30px 28px 28px;border:1px solid rgba(0,0,0,.06);
box-shadow:0 24px 60px rgba(15,23,42,.20),0 4px 12px rgba(15,23,42,.10);
transform:translate(-50%,-46%) scale(.94);opacity:0;
transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1);}
.popup-ann.is-visible .popup-ann__dialog{opacity:1;transform:translate(-50%,-50%) scale(1);}
/* 居中弹窗：顶部渐变装饰条 + 标题左侧 accent */
.popup-ann--center .popup-ann__dialog::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
border-radius:16px 16px 0 0;background:linear-gradient(90deg,#1677ff,#4096ff);}
.popup-ann--center .popup-ann__dialog{padding-top:34px;}
.popup-ann__dialog .popup-ann__title{margin:0 0 14px;font-size:1.2rem;font-weight:700;color:#1d2129;
display:flex;align-items:center;gap:9px;}
.popup-ann__dialog .popup-ann__title::before{content:"";width:4px;height:18px;border-radius:4px;
background:linear-gradient(180deg,#1677ff,#4096ff);display:inline-block;flex:0 0 auto;}
.popup-ann__body{font-size:.95rem;line-height:1.75;color:#4e5969;word-break:break-word;}
.popup-ann__body img{max-width:100%;height:auto;border-radius:10px;margin:.35rem 0;}
.popup-ann__body a:not(.btn){color:#1677ff;text-decoration:none;}
.popup-ann__body a:not(.btn):hover{text-decoration:underline;}
/* 圆形关闭按钮 */
.popup-ann__close{position:absolute;top:14px;right:14px;width:30px;height:30px;border:none;
border-radius:50%;background:rgba(0,0,0,.04);font-size:20px;line-height:30px;text-align:center;
color:#86909c;cursor:pointer;z-index:2;padding:0;
transition:background .2s,color .2s,transform .2s;}
.popup-ann__close:hover{background:rgba(0,0,0,.08);color:#1d2129;transform:rotate(90deg);}
/* 右下角浮窗 */
.popup-ann--toast{pointer-events:none;}
.popup-ann--toast .popup-ann__mask{display:none;}
.popup-ann--toast .popup-ann__dialog{left:auto;right:22px;top:auto;bottom:22px;max-width:360px;
border-left:4px solid #1677ff;transform:translateY(30px) scale(.98);pointer-events:auto;}
.popup-ann--toast.is-visible .popup-ann__dialog{transform:translateY(0) scale(1);}
/* 顶部通知条：单行胶囊式通知栏 */
.popup-ann--top{pointer-events:none;}
.popup-ann--top .popup-ann__mask{display:none;}
.popup-ann--top .popup-ann__bar{position:fixed;top:0;left:0;right:0;z-index:2001;pointer-events:auto;
display:flex;align-items:center;gap:14px;padding:10px 20px;color:#fff;min-height:48px;box-sizing:border-box;
background:linear-gradient(90deg,#1677ff,#4096ff);box-shadow:0 6px 20px rgba(22,119,255,.30);
transform:translateY(-110%);transition:transform .35s cubic-bezier(.22,1,.36,1);}
.popup-ann--top.is-visible .popup-ann__bar{transform:translateY(0);}
.popup-ann--top .popup-ann__bar-inner{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;min-width:0;flex:1 1 auto;}
.popup-ann--top .popup-ann__title{margin:0;color:#fff;font-size:.82rem;font-weight:600;white-space:nowrap;
background:rgba(255,255,255,.2);padding:3px 10px;border-radius:20px;}
.popup-ann--top .popup-ann__body{margin:0;color:rgba(255,255,255,.95);font-size:.92rem;line-height:1.4;
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 顶部条里的富文本/HTML 强制单行内联，避免 h4/ul/p 把通知条撑开 */
.popup-ann--top .popup-ann__body *,
.popup-ann--top .popup-ann__body *::before,
.popup-ann--top .popup-ann__body *::after{display:inline !important;margin:0 !important;padding:0 !important;
float:none !important;text-align:left !important;}
.popup-ann--top .popup-ann__body br{display:none !important;}
.popup-ann--top .popup-ann__body ul,
.popup-ann--top .popup-ann__body ol{list-style:none !important;}
.popup-ann--top .popup-ann__body li:not(:last-child)::after{content:" · ";opacity:.7;margin:0 6px;}
.popup-ann--top .popup-ann__body .btn{display:inline !important;background:transparent !important;border:none !important;
padding:0 !important;font-size:inherit !important;color:#fff !important;text-decoration:underline !important;}
.popup-ann--top .popup-ann__body a{color:#fff;text-decoration:underline;}
.popup-ann--top .popup-ann__close{position:static;color:rgba(255,255,255,.9);font-size:20px;line-height:30px;
width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);flex:0 0 auto;text-align:center;}
.popup-ann--top .popup-ann__close:hover{background:rgba(255,255,255,.32);color:#fff;transform:none;}
/* 全屏遮罩：更大、更醒目 */
.popup-ann--full .popup-ann__dialog{max-width:680px;padding:40px 36px 36px;}
.popup-ann--full .popup-ann__dialog::before{height:6px;}
.popup-ann--full .popup-ann__title{font-size:1.35rem;}
.popup-ann--full .popup-ann__body{font-size:1rem;}