@charset "UTF-8";
/* ==========================================================================
   千岩服务平台 · H5 宽屏样式（平板 / 桌面）
   --------------------------------------------------------------------------
   ⚠️ 本文件**全部规则都包在媒体查询里**，窄屏（手机）不受影响。
      引入顺序必须是 app.css → mp-mobile.css → desktop.css（同优先级下后者覆盖前者）。

   🔴 与 mp-mobile.css 的关系：
      mp-mobile.css 是"小程序外观"的**基础**（全宽度生效）；
      本文件在其之上做**宽屏布局覆盖**（不改配色/圆角/阴影，只改排布与尺度）。
      这样移动端与小程序逐像素一致，宽屏则是同一设计的放大版，品牌统一。

   🔴 页面作用域：
      mp-mobile.css 里页面级样式都带 `.p-xxx` 前缀（复刻小程序的页面作用域，
      因为不同页面的同名 class 含义不同 —— 例如首页的 .order-btn 是通栏大按钮，
      详情页的是 220rpx 小胶囊）。
      因此**本文件的页面级覆盖也必须带同样的 `.p-xxx` 前缀**，
      否则会把 A 页的规则套到 B 页上。

   三档断点：
     < 768px     手机    底部 tabBar、商品 2 列、小程序原样
     768–1023px  平板    顶部导航、商品 3 列、显示侧栏
     ≥ 1024px    桌面    顶部导航、商品 4 列、内容区 1160px 居中
     ≥ 1440px    超大屏  内容区放宽到 1280px
   ========================================================================== */

/* ==========================================================================
   平板及以上（≥ 768px）
   ========================================================================== */
@media (min-width: 768px) {

  :root { --content-max: 1160px; --topnav-h: 62px; }

  html { font-size: 16px; }

  /* 宽屏没有底部 tabBar / 移动导航栏，改由固定顶栏占位 */
  body { padding-bottom: 28px; }
  body.has-topnav { padding-top: var(--topnav-h); }
  body.has-mnav { padding-top: 0; }
  body.has-tabbar { padding-bottom: 28px; }

  /* ---------------------------- 内容区通用约束 ----------------------------
     小程序的 .page 是通栏；宽屏下统一收窄并居中，避免超宽屏上一行过长。 */
  .p-index > .page,
  .p-category > .page,
  .p-order > .page,
  .p-message > .page,
  .p-ranking > .page,
  .p-mine > .page,
  .p-detail > .viewport,
  .p-chat > .chat-page,
  .p-risk > .risk-container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* ---------------------------- 顶部导航 ---------------------------- */

  .topnav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: var(--topnav-h);
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(101, 176, 232, .2);
    box-shadow: 0 2px 14px rgba(73, 138, 199, .1);
  }
  .topnav-inner {
    max-width: var(--content-max); height: 100%; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 30px;
  }
  .brand {
    display: flex; align-items: center; gap: 9px; text-decoration: none;
    color: #1a1a2e; font-weight: 800; font-size: 17px; flex: 0 0 auto;
  }
  .brand-logo {
    width: 32px; height: 32px; border-radius: 9px; display: flex;
    align-items: center; justify-content: center; color: #fff; font-size: 17px;
    background: linear-gradient(135deg, #65B0E8, #498AC7);
    box-shadow: 0 3px 9px rgba(73, 138, 199, .35);
  }
  .topnav-menu { display: flex; align-items: center; gap: 3px; flex: 1; overflow: hidden; }
  .topnav-link {
    padding: 8px 14px; border-radius: 9px; text-decoration: none;
    color: #3d5a80; font-size: 15px; white-space: nowrap;
    transition: background .15s, color .15s;
  }
  .topnav-link:hover { background: rgba(101, 176, 232, .13); color: #498AC7; }
  .topnav-link.on { color: #498AC7; font-weight: 700; background: rgba(101, 176, 232, .16); }
  .topnav-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
  .topnav-user {
    display: flex; align-items: center; gap: 8px; text-decoration: none;
    color: #1a1a2e; font-size: 14px; padding: 5px 12px 5px 5px;
    border-radius: 999px; background: rgba(101, 176, 232, .12);
  }
  .topnav-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
  .topnav-login {
    padding: 8px 22px; border-radius: 999px; font-size: 14px; font-weight: 600;
    color: #fff; background: linear-gradient(135deg, #65B0E8, #498AC7);
    box-shadow: 0 3px 10px rgba(73, 138, 199, .3);
  }
  .topnav-login:hover { opacity: .92; }

  /* ==========================================================================
     首页（.p-index）
     ========================================================================== */
  .p-index .main-scroll {
    padding-top: 24px;
    padding-bottom: 40px;
  }
  .p-index .banner { height: 380px; padding: 0; }
  .p-index .banner-viewport { border-radius: 20px; }
  .p-index .banner-title { font-size: 30px; }
  .p-index .banner-subtitle { font-size: 15px; }
  .p-index .banner-content { left: 32px; bottom: 56px; }
  .p-index .banner-logo { right: 28px; }
  .p-index .logo-text { font-size: 18px; letter-spacing: 5px; }
  .p-index .banner-dots { bottom: 22px; }

  /* 玻璃容器内改为两栏：左「排行榜」按钮，右「点单」大按钮；公告横跨整行 */
  .p-index .glass-container {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px 20px;
    align-items: stretch;
    margin: 0;
    margin-top: 20px;
    padding: 20px;
    border-radius: 20px;
  }
  .p-index .notice-bar { grid-column: 1 / 3; margin-bottom: 0; }
  .p-index .function-buttons-row { grid-column: 1; margin-bottom: 0; }
  .p-index .function-btn-horizontal { min-height: 96px; }
  .p-index .order-btn {
    grid-column: 2;
    margin-bottom: 0;
    min-height: 96px;
    font-size: 20px;
    letter-spacing: 6px;
  }
  .p-index .order-btn-text { font-size: 22px; }

  /* ==========================================================================
     分类页（.p-category）—— 左分类导航 + 右商品网格
     ========================================================================== */
  .p-category > .page {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0 24px;
    align-items: start;
  }
  .p-category .search-bar {
    grid-column: 1 / 3; grid-row: 1;
    position: sticky; top: var(--topnav-h); z-index: 45;
    padding: 16px 0 14px; margin-bottom: 18px;
    background: rgba(195, 237, 252, .93);
    border-bottom: none;
    box-shadow: none;
  }
  .p-category .search-row { max-width: 560px; }
  .p-category .search-box { height: 44px; border-radius: 12px; }
  .p-category .search-input { font-size: 15px; }
  .p-category .sort-options { margin-top: 12px; }
  .p-category .filter-toggle { padding: 8px 18px; font-size: 14px; }
  /* 宽屏不用悬浮弹窗：筛选选项直接排开，点击目标更大 */
  .p-category .filter-mask { display: none !important; }
  .p-category .filter-popup {
    display: flex !important; position: static !important;
    box-shadow: none; background: none; border: none; padding: 0;
    margin-top: 10px; gap: 8px; min-width: 0; flex-direction: row;
  }
  .p-category .filter-popup .filter-option {
    flex: 0 0 auto; padding: 7px 16px; border-radius: 999px;
    font-size: 13px; background: rgba(255, 255, 255, .8);
    border: 1px solid transparent;
  }
  .p-category .filter-popup .filter-option.active {
    background: linear-gradient(135deg, #65B0E8, #498AC7);
    color: #fff; font-weight: 600;
  }
  .p-category .filter-arrow { display: none; }

  .p-category .main-scroll { grid-column: 2; grid-row: 2; min-width: 0; padding: 0 0 40px 0; }
  .p-category .cat-side {
    /* 🔴 必须显式打开：app.css 里 .cat-side 默认 display:none（窄屏隐藏），
       这里只写布局属性不够 —— 不改 display 的话宽屏下它仍然是隐藏的，
       左侧会出现一整列空白。 */
    display: block;
    grid-column: 1; grid-row: 2;
    position: sticky; top: calc(var(--topnav-h) + 132px);
    background: rgba(255, 255, 255, .74); border-radius: 15px; padding: 14px 10px;
    box-shadow: 0 4px 16px rgba(73, 138, 199, .15);
    max-height: calc(100vh - 220px); overflow: auto;
  }
  .p-category .cat-side-title {
    font-size: 12px; color: #6d7b8a; padding: 0 8px 10px;
    letter-spacing: 1px; font-weight: 700;
  }
  .p-category .cat-side-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px; border-radius: 9px; cursor: pointer; font-size: 14px;
    color: #3d5a80; width: 100%; text-align: left;
    font-family: inherit; border: none; background: none;
  }
  .p-category .cat-side-item:hover { background: rgba(101, 176, 232, .13); }
  .p-category .cat-side-item.on { background: rgba(101, 176, 232, .2); color: #498AC7; font-weight: 700; }
  .p-category .cat-side-item .n { font-size: 11px; color: #6d7b8a; flex: 0 0 auto; }

  /* 分类标题栏在宽屏不需要折叠交互，去掉手型与箭头 */
  .p-category .category-bar { cursor: default; }
  .p-category .bar-arrow { display: none; }
  .p-category .bar-name { font-size: 18px; }
  .p-category .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .p-category .service-card { border-radius: 15px; }
  .p-category .service-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(73, 138, 199, .22); }
  .p-category .card-cover { height: 150px; }
  .p-category .card-title { font-size: 15px; }
  .p-category .category-body { max-height: none !important; overflow: visible !important; }

  /* ==========================================================================
     服务详情（.p-detail）—— 左图右信息
     ========================================================================== */
  .p-detail .viewport { height: auto; min-height: 0; }
  .p-detail .scroll-body { height: auto; }
  .p-detail .content-wrap { padding-top: 24px; }
  .p-detail .hero-card {
    display: grid;
    grid-template-columns: 440px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
  }
  .p-detail .hero-image-wrap { height: 320px; border-radius: 18px; }
  .p-detail .hero-title { font-size: 26px; }
  .p-detail .hero-subtitle { font-size: 15px; }
  .p-detail .hero-price .price-value,
  .p-detail .price-value { font-size: 34px; }
  .p-detail .intro-card { margin-top: 24px; padding: 26px; border-radius: 18px; }
  .p-detail .intro-title { font-size: 17px; }
  .p-detail .intro-text { font-size: 15px; line-height: 1.9; }

  /* 底部固定下单栏 → 宽屏改为常规块（不再遮挡内容） */
  .p-detail .order-bar {
    position: static;
    max-width: 720px; margin: 24px auto 0;
    padding: 16px 22px; border-radius: 16px;
    border: 1px solid rgba(101, 176, 232, .25);
    box-shadow: 0 4px 16px rgba(73, 138, 199, .15);
  }
  .p-detail .order-btn { width: 240px; height: 52px; font-size: 17px; }
  .p-detail .order-bar { display: flex; justify-content: space-between; align-items: center; }

  /* ==========================================================================
     订单中心（.p-order）—— 两列卡片
     ========================================================================== */
  .p-order .main-scroll { padding: 24px 0 40px; }
  .p-order .status-tabs { margin-bottom: 20px; }
  .p-order .order-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .p-order .order-card { margin: 0; padding: 18px; border-radius: 16px; }
  .p-order .order-card:hover { box-shadow: 0 8px 22px rgba(73, 138, 199, .2); }
  .p-order .card-title { font-size: 16px; }

  /* ==========================================================================
     消息中心（.p-message）
     ========================================================================== */
  .p-message .glass-container { margin: 24px auto 40px; padding: 24px; border-radius: 20px; }
  .p-message .section-title { font-size: 17px; }
  .p-message .msg-item, .p-message .chat-item { padding: 16px; }
  .p-message .msg-title, .p-message .chat-name { font-size: 16px; }

  /* ==========================================================================
     排行榜（.p-ranking）
     ========================================================================== */
  .p-ranking .page-content { padding: 24px 0 40px; }
  .p-ranking .header-title { font-size: 26px; }
  .p-ranking .top-three { margin-top: 28px; }
  .p-ranking .podium { align-items: flex-end; }
  .p-ranking .podium-item { transform: scale(1.06); transform-origin: bottom center; }
  .p-ranking .list-section { margin-top: 32px; }
  .p-ranking .list-scroll { max-height: none; overflow: visible; }
  /* 第 6 名起在宽屏排两列，避免长列表左对齐过窄 */
  .p-ranking .list-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .p-ranking .list-item { padding: 14px 16px; }

  /* ==========================================================================
     我的（.p-mine）—— 左资料卡 + 右内容
     ========================================================================== */
  .p-mine .page-content { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 22px; align-items: start; padding: 24px 0 40px; }
  .p-mine .top-bar { grid-column: 1 / 3; margin-bottom: 0; }
  .p-mine .user-section { grid-column: 1; }
  .p-mine .card-container { grid-column: 2; }
  .p-mine .user-card { min-height: 210px; }
  .p-mine .user-name { font-size: 21px; }
  .p-mine .service-card { margin-top: 14px; }
  .p-mine .footer { grid-column: 1 / 3; }

  /* ==========================================================================
     聊天（.p-chat）
     ========================================================================== */
  .p-chat .chat-page { padding-bottom: 84px; }
  .p-chat .msg-list { padding: 20px 0 10px; }
  .p-chat .bubble { max-width: 62%; }
  .p-chat .input-bar {
    max-width: var(--content-max);
    left: 50%; right: auto; transform: translateX(-50%);
    width: 100%;
    padding-left: 24px; padding-right: 24px;
    border-radius: 14px 14px 0 0;
  }

  /* ==========================================================================
     风险告知书（.p-risk）—— 单栏窄栏，便于阅读
     ========================================================================== */
  .p-risk .risk-container { padding: 24px 0 40px; }
  .p-risk .risk-content { max-width: 860px; margin: 0 auto; padding: 40px 48px; border-radius: 20px; }
  .p-risk .section-title { font-size: 17px; }
  .p-risk .section-text { font-size: 15px; line-height: 2; }
  .p-risk .update-time { font-size: 13px; }

  /* ==========================================================================
     确认订单（.p-order-confirm）—— 桌面并排：内容 + 右侧下单栏
     --------------------------------------------------------------------------
     移动端是**单列纵向**（照抄小程序），底部「合计 + 确认下单」是一条 fixed 横栏。
     桌面上若照搬，那条横栏会被拉成整屏宽、且盖住内容 —— 很难看。
     所以这里改成：左栏内容 + 右栏（sticky 跟随）下单卡。
     用 flex（而不是 grid）的原因：`.bottom-bar` 与 `.page-content` 是**兄弟节点**，
     flex 直接按顺序排即可，不需要重排 DOM；`.page-bg` 是 position:fixed 不占位，不影响。
     ⚠️ 所有规则都带 .p-order-confirm 前缀，绝不外溢到别的页面。
     ========================================================================== */
  .p-order-confirm .page-container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 16px 20px 48px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
  }
  .p-order-confirm .page-content {
    flex: 1 1 auto;
    min-width: 0;
    /* 移动端的 70px 是给 fixed 横栏让位的；桌面栏已在流内，不需要 */
    padding: 0;
  }
  .p-order-confirm .glass-card { margin: 0 0 16px; padding: 20px; }

  .p-order-confirm .bottom-bar {
    position: sticky;
    top: 88px;                 /* 顶部导航栏（.mnav/.topnav 约 60px）+ 留白 */
    bottom: auto; left: auto; right: auto;
    flex: 0 0 336px;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 22px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.09);
    z-index: 10;
  }
  .p-order-confirm .order-summary { flex: 0 0 auto; justify-content: space-between; width: 100%; font-size: 15px; }
  .p-order-confirm .summary-price { font-size: 22px; }
  .p-order-confirm .confirm-btn {
    width: 100%;
    padding: 15px 0;
    font-size: 17px;
    border-radius: 12px;
  }
  /* 覆盖层与弹窗必须仍是全屏 fixed（不受上面的 flex 影响） */
  .p-order-confirm .sd-overlay { position: fixed; }
  .p-order-confirm .privacy-modal { position: fixed; }

  /* 移动端为了"看得见能滚"把滚动区压得很矮（70/90/84px），桌面给舒展空间 */
  .p-order-confirm .intro-text { height: 150px; }
  .p-order-confirm .product-list { height: 260px; }
  .p-order-confirm .remark-input { height: 120px; }
  .p-order-confirm .game-id-input { min-height: 46px; font-size: 15px; }
  /* 商品项在宽屏下更像"列表行"，点击区更大 */
  .p-order-confirm .product-item { padding: 12px; }

  /* ==========================================================================
     支付结果（.p-pay-result）—— 居中窄卡片
     ========================================================================== */
  .p-pay-result .page {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
  }
  .p-pay-result .result-card {
    width: 100%;
    max-width: 520px;
    margin-top: 40px;
    padding: 48px 44px;
  }
  .p-pay-result .title { font-size: 26px; }
  .p-pay-result .subtitle { font-size: 15px; }
  .p-pay-result .info-label,
  .p-pay-result .info-value { font-size: 15px; }
  .p-pay-result .info-value.price { font-size: 18px; }
  .p-pay-result .icon-wrapper { width: 116px; height: 116px; }
  .p-pay-result .ring-canvas { width: 116px; height: 116px; }
  .p-pay-result .btn-primary { height: 52px; font-size: 17px; }

  /* ==========================================================================
     隐私保护指引 / 用户协议（.p-privacy / .p-agreement）—— 单栏窄栏，便于阅读
     --------------------------------------------------------------------------
     法务文本在宽屏上**不该跟着屏幕变宽** ：一行 150 个字符没人读得下去，
     而且《隐私保护指引》是要能被用户真正读完的合规文档，可读性直接影响有效性。
     所以固定成 860px 窄栏居中（与 .p-risk 同一处理）。
     ========================================================================== */
  .p-privacy .privacy-container,
  .p-agreement .agreement-container { padding: 24px 0 40px; }
  .p-privacy .privacy-content,
  .p-agreement .agreement-content {
    max-width: 860px; margin: 0 auto;
    padding: 44px 52px; border-radius: 20px;
  }
  .p-privacy .privacy-content { font-size: 15px; line-height: 1.95; }
  .p-agreement .agreement-content { font-size: 15px; line-height: 1.95; }
  .p-privacy .section-title,
  .p-agreement .section-title { font-size: 17px; }
  .p-privacy .section-text,
  .p-agreement .section-text { font-size: 15px; line-height: 2; }
  .p-privacy .block-title { font-size: 15px; }
  .p-privacy .block-content,
  .p-privacy .block-desc { font-size: 14px; }
  .p-privacy .update-time,
  .p-agreement .update-time { font-size: 13px; }

  /* ==========================================================================
     设置 / 账户设置（.p-setting / .p-account）—— 居中窄栏，条目可点区域更大
     ========================================================================== */
  .p-setting .page,
  .p-account .page { max-width: 640px; margin: 0 auto; padding-bottom: 40px; }
  .p-setting .page-header { padding: 24px 0 12px; }
  .p-setting .header-title { font-size: 26px; }
  .p-setting .setting-item,
  .p-account .setting-item { padding: 18px 20px; }
  .p-setting .item-title,
  .p-account .item-title { font-size: 16px; }
  .p-setting .item-desc,
  .p-account .item-desc { font-size: 13px; }
  .p-account .setting-card { border-radius: 16px; }
  .p-account .user-info { padding: 22px 20px; }
  .p-account .user-avatar { width: 60px; height: 60px; }
  .p-account .user-name { font-size: 17px; }
  .p-account .modal-box { max-width: 420px; }

  /* ---------------------------- 交互组件（宽屏放大） ---------------------------- */
  .modal { max-width: 460px; padding: 26px; border-radius: 18px; }
  .modal-title { font-size: 19px; }
  .modal-body { font-size: 15px; }
  .toast { font-size: 15px; padding: 14px 24px; }
  .footer { font-size: 12px; padding: 30px 24px; }
  .empty { padding: 72px 20px; }
}

/* ==========================================================================
   桌面（≥ 1024px）—— 比平板多一列商品
   ========================================================================== */
@media (min-width: 1024px) {
  .p-category .service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-category .card-cover { height: 158px; }
  .p-index .banner { height: 420px; }
  .p-index .glass-container { grid-template-columns: 1fr 380px; }
  .p-detail .hero-card { grid-template-columns: 500px minmax(0, 1fr); }
  .p-detail .hero-image-wrap { height: 360px; }
}

/* ==========================================================================
   超大屏（≥ 1440px）—— 放宽内容区，避免两侧空白过大
   ========================================================================== */
@media (min-width: 1440px) {
  :root { --content-max: 1280px; }
}

/* ==========================================================================
   打印（可能会有人打印订单 / 风险告知书）
   ========================================================================== */
@media print {
  .topnav, .mnav, .tab-bar-wrapper, .order-bar, .input-bar, .chat-input-bar, .footer, .assign-btn, .assign-btn-small { display: none !important; }
  body { padding: 0 !important; background: #fff !important; }
  .card, .risk-content, .order-card, .service-card, .hero-card, .intro-card { box-shadow: none !important; border: 1px solid #ccc; }
}