/* skin-0001 「橙潮 · 文字流导航」—— 暖色密集文字网格。主题色由 --theme 注入(skin_config)。 */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --theme: #2f9df4; --bg: #4d88cb; --card: #fff; --fg: #2b2b2b; --muted: #7c8b98; --line: #d7e8f7; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* 整体暖橙底 + 顶部一抹更亮的暖光(参考站的强暖色调,原创实现,非贴图) */
body { font-family: -apple-system, "Segoe UI", "Microsoft Yahei", sans-serif; background: radial-gradient(1100px 380px at 50% -90px, #79aade, transparent 70%) no-repeat, var(--bg); color: var(--fg); line-height: 1.5; }
a { color: inherit; text-decoration: none; }

/* A 头图 */
/* .hd 是全宽外框(透出页面暖橙底);.hd-box 才是与内容同宽的头图卡片,两侧露底色 */
.hd { color: #fff; padding: 0 16px; }
.hd-box { position: relative; overflow: hidden; max-width: 1100px; min-height: 268px; margin: 0 auto; display: flex; align-items: center; background: linear-gradient(135deg, var(--theme), #1565c0); border-radius: 0; }
.hd-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.hd-mark { position: absolute; inset: 0; z-index: 1; font-size: 68px; font-weight: 900; line-height: 1.15; color: rgba(255,255,255,.1); word-break: break-all; padding: 6px; user-select: none; pointer-events: none; }
.hd-inner { position: relative; z-index: 2; width: 100%; padding: 22px 30px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hd-brand { display: flex; align-items: center; gap: 20px; }
.hd-logo { width: 104px; height: 104px; border-radius: 22px; object-fit: cover; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
/* 无 logo 时的大字徽标(站名首字),让「大 logo 位」始终成立 */
.hd-logo-ph { display: flex; align-items: center; justify-content: center; font-size: 54px; font-weight: 900; color: #fff; background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.55); box-shadow: inset 0 0 24px rgba(255,255,255,.15), 0 6px 20px rgba(0,0,0,.18); }
.hd-title { font-size: 52px; font-weight: 900; letter-spacing: 3px; text-shadow: 0 3px 10px rgba(0,0,0,.25); }
.hd-callout { margin-left: auto; background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.35); border-radius: 12px; padding: 12px 18px; }
.hd-callout-t b { background: #fff; color: var(--theme); padding: 1px 6px; border-radius: 4px; }
.hd-callout-s { margin-top: 6px; font-size: 13px; opacity: .85; }

/* B 顶部分类 tab:一比一参考(img_23)——暖橙渐变条 + 白色粗体分区名 + 当前项金黄;与内容同宽,超出左对齐换行 */
.topnav { position: sticky; top: 0; z-index: 20; padding: 0 16px; margin-top: 10px; }
.topnav-inner { max-width: 1100px; margin: 0 auto; background: linear-gradient(180deg, #55aef7, #2077d8); border-radius: 0; box-shadow: 0 3px 10px rgba(0,0,0,.15); display: flex; flex-wrap: wrap; gap: 2px 4px; padding: 6px 10px; }
.topnav a { flex: 0 0 auto; white-space: nowrap; padding: 9px 15px; font-weight: 700; font-size: 15px; color: #fff; border-radius: 8px; transition: color .12s, background .12s; }
.topnav a:hover { color: #ffe14d; background: rgba(255,255,255,.14); }
.topnav a.active { color: #ffd21f; }

/* C/D 通知条:一比一参考(img.png)——与内容同宽的奶油卡片(两侧露暖橙底);橙色圆角标签 + 红色文字/链接 */
.notice { padding: 10px 16px 0; }
.notice-inner { max-width: 1100px; margin: 0 auto; background: #eef7ff; border: 1px solid #cde5fb; border-radius: 0; box-shadow: 0 2px 8px rgba(0,0,0,.08); padding: 4px 14px; }
.notice-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 2px; font-size: 13.5px; }
.notice-row + .notice-row { border-top: 1px dashed #cde5fb; }
.notice-row > span:not(.ntag) { color: #1c5f9e; }
.notice-row a { color: #c0392b; font-weight: 700; }
.notice-row a:hover { text-decoration: underline; }
.ntag { flex: none; background: var(--theme); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 6px; }
.ntag-hot { background: #e6482e; }
/* D 特殊导航:网格铺开(每链接占一格),悬停整块变主题色且色块顶到卡片边缘(与密集网格同款交互) */
.notice-quick .notice-inner { padding: 0; border: 0; } /* 去内边距+描边:格子/悬停色块直达边缘 */
.quicknav { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 0; padding: 0; }
.quicknav a { display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 12px 6px; font-weight: 700; font-size: 14.5px; color: #c0392b; transition: background .12s, color .12s; }
.quicknav a:nth-child(2n) { color: #2d6cdf; }
.quicknav a:hover { background: var(--theme); color: #fff !important; }

/* E 横幅推广位:矩形、与内容同框(1100 对齐、直角);槽位 top/bottom/cat-<ID> 可配任意位置 */
.banner { padding: 10px 16px 0; }
.banner-inner { max-width: 1100px; margin: 0 auto; }
.banner-inner img { width: 100%; display: block; border-radius: 0; }
.content .banner { padding: 0; margin-bottom: 14px; } /* 分区间槽位:随内容流,与分区卡同宽 */

/* 主体三栏 */
.page { position: relative; }
.content { max-width: 1132px; margin: 0 auto; padding: 16px; } /* 1100 内容 + 2×16 padding:分区卡与 A/B/C/D 严格同框 */
.rail { position: fixed; top: 150px; z-index: 10; width: 96px; }
/* 紧贴 1100 内容列两侧(参考 img_5):左右栏分别挂在内容列外沿 12px 处;放不下时整栏隐藏(见媒体查询) */
.rail-l { left: calc(50% - 658px); } .rail-r { left: calc(50% + 562px); max-height: 78vh; overflow: auto; scrollbar-width: none; } /* 滚动条隐藏但可滚(Firefox) */
.rail-r::-webkit-scrollbar { display: none; width: 0; }               /* 滚动条隐藏但可滚(Chromium/WebKit) */
.rail-inner { display: flex; flex-direction: column; gap: 0; }
/* 子项无间距:相邻格负 margin 共享 1px 描边;直角与全站统一(参考 img_7 反馈) */
.rail a { display: block; text-align: center; color: #fff; font-size: 14px; padding: 13px 4px; background: rgba(0,0,0,.08); border: 1px solid rgba(255,255,255,.38); border-radius: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail a + a { margin-top: -1px; }
.rail a:hover { background: rgba(255,255,255,.2); }
.rail a.active { background: rgba(255,255,255,.28); font-weight: 800; }

/* F 分类分区 + 密集网格。scroll-margin-top 让出 sticky 顶栏高度(顶栏可能换行成多行,--nav-h 由 JS 实测注入) */
.cat { background: var(--card); border: 0; border-radius: 0; margin-bottom: 14px; overflow: hidden; scroll-margin-top: calc(var(--nav-h, 96px) + 8px); } /* 直角:与 A/B/C/D/E 统一 */
.cat-hd { font-size: 15px; font-weight: 800; color: #fff; background: linear-gradient(90deg, var(--theme), #5cb3ff); padding: 9px 14px; }
/* 白底网格:分隔线由单元格自带(右/下 1px),末行没铺满的剩余空间就是白色 */
.glinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 0; background: #fff; }
.glink { background: #fff; padding: 9px 8px; font-size: 13px; color: #333; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .12s, color .12s; }
.glink:hover { background: var(--theme); color: #fff !important; }
.glink-top { font-weight: 800; color: var(--theme); }

/* 收录徽标(推荐/hot/新…):文字格 = 名字后迷你标;图标格 = 图标右上角标 */
.gtag { display: inline-block; margin-left: 3px; padding: 0 3px; border-radius: 3px; font-size: 10px; font-style: normal; font-weight: 700; line-height: 1.5; color: #fff; vertical-align: 1px; }
.app-tag { position: absolute; top: -5px; left: 50%; margin-left: 14px; padding: 0 4px; border-radius: 6px 6px 6px 0; font-size: 10px; font-style: normal; font-weight: 700; line-height: 1.6; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); white-space: nowrap; z-index: 1; }
.app { position: relative; }
.tag-rec { background: #e6482e; } .tag-hot { background: #f39c12; } .tag-new { background: #27ae60; }
.tag-official { background: #2d6cdf; } .tag-free { background: #16a085; } .tag-vip { background: #d4a017; }
.tag-exclusive { background: #8e44ad; } .tag-original { background: #d81b60; }
.more-btn { display: block; width: calc(100% - 24px); margin: 0 12px 12px; padding: 7px; border: 1px dashed var(--line); border-radius: 6px; background: #fff; color: var(--theme); font-size: 13px; cursor: pointer; }
.more-btn:hover { background: #f0f8ff; }

/* F(图标模式):应用商店风图标网格 */
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 16px 6px; padding: 16px 12px; }
.app { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; min-width: 0; }
.app-ico { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--theme), #7cc4ff); color: #fff; font-size: 22px; font-weight: 800; box-shadow: 0 3px 8px rgba(0,0,0,.12); transition: transform .12s, box-shadow .12s; }
.app-ico img { width: 100%; height: 100%; object-fit: cover; }
.app-name { max-width: 100%; font-size: 12px; color: #444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.app:hover .app-ico { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,.2); }
.app:hover .app-name { color: var(--theme); }
@media (max-width: 600px) { .apps { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); } .app-ico { width: 48px; height: 48px; } }

/* 其它页 */
.msg { max-width: 1100px; margin: 40px auto; text-align: center; color: rgba(255,255,255,.92); }
.msg-404 { font-size: 64px; font-weight: 900; color: #fff; }
.formcard { max-width: 640px; margin: 20px auto; background: #fff; border: 0; border-radius: 0; overflow: hidden; } /* 直角统一 */
.frm { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.frm label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #666; }
.frm input, .frm select { padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.frm .hp { display: none; }
.frm button { background: var(--theme); color: #fff; border: 0; padding: 11px; border-radius: 6px; font-weight: 700; font-size: 15px; cursor: pointer; }
.tip { margin: 12px 16px 0; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
.tip-ok { background: #e7f8ec; color: #1a7f37; } .tip-err { background: #fdecec; color: #c0392b; }
.article { max-width: 820px; } .article-body { padding: 16px; line-height: 1.8; } .article-body img { max-width: 100%; } .article-back { padding: 0 16px 16px; }

/* 页脚 + 回顶 */
.ft { text-align: center; color: rgba(255,255,255,.9); font-size: 12px; padding: 24px 16px; line-height: 1.9; }
.ft a { color: #fff; }
.gotop { position: fixed; right: 16px; bottom: 20px; z-index: 30; width: 42px; height: 42px; border-radius: 50%; background: var(--theme); color: #fff; text-align: center; line-height: 42px; font-size: 20px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }

/* 汉堡 + 抽屉遮罩(桌面隐藏,移动端出) */
.hd-menu { display: none; position: fixed; top: 8px; left: 8px; z-index: 70; width: 38px; height: 38px; border: 0; border-radius: 8px; background: rgba(0,0,0,.28); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.drawer-mask { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55; }

/* 响应式:<1332(贴内容双栏放不下)收起 —— 右栏隐藏,左栏收进汉堡抽屉 */
@media (max-width: 1331px) {
  .rail-r { display: none; }
  .hd-menu { display: inline-flex; align-items: center; justify-content: center; }
  .rail-l { top: 0; left: 0; width: 200px; height: 100vh; max-height: none; z-index: 60; transform: translateX(-110%); transition: transform .25s; }
  .rail-l .rail-inner { border-radius: 0; height: 100%; padding: 56px 8px 8px; background: var(--theme); gap: 6px; }
  body.drawer-open .rail-l { transform: translateX(0); }
  body.drawer-open .drawer-mask { display: block; }
}
@media (max-width: 600px) {
  .hd { padding: 0; } .hd-box { min-height: 172px; border-radius: 0; }
  .hd-inner { padding: 20px 14px; gap: 14px; } .hd-title { font-size: 28px; } .hd-logo { width: 56px; height: 56px; border-radius: 14px; } .hd-logo-ph { font-size: 30px; }
  .hd-callout { margin-left: 0; width: 100%; }
  .glinks { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ===== skin-0002 瀑布流(F 区改造):每分类一卡,JS 最短列优先分发(CSS multicol 对
   不可拆分高卡的平衡不可控,会留空列)。无 JS 退化为单列堆叠。 ===== */
.wf { display: block; }
.wf.wf-on { display: flex; align-items: flex-start; gap: 14px; }
.wf-col { flex: 1 1 0; min-width: 0; }
.wf .cat { margin-bottom: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
/* 瀑布流中部横幅由模板切段实现(横幅在两段 .wf 之间、天然全宽) */
/* 编号列表:favicon + 名称 + 迷你徽标;编号用 CSS counter(折叠项 display:none 不计数,展开后自动续号) */
.wflist { list-style: none; counter-reset: wf; padding: 6px 10px 10px; margin: 0; }
.wf-item { counter-increment: wf; }
.wf-item a { display: flex; align-items: center; gap: 7px; padding: 6px 2px; font-size: 13.5px; color: #333; border-bottom: 1px dashed var(--line); }
.wf-item:last-child a { border-bottom: 0; }
.wf-item a::before { content: counter(wf) "."; min-width: 20px; text-align: right; color: #9aa8b5; font-size: 12.5px; flex: none; }
.wf-item a:hover { color: var(--theme); }
.wf-item a:hover .wf-name { color: var(--theme); }
.wf-ico { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex: none; }
.wf-ico-ph { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--theme), #7cc4ff); color: #fff; font-size: 11px; font-weight: 800; font-style: normal; }
.wf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wf-item .gtag { flex: none; margin-left: auto; }
/* 瀑布流里的「查看另外 N 个」按钮沿用 .more-btn;窄卡里收点边距 */
.wf .more-btn { width: calc(100% - 20px); margin: 0 10px 10px; }
/* 移动端列数由 JS 按容器宽自适应(1 列) */