/* ==========================================================================
   福友电竞 · 轻量皮肤  fy-lite.css
   --------------------------------------------------------------------------
   按你的要求：**只保留下面 7 条，其余全部回到「没有改 UI 风格之前」的原样。**

     ① 背景            —— 页面：奶油底 + 顶部暖色渐变 + 极淡爪印暗纹
                          卡片：纯白 → 暖奶油（不再是死白）
     ② 商品详情        —— 内容卡不遮挡商品图，并留 12px 间距（不再贴成一块）
     ③ 按钮            —— **全站所有橙色按钮**统一成钱包按钮的款式和颜色
     ④ 分类页左侧栏    —— 不再是一条白色空带
     ⑤ 分类页最后一卡  —— 不再被裁掉
     ⑥ 关闭页面淡入动画 —— ⚠️ **这条不能撤**

   ★ 关于第 ⑥ 条为什么必须留：
     你说的"**延迟显示**"就是它造成的 —— 原版给每个页面加了
     0.6 秒的 fade-in-up 动画（opacity:0 起步），内容其实早就渲染好了，
     只是被透明地渐显 600 毫秒，看起来就像"进去是空的、过一下才出来"。
     实测本机首屏 104ms、商品渲染 246ms、无任何慢资源 —— 不是加载慢。
     撤掉这条 = 延迟立刻回来。

   ★ 已经**全部去掉、回到原版**的：
       方框的浅橙描边、补的 12px 圆角、公告栏文字位移、
       快捷入口文字间距、分类页搜索框改造、详情页主图的描边/圆角/位移、
       订单列表搜索框显隐补丁（fy-lite.js 文件保留，已从 index.html 摘下）
   ========================================================================== */


/* ==========================================================================
   ① 背景（页面 + 卡片）
   ========================================================================== */

/* ⚠️ 背景必须铺在**根元素**上，不能铺在 .page 上。
   实测（9 个页面都量过）：
       uni-page-body   到 1020px   底 = rgb(253,246,227)   ← 程序自带的米黄，没有暗纹
       .page           只到  960px  底 = rgb(255,249,240) + 暗纹   ← 我的奶油背景
   两者差 60px，那段露出来的就是程序自带的米黄 —— 就是你截图里"底部没盖到"的带子。
   铺到 html/body 上：根元素的背景会画满整个画布（含滚动区和回弹区），
   再把中间各层设成透明，这样**整页只有一层背景**，暗纹也不会在接缝处错位。 */
html,
body {
  background-color: var(--fy-cream-100) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%23E8912B' fill-opacity='0.055'%3E%3Cpath d='M42 62c-7 0-12-3.9-12-9.2 0-5.9 5.7-11.4 12-11.4s12 5.5 12 11.4C54 58.1 49 62 42 62z'/%3E%3Cellipse cx='27' cy='40' rx='4.2' ry='5.3'/%3E%3Cellipse cx='36' cy='33' rx='4.5' ry='5.7'/%3E%3Cellipse cx='48' cy='33' rx='4.5' ry='5.7'/%3E%3Cellipse cx='57' cy='40' rx='4.2' ry='5.3'/%3E%3Cpath d='m158 24 4.6 9.4 10.4 1.5-7.5 7.3 1.8 10.3-9.3-4.9-9.3 4.9 1.8-10.3-7.5-7.3 10.4-1.5z'/%3E%3Cpath d='M52 168c-7 0-12-3.9-12-9.2 0-5.9 5.7-11.4 12-11.4s12 5.5 12 11.4c0 5.3-5 9.2-12 9.2z'/%3E%3Cellipse cx='37' cy='146' rx='4.2' ry='5.3'/%3E%3Cellipse cx='46' cy='139' rx='4.5' ry='5.7'/%3E%3Cellipse cx='58' cy='139' rx='4.5' ry='5.7'/%3E%3Cellipse cx='67' cy='146' rx='4.2' ry='5.3'/%3E%3Cpath d='m172 128 4.6 9.4 10.4 1.5-7.5 7.3 1.8 10.3-9.3-4.9-9.3 4.9 1.8-10.3-7.5-7.3 10.4-1.5z'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: repeat !important;
  background-size: 220px 220px !important;
  background-attachment: scroll !important;
}
/* 中间各层一律透明，避免任何一层"自己带底色"把根背景盖住 */
uni-app,
uni-page,
uni-page-wrapper,
uni-page-body,
.page {
  background-color: transparent !important;
  background-image: none !important;
}

.page-bg-gradient {
  height: 19rem !important;
  background: linear-gradient(180deg, #FFF0D6 0%, #FFF6E8 42%, rgba(255, 250, 242, 0) 100%) !important;
}

/* --- 卡片背景：纯白 → 暖奶油 ------------------------------------------------
   原版所有卡片都是写死的 `background:#fff`，放在奶油页面里显得很"生"、
   就是你说的"还有一些背景是白色没有改"。
   改成暖奶油渐变：上端接近白、下端偏暖 —— 既不是死白，又和页面底色分得开。
   （.taker-wallet-card / .hall-entry-card 自带金色渐变，刻意不动。） */
.dj-card,
.dj-card-strong,
.glass-card,
.info-card,
.detail-card,
.badge-card,
.product-card,
.goods-item,
.user-header,
.order-status-card,
.menu-section,
.notice-dialog,
.footer-bar,
.hero-wrap,
.search-bar,
.header-search,
.banner-wrap,
.banner-item,
#fy-deposit-card {
  background: linear-gradient(180deg, #FFFEFB 0%, #FFF7EC 100%) !important;
}


/* ==========================================================================
   ② 商品详情：主图与内容卡之间留出间距
   --------------------------------------------------------------------------
   实测：原版 .info-card 带 margin-top:-41.6px（刻意的"卡片压图"设计），
        与主图重叠 42px，把商品图底部盖住了。
   现在把重叠去掉，并且**留 12px 间距** —— 否则两个面直接贴在一起，
   看起来就像"商品图和内容详情拼接成一块"。
   （主图本身已按你的要求恢复原版，这里不动主图。）
   ========================================================================== */

.info-card {
  margin-top: 12px !important;
}

/* 主图顶部：原版 margin-top 是 -4.16px，把图片顶出内容区（顶部被切 4px、压到最上面）。
   归零，让图片老老实实从内容区顶部开始。左右仍是原版的满宽。 */
.hero-wrap {
  margin-top: 0 !important;
}


/* ==========================================================================
   ③ 所有橙色按钮：统一成钱包按钮的款式和颜色
   --------------------------------------------------------------------------
   钱包按钮的款式（基准）：
     底 = linear-gradient(180deg, #FFE7B8, #FFD489)   浅橙渐变
     字 = #A85E12                                     深橙
     边 = 1px rgba(232,145,43,.55)                    橙描边
     圆角 = 10px，投影 = 0 2px 6px rgba(200,140,50,.18)
   原版这些按钮各是各的橙色（#ff9f43 渐变、#ffd24a、#ffc43e…），现在全部拉齐。

   另外钱包押金卡（#fy-deposit-card）是 padding:14px 0、左右没有内边距，
   两个按钮的左右边正好压在卡的左右边上（12 → 378），看着要"突破边框"；
   ⚠️ 试过给按钮加 margin 反而更糟（格子没收缩、整行被推右 10px），
      所以改成给**卡片自己**加左右内边距。
   ========================================================================== */

#fy-deposit-card {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
/* 卡内那几行原本各自带 padding:0 16px，加上卡片内边距会双重缩进，
   所以只把**直接子元素**的内边距清零（不碰里面的按钮） */
#fy-deposit-card > uni-view,
#fy-deposit-card > uni-text {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ↓ 全站橙色按钮统一款式（钱包页那一组本来就在里面） */
.primary-btn,
.submit-btn,
.order-btn,
.limited-btn,
.add-btn,
.dialog-btn,
.action-primary,
.action-icon,
.wx-login-btn,
.fy-wallet-btn,
.search-btn,
.wallet-page .action-outline,
#fy-deposit-ok,
#fy-chat-btn {
  background: linear-gradient(180deg, #FFE7B8 0%, #FFD489 100%) !important;
  background-image: linear-gradient(180deg, #FFE7B8 0%, #FFD489 100%) !important;
  color: #A85E12 !important;
  border: 1px solid rgba(232, 145, 43, .55) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(200, 140, 50, .18) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
/* 钱包页的次按钮（押金提现/充值记录/提现记录）也走同一套，
   不再区分主次颜色——你要求"钱包按键颜色统一" */
.wallet-page .ghost-btn,
#fy-deposit-cancel {
  background: linear-gradient(180deg, #FFE7B8 0%, #FFD489 100%) !important;
  background-image: linear-gradient(180deg, #FFE7B8 0%, #FFD489 100%) !important;
  color: #A85E12 !important;
  border: 1px solid rgba(232, 145, 43, .55) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}


/* --- 订单列表卡片底部按钮：统一成"右边那颗"的款式 --------------------------
   实测每张订单卡的 .action-btns 里有两颗按钮：
     ·「联系客服」是 ghost-btn —— 旧的 #ff9f43 橙字+橙描边、圆角 4.16px（没被上面统一到）
     · 另一颗（查看详情 / 去支付 / 联系客服处理 / 确认完成…）是 primary-btn —— 已是浅橙填充
   这里把 action-btns 里的 ghost-btn 也拉齐，并统一两颗的尺寸（原高都是 29px）。 */
.action-btns .ghost-btn,
.action-btns uni-button.ghost-btn {
  background: linear-gradient(180deg, #FFE7B8 0%, #FFD489 100%) !important;
  background-image: linear-gradient(180deg, #FFE7B8 0%, #FFD489 100%) !important;
  color: #A85E12 !important;
  border: 1px solid rgba(232, 145, 43, .55) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(200, 140, 50, .18) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}
.action-btns .ghost-btn,
.action-btns .primary-btn {
  height: 29px !important;
  padding: 0 12px !important;
  font-size: 12.48px !important;
  line-height: 27px !important;
  box-sizing: border-box !important;
}


/* --- 客服二维码：去掉外面那圈白框 --------------------------------------------
   原版规则（编译产物 customer-service-*.css）：
     .qr-image{ width:11.25rem; height:11.25rem;
                background:rgba(255,255,255,.92);   ← 白底
                padding:.5625rem; border-radius:.75rem }
   9px 的内边距正好把白底露成一圈 —— 老板上传的二维码本身自带底图，
   再套一层白框很难看。这里把白底和内边距去掉，让二维码原样显示。
   （页面里所有客服类型：普通咨询/号商/投诉/订单售后/入驻，用的都是这个类。） */
.qr-image,
uni-image.qr-image {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* ==========================================================================
   ④ 分类页左侧栏：不再是一条白色空带
   --------------------------------------------------------------------------
   实测：左侧栏背景是 rgba(255,255,255,.6)（半透明白），高度只到 900px；
        页面滚到底时它已经结束，左边就剩一条突兀的白带。
        改成透明，让它和奶油页面底色融为一体。
   ========================================================================== */

.left-sidebar {
  background: transparent !important;
}


/* ==========================================================================
   ⑤ 分类页最后一卡被裁：放开三层固定高度
   --------------------------------------------------------------------------
   实测（套娃，修了三版才对）：
     .right-content 840px > uni-scroll-view 819px（overflow:hidden auto）
       > .uni-scroll-view-content 819px > .goods-list 912px
     → 内层滚动容器
     → .main-layout 836px 固定高 + overflow:hidden
     → **.category-container 自身 900px（100vh）固定高**
   三层都要放开，文档高度才会从 1103 涨到 1453，最后一张卡才滚得到。

   ⚠️ 不要用 * 通配 —— 商品卡自身要靠 overflow:hidden 做圆角。
   ========================================================================== */

.category-container {
  height: auto !important;
  max-height: none !important;
  min-height: 100vh !important;
  overflow: visible !important;
}
.category-container .main-layout {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.category-container .right-content,
.category-container .right-content uni-scroll-view,
.category-container .right-content .uni-scroll-view,
.category-container .right-content .uni-scroll-view-content {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
/* 列表底部留白，最后一张卡不贴底 */
.category-container .goods-list {
  padding-bottom: 24px !important;
}


/* ==========================================================================
   ⑥ 关闭页面淡入动画（⚠️ 这条就是"延迟显示"的解药，不能撤）
   --------------------------------------------------------------------------
   实测：本机首屏 104ms / 商品渲染 246ms / 无慢资源 ——
        内容早就渲染好了，但原版给每个页面加了 **0.6 秒 fade-in-up**
        （opacity:0 起步），看起来就是"进去是空的、过一下才出来"。
   关掉它，页面即开即现。骨架屏的闪动保留（它表示"正在加载"，是有用反馈）。
   ========================================================================== */

.home,
.category-container,
.message,
.profile,
.limited-page,
.taker-orders,
.wallet-page,
.ranking-page,
.detail-page,
.page-body,
.page {
  animation: none !important;
}


/* ==========================================================================
   ⑦ 小屏微调（只影响背景高度）
   ========================================================================== */

@media (max-width: 360px) {
  .page-bg-gradient { height: 16rem !important; }
}


/* ==========================================================================
   ⑧ 补齐剩余元素（第 9 轮全站扫描结果）
   --------------------------------------------------------------------------
   用脚本把 12 个页面全扫了一遍"旧橙色"，判定条件是：
       背景里出现 r>=245 且 120<=g<=215 且 b<=110 的色块
   （新的浅橙 #FFE7B8=(255,231,184) 和 #FFD489=(255,212,137) 正好不会被命中）
   扫出 9 处漏网的，逐个补上。
   ========================================================================== */

/* --- 8.1 选中态的选项按钮 ---------------------------------------------------
   你截图指的「手游区 / 自动安排」用的就是 `.chip.active`
   （提交订单页实测：linear-gradient(90deg, rgb(255,210,74), …)，165x57）。
   同类还有：商品详情的 .zone-chip、充值页的 .amount-item、
   「我的」页的 .level-tag、接单大厅的开关 .uni-switch-input-checked。
   选中态仍然要靠底色区分，所以未选中的 .chip 给奶油底、选中的给浅橙底。 */
.chip.active,
.zone-chip.active,
.amount-item.active,
.level-tag,
.uni-switch-input.uni-switch-input-checked {
  background: linear-gradient(180deg, #FFE7B8 0%, #FFD489 100%) !important;
  background-image: linear-gradient(180deg, #FFE7B8 0%, #FFD489 100%) !important;
  color: #A85E12 !important;
  border: 1px solid rgba(232, 145, 43, .75) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* 未选中的选项按钮：原来是纯白，改成奶油 */
.chip,
.zone-chip,
.amount-item {
  background: linear-gradient(180deg, #FFFEFB 0%, #FFF7EC 100%) !important;
  border: 1px solid rgba(201, 152, 92, .28) !important;
  border-radius: 10px !important;
  color: #8A6A45 !important;
}

/* --- 8.2 输入框 / 文本域 / 数量加减按钮 -------------------------------------
   实测这些是**冷灰** #f8fafc（偏蓝），放在奶油色调里很突兀；
   数量加减（.qty-btn）是按钮，一并换成浅橙款式。 */
.input,
uni-input .input,
.uni-textarea,
.uni-textarea-textarea,
textarea,
.textarea {
  background: #FFFDF7 !important;
  border: 1px solid rgba(201, 152, 92, .28) !important;
  border-radius: 10px !important;
  color: #5C3A1E !important;
}
.qty-btn {
  background: linear-gradient(180deg, #FFE7B8 0%, #FFD489 100%) !important;
  background-image: linear-gradient(180deg, #FFE7B8 0%, #FFD489 100%) !important;
  color: #A85E12 !important;
  border: 1px solid rgba(232, 145, 43, .55) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}
.qty-num { color: #5C3A1E !important; }

/* --- 8.2b 充值页「自定义金额」输入框 ---------------------------------------
   ⚠️ 这个框的类名是 **.amount-input**（外层 uni-input），
      上面那条 `.input` 选择器**根本匹配不到它** ✗ ——
      所以它的数字一直是页面自己的浅色，在奶油底上几乎看不见。
   ⚠️ iOS / 微信里给 <input> 改颜色**必须加 -webkit-text-fill-color**，
      只写 color 是不生效的（那边用它做"填充色"）。
   → 这里直接点名 .amount-input，并把两条都写上。 */
.amount-input,
uni-input.amount-input,
.amount-input .uni-input-input,
.amount-input .uni-input-wrapper,
.amount-input input,
.input-row .amount-input,
.input-row input {
  color: #3D2410 !important;
  -webkit-text-fill-color: #3D2410 !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  caret-color: #A85E12 !important;      /* 光标也要看得见 */
}
.amount-input,
uni-input.amount-input,
.input-row .amount-input {
  background: #FFFDF7 !important;
  border: 1px solid rgba(201, 152, 92, .45) !important;
  border-radius: 10px !important;
}
/* 这个框的提示文字（"输入充值金额"）之前太淡，几乎看不见 —— 单独压深 */
.amount-input .uni-input-placeholder,
.amount-input input::placeholder,
.input-row .uni-input-placeholder,
.input-row input::placeholder {
  color: #9A7550 !important;
  -webkit-text-fill-color: #9A7550 !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}
.input-row .currency {
  color: #A85E12 !important;
  font-weight: 700 !important;
}

/* 输入框里的提示文字也换成暖色（原来用的是偏冷的灰，在奶油底上发灰发淡） */
.uni-input-placeholder,
.uni-textarea-placeholder,
input::placeholder,
textarea::placeholder {
  color: #9A7550 !important;
  -webkit-text-fill-color: #9A7550 !important;
  opacity: 1 !important;
}


/* ==========================================================================
   ⑨ 第 10 轮：把"会飘、会漏"的地方钉死
   ========================================================================== */

/* --- 9.1 分类页搜索框：把「搜索」两个字放进同一个框里 ----------------------
   实测结构（问题根源）：
     .header-search  宽 390、padding 10.4/12.48 —— **外层整条**，但没有可见边框
       .search-input-box  12→313  ← 有边框的那个"框"只到这里
       .search-btn        319→378  ← 搜索落在内框**外面**
   所以肉眼看到的是"搜索在框外"。做法：把那道边框从内层挪到外层，
   内层透明，这样「搜索」自然就落在同一个框内。 */
.category-container .header-search {
  background: linear-gradient(180deg, #FFFEFB 0%, #FFF7EC 100%) !important;
  border: 1px solid rgba(232, 145, 43, .45) !important;
  border-radius: 12px !important;
  margin: 10px 12px !important;
  padding: 0 8px 0 12px !important;
  width: auto !important;
  height: 46px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.category-container .header-search .search-input-box {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* --- 9.2 分类页筛选标签：「综合排序」和「特惠保底单」钉到像素级一致 ---------
   实测（改之前的偏差）：
       属性          综合排序(.filter-item)   特惠保底单([data-tagbtn])
       font-size     15.808px                14px
       font-weight   600                     400
       line-height   normal                  22px
       padding       0px                     6px 13px
       （圆角 / 描边 / 字色 / 底色本来就已经一致）
   下面把两者一起钉到同一组值 —— 关键不是取哪个值，而是**两边必须是同一组**，
   否则永远"看着差不多、其实是两套"。
   ⚠️ 权重必须够高：card-clean.css 里有一条
      `.main-layout .filter-tabs .filter-item{font-size:.95rem!important}`
      权重 (0,3,0)，比单纯的 `.filter-item` (0,1,0) 高 —— 这就是之前
      font-size 一直是 15.808px（.95rem × uni-app 动态根字号）压不下去的原因。
      所以这里用 `.filter-tabs .filter-item[class]` (0,3,0) +
      `.main-layout .filter-tabs .filter-item[class]` (0,4,0) 双保险。
   ⚠️ 红线：绝不在这条上写 display —— card-clean.css 用
      `.filter-tabs .filter-item:last-child{display:none}` 藏了「排行榜」，
      一旦声明 display 就会把它放出来。（下划线是伪元素，动它安全） */
.filter-tabs .filter-item[class],
.main-layout .filter-tabs .filter-item[class],
[data-tagbtn] {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 22px !important;
  padding: 6px 13px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 10px !important;
  border: 1px solid rgba(201, 152, 92, .28) !important;
  color: #8A6A45 !important;
  background: linear-gradient(180deg, #FFFEFB 0%, #FFF7EC 100%) !important;
  background-image: linear-gradient(180deg, #FFFEFB 0%, #FFF7EC 100%) !important;
  margin: 0 !important;
  letter-spacing: normal !important;
}
/* 选中态：点「综合排序」要有颜色反馈。
   ⚠️ 上一版我做过头了 —— 为了让它和标签"一样"，连选中色的删了，导致点了没反应。
   正确做法：**尺寸/字号/内边距/圆角/形状**和标签完全一致（由 9.2 统一钉死），
   只在**选中时**给同一套浅橙。这样：
     · 都是"没选中"时 → 两者一模一样
     · 「综合排序」被选中时 → 和"标签被选中"时长得一样
   权重 (0,5,0) > 9.2 的默认规则 (0,4,0)，所以能覆盖。 */
.filter-tabs .filter-item.active[class],
.main-layout .filter-tabs .filter-item.active[class],
[data-tagbtn][style*="FFF2E0"],
[data-tagbtn][style*="255, 242, 224"] {
  background: linear-gradient(180deg, #FFE7B8 0%, #FFD489 100%) !important;
  background-image: linear-gradient(180deg, #FFE7B8 0%, #FFD489 100%) !important;
  color: #A85E12 !important;
  border: 1px solid rgba(232, 145, 43, .75) !important;
}
.filter-item.active::after,
.filter-item.active::before {
  display: none !important;
}

/* --- 9.3 分类页标签（特惠保底单 / 趣味单 / 赌红单 / 清图）------------------
   这几个不是 .filter-item，而是既有补丁 **category-tags.js 注入的 [data-tagbtn]**，
   内联写死 `background:#F5F5F5`（选中 `#FFF2E0` / 字色 `#FF9F43`）。
   它们的尺寸/圆角/配色已经在 9.2 里和「综合排序」一起钉死了，这里不再重复。 */

/* --- 9.4 订单列表搜索框：用"类 + 样式表"钉死，不再和 order-search.js 抢内联样式
   ⚠️ 之前用 element.style.setProperty('display','none','important') 会**偶发失效**：
      order-search.js 是整体重写 cssText（`wrap.style.cssText = "display:block;…"`），
      一写就把我们那条 important 声明擦掉了，于是搜索框又冒出来。
   现在改成在 body 上加一个类，由样式表规则控制 —— 样式表的 !important
   永远压得住内联样式，不管对方什么时候重写。 */
body.fy-hide-order-search .fy-order-search {
  display: none !important;
}

/* --- 9.5 消息页「订单动态」下面冒出来的一堆空长方形 ------------------------
   实测：那是**空的列表行 + .empty-state 占位块**。
   我之前把 .empty-state 也算进"卡片"，给了它奶油渐变底色，
   于是"空占位"变成了一条条看得见的空盒子（原版白底白页，看不见）。
   这里把 .empty-state 从卡片底色里摘掉，并让消息列表里的行透明。 */
.message-list,
.message-list .dj-card,
.message-item,
.notice-item {
  background: transparent !important;
}


/* ==========================================================================
   ⑩ 「搜索」按钮整体去掉，改成"输入即搜"
   --------------------------------------------------------------------------
   你要求：不要搜索按钮，直接输入就自动搜索。
   做法：① 按钮 `display:none` —— **不是删掉**：它绑着程序的搜索逻辑，
            隐藏后依然可以用 el.click() 触发；
        ② fy-lite.js 监听输入框的 input 事件，防抖 600ms 后点一次这个隐藏按钮。
   ========================================================================== */
/* ⚠️ 不要把裸的 `.search-btn` 写进来！那会把**下单页「指定打手」的搜索按钮**
   也一起藏掉（那个按钮是要点的，老板反馈"搜索框没有可点的搜索按钮"就是这么来的）。
   只按页面限定：搜索页(.search-head / .search-bar) 和分类页头部(.header-search)。 */
.category-container .header-search .search-btn,
.search-head .search-btn,
.search-bar .search-btn {
  display: none !important;
}


/* ==========================================================================
   ⑪ 加载骨架不许被当成"卡片"刷底色（就是消息页那几个空盒子的真凶）
   --------------------------------------------------------------------------
   查程序源码（pages-message-index.*.js）看到：
     B(loading) 为真时 → class="loading-state"，里面固定渲染 **3 个**
     <view class="dj-card skeleton-card">，每个含 skeleton-icon + 2 行 skeleton-line。
   而消息页自己的 CSS 里**只定义了 .message-list 和 .empty-state**，
   .skeleton-icon / .skeleton-line 没有任何样式 —— 也就是说：
       原版 = 白卡 + 白底 → 骨架卡完全看不见，只有切换标签时的一瞬；
       我加了"卡片背景"后 → 3 张骨架卡变成 3 个奶油色实心空盒子，一直杵在那。
   修法：把骨架卡从卡片底色里排除，并给骨架内部元素补上暖色微光，
   让它变回"正在加载"的样子，而不是"空卡片"。
   ========================================================================== */

.dj-card.skeleton-card,
.skeleton-card,
.loading-state .dj-card {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 骨架里的图标块 / 文字条：程序没给样式，这里补上暖色微光 */
.message-list .skeleton-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: 0 0 auto;
  background-image: linear-gradient(90deg, rgba(201, 152, 92, .16), rgba(201, 152, 92, .05), rgba(201, 152, 92, .16)) !important;
  background-size: 200% 100%;
  animation: skeleton-flow 1.3s linear infinite;
}
.message-list .skeleton-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.message-list .skeleton-line {
  height: 14px;
  border-radius: 6px;
  background-image: linear-gradient(90deg, rgba(201, 152, 92, .16), rgba(201, 152, 92, .05), rgba(201, 152, 92, .16)) !important;
  background-size: 200% 100%;
  animation: skeleton-flow 1.3s linear infinite;
}


/* ==========================================================================
   ⑫ 第 12 轮：对齐修正 + 全站"外来元素"清理
   ========================================================================== */

/* --- 12.1 全局骨架屏：灰色占位卡片（不再空白）-----------------------------
   ⚠️ 历史：上一轮你要求"多出来的空盒子全部改掉"，我把骨架全站 display:none 了。
      结果就是现在这个投诉 —— **加载期间卡片是空白的**（文字/价格还没回来，
      骨架又被我藏了，只剩一个空壳）。
   现在按新需求改回来：骨架**显示**，并且做成"灰色占位卡片 + 灰色占位条"，
   让人一眼看出"正在加载"，而不是空白。

   覆盖程序里各页的骨架类：
     .skeleton / .skeleton-line / .skeleton-line--title|--sub|--price
     .skeleton-card / .skeleton-icon / .skeleton-content / .loading-state
     .banner-skeleton / .notice-skeleton / .sidebar-skeleton / .left-sidebar--skeleton
   统一用暖灰，和奶油底协调。 */
/* 骨架**元素**给暖灰底 + 流光；⚠️ 不要把 .loading-state 这种"容器"也刷上底色，
   否则会变成一整块灰板（它只是包着 3 张骨架卡的父节点）。 */
[class*="skeleton"] {
  background-color: #EFE7DA !important;          /* 暖灰占位底 */
  background-image: linear-gradient(90deg, rgba(190, 170, 140, .28) 25%, rgba(255, 252, 246, .55) 50%, rgba(190, 170, 140, .28) 75%) !important;
  background-size: 200% 100% !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  border-radius: 10px !important;
  animation: fy-skeleton-flow 1.3s linear infinite !important;
}
/* 容器本身保持透明、正常显示 */
.loading-state,
.loading-badge,
.loading-submit,
.loading-chip {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}
/* 骨架"卡片"：给一个更像卡片的形状，但不能是我那套奶油卡片底色
   （否则又变成"空盒子"——上一轮就是这么被发现的） */
.skeleton-card,
.loading-state > .dj-card,
.loading-state .skeleton-card {
  background-color: #F6F0E6 !important;
  border-radius: 12px !important;
  min-height: 108px !important;
  box-shadow: none !important;
}
/* 骨架里的图标块做成方形圆角 */
.skeleton-icon {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 auto !important;
  border-radius: 10px !important;
}
/* 骨架文字条 */
.skeleton-line {
  height: 14px !important;
  border-radius: 6px !important;
  margin-top: 8px !important;
}
.skeleton-line--title { width: 76% !important; height: 21px !important; }
.skeleton-line--sub { width: 42% !important; height: 15px !important; }
.skeleton-line--price { width: 120px !important; height: 32px !important; margin-top: 8px !important; }
.skeleton-content { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; }

@keyframes fy-skeleton-flow {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- 12.2 首页快捷入口：不要先露一下程序自带的字体图标 ---------------------
   实测图标盒里同时存在两样东西：
       程序自带 <uni-text class="uni-icons uniui-headphones" style="display:none">
       fy-icons.js 追加 <div class="fy-quick-badge"><img src="/static/icons/q1.png">
   而 fy-icons.js 首次执行时 uni-app 还没挂载完，要等 300ms 的定时器才补图 ——
   中间那一下露出的就是"之前的图标"。
   对策：① 这里只留 badge，其它子元素一律不显示；
        ② fy-lite.js 用 MutationObserver 在节点出现的**当帧**就把图补上。 */
.page-body.home .quick-item .quick-icon-box > *:not(.fy-quick-badge) {
  display: none !important;
}

/* --- 12.3 搜索结果页的搜索框（它用的是**另一套类名**）---------------------
   实测（/pages/search/result）：
       .search-head.dj-card     ← 外框，吃到我的奶油卡片底色
         .search-input-wrap     ← **冷灰 rgb(245,247,250)**、radius 7.28px   ← 你看到的那块发蓝的框
         .search-btn            ← 已在 ⑩ 里隐藏
   上一轮我只写了 `.category-container .header-search …`，所以这个页面没管到。
   现在：内层透明，外框补上和其它页一致的橙描边 + 12px 圆角。 */
.search-head {
  border: 1px solid rgba(232, 145, 43, .45) !important;
  border-radius: 12px !important;
}
.search-input-wrap {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

/* --- 12.4 公告栏文字：同样下沉 2px ----------------------------------------
   实测公告栏（高 44px、align-items:center）：图标 上14/下14、文字 上11/下11、
   箭头 上15/下15 —— 三个盒子的中心都在 22px，数值上也居中。
   同样是字形视觉偏上，给同样的 2px 补偿，和「搜索」保持一致。 */
.notice-bar .notice-swiper {
  position: relative !important;
  top: 2px !important;
}


/* ==========================================================================
   ⑬ 分类页筛选行：同一行只允许一个"选中"
   --------------------------------------------------------------------------
   问题（你指出的）：点「特惠保底单」之后它变浅橙，但**「综合排序」也还是浅橙**
   —— 看着就是"选中和不选中都在显示颜色"。
   原因：程序里「综合排序」的 `.active` 表示的是**当前排序方式**，
        点标签做筛选时这个类**不会被摘掉**，所以两个同时亮。
   做法：fy-lite.js 每 700ms 检查一次 —— 只要有任意 [data-tagbtn] 处于选中态
        （category-tags.js 用内联 background:#FFF2E0 表示选中），
        就在 <body> 上打 fy-tag-chosen，这里把「综合排序」压回未选中样式。
   权重 (0,5,1) > 选中态规则的 (0,5,0)，压得住。
   ========================================================================== */

body.fy-tag-chosen .filter-tabs .filter-item.active[class],
body.fy-tag-chosen .main-layout .filter-tabs .filter-item.active[class] {
  background: linear-gradient(180deg, #FFFEFB 0%, #FFF7EC 100%) !important;
  background-image: linear-gradient(180deg, #FFFEFB 0%, #FFF7EC 100%) !important;
  color: #8A6A45 !important;
  border: 1px solid rgba(201, 152, 92, .28) !important;
}
