/**
 * 倾尽娱乐 - 移动端商业美化（Mobile Pro）
 *
 * 仅在 max-width:768px 生效，桌面端完全不受影响。
 * 定位：把"功能能用的界面"提升为"像能赚钱的产品"。
 *
 * 设计原则：
 *  1. 层次 —— 用阴影分层 + 卡片圆角建立视觉秩序，而非靠边框
 *  2. 转化 —— 价格、CTA、会员入口统一强化，弱化次要信息
 *  3. 手感 —— 所有可点区域 ≥44px（移动端可点击性标准）
 *  4. 克制 —— 只加"必要"的装饰，避免廉价感（如滥用渐变、发光）
 *
 * 为何独立成文件：
 *  style.css 已 6000+ 行，再往里堆移动端规则会难以维护。
 *  独立后用 media 属性加载，桌面端不解析这些规则。
 */

/* ==================== 设计令牌 ==================== */
@media (max-width: 768px) {
  :root {
    /* 圆角：越大越亲和，商业产品普遍 12-16px */
    --mp-r-sm: 8px;
    --mp-r-md: 12px;
    --mp-r-lg: 16px;
    --mp-r-xl: 20px;
    --mp-r-pill: 999px;

    /* 阴影：分层，移动端要柔不要重 */
    --mp-sh-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --mp-sh-2: 0 2px 4px rgba(16, 24, 40, .04), 0 6px 16px rgba(16, 24, 40, .07);
    --mp-sh-3: 0 4px 8px rgba(16, 24, 40, .05), 0 14px 32px rgba(16, 24, 40, .10);

    /* 商业语义色 */
    --mp-price: #ff3b30;
    --mp-price-2: #ff6b35;
    --mp-gold: #f7b955;
    --mp-gold-2: #ffd76e;
    --mp-hot: #ff3b30;
    --mp-new: #10b981;

    /* 间距 */
    --mp-gap: 12px;
    --mp-pad: 16px;

    /* 文字层级：商业界面需要明显的强弱对比 */
    --mp-t-1: #101828;
    --mp-t-2: #475467;
    --mp-t-3: #98a2b3;
  }

  /* ==================== 全局基础 ==================== */

  /* 字体放大 + 行高放松，手机屏阅读更舒服 */
  body {
    font-size: 15px;
    line-height: 1.72;
    background: #f4f5f7;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
  }

  .wrap {
    padding: 0 var(--mp-gap)
  }

  /* 禁止横向溢出（长 URL、代码块常导致整页可左右滑） */
  html,
  body {
    overflow-x: hidden
  }

  /* 长内容强制换行 */
  .card,
  .card * {
    word-break: break-word;
    overflow-wrap: anywhere
  }

  /* ==================== 顶部导航 ==================== */
  .nav {
    background: linear-gradient(135deg, var(--main) 0%, var(--main2) 100%);
    box-shadow: var(--mp-sh-2);
    position: sticky;
    top: 0;
    z-index: 60
  }

  .nav .wrap {
    height: 52px
  }

  .nav .logo {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff
  }

  /* 导航右侧：只给「铃铛/余额/后台」做半透明胶囊。
     头像链接(含 .ava)有独立圆形样式，不能用通用 a 选择器误伤。 */
  .nav .right {
    gap: 7px;
    flex-wrap: nowrap;
    min-width: 0
  }

  .nav .right a[href*="c=notify"],
  .nav .right a[href*="c=wallet"],
  .nav .right a[href*="admin.php"] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 28px;
    padding: 0 9px;
    border-radius: var(--mp-r-pill);
    background: rgba(255, 255, 255, .20);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    flex: none;
    transition: background .18s ease
  }

  .nav .right a[href*="c=notify"]:active,
  .nav .right a[href*="c=wallet"]:active {
    background: rgba(255, 255, 255, .34)
  }

  /* 余额数字可能很长（如 1952891.58），限宽 + 省略，避免挤爆导航 */
  .nav .right a[href*="c=wallet"] {
    max-width: 108px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  /* 未登录时的登录/注册按钮 */
  .nav .right a[href*="a=login"],
  .nav .right a[href*="a=register"] {
    height: 28px;
    padding: 0 12px;
    border-radius: var(--mp-r-pill);
    background: rgba(255, 255, 255, .92);
    color: var(--main2);
    font-size: 12.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    flex: none
  }

  /* 头像：移除胶囊背景干扰，保持纯圆形 */
  .nav .right a[href*="c=me"] {
    padding: 0;
    background: none;
    flex: none
  }

  .nav .right a[href*="c=me"]:active {
    background: none
  }

  /* ==================== 卡片系统 ==================== */
  .card {
    border-radius: var(--mp-r-lg);
    padding: var(--mp-pad);
    margin-bottom: var(--mp-gap);
    box-shadow: var(--mp-sh-1);
    border: 0;
    /* 入场：轻微上浮，页面切换有"落位"感 */
    animation: mpIn .32s cubic-bezier(.22, 1, .36, 1) both
  }

  /* 列表型卡片（好友、通知）去掉大面积留白，改为行式 */
  .card:last-child {
    margin-bottom: calc(var(--mp-gap) + env(safe-area-inset-bottom))
  }

  @keyframes mpIn {
    from {
      opacity: 0;
      transform: translateY(8px)
    }

    to {
      opacity: 1;
      transform: none
    }
  }

  /* 卡片标题：图标 + 文字，去掉生硬的左侧竖条 */
  .card h3 {
    margin: 0 0 12px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--mp-t-1);
    border-left: 0;
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    letter-spacing: .2px
  }

  /* 标题前加一个小色块，比整条竖线更精致 */
  .card h3::before {
    content: "";
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--main), var(--main2));
    flex: none
  }

  /* ==================== 按钮与 CTA ==================== */

  /* 统一最小点击高度 44px（移动端可点击性标准，防误触） */
  .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 18px;
    border-radius: var(--mp-r-md);
    font-size: 14.5px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--main), var(--main2));
    box-shadow: 0 2px 8px rgba(102, 126, 234, .28);
    transition: transform .12s ease, box-shadow .18s ease, opacity .18s ease
  }

  .btn:active {
    transform: scale(.97);
    box-shadow: 0 1px 4px rgba(102, 126, 234, .22)
  }

  .btn.sm {
    min-height: 32px;
    padding: 0 13px;
    font-size: 13px;
    border-radius: var(--mp-r-sm)
  }

  /* 主行动按钮：更宽更高，商业转化核心 */
  .btn.block,
  .btn.main-cta {
    width: 100%;
    min-height: 46px;
    font-size: 16px;
    border-radius: var(--mp-r-md);
    box-shadow: 0 4px 14px rgba(102, 126, 234, .32)
  }

  .btn.gray {
    background: #8a94a6;
    box-shadow: 0 2px 6px rgba(138, 148, 166, .22)
  }

  .btn.red {
    background: linear-gradient(135deg, #ff5a5f, #e53e3e);
    box-shadow: 0 2px 8px rgba(229, 62, 62, .28)
  }

  /* ==================== 价格（商业化核心） ==================== */

  /* ¥ 符号小、数字大、橙红渐变 —— 电商标准价签 */
  .prod .pr,
  .price,
  .p-price {
    color: var(--mp-price) !important;
    font-weight: 800;
    letter-spacing: -.3px
  }

  .prod .pr::first-letter,
  .price::first-letter {
    font-size: .72em;
    font-weight: 700
  }

  /* 原价删除线 */
  .price-old,
  .p-old {
    color: var(--mp-t-3);
    text-decoration: line-through;
    font-size: 12.5px;
    margin-left: 6px;
    font-weight: 400
  }

  /* ==================== 促销标签 ==================== */
  .tag-hot,
  .tag-new,
  .tag-limit,
  .tag-rec {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
    vertical-align: 1px;
    margin-right: 4px
  }

  .tag-hot {
    background: linear-gradient(135deg, #ff6b35, #ff3b30)
  }

  .tag-new {
    background: linear-gradient(135deg, #34d399, #10b981)
  }

  .tag-limit {
    background: linear-gradient(135deg, #f59e0b, #d97706)
  }

  .tag-rec {
    background: linear-gradient(135deg, #a78bfa, #7c3aed)
  }

  /* ==================== 商品卡（商城/积分） ==================== */
  .prods {
    gap: var(--mp-gap)
  }

  .prod {
    width: calc(50% - var(--mp-gap) / 2);
    border-radius: var(--mp-r-md);
    box-shadow: var(--mp-sh-1);
    overflow: hidden;
    transition: transform .16s ease, box-shadow .2s ease
  }

  .prod:active {
    transform: scale(.98)
  }

  .prod .pic {
    height: 0;
    padding-bottom: 78%;
    position: relative;
    background: #f2f3f5
  }

  /* 图片占位图标居中 */
  .prod .pic>* {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px
  }

  .prod .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }

  .prod .info {
    padding: 9px 10px 11px
  }

  .prod .nm {
    font-size: 13.5px;
    line-height: 1.45;
    height: 39px;
    /* 两行截断，商业卡片必须固定高度才整齐 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--mp-t-1);
    margin-bottom: 6px
  }

  .prod .pr {
    font-size: 17px !important
  }

  /* 销量行 */
  .prod-sales {
    font-size: 11px;
    color: var(--mp-t-3);
    margin-top: 3px
  }

  /* 售罄：灰色，不用红色（红色会诱导点击却买不到，反而伤转化） */
  .tag-oos {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
    background: #98a2b3;
    vertical-align: 1px;
    margin-right: 4px
  }

  /* 商品图上的角标：左上角，半透明底保证可读性 */
  .prod .pic .pic-tag,
  .prod .pic>span.pic-tag {
    position: absolute;
    left: 6px;
    top: 6px;
    z-index: 2;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18)
  }

  /* 标题里的标签与文字基线对齐 */
  .prod .nm .tag-hot,
  .prod .nm .tag-new,
  .prod .nm .tag-limit,
  .prod .nm .tag-oos {
    margin-right: 3px
  }

  /* 售罄商品整体降饱和，视觉上"不可买" */
  .prod .pic .tag-oos {
    background: rgba(90, 100, 115, .92)
  }

  /* ==================== 会员卡 / 余额卡 ==================== */

  /* 金色渐变 + 高光，会员入口要有"值钱感" */
  .vip-hero {
    border-radius: var(--mp-r-lg);
    padding: 18px;
    background:
      radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, .28) 0%, transparent 42%),
      linear-gradient(135deg, var(--main) 0%, var(--main2) 100%);
    box-shadow: var(--mp-sh-3);
    position: relative;
    overflow: hidden
  }

  /* 装饰光斑 */
  .vip-hero::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10)
  }

  .vh-name {
    font-size: 20px;
    letter-spacing: .3px
  }

  .vip-hero .btn {
    background: rgba(255, 255, 255, .95);
    color: var(--main2);
    border: 0;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    min-height: 36px
  }

  /* 会员套餐卡：真实类名为 .vip-p（两列铺满） */
  .vip-plans {
    gap: var(--mp-gap)
  }

  .vip-p {
    flex: 1 1 calc(50% - var(--mp-gap) / 2) !important;
    min-width: calc(50% - var(--mp-gap) / 2) !important;
    max-width: calc(50% - var(--mp-gap) / 2) !important;
    border-radius: var(--mp-r-md);
    padding: 15px 11px;
    box-shadow: var(--mp-sh-1);
    border: 1px solid transparent
  }

  /* 推荐套餐（带角标的）高亮 */
  .vip-p .vp-badge {
    border-radius: var(--mp-r-pill);
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 8px
  }

  .vip-p .vp-pr b {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.4px
  }

  /* 特权标签：小灰胶囊 */
  .vip-p .vp-perks span {
    display: inline-block;
    padding: 2px 7px;
    margin: 2px 1px;
    border-radius: var(--mp-r-sm);
    background: #f2f3f5;
    color: var(--mp-t-2);
    font-size: 11px;
    line-height: 1.5
  }

  .vip-p .vp-btn {
    width: 100%;
    margin-top: 10px;
    min-height: 38px
  }

  /* 会员标签 */
  .vip-tag {
    border-radius: var(--mp-r-pill);
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700
  }

  /* ==================== 数据卡（余额/积分/统计） ==================== */
  .me-stat {
    border-radius: var(--mp-r-md);
    padding: 14px 8px;
    background: linear-gradient(135deg, rgba(102, 126, 234, .06), rgba(118, 75, 162, .06))
  }

  .me-stat b {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.2px
  }

  .me-stat span {
    font-size: 11.5px;
    color: var(--mp-t-2)
  }

  .stat .s .v {
    font-size: 19px;
    font-weight: 800
  }

  /* ==================== 列表行（好友、菜单、设置） ==================== */

  /* 菜单行：更大点击区 + 箭头靠右 */
  .me-menu .mi {
    min-height: 52px;
    padding: 12px 14px;
    border-radius: var(--mp-r-md);
    gap: 12px
  }

  .me-menu .mi:active {
    background: #f2f3f5
  }

  /* ==================== 底部导航（毛玻璃） ==================== */
  .tabbar {
    display: flex;
    height: auto;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid rgba(0, 0, 0, .05);
    box-shadow: 0 -2px 16px rgba(16, 24, 40, .06);
    z-index: 70
  }

  .tabbar .tb-i {
    padding: 7px 0 6px;
    font-size: 10.5px;
    color: var(--mp-t-3);
    transition: color .18s ease
  }

  /* 图标放大，激活态用主色 */
  .tabbar .tb-i > i {
    font-size: 21px;
    line-height: 1;
    margin-bottom: 2px;
    filter: grayscale(1);
    opacity: .55;
    transition: transform .2s ease, opacity .2s ease, filter .2s ease
  }

  .tabbar .tb-i.on {
    color: var(--main);
    font-weight: 700
  }

  .tabbar .tb-i.on > i {
    filter: none;
    opacity: 1;
    transform: translateY(-1px) scale(1.06)
  }

  /* 底部导航的未读角标 */
  .tabbar .tb-i > em.dot {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--mp-r-pill);
    background: var(--mp-hot);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center
  }

  /* ==================== 表单（防 iOS 自动缩放） ==================== */

  /* iOS 在 font-size < 16px 时会自动放大页面，这是移动端最常见的体验坑 */
  input,
  select,
  textarea {
    font-size: 16px !important
  }

  input[type=text],
  input[type=password],
  input[type=email],
  input[type=number],
  input[type=search],
  select,
  textarea {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--mp-r-md);
    border: 1px solid var(--line);
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease
  }

  input:focus,
  select:focus,
  textarea:focus {
    outline: 0;
    border-color: var(--main);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, .13)
  }

  .field {
    margin-bottom: 14px
  }

  .field label {
    display: block;
    font-size: 13px;
    color: var(--mp-t-2);
    margin-bottom: 6px;
    font-weight: 600
  }

  /* ==================== 提示条 ==================== */
  .alert {
    border-radius: var(--mp-r-md);
    padding: 11px 13px;
    font-size: 13.5px;
    line-height: 1.6;
    border: 0
  }

  .alert.ok {
    background: #ecfdf5;
    color: #065f46
  }

  .alert.err {
    background: #fef2f2;
    color: #991b1b
  }

  /* ==================== 空状态 ==================== */
  .empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--mp-t-3)
  }

  .empty {
    font-size: 13.5px
  }

  /* 空状态前加一个淡图标（纯 CSS，无需改 PHP） */
  .empty::before {
    content: "📭";
    display: block;
    font-size: 38px;
    opacity: .32;
    margin-bottom: 10px
  }

  /* ==================== 论坛列表 ==================== */

  /* 帖子行：更强的疏密对比 */
  /* 论坛/列表行：真实结构为 .list > .item */
  .list .item {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    gap: 11px
  }

  .list .item:last-child {
    border-bottom: 0
  }

  /* 帖子标题：两行截断，列表更整齐 */
  .list .item .tt {
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
  }

  .list .item .tt a {
    color: var(--mp-t-1)
  }

  /* 元信息行：弱化，突出标题 */
  .list .item .meta {
    font-size: 12px;
    color: var(--mp-t-3);
    margin-top: 3px
  }

  /* 回复数：做成小胶囊，视觉上有"热度"感 */
  .list .item .reply-count {
    flex: none;
    min-width: 26px;
    height: 20px;
    padding: 0 7px;
    border-radius: var(--mp-r-pill);
    background: #f2f3f5;
    color: var(--mp-t-3);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 20px;
    text-align: center
  }

  /* 置顶/精华标签 */
  .list .item .tag {
    border-radius: 4px;
    font-size: 10.5px;
    padding: 1px 5px;
    font-weight: 700;
    vertical-align: 1px
  }

  /* 列表头像：统一圆形裁切、禁止被压缩变形 */
  .list .item .ava,
  .list .item img.ava {
    border-radius: 50%;
    overflow: hidden;
    flex: none
  }

  /* ==================== 动效与反馈 ==================== */

  /* 可点击元素的统一按压反馈 */
  a[class],
  button,
  .js-like,
  .btn {
    -webkit-tap-highlight-color: transparent
  }

  /* 列表项按压 */
  .mi:active,
  .list .item:active {
    background: #f7f8fa
  }

  /* 尊重系统"减少动态效果" */
  @media (prefers-reduced-motion: reduce) {

    .card,
    .btn,
    .prod,
    .tabbar .tb-i > i {
      animation: none !important;
      transition: none !important
    }
  }
}

/* ==================== 小屏适配（≤360px，如 iPhone SE） ==================== */
@media (max-width: 360px) {
  .prods .prod {
    width: 100%
  }

  .vip-plans .vip-p {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    max-width: 100% !important
  }

  .wrap {
    padding: 0 10px
  }

  .card {
    padding: 13px
  }
}