/* ==========================================================================
 * 呗果 BAGEL · 原版（《异环》游戏内「呗果」）对齐层
 * 在 css/style.css 之后加载，靠同权重后置覆盖旧「奶油 / 橙」皮肤。
 * 需要整体回退时，只要从 index.html 摘掉这个 <link> 即可。
 *
 * 改造内容：白底 + 品牌粉强调、左栏/底栏双形态导航、8 分类标签 chips、
 *           排序菜单、No.xxxxx 帖子 ID、朋友圈式评论、发帖规格约束、
 *           内联 SVG 图标容器。
 * 依据：D:/_bagel_work/ORIGINAL-UI-REFERENCE.md（实机录屏采样）
 * ========================================================================== */

/* ---------- 通用重着色 ---------- */
.follow-btn{background:var(--brand);box-shadow:0 3px 8px rgba(244,92,151,.3)}
.follow-btn.followed{background:var(--bg-soft);color:var(--ink2);box-shadow:none}
.badge-official{background:var(--brand)}
.badge-npc{background:#8E7CFF}
.tag,.ptag.on{color:var(--brand-deep);background:var(--pink-wash);border-color:var(--pink-soft)}
.hot-item:active{background:var(--pink-wash)}
.msg-item{box-shadow:none;border:1px solid var(--line)}
.msg-item.unread{background:var(--pink-wash);border-color:var(--pink-soft)}
.msg-item.unread::before{background:var(--brand)}
.hot-rank{box-shadow:none;border:1px solid var(--line)}
.hot-item{border-bottom:1px solid var(--line)}
.pub-field{box-shadow:none;border:1px solid var(--line)}
.pub-add{border-color:var(--pink-soft);color:var(--ink3)}
.pub-add .plus{color:var(--brand)}
.pub-submit,.ob-btn,.shop-buy,.av-upload{background:var(--brand);box-shadow:0 6px 18px rgba(244,92,151,.34)}
.pub-submit:active,.ob-btn:active{transform:scale(.985)}
.ptag{background:#fff;border-color:var(--line)}
.ptag.on{font-weight:700;border-color:var(--pink-soft)}
.task-prog{background:var(--pink-wash)}
.task-prog i{background:var(--brand)}
.task-row,.cm,.creator-table td,.creator-table th{border-bottom-color:var(--line)}
.toast{background:rgba(32,32,36,.9)}
.toast.jam{background:var(--brand)}
.sheet-head{background:#fff;border-bottom:1px solid var(--line)}
.sheet-head .grab{background:var(--line)}
.sheet-mask{background:rgba(24,24,27,.42)}
.sheet-panel{background:#fff}
.pd-content,.pd-comments{background:#fff}
.pd-info{border-bottom-color:var(--line)}
.pd-input{background:var(--bg-soft)}
.act.on-star{color:var(--brand)}
.search-input{box-shadow:none;border:1px solid var(--line)}
.hotword{box-shadow:none;border:1px solid var(--line);background:#fff}
.icon-btn:active{background:var(--bg-soft)}

/* `.sort-menu` 自己写了 display:flex，会盖掉 UA 的 [hidden]{display:none}，
 * 结果排序菜单一进页面就是展开的、还挡住 chips 和左侧内容。必须显式补一条。 */
.sort-menu[hidden],.chiprow[hidden]{display:none!important}

/* 任务行：body 不给 min-width:0 就压不下去，右侧「+100/次」会被挤出屏幕 */
.task-body{min-width:0}
.task-reward,.task-done{white-space:nowrap}

/* ---------- 顶部轮播公告 ---------- */
.notice-bar{background:var(--pink-wash);border-color:var(--pink-soft);color:var(--brand-deep)}
.notice-bar .nb-ic{color:var(--brand)}

/* ---------- 信息流卡片（原版：白卡 + 细边，双列瀑布） ---------- */
.fcard{box-shadow:none;border:1px solid var(--line);border-radius:var(--r)}
.fcard:active{transform:scale(.975)}
.fcard .photo{aspect-ratio:1/1.18}
.fcard .fbody{padding:8px 9px 9px}
.fcard .ftitle{font-size:12.5px;font-weight:600;color:var(--ink)}
.fcard .fmeta{margin-top:7px;font-size:11px}
.fcard .flike{color:var(--ink3);font-variant-numeric:tabular-nums}
.fcard .flike.on{color:var(--brand)}
.feed{gap:9px;padding:10px 12px 0}
.feed-empty{color:var(--ink3)}
.feed-empty .big{color:var(--brand)}
.feed-empty .big svg{width:44px;height:44px;display:block;margin:0 auto}
/* 自己的非公开帖：卡片右上角可见性角标 */
.fcard .photo .fvis{
  position:absolute;top:7px;right:7px;z-index:2;width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(24,24,27,.55);color:#fff;backdrop-filter:blur(2px);
}
.fcard .photo .fvis svg{width:11px;height:11px}
/* 分类标签 / 可见性标签 */
.tag-cat{background:var(--pink-soft);color:#fff;border:none;font-weight:700}
.tag-vis{display:inline-flex;align-items:center;gap:4px;background:var(--bg-soft);color:var(--ink2)}
.msg-empty .ik svg,.msg-empty svg{width:44px;height:44px}

/* 内联 SVG 图标通用容器（替代 Emoji，见 app.js 的 ICON 表） */
.ik{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.ik svg{width:100%;height:100%;display:block}
.ik-12{width:12px;height:12px}
.ik-13{width:13px;height:13px}
.ik-14{width:14px;height:14px}
.ik-16{width:16px;height:16px}
.ik-18{width:18px;height:18px}
.ik-20{width:20px;height:20px}
.ik-24{width:24px;height:24px}
.ik-26{width:26px;height:26px}
.ik-44{width:44px;height:44px}
.ik-64{width:64px;height:64px}

/* ---------- 帖子详情：No.xxxxx 帖子 ID + 互动条 ---------- */
.pd-photo{background:#F2F3F5}
.pd-photo .pd-no{
  position:absolute;left:12px;bottom:10px;z-index:2;
  font-size:11px;letter-spacing:.5px;color:#fff;font-weight:600;
  text-shadow:0 1px 4px rgba(0,0,0,.55);
}
.pd-photo .pd-no.on-light{color:var(--ink2);text-shadow:none}
.pd-actions{border-top:1px solid var(--line)}
.pd-actions .act.on,.pd-actions .act.on-star{color:var(--brand)}

/* ---------- 评论区：朋友圈式（浅底 + 白圆角卡 + 粉色昵称） ---------- */
.pd-comments{padding:6px 14px 96px;background:var(--bg-soft)}
.pd-cm-title{font-size:13px;font-weight:700;padding:12px 2px 6px}
.cm{background:#fff;border-radius:12px;padding:11px 12px;margin-bottom:8px;border-bottom:none;gap:9px}
.cm .cname{color:var(--brand-deep);font-weight:700;font-size:12.5px}
.cm .ctxt{color:var(--ink);font-size:13.5px}
.cm .cmeta{color:var(--ink3)}
.cm .clike.on{color:var(--brand)}
.cm-empty{background:#fff;border-radius:12px;color:var(--ink3)}

/* ---------- 发布页：原版规格约束 ---------- */
.pub-spec{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pub-spec span{font-size:10.5px;color:var(--brand-deep);background:var(--pink-wash);border:1px solid var(--pink-soft);border-radius:8px;padding:3px 8px}
.pub-field input,.pub-field textarea{color:var(--ink)}
.pub-count.warn{color:#E5484D;font-weight:700}
.pub-lock{aspect-ratio:1;border:1px dashed var(--line);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink3);font-size:10.5px;gap:4px;background:var(--bg-soft);text-align:center;padding:6px;line-height:1.4}
.vis-row{display:flex;gap:8px;margin-top:14px}
.vis-opt{flex:1;text-align:center;font-size:12.5px;padding:10px 0;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--ink2)}
.vis-opt.on{background:var(--pink-wash);border-color:var(--brand);color:var(--brand-deep);font-weight:700}
.scene-pick{box-shadow:none;border:1px solid var(--line)}

/* ---------- 我的 ---------- */
.me-head{background:var(--pink-wash);border-bottom:1px solid var(--line);padding:20px 18px 14px}
.me-name{font-size:19px;font-weight:800;color:var(--ink)}
.me-edit{border-color:var(--pink-soft);color:var(--brand-deep);background:#fff}
.me-stat b{color:var(--ink)}
.me-stat span{color:var(--ink3)}
.me-stats{gap:24px}
.me-grid{gap:10px;padding:12px}
.me-cardbtn{box-shadow:none;border:1px solid var(--line);background:#fff}
.me-cardbtn .ic{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center}
.me-cardbtn .ic svg{width:100%;height:100%;display:block}
.me-tab.active{color:var(--ink)}
.me-tab.active::after{background:var(--brand)}
.me-tabs{border-bottom-color:var(--line);margin-top:0;padding-top:14px}
.up-head{background:var(--pink-wash);border-bottom:1px solid var(--line)}
.up-head.npc-official{background:var(--pink-wash)}

/* ---------- 创作中心 / 果酱中心 ---------- */
.jam-hero{background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 10px 28px rgba(244,92,151,.3);border-radius:18px;overflow:hidden}
.jam-hero::after{content:"";position:absolute;right:-30px;bottom:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.18)}
.jam-hero .jh-num{letter-spacing:1px;font-variant-numeric:tabular-nums}
.task-card{box-shadow:none;border:1px solid var(--line)}
.task-done{color:var(--brand)}
.task-reward{color:var(--brand-deep)}
.creator-table th{color:var(--ink)}
.creator-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.creator-kpi{background:var(--pink-wash);border:1px solid var(--pink-soft);border-radius:12px;padding:10px 12px}
.creator-kpi b{display:block;font-size:19px;font-weight:800;color:var(--brand-deep);font-variant-numeric:tabular-nums}
.creator-kpi span{font-size:10.5px;color:var(--ink2)}

/* ---------- 商店 ---------- */
.shop-item{box-shadow:none;border:1px solid var(--line)}
.shop-img{background:var(--pink-wash)}
.shop-img .ik{width:62px;height:62px;color:var(--brand)}
.shop-buy{background:var(--brand);font-size:11.5px;padding:6px 13px}
.shop-buy:disabled{background:var(--bg-soft);color:var(--ink3)}
.shop-buy.owned{background:var(--pink-wash);color:var(--brand-deep)}
.shop-price{color:var(--brand-deep)}
.shop-tabrow{display:flex;gap:18px;padding:2px 14px 0;border-bottom:1px solid var(--line);background:#fff}
.shop-tab{font-size:13px;color:var(--ink2);padding:8px 0;position:relative}
.shop-tab.on{color:var(--ink);font-weight:700}
.shop-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;background:var(--brand)}

/* ---------- 状态栏：白底 ---------- */
.statusbar{background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.sb-signal i{opacity:.3}
.sb-signal i:nth-child(4){opacity:1}

/* ---------- 登录 / 引导页 ---------- */
.onboard{background:#fff}
/* 贝果 logo 用 currentColor 填充，必须显式给品牌粉，否则继承正文墨黑 */
.onboard .ob-logo{width:82px;height:82px;color:var(--brand);animation:float 4s ease-in-out infinite}
.onboard .ob-logo svg{width:100%;height:100%;display:block}
.onboard h1{color:var(--ink)}
.onboard .ob-en{color:var(--brand)}
.onboard p{color:var(--ink2)}
.ob-input{box-shadow:none;border:1px solid var(--line);background:#fff}
.avatar-pick{box-shadow:none;border:1px solid var(--line)}
.avatar-pick.on{border-color:var(--brand);background:var(--pink-wash)}
.av-upload.ghost{background:#fff;color:var(--brand);box-shadow:none;border:1px solid var(--pink-soft)}
.ob-tip{color:var(--ink3)}

/* ---------- 设置面板 ---------- */
.set-dev-opt{border-color:var(--line)}
.set-dev-opt.on{background:var(--brand);border-color:var(--brand)}

/* ---------- 左栏导航（平板 / PC 形态，对齐原版左栏） ---------- */
#phone.is-tablet #bottomnav{display:none}
#phone.is-tablet #sidenav{
  display:flex;flex-direction:column;gap:4px;flex:0 0 auto;width:112px;
  padding:14px 10px 12px;border-right:1px solid var(--line);background:#fff;
}
.side-brand{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:800;color:var(--ink);padding:2px 6px 12px}
.side-brand svg{width:24px;height:24px;flex:0 0 auto}
.side-btn{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:11px 4px;border-radius:12px;color:var(--ink3);font-size:11.5px;
}
.side-btn .sb-ic{width:22px;height:22px;display:inline-flex}
.side-btn .sb-ic svg{width:100%;height:100%;display:block}
.side-btn.active{background:var(--brand);color:#fff;font-weight:700;box-shadow:0 6px 16px rgba(244,92,151,.32)}
.side-btn .dot{position:absolute;top:8px;right:22px;width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 2px #fff}
.side-pub{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 4px 2px;color:var(--brand-deep);font-size:11px}
.side-pub .pub-circle{width:44px;height:32px;font-size:22px}
#phone.is-tablet .cm{max-width:none}

/* ---------- 水印 / 品牌印记（互补显示） ----------
 * `.site-watermark` 是 `position:fixed;left:12px;bottom:12px`（原始行为，宽 126.5px
 * → 右边缘 139px），而 `#phone` 的位置随视口变：
 *   ① <640px     铺满视口           → 水印压在底部导航「推荐」上（真机必现）
 *   ② 640–979px  居中(左边距 95→264) → 视口 <727px 时仍会重叠
 *   ③ ≥980px 手机形态 `margin-left:52vw` → 设备框在右侧，左下真空白 ✅
 *   ④ 平板形态 `#phone.is-tablet` 用 `margin:auto` **居中等宽**
 *      `min(880px,94vw,136dvh)` → 居中后左空白 =(vw-904)/2，要放下 139px 需 vw>1182
 * 所以①②④（视口不够宽时）一律隐藏角标水印，改在「我的」页脚用文字版保留品牌。
 * 两处**互补**：角标能显示时页脚文字就隐藏，不重复。
 */
@media(max-width:979px){ .site-watermark{display:none} }
@media(max-width:1182px){ body.tablet-mode .site-watermark{display:none} }

.mob-brand{display:block;text-align:center;padding:20px 0 26px;font-size:12px;letter-spacing:.5px;color:var(--ink3)}
.mob-brand a{color:var(--ink3);text-decoration:none;border-bottom:1px dotted var(--ink3)}
@media(min-width:980px){ body:not(.tablet-mode) .mob-brand{display:none} }
@media(min-width:1183px){ body.tablet-mode .mob-brand{display:none} }