/* ============================================================
   moyunet 主题补充样式（b.com 首页复刻的「动态化适配」最小集）
   主样式为照搬的 b.com main.css（未改动）；本文件只补充因接入真实数据
   而新增的元素/状态样式，b.com 静态页已存在的视觉一律不覆盖。
   ============================================================ */

/* 1) 登录态账号区（会员中心 + 退出）：访客态 .login-no 原宽 108px 仅容纳
      「登录/注册」两枚四字入口；登录态字面更长，改为内容定宽，观感一致 */
.login-no--authed { display: flex; width: auto; }
.login-no--authed a,
.login-no--authed button {
  font-size: 14px;
  padding: 0 12px;
  height: 56px;
  line-height: 56px;
  color: #555;
  background: none;
  border: 0;
  white-space: nowrap;
}
.login-no--authed a:hover,
.login-no--authed button:hover {
  line-height: 58px;
  background: #ea4c89;
  color: #fff;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

/* 移动端面板（<768px）：登出为表单按钮，观感对齐 .m-login-panel a */
@media (max-width: 767px) {
  .m-login-panel form { margin: 0; }
  .m-login-panel button {
    display: block;
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding: 0 18px;
    font-size: 15px;
    color: #555;
    text-align: left;
    border: 0;
    border-radius: 4px;
    background: none;
    cursor: pointer;
  }
  .m-login-panel button:hover { background: #fdf2f7; color: #ea4c89; line-height: 44px; }
}

/* 2) 多人状态角标：b.com 源样式仅「可加入」（绿）一态；
      满员/已完成沿用项目实时看板语义色，角标结构/尺寸/定位不变 */
.w-status--full { background: #d9534f; }
.w-status--finished { background: #6b7a8a; }

/* 3) 页脚（.bot）：b.com 原版是「固定高 40px + 上下 15px padding」的定高盒，
      在不同盒模型基线下容易出现「黑底不足、文字贴底」的观感；改为弹性布局：
      高度按内容自撑、文字垂直居中、版权与单页入口两端对齐；
      文字由 #555（在 #252525 上几乎不可辨识）提亮为 #999，hover #fff。 */
.bot .bot-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 24px;
  height: auto;
  padding: 20px 0;
  line-height: 22px;
}
.bot-copy { color: #999; }
.bot-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; }
.bot-nav a { color: #999; font-size: 13px; }
.bot-nav a:hover { color: #fff; }

/* 4) 空数据提示（列表为空时替代卡片行） */
.w-empty {
  display: block;
  width: 100%;
  padding: 30px 0;
  text-align: center;
  color: #999;
  font-size: 14px;
}

/* 5) 顶部主导航当前页高亮：与 .top a:hover 同款（#ea4c89 底 + 白字），静态停留不位移 */
.nav a.is-on,
.nav a.is-on:hover { background: #ea4c89; color: #fff; }

/* 6) 频道页（列表 / 每日挑战 / 排行榜 / Tags 聚合）通用小件：
      b.com 首页无对应元素，按其既有色板补充（强调粉 #ea4c89 / 正文灰 #999 / 边框 #eee），
      与首页区块标题、卡片同体系。 */
/* 6.1 频道副标题（每日挑战等）：居中灰字 */
.page-sub { text-align: center; color: #999; font-size: 14px; margin: -6px 0 24px; }
/* 6.2 强调说明（奖励等）：居中粉字 */
.page-note { text-align: center; color: #ea4c89; font-size: 14px; margin: 0 0 18px; }
/* 6.3 单卡居中容器（每日挑战）：卡片行居中 */
.w-list--center { display: flex; flex-wrap: wrap; justify-content: center; }
/* 6.4 行动按钮（.but 为 b.com 原生按钮类，此处仅定尺寸与居中） */
.daily-cta { width: 160px; height: 40px; line-height: 40px; margin: 0 auto 50px; }
/* 6.5 分页（b.com .page-main 原生样式；补 禁用/省略 两态） */
.page-main .page-dis,
.page-main .page-gap {
  font-size: 16px;
  color: #ccc;
  line-height: 36px;
  height: 36px;
  border-radius: 5px;
  text-align: center;
  display: block;
  float: left;
  padding: 0 15px;
  margin-right: 2px;
  background: #f4f4f4;
}
/* 6.6 Tags 词表（胶囊：白底灰字，hover 粉色点缀，与全站强调色一致） */
.kw-list {
  list-style: none;
  margin: 0 auto;
  padding: 0 0 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 1000px;
}
.kw-list a {
  display: block;
  padding: 6px 14px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
  color: #888;
  font-size: 13px;
}
.kw-list a:hover { color: #ea4c89; border-color: #ea4c89; background: #fdf2f7; }
.kw-count { color: #bbb; margin-left: 6px; font-size: 12px; }
.kw-list a:hover .kw-count { color: #ea4c89; }

/* 7) 页脚吸底（频道页内容不足一屏时）：主题自带视图的页面 body 采用纵向弹性流，
      页脚以 margin-top:auto 自动吸底，避免页脚悬在半空、下方大片留白；
      长页面（首页）内容超过一屏时 free space 为 0，行为与普通块流完全一致。 */
body.moyunet-native { display: flex; flex-direction: column; min-height: 100vh; }
body.moyunet-native .bot { margin-top: auto; }

/* 8) 多人卡进度环（附图四层结构，与 default 主题 pg 环同一设计）：黑半透明底（.w-progress 容器）
      → 外侧细白环（.w-pie__path）→ 绿色粗弧（.w-pie__segment，stroke-dasharray=完成%）→ 中心白字。
      几何（58.43px 盘，较此前整体放大 5%；画布外扩 4.428px，viewBox 47.55 → 缩放 1.4151 ≡ 原 1.3477×1.05）：
      绿弧恒用 r=15.9155（周长恰 100 个 viewBox 单位，dasharray 数值即百分比），映射后中心半径 ≈22.5px、线宽 ≈4.9px；
      白环半径 ≈27.3px、线宽 ≈1.34px——两环间隔 ≈1.65px 互不接触，白环外沿 ≈27.9px 仍在盘内（半径 29.2px）
      且不越画布（半宽 33.6px）；中心百分比文字样式与居中保持不变（不随环放大）；无轮询，刷新页面更新。 */
.w-progress { border: 0; width: 58.43px; height: 58.43px; }
.w-pie { position: absolute; inset: -4.428px; transform: rotate(-90deg); }
.w-pie__path { fill: none; stroke: #fff; stroke-width: 0.94; }
.w-pie__segment { fill: none; stroke: #80c61f; stroke-width: 3.44; }

/* 9) 页头/页脚 chrome 基准字号：回退 default 视图的页面（会员中心/登录注册等）会叠加
      default 主题样式（body 基准字号与 main.css 不同），chrome 内以「继承/em」取值的
      文字会随之变大（实测导航栏与页脚 14px→16px）；把 chrome 根字号显式固定为
      main.css 的 14px（= 首页视觉），保证全站头尾逐项一致。 */
.top,
.bot { font-size: 14px; }

/* 8) 每日挑战页（方案A 2026-09-19）：挑战图展示体量放大到缩略图原尺寸 480×360
      （图片本身 4:3，宽 100% + 高 auto 即保持等比，不变形不裁切）；
      仅覆盖本页容器 .w-list.daily-hero 内的卡片，首页/列表卡片不受影响。
      height 用 !important 是因为 main.css 的 body.bg-com .w-list .w-item 特异性更高。 */
.w-list.daily-hero .w-item { width: 480px; max-width: 100%; height: auto !important; }
.w-list.daily-hero .w-img { width: 100%; height: auto; }
.w-list.daily-hero .w-img img { width: 100%; height: auto; display: block; }
.w-list.daily-hero .w-img a.w-img-link { width: 100%; height: auto; }

/* 每日挑战图左右图文广告位（2026-09-22）的定位容器：全宽块，广告 absolute 锚在
   挑战图两侧（样式见 partials/ad-slot 的 daily-side-*）；无广告时零输出、布局无感 */
.daily-hero-pos { position: relative; }

/* 挑战排行三列（近日 / 本周 / 本月）：等宽并排，窄屏纵向堆叠；
   卡片观感与首页 .w-item 同族（白卡 + 6px 圆角 + 浅分隔线），前 3 名奖牌色区分；
   名称 ellipsis + min-width:0 防止长名字撑破栅格。 */
.daily-boards-section { padding: 10px 0 50px; }
.daily-boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.daily-board { background: #fff; border: 1px solid rgba(0, 0, 0, .05); border-radius: 6px; padding: 12px 14px; min-width: 0; }
.daily-board__title { font-size: 15px; font-weight: 700; margin: 0 0 10px; text-align: center; }
.daily-board__list { list-style: none; margin: 0; padding: 0; }
.daily-board__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, .06); min-width: 0; }
.daily-board__row:last-child { border-bottom: 0; }
.daily-board__rank { flex: 0 0 24px; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; background: #e9edf2; color: #5b6b7c; font-size: 12px; }
.daily-board__rank--1 { background: #f5c542; color: #7a5b00; }
.daily-board__rank--2 { background: #d7dde5; color: #56626e; }
.daily-board__rank--3 { background: #e8c3a2; color: #7a4a1e; }
.daily-board__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daily-board__time { flex: 0 0 auto; font-weight: 700; }
.daily-board__empty { margin: 8px 0; font-size: 13px; color: #98a3ae; text-align: center; }

/* 排行区块标题（2026-09-22）：此 .sub-sel 未包在 .sub-nav-class 里，拿不到居中与块标题观感，
   导致贴左浏览器边线——自带同款观感（粉 #ea4c89 / 32px）并水平居中 */
.daily-boards-section .sub-sel { margin: 0 0 10px; font-size: 32px; line-height: 40px; color: #ea4c89; text-align: center; }
@media (max-width: 767px) {
  .daily-boards-section .sub-sel { font-size: 24px; }
}

@media (max-width: 900px) {
    .daily-boards { grid-template-columns: minmax(0, 1fr); }
}