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

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

/* 3) 页脚（.bot）：原版是「固定高 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 聚合）通用小件：
 首页无对应元素，按其既有色板补充（强调粉 #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 为 原生按钮类，此处仅定尺寸与居中） */
.daily-cta { width: 160px; height: 40px; line-height: 40px; margin: 0 auto 50px; }
/* 6.5 分页（.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.5.1 列表页分页居中（仅 .page-main--center 作用域；不改基础 .page-main 的左浮动，其它页不受影响） */
.page-main--center { text-align: center; }
.page-main--center a,
.page-main--center .page-dis,
.page-main--center .page-gap { float: none; display: inline-block; }
/* 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); }
}

/* 平板触摸设备首页/列表卡片栅格：竖屏每行 3 张、横屏每行 4 张。
   仅 (pointer:coarse) 命中——PC（主输入为鼠标）不受影响；手机由尺寸/方向排除
   （竖屏需≥768px、横屏再要求 min-width:900 且 min-height:600）。卡片转百分比宽 + 图随宽自适应。 */
@media (pointer: coarse) and (orientation: portrait) and (min-width: 768px) {
 body:not(.bg-com) .w-list .w-item { width: calc(33.333% - 30px); height: auto; }
 body:not(.bg-com) .w-list .w-img,
 body:not(.bg-com) .w-list .w-img img,
 body:not(.bg-com) .w-list .w-img a.w-img-link { width: 100%; height: auto; }
 body:not(.bg-com) .w-list a.w-title h5 { width: auto; margin-right: 12px; }
}
@media (pointer: coarse) and (orientation: landscape) and (min-width: 900px) and (min-height: 600px) {
 body:not(.bg-com) .w-list .w-item { width: calc(25% - 30px); height: auto; }
 body:not(.bg-com) .w-list .w-img,
 body:not(.bg-com) .w-list .w-img img,
 body:not(.bg-com) .w-list .w-img a.w-img-link { width: 100%; height: auto; }
 body:not(.bg-com) .w-list a.w-title h5 { width: auto; margin-right: 12px; }
}

/* 10) 手机端统一顶栏（<768px，仅手机；桌面/平板不受影响）：
 单行 .m-topbar：左 LOGO · 右【搜索】【登录/账号】【汉堡】；搜索/登录/账号为就地弹层（带 ×），
 汉堡展开面板上半为 7 项导航、下半为 16 个分类标签（每行 4）。<768px 时隐藏旧 .top、启用 .m-topbar。 */
.m-topbar,
.m-topbar-mask { display: none; }
.m-pop { display: none; }

@media (max-width: 767px) {
 /* 旧桌面头部整体让位（LOGO/导航/语言/搜索/登录均在 .m-topbar 重建） */
 body:not(.bg-com) .top { display: none !important; }

 /* 顶栏单行 */
 .m-topbar {
 display: block;
 position: sticky;
 top: 0;
 z-index: 1220;
 background: #fff;
 border-bottom: 1px solid #eee;
 }
 .m-topbar__row {
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 -webkit-box-align: center;
 -webkit-align-items: center;
 align-items: center;
 -webkit-box-pack: justify;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 height: 56px;
 padding: 0 6px 0 12px;
 }
 .m-topbar__logo { display: block; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; flex: 0 0 auto; height: 40px; }
 .m-topbar__logo img { display: block; width: 140px; height: 40px; }
 .m-topbar__actions { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; }

 /* 图标按钮 */
 .m-icon-btn {
 width: 46px;
 height: 46px;
 padding: 0;
 border: 0;
 background: none;
 color: #555;
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 -webkit-box-align: center;
 -webkit-align-items: center;
 align-items: center;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 justify-content: center;
 cursor: pointer;
 }
 .m-icon-btn:hover, .m-icon-btn.is-open { color: #ea4c89; }
 /* 语言按钮：图标 + 当前语种名，宽度自适应（位于 LOGO 与搜索之间） */
 .m-icon-btn--lang { width: auto; padding: 0 8px; gap: 3px; }
 .m-icon-btn__lang { font-size: 13px; line-height: 1; }

 /* 遮罩 */
 .m-topbar-mask { display: none; position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .42); }
 .m-topbar-mask.is-open { display: block; }
 body.m-menu-lock { overflow: hidden; }

 /* 弹层通用 */
 .m-pop {
 position: fixed;
 top: 57px;
 left: 50%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 z-index: 1210;
 width: min(92vw, 360px);
 max-height: calc(100vh - 57px);
 max-height: calc(100dvh - 57px);
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
 background: #fff;
 border: 1px solid #eee;
 border-radius: 8px;
 box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
 box-sizing: border-box;
 padding: 18px 16px 20px;
 }
 .m-pop.is-open { display: block; }
 .m-pop__close {
 position: absolute;
 top: 6px;
 right: 6px;
 width: 40px;
 height: 40px;
 padding: 0;
 border: 0;
 background: none;
 color: #999;
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 -webkit-box-align: center;
 -webkit-align-items: center;
 align-items: center;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 justify-content: center;
 cursor: pointer;
 }
 .m-pop__close:hover { color: #ea4c89; }
 .m-pop__title { font-size: 17px; font-weight: 700; color: #333; margin: 0 0 14px; text-align: center; }
 .m-pop__hello { font-size: 15px; font-weight: 700; color: #ea4c89; margin: 2px 0 10px; text-align: center; }
 .m-pop__alt { display: block; margin-top: 12px; text-align: center; font-size: 13px; color: #999; }
 .m-pop__alt:hover { color: #ea4c89; }

 /* 搜索表单 */
 .m-search-form { display: -webkit-box; display: -webkit-flex; display: flex; }
 .m-search-form input {
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 flex: 1;
 min-width: 0;
 height: 44px;
 padding: 0 12px;
 border: 1px solid #eee;
 border-right: 0;
 border-radius: 6px 0 0 6px;
 font-size: 15px;
 color: #555;
 outline: none;
 box-sizing: border-box;
 }
 .m-search-form button {
 width: 52px;
 height: 44px;
 border: 0;
 border-radius: 0 6px 6px 0;
 background: #ea4c89;
 color: #fff;
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 -webkit-box-align: center;
 -webkit-align-items: center;
 align-items: center;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 justify-content: center;
 cursor: pointer;
 }

 /* 登录表单 */
 .m-pop--login form { display: block; }
 .m-field { display: block; margin-bottom: 12px; font-size: 13px; color: #888; }
 .m-field span { display: block; margin-bottom: 4px; }
 .m-field input {
 width: 100%;
 height: 44px;
 padding: 0 12px;
 border: 1px solid #eee;
 border-radius: 6px;
 font-size: 15px;
 color: #555;
 outline: none;
 box-sizing: border-box;
 }
 .m-field input:focus { border-color: #ea4c89; }
 .m-form-error { margin: -4px 0 10px; font-size: 13px; color: #e05780; }
 .m-submit {
 width: 100%;
 height: 46px;
 border: 0;
 border-radius: 6px;
 background: #ea4c89;
 color: #fff;
 font-size: 16px;
 cursor: pointer;
 }
 .m-submit:hover { background: #f5689e; }

 /* 账号小菜单 */
 .m-pop--account .m-pop__body a { display: block; height: 48px; line-height: 48px; padding: 0 6px; font-size: 15px; color: #555; border-bottom: 1px solid #f4f4f4; }
 .m-pop--account .m-pop__body a:hover { color: #ea4c89; }
 .m-logout { width: 100%; height: 46px; margin-top: 12px; border: 1px solid #eee; border-radius: 6px; background: #fafafa; color: #888; font-size: 15px; cursor: pointer; }
 .m-logout:hover { color: #ea4c89; border-color: #f3c2d6; }

 /* 汉堡菜单面板：全屏下铺 */
 .m-pop--menu {
 left: 0;
 right: 0;
 width: auto;
 -webkit-transform: none;
 transform: none;
 border-radius: 0;
 border-left: 0;
 border-right: 0;
 top: 56px;
 padding: 14px 16px 24px;
 }
 .m-menu__nav { display: block; margin: 0 0 6px; padding: 0; }
 .m-menu__nav li { list-style: none; }
 .m-menu__nav a {
 display: block;
 height: 48px;
 line-height: 48px;
 padding: 0 6px;
 font-size: 16px;
 color: #555;
 border-bottom: 1px solid #f4f4f4;
 }
 .m-menu__nav a:hover { color: #ea4c89; }
 .m-menu__nav a.is-on { color: #ea4c89; font-weight: 700; }
 .m-menu__tags { margin-top: 14px; }
 .m-menu__tags .w-full,
 .m-menu__tags div.w-full.h-100 { box-shadow: none; background: none; height: auto; }
 .m-menu__tags .home-mid-nav { width: 100%; padding: 0; -webkit-justify-content: flex-start; justify-content: flex-start; }
 /* 强制 4 列：flex-basis 25% 且允许收缩 + min-width:0 + 标签省略，避免长单词（如 Transportation）撑宽换行 */
 body:not(.bg-com) .m-menu__tags .home-mid-nav li {
 -webkit-flex: 0 1 25%;
 flex: 0 1 25%;
 max-width: 25%;
 min-width: 0;
 box-sizing: border-box;
 height: 76px;
 }
 body:not(.bg-com) .m-menu__tags .home-mid-nav i {
 display: block;
 max-width: 100%;
 padding-top: 6px;
 font-size: 12px;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 }
 .m-menu__lang { margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0f0f0; display: flex; flex-wrap: wrap; gap: 8px; }
 .m-menu__lang a { padding: 4px 12px; border: 1px solid #eee; border-radius: 14px; font-size: 13px; color: #888; }
 .m-menu__lang a.is-active { color: #ea4c89; border-color: #ea4c89; background: #fdf2f7; }

 /* 语言下拉列表（顶栏语言按钮弹层）：3 列网格 */
 .m-lang__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
 .m-lang__list li { min-width: 0; }
 .m-lang__list a {
 display: block;
 padding: 10px 6px;
 text-align: center;
 border: 1px solid #eee;
 border-radius: 6px;
 font-size: 14px;
 color: #666;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }
 .m-lang__list a:hover { color: #ea4c89; border-color: #f3c2d6; }
 .m-lang__list a.is-active { color: #fff; background: #ea4c89; border-color: #ea4c89; }

 /* 正文里的分类图标行移到汉堡菜单后，手机端不再单独显示（汉堡内那份在 #mTopbar 下保留：id 特异性更高） */
 body:not(.bg-com) .w-full.h-100 { display: none; }
 body:not(.bg-com) #mTopbar .m-menu__tags .w-full.h-100 { display: -webkit-flex; display: flex; }
}