*,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    /* ============ 钉钉进步体（subset） ============ */
    @font-face {
      font-family: 'DingdingJinbu';
      src: url('/assets/aiq/font/dingding-jinbu.woff2') format('woff2'),
           url('/assets/aiq/font/dingding-jinbu.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }

    /* 站名中的英文/数字（如 Q）专用：圆体，与进步体粗细、斜势接近 */
    @font-face {
      font-family: 'Baloo2';
      src: url('/assets/aiq/font/baloo-2-latin-700.woff2') format('woff2');
      font-weight: 700;
      font-style: normal;
      font-display: block;
    }

    /* 去掉元素 focus 时浏览器默认的丑陋蓝色 outline */
    a:focus, button:focus, .navbar-brand:focus,
    .nav > li > a:focus,
    input:focus, select:focus, textarea:focus {
      outline: none !important;
    }

    :root {
      /* 轻量化色板，去掉过深的渐变 */
      --c-primary: #4f7cff;
      --c-primary-soft: #eaf0ff;
      --c-accent: #f97316;
      --c-accent-soft: #fff1e6;
      --c-text: #1f2937;
      --c-text-2: #4b5563;
      --c-text-3: #9ca3af;
      --c-bg: #f4f6f9;
      --c-card: #ffffff;
      --c-border: #e5e7eb;
      --c-border-soft: #f1f3f5;
      --c-success: #16a34a;
      --c-danger: #ef4444;
      --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
      --shadow-md: 0 2px 10px rgba(15, 23, 42, 0.06);
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 12px;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      color: var(--c-text);
      /* 顶部蓝紫渐变 → 往下过渡到冷灰，与白色卡片自然衔接 */
      background-color: #f4f6f9;
      background: linear-gradient(180deg, #818ae8 0%, #eef1f5 60%, #f4f6f9 100%) fixed no-repeat;
    }

    body {
      padding-bottom: 40px;
    }

    /* ============ 顶部导航 ============ */
    .navbar-modern {
      background: rgba(255, 255, 255, 0.96) !important;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: none;
      box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
    }

    .navbar-modern .navbar-brand {
      color: var(--c-text) !important;
      font-weight: 600;
      font-size: 17px;
      display: inline-flex !important;
      align-items: center;
      gap: 2px;
      padding: 8px 0 !important;
    }
    .navbar-modern .navbar-brand .navbar-logo {
      height: 38px;
      width: 38px;
      flex-shrink: 0;
      display: inline-block;
    }
    .navbar-modern .navbar-brand .navbar-title {
      font-family: 'DingdingJinbu', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      font-size: 22px;
      font-weight: 600;
      letter-spacing: 1px;
      line-height: 1;
      vertical-align: middle;
    }
    /* 分站无自定义 logo 时 brand 只剩 22px 标题，默认 8px 间距是按 38px logo 设计的会顶上沿，
       加大上下内边距让标题在导航条内垂直居中 */
    .navbar-modern .navbar-brand.no-logo {
      padding: 12px 0 !important;
    }
    /* 站名中的英文/数字（如 Q）：进步体显示不佳，换圆体并带轻微斜势匹配 */
    .navbar-modern .navbar-brand .navbar-title .title-en {
      font-family: 'Baloo2', 'Arial Rounded MT Bold', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      font-weight: 700;
      font-size: 25px;
      letter-spacing: 1px;
      display: inline-block;
      transform: skewX(-8deg);
    }
    /* 修复 Bootstrap3 手机端 .navbar > .container .navbar-brand 的 margin-left:-15px 导致 logo 贴边 */
    .navbar-modern > .container .navbar-brand {
      margin-left: 0 !important;
    }

    /* navbar-header 全宽度下都是 flex 布局（手机版 logo 左 + 开关右，电脑版 logo + 开关），
       Bootstrap clearfix 的 ::before/::after 会变成 flex 子项吃掉间距，必须禁掉 */
    .navbar-modern .navbar-header::before,
    .navbar-modern .navbar-header::after {
      display: none;
    }

    .navbar-modern .navbar-nav>li>a {
      color: var(--c-text-2) !important;
      font-weight: 500;
      transition: color 0.2s ease;
      border-radius: var(--radius-sm);
      margin: 8px 4px;
      padding: 7px 14px !important;
      font-size: 13.5px;
    }

    .navbar-modern .navbar-nav>li>a:hover,
    .navbar-modern .navbar-nav>li.active>a {
      color: var(--c-primary) !important;
      background: var(--c-primary-soft) !important;
    }

    /* ============ 顶部导航风格开关：完整 / 极速（电脑版在 logo 旁，手机版靠右） ============ */
    .theme-switch {
      display: inline-flex;
      margin-left: 12px;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
    }

    .theme-switch .ts-track {
      position: relative;
      display: inline-flex;
      align-items: center;
      height: 28px;
      padding: 2px;
      background: #eef1f6;
      border: 1px solid var(--c-border-soft);
      border-radius: 999px;
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
      transition: border-color 0.2s ease;
    }

    .theme-switch:hover .ts-track {
      border-color: #dbe3f5;
    }

    .theme-switch .ts-opt {
      position: relative;
      z-index: 1;
      width: 66px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      font-size: 12px;
      line-height: 1;
      color: var(--c-text-3);
      white-space: nowrap;
      transition: color 0.25s ease;
    }

    .theme-switch .ts-opt .fa {
      font-size: 11px;
    }

    /* 滑块：与选中项等宽，极速版时向右平移一个选项位 */
    .theme-switch .ts-knob {
      position: absolute;
      top: 2px;
      left: 2px;
      z-index: 0;
      width: 66px;
      height: 24px;
      border-radius: 999px;
      background: linear-gradient(135deg, #4f7cff, #818ae8);
      box-shadow: 0 2px 6px rgba(79, 124, 255, 0.35);
      transition: transform 0.25s ease;
    }

    /* 默认：完整（左侧选中） */
    .theme-switch:not(.is-fast) .ts-opt[data-mode="shop"] {
      color: #fff;
    }

    /* 极速版：滑块右移、右侧高亮 */
    .theme-switch.is-fast .ts-knob {
      transform: translateX(66px);
    }

    .theme-switch.is-fast .ts-opt[data-mode="fast"] {
      color: #fff;
    }

    .main-container {
      margin-top: 70px;
    }

    /* ============ 公告卡片 ============ */
    .notice-card {
      background: var(--c-card);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--c-border-soft);
      overflow: hidden;
      margin-bottom: 16px;
    }

    .notice-header {
      background: #fafbfc;
      color: var(--c-text-2);
      padding: 12px 18px;
      font-weight: 500;
      font-size: 13.5px;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      border-bottom: 1px solid var(--c-border-soft);
    }

    .notice-header i {
      color: var(--c-primary);
    }

    .notice-body {
      padding: 14px 18px;
      color: var(--c-text-2);
      line-height: 1.8;
      font-size: 13px;
    }

    /* 公告里的彩色 label 统一轻量化 */
    .notice-body .label,
    .notice-body .badge,
    .notice-body span[class*="label-"],
    .notice-body span[class*="badge-"],
    .notice-body .btn,
    .notice-body .btn-xs {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 8px !important;
      border-radius: 6px !important;
      font-size: 11px !important;
      font-weight: 500 !important;
      color: var(--c-text-2) !important;
      background: #f1f3f5 !important;
      border: 1px solid var(--c-border-soft) !important;
      margin-right: 5px;
      line-height: 1.4;
      vertical-align: middle;
      box-shadow: none !important;
    }

    .notice-body br {
      display: block;
      content: '';
      margin-bottom: 4px;
    }

    /* 公告里的彩色文字降权 */
    .notice-body span,
    .notice-body a {
      color: inherit;
    }

    .notice-body a {
      color: var(--c-primary);
      text-decoration: none;
    }

    .notice-body b {
      background: none !important;
      -webkit-background-clip: initial !important;
      background-clip: initial !important;
      color: inherit !important;
      font-weight: 600;
    }

    /* ============ 主体两栏 ============ */
    .shop-layout {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }

    /* ============ 左侧分类导航（桌面端） ============ */
    .sidebar {
      flex: 0 0 200px;
      width: 200px;
      position: sticky;
      top: 80px;
      max-height: calc(100vh - 100px);
      overflow-y: auto;
      align-self: flex-start;
    }

    .sidebar-card {
      background: var(--c-card);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--c-border-soft);
      overflow: hidden;
    }

    .sidebar-title {
      margin: 0;
      padding: 12px 16px;
      font-size: 13px;
      font-weight: 600;
      color: var(--c-text-2);
      background: #fafbfc;
      border-bottom: 1px solid var(--c-border-soft);
      letter-spacing: 0.5px;
    }

    .class-nav {
      list-style: none;
      margin: 0;
      padding: 6px 0;
    }

    .class-nav li {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      margin: 0 6px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      color: var(--c-text-2);
      font-size: 13px;
      line-height: 1.3;
      transition: all 0.18s ease;
      user-select: none;
    }

    .class-nav li:hover {
      background: var(--c-primary-soft);
      color: var(--c-primary);
    }

    .class-nav li.active {
      background: var(--c-primary-soft);
      color: var(--c-primary);
      font-weight: 600;
    }

    .class-nav .class-icon {
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      color: var(--c-primary);
      background: #fff;
      border: 1px solid var(--c-border-soft);
      border-radius: var(--radius-sm);
      overflow: hidden;
      display: inline-block;
    }

    .class-nav .class-icon-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .class-nav .class-name {
      flex: 1;
      word-break: break-all;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    /* ============ 右侧商品区 ============ */
    .shop-main {
      flex: 1;
      min-width: 0;
    }

    .class-section {
      background: var(--c-card);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--c-border-soft);
      margin-bottom: 14px;
      overflow: hidden;
      scroll-margin-top: 80px;
    }

    .class-header {
      background: #fafbfc;
      color: var(--c-text);
      padding: 11px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13.5px;
      font-weight: 600;
      border-bottom: 1px solid var(--c-border-soft);
    }

    .class-header .class-header-left {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .class-header .header-icon-img {
      width: 22px;
      height: 22px;
      object-fit: cover;
      border-radius: 5px;
      background: #f1f3f5;
      vertical-align: middle;
    }

    .class-header .header-icon-fallback {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      background: var(--c-primary-soft);
      color: var(--c-primary);
      border-radius: 5px;
      font-size: 12px;
      font-weight: 700;
    }

    .class-body {
      padding: 4px 0;
    }

    /* ============ 单个商品行 ============ */
    .product-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--c-border-soft);
      transition: background 0.18s ease;
      cursor: pointer;
      position: relative;
    }

    /* hover 左侧品牌蓝指示条 */
    .product-row::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      bottom: 10px;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: linear-gradient(180deg, #4f7cff, #818ae8);
      opacity: 0;
      transition: opacity 0.18s ease;
      pointer-events: none;
    }

    .product-row:last-child {
      border-bottom: none;
    }

    .product-row:hover {
      background: linear-gradient(90deg, rgba(79, 124, 255, 0.09), rgba(129, 138, 232, 0.05) 55%, rgba(129, 138, 232, 0));
    }

    .product-row:hover::before {
      opacity: 1;
    }

    .product-row:active {
      background: rgba(79, 124, 255, 0.13);
    }

    .product-row.is-offline {
      opacity: 0.55;
      filter: grayscale(0.5);
      cursor: not-allowed;
    }

    /* 商品图容器：承载已下架角标 */
    .product-img-wrap {
      position: relative;
      flex: 0 0 auto;
      line-height: 0;
    }

    /* 已下架小标签：灰色，挂在商品图左上角 */
    .product-offline-badge {
      position: absolute;
      top: -5px;
      left: -5px;
      z-index: 2;
      background: #8a9099;
      color: #fff;
      font-size: 10px;
      line-height: 1;
      padding: 3px 6px;
      border-radius: 4px;
      white-space: nowrap;
      box-shadow: 0 1px 3px rgba(31, 41, 55, 0.18);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    /* 无图商品的已下架标签：插在商品名称最前面，样式与图上角标一致 */
    .product-offline-tag {
      display: inline-block;
      vertical-align: middle;
      background: #8a9099;
      color: #fff;
      font-size: 10px;
      line-height: 1;
      padding: 3px 6px;
      border-radius: 4px;
      white-space: nowrap;
      box-shadow: 0 1px 3px rgba(31, 41, 55, 0.18);
      margin-right: 6px;
      flex-shrink: 0;
      transform: translateY(-1px);
    }

    /* 黑名单计划商品：整行浅红底、名称亮红，名称前挂红色标签 */
    .product-row.is-hmd {
      background: #fff5f5;
    }
    .product-row.is-hmd .name-main {
      color: #e02020;
      font-weight: 600;
    }
    .product-hmd-badge {
      display: inline-block;
      vertical-align: middle;
      background: #e02020;
      color: #fff;
      font-size: 10px;
      line-height: 1;
      padding: 3px 6px;
      border-radius: 4px;
      white-space: nowrap;
      box-shadow: 0 1px 3px rgba(224, 32, 32, 0.25);
      margin-right: 6px;
      flex-shrink: 0;
      transform: translateY(-1px);
    }


    .product-row.no-img {
      gap: 0;
    }

    .product-row.no-img .product-info {
      flex: 1;
      padding-left: 0;
    }

    .product-img {
      flex: 0 0 56px;
      width: 56px;
      height: 56px;
      border-radius: var(--radius-md);
      object-fit: cover;
      background: #f7f8fa;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    }

    /* 懒加载淡入：图片配合 loading="lazy" 按需加载，加载完成前透明、完成后淡入。
       html.has-js 由 head 前置脚本添加，无 JS 时图片直接显示不受影响 */
    html.has-js .product-img {
      opacity: 0;
      transition: opacity 0.35s ease;
    }

    html.has-js .product-img.is-loaded {
      opacity: 1;
    }

    .product-info {
      flex: 1;
      min-width: 0;
    }

    .product-name {
      font-size: 13.5px;
      line-height: 1.45;
      color: var(--c-text);
      word-break: break-all;
      display: block;
      overflow: hidden;
    }

    .product-name .name-main {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .product-name .activity-days {
      font-size: 11.5px;
      padding: 1px 7px;
      border-radius: 4px;
      white-space: nowrap;
      font-weight: 600;
      display: inline-block;
      margin-top: 3px;
    }

    .activity-days.activity-ongoing {
      color: var(--c-accent);
      background: var(--c-accent-soft);
    }

    .activity-days.activity-scheduled {
      color: var(--c-primary);
      background: var(--c-primary-soft);
    }

    .activity-days.activity-ended {
      color: var(--c-text-3);
      background: #f1f3f5;
    }

    .product-meta .meta-activity {
      display: none;
    }

    /* 商品元数据行：库存 / 价格（手机版紧跟在名称下） */
    .product-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 6px;
    }

    .product-stock {
      font-size: 12px;
      color: var(--c-text-3);
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .product-stock .stock-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--c-success);
    }

    .product-stock.is-low .stock-dot {
      background: var(--c-accent);
    }

    .product-stock.is-soldout .stock-dot {
      background: var(--c-text-3);
    }

    .product-stock strong {
      color: var(--c-text);
      font-weight: 600;
    }

    .product-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .product-tag {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 11px;
      padding: 1px 7px;
      border-radius: 999px;
      line-height: 1.55;
    }

    .product-tag.tag-soldout {
      color: var(--c-danger);
      background: #fef2f2;
    }

    .product-tag.tag-up {
      color: var(--c-success);
      background: #f0fdf4;
    }

    .product-tag.tag-down {
      color: var(--c-text-3);
      background: #f1f5f9;
    }

    /* 右侧价格区（电脑端） */
    .product-right {
      flex: 0 0 auto;
      text-align: right;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
    }

    .product-price {
      font-weight: 700;
      color: var(--c-accent);
      font-size: 16px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .product-price .product-unit {
      color: var(--c-text-3);
      font-weight: 400;
      font-size: 11px;
      margin-left: 2px;
    }

    /* ============ 空状态 ============ */
    .empty-tip {
      text-align: center;
      color: var(--c-text-3);
      padding: 28px 16px;
      font-size: 13px;
    }

    /* ============ 页脚 ============ */
    .footer-modern {
      text-align: center;
      margin-top: 28px;
      padding: 14px;
      color: var(--c-text-3);
      font-size: 12.5px;
    }

    .footer-modern a {
      text-decoration: none;
      color: var(--c-primary);
    }

    /* ============ 悬浮按钮 ============ */
    .cart-float {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 1000;
    }

    .cart-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--c-primary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      box-shadow: 0 6px 16px rgba(79, 124, 255, 0.32);
      transition: transform 0.2s ease;
      cursor: pointer;
      position: relative;
    }

    .cart-btn:hover {
      transform: scale(1.05);
    }

    .cart-count {
      position: absolute;
      top: -4px;
      right: -4px;
      background: var(--c-danger);
      color: white;
      font-size: 11px;
      font-weight: 700;
      min-width: 18px;
      height: 18px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
    }

    .customer-service-float {
      position: fixed;
      left: 18px;
      bottom: 18px;
      z-index: 1001;
    }

    .customer-service-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 9px 16px;
      background: #fff;
      color: var(--c-text-2);
      border: 1px solid var(--c-border);
      border-radius: 999px;
      text-decoration: none;
      font-size: 13px;
      box-shadow: var(--shadow-md);
      transition: all 0.2s ease;
      cursor: pointer;
    }

    .customer-service-btn i {
      color: var(--c-primary);
    }

    .customer-service-btn:hover {
      transform: translateY(-2px);
      color: var(--c-primary);
      text-decoration: none;
    }

    #audio-play {
      position: fixed;
      right: 18px;
      bottom: 78px;
      z-index: 1000;
    }

    #audio-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: var(--shadow-md);
    }

    #audio-btn::before {
      content: '\f028';
      font-family: 'FontAwesome';
      font-size: 16px;
      color: var(--c-primary);
    }

    #audio-btn.off::before {
      content: '\f026';
      color: var(--c-text-3);
    }

    /* ============ 手机版底部 Tab 导航 ============ */
    .mobile-tabbar {
      display: none;
    }

    @media (max-width: 992px) {
      .mobile-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* 底部导航常驻最上层：不论停留在哪个页面（含全屏下单页）都保持可见可点 */
        z-index: 2000;
        /* 实心白底 + 顶部发丝线：去掉毛玻璃透出内容导致的渐变 */
        background: #ffffff;
        border-top: 0.5px solid rgba(15, 23, 42, 0.08);
        padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px));
      }

      .mobile-tabbar .tab-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 3px 0 2px;
        text-decoration: none;
        color: var(--c-text-3);
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        /* 触控目标撑到 ~52px，符合 44pt 最低标准 */
        min-height: 48px;
      }

      .mobile-tabbar .tab-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 28px;
        font-size: 20px;
        line-height: 1;
        border-radius: 14px;
        /* 弹簧曲线：激活上浮/按压回缩都带一点回弹 */
        transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                    background 0.22s ease, color 0.22s ease;
      }

      .mobile-tabbar .tab-label {
        font-size: 10px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.5px;
        transition: color 0.2s ease;
      }

      /* 按压反馈：图标轻微回缩 */
      .mobile-tabbar .tab-item:active .tab-icon {
        transform: scale(0.86);
      }

      /* 激活态：软蓝胶囊 + 上浮，色彩与站点主色一致 */
      .mobile-tabbar .tab-item.active {
        color: var(--c-primary);
      }
      .mobile-tabbar .tab-item.active .tab-icon {
        color: var(--c-primary);
        background: var(--c-primary-soft);
        transform: translateY(-2px) scale(1.06);
        animation: tabIconPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .mobile-tabbar .tab-item.active .tab-label {
        color: var(--c-primary);
        font-weight: 600;
      }

      @keyframes tabIconPop {
        0% { transform: translateY(0) scale(0.7); }
        62% { transform: translateY(-3px) scale(1.12); }
        100% { transform: translateY(-2px) scale(1.06); }
      }

      /* 内容底部留白：避免最后一屏被 Tab 栏盖住 */
      body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
      }

      /* 悬浮按钮避让 Tab 栏 */
      .cart-float {
        right: 14px;
        bottom: calc(74px + env(safe-area-inset-bottom, 0px));
      }
      #audio-play {
        right: 14px;
        bottom: calc(130px + env(safe-area-inset-bottom, 0px));
      }
      /* 客服已进 Tab 栏，手机端隐藏左下角悬浮入口避免重复 */
      .customer-service-float {
        display: none;
      }
    }

    /* ============ 底部抽屉（下单弹窗） ============ */
    .buy-drawer-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15, 15, 20, 0.55);
      backdrop-filter: blur(12px) saturate(140%);
      -webkit-backdrop-filter: blur(12px) saturate(140%);
      z-index: 1500;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .buy-drawer-backdrop.is-show {
      opacity: 1;
      visibility: visible;
    }

    /* 桌面端：居中卡片式抽屉，两侧留距；高度固定，滑出即完整大小（手机端全宽，见媒体查询） */
    .buy-drawer {
      position: fixed;
      left: 50%;
      bottom: 0;
      z-index: 1501;
      width: min(94vw, 720px);
      height: min(92vh, 900px);
      background: #fff;
      border-radius: 24px 24px 0 0;
      box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.25);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transform: translate(-50%, 105%);
      transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);
      /* 禁止双击缩放：iOS 10+ 无视 meta 的 user-scalable=no，步进器/按钮快速
         连点会被识别为双击把页面放大，manipulation 只保留平移手势、干掉双击缩放 */
      touch-action: manipulation;
    }

    /* 大屏桌面：进一步放大（与同行看齐） */
    @media (min-width: 1440px) {
      .buy-drawer {
        width: min(94vw, 820px);
        height: 94vh;
      }
    }

    .buy-drawer.is-show {
      transform: translate(-50%, 0);
    }

    /* 拖拽中禁用过渡，跟随手指 */
    .buy-drawer.is-dragging {
      transition: none !important;
    }

    .drawer-handle {
      position: relative;
      background: #fff;
      padding: 14px 20px 10px;
      border-bottom: 1px solid var(--c-border-soft);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      cursor: grab;
    }

    .drawer-handle:active {
      cursor: grabbing;
    }

    .drawer-handle::before {
      content: '';
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      width: 34px;
      height: 3.5px;
      background: #e5e7eb;
      border-radius: 2px;
    }

    .drawer-title {
      font-size: 14.5px;
      font-weight: 600;
      color: var(--c-text);
      flex: 1;
      padding-right: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .drawer-close {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #f1f3f5;
      color: var(--c-text-3);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
      flex-shrink: 0;
      transition: background 0.2s, color 0.2s, transform 0.25s;
    }

    /* 关闭是高频操作：悬停时放大、叉号旋转 90° 并变红，给出明确的可点击反馈 */
    .drawer-close:hover {
      background: #fee2e2;
      color: #ef4444;
      transform: scale(1.12) rotate(90deg);
    }

    .drawer-close:active {
      transform: scale(0.94) rotate(90deg);
    }

    /* 关闭按钮 + ESC 提示纵向叠放，提示紧贴叉号下方 */
    .drawer-close-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      flex-shrink: 0;
    }

    /* 手机版全屏下单页的返回按钮（替代「快捷下单」标题位置）：
       桌面端隐藏（桌面抽屉保留标题），仅手机端 display:flex */
    .drawer-back {
      display: none;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #f1f3f5;
      color: var(--c-text-2);
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 20px;
      line-height: 1;
      flex-shrink: 0;
      transition: background 0.2s, color 0.2s;
    }

    .drawer-back:hover {
      background: #e5e9f2;
      color: var(--c-text);
    }

    .drawer-close-tip {
      font-size: 10px;
      color: var(--c-text-3);
      line-height: 1;
      white-space: nowrap;
      user-select: none;
      -webkit-user-select: none;
    }

    /* 移动端没有 ESC 键，提示无意义，隐藏 */
    @media (max-width: 992px) {
      .drawer-close-tip {
        display: none;
      }
    }

    /* 抽屉内建加载态：抽屉先以完整大小滑出，loading 在内部居中，就绪后内容淡入 */
    .drawer-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex: 1;
      color: var(--c-text-3);
      font-size: 13px;
    }

    .drawer-loading .spinner {
      width: 28px;
      height: 28px;
      border: 3px solid #eef1f5;
      border-top-color: var(--c-primary);
      border-radius: 50%;
      animation: drawerSpin 0.8s linear infinite;
    }

    @keyframes drawerSpin {
      to { transform: rotate(360deg); }
    }

    .drawer-content {
      display: none;
    }

    .drawer-content.is-ready {
      display: block;
      animation: drawerFadeIn 0.28s ease;
    }

    @keyframes drawerFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: none; }
    }

    /* 商品信息：图 + 名称 + 活动时间 + 库存（扁平无卡片，底部分隔线） */
    .drawer-goods {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 6px 0 16px;
      border-bottom: 1px solid var(--c-border-soft);
      margin-bottom: 18px;
    }

    .drawer-goods .g-img {
      width: 72px;
      height: 72px;
      border-radius: 10px;
      object-fit: cover;
      background: #f2f4f6;
      flex-shrink: 0;
      display: none;
    }

    .drawer-goods .g-img.is-show {
      display: block;
    }

    .drawer-goods .g-main {
      flex: 1;
      min-width: 0;
    }

    .drawer-goods .g-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--c-text);
      line-height: 1.5;
      word-break: break-all;
    }

    .drawer-goods .g-activity {
      font-size: 12px;
      color: var(--c-text-3);
      margin-top: 3px;
    }

    .drawer-goods .g-stock {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 100px;
      background: rgba(34, 197, 94, 0.1);
      color: #16a34a;
      font-weight: 500;
      margin-top: 5px;
    }

    .drawer-goods .g-stock::before {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: currentColor;
    }

    /* 批量下单按钮：仅 PC 端显示（原样式），手机端隐藏 */
    .btn-batch {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 8px 13px;
      border-radius: 9px;
      border: 1px solid rgba(37, 99, 235, 0.22);
      background: #f0f6ff;
      color: #2563eb;
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background 0.2s;
    }

    .btn-batch:hover {
      background: #e2efff;
    }

    @media (max-width: 992px) {
      .btn-batch {
        display: none;
      }
    }

    /* 份数 + 金额同一行：份数（步进器）靠左、金额靠右；
       非 multi 商品份数隐藏时，金额仍靠右（margin-left:auto 兜底） */
    .drawer-num-amount {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
    }

    .drawer-num-amount .drawer-amount {
      margin-left: auto;
      min-width: 0;
    }

    /* 金额：随份数联动（含阶梯优惠），变化时轻微放大 */
    .drawer-amount {
      display: flex;
      align-items: baseline;
      gap: 5px;
      padding: 0;
    }

    .drawer-amount .amount-sym {
      font-size: 15px;
      font-weight: 700;
      color: #ff4936;
    }

    .drawer-amount .amount-num {
      font-size: 30px;
      font-weight: 800;
      color: #ff4936;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      transition: transform 0.12s ease;
    }

    .drawer-amount .amount-num.bump {
      transform: scale(1.06);
    }

    .drawer-amount .amount-unit {
      font-size: 13px;
      color: #ff4936;
      font-weight: 600;
    }

    /* 份数：无标签，步进器靠左 + 「份」（与金额同处一行，不再独占行距） */
    .drawer-num {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
    }

    .drawer-num-unit {
      margin-left: 8px;
      font-size: 12px;
      color: var(--c-text-3);
    }

    /* 数量步进器：- 数量 + */
    .drawer-quantity {
      display: flex;
      align-items: center;
      background: #fff;
      border: 1px solid var(--c-border);
      border-radius: 10px;
      overflow: hidden;
    }

    .drawer-quantity-btn {
      width: 38px;
      height: 36px;
      border: none;
      background: transparent;
      color: var(--c-primary);
      font-size: 16px;
      font-weight: 400;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease;
    }

    .drawer-quantity-btn:hover {
      background: var(--c-primary-soft);
    }

    .drawer-quantity-btn:active {
      transform: scale(0.92);
    }

    .drawer-quantity input {
      width: 52px;
      height: 36px;
      text-align: center;
      border: none;
      border-left: 1px solid var(--c-border-soft);
      border-right: 1px solid var(--c-border-soft);
      font-size: 14px;
      font-weight: 700;
      outline: none;
      background: transparent;
      color: var(--c-text);
      /* 屏蔽 number 输入框自带的上下小箭头（加减已有步进器按钮，原生箭头丑且挤） */
      -webkit-appearance: none;
      -moz-appearance: textfield;
      appearance: none;
    }

    .drawer-quantity input::-webkit-outer-spin-button,
    .drawer-quantity input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .drawer-body {
      padding: 18px 20px calc(24px + env(safe-area-inset-bottom, 0px));
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      /* 不写 -webkit-overflow-scrolling:touch：iOS 原生滚动容器被键盘滚动后
         会出现「合成层渲染位置 vs 命中测试位置」失同步（整页点不中、要点上方）；
         iOS13+ 的 overflow:auto 默认已带惯性滚动，去掉无任何体验损失 */
      background: #fff;
    }

    /* 输入字段：标签+输入框连为一体，focus 时整体描边（标签底色同步点亮） */
    .drawer-field {
      display: flex;
      align-items: stretch;
      background: #fff;
      border: 1px solid var(--c-border);
      border-radius: 10px;
      margin-bottom: 14px;
      overflow: hidden;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .drawer-field:focus-within {
      border-color: var(--c-primary);
      box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.12);
    }

    /* 左侧标签块：宽度随商品自定义标题内容自适应（无固定宽度），原 input-group-addon 原地保留 */
    .drawer-field .input-group-addon {
      flex-shrink: 0;
      width: auto; /* 覆盖 Bootstrap 的 width:1%（表格布局遗留，会把标签挤没） */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 14px;
      background: #f3f5fa;
      color: var(--c-text-2);
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: 0.5px;
      border: none;
      border-right: 1px solid var(--c-border-soft);
      white-space: nowrap;
      transition: background 0.15s, color 0.15s;
    }

    .drawer-field:focus-within .input-group-addon {
      background: #eef2fe;
      color: var(--c-primary);
    }

    .drawer-field .form-control {
      flex: 1;
      min-width: 0;
      border: none;
      padding: 0 12px;
      height: 44px;
      font-size: 14px;
      background: #fff;
      color: var(--c-text);
      outline: none;
      box-shadow: none;
      font-family: inherit;
      border-radius: 0;
    }

    .drawer-field .form-control::placeholder {
      color: #b8bec7;
    }

    /* 输入框旁的动作按钮（自动获取/点此选择）：贴字段右缘，去掉基础标签的右边框 */
    .drawer-field .input-group-addon.onclick {
      min-width: 0;
      padding: 0 14px;
      background: var(--c-primary-soft);
      color: var(--c-primary);
      border: none;
      border-left: 1px solid rgba(79, 124, 255, 0.25);
      font-size: 12.5px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .drawer-field .input-group-addon.onclick:hover {
      background: rgba(79, 124, 255, 0.14);
    }

    /* 购买操作区：跟随内容滚动，不吸底；立即购买独占一行 */
    .drawer-buybar {
      /* 与上方份数/金额行拉开距离，避免误触 */
      margin: 14px 0 18px;
    }

    .drawer-submit-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 15px 14px;
      border: none;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 2px;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
    }

    .drawer-submit-btn:hover {
      text-decoration: none;
      filter: brightness(1.04);
    }

    .drawer-submit-btn:active {
      transform: scale(0.98);
    }

    .drawer-submit-btn.btn-buy {
      background: linear-gradient(90deg, #ff4936, #e62129);
      color: #fff;
      box-shadow: 0 6px 16px rgba(230, 33, 41, 0.28);
    }

    /* 分割线：上方购买操作区 / 下方商品详情（有商品介绍时才显示，见 openBuyDrawer） */
    .drawer-divider {
      height: 0;
      border-top: 1px solid var(--c-border-soft);
      margin: 4px 0 16px;
    }

    /* 商品介绍（立即购买按钮下方，与购买区之间有分割线） */
    .drawer-alert {
      margin-top: 0;
      background: #fff;
      color: var(--c-text-2);
      border: 1px solid var(--c-border);
      /* padding: 13px 15px; */
      border-radius: 14px;
      font-size: 13px;
      line-height: 1.7;
    }

    .drawer-alert img {
      max-width: 100%;
      border-radius: 8px;
    }

    /* 抽屉里的动态输入框：注入结构会立即由 beautifyFields 转成 .drawer-field（标签左置一体），
       不留 #inputsname 级兜底样式——ID 选择器优先级会覆盖 .drawer-field 的新样式（曾致标签固定宽度失效） */

    /* 手机版：不再用底部抽屉，点商品直接进入全屏下单页
       （fixed 铺满 Tab 导航以上的整个屏幕；淡入淡出切换，无滑出动画。
        抽屉+transform 动画+键盘高度补偿的组合在移动端键盘弹出/收起时
        会引发视口偏移、命中错位等一系列 bug，全屏页从结构上消除这些问题。
        底部 Tab 导航常驻最上层：全屏页只铺到导航正上方，随时可点首页/查单） */
    @media (max-width: 992px) {
      .buy-drawer {
        left: 0;
        right: 0;
        top: 0;
        /* 底部让位于常驻 Tab 导航（--mtab-h 由 JS 按实际导航高度注入，含安全区） */
        bottom: var(--mtab-h, 58px);
        width: 100%;
        height: auto;
        border-radius: 0;
        box-shadow: none;
        /* 位于 Tab 栏(z-index:2000)之下，导航永远盖在最上层 */
        z-index: 1501;
        transform: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.18s ease, visibility 0.18s ease;
      }

      .buy-drawer.is-show {
        transform: none;
        opacity: 1;
        visibility: visible;
      }

      /* 全屏页头部：普通页面头，无把手条、无下拉关闭交互 */
      .drawer-handle {
        cursor: default;
        padding: 10px 14px;
      }

      .drawer-handle::before {
        display: none;
      }

      /* 「快捷下单」标题隐藏，换成左侧返回按钮 */
      .drawer-title {
        display: none;
      }

      .drawer-back {
        display: flex;
      }

      /* 全屏页底部止于 Tab 栏正上方，收尾间距与桌面基准一致 */
      .drawer-body {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
      }
    }

    /* 模态框 */
    .modal-content {
      border-radius: var(--radius-md);
      border: none;
      box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
      overflow: hidden;
    }

    .modal-header {
      background: #fafbfc;
      color: var(--c-text);
      border: none;
      border-bottom: 1px solid var(--c-border-soft);
      padding: 12px 18px;
    }

    .modal-header .close {
      color: var(--c-text-3);
      opacity: 1;
    }

    .modal-body {
      padding: 16px 18px;
    }

    .modal-footer {
      border: none;
      padding: 0 18px 16px;
    }

    .btn-modal-confirm {
      padding: 7px 20px;
      border-radius: var(--radius-sm);
      font-weight: 500;
      border: none;
      background: var(--c-primary);
      color: white;
      font-size: 13px;
    }

    /* ============ 页面抽屉（内嵌打开：订单/明细/查询，底部滑出） ============ */
    .pg-drawer-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.42);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 1600;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.28s ease, visibility 0.28s ease;
    }

    .pg-drawer-backdrop.is-show {
      opacity: 1;
      visibility: visible;
    }

    .pg-drawer {
      position: fixed;
      left: 50%;
      bottom: 0;
      z-index: 1601;
      width: min(94vw, 960px);
      height: min(92vh, 860px);
      background: #f4f6f9;
      border-radius: 18px 18px 0 0;
      box-shadow: 0 -24px 70px rgba(15, 23, 42, 0.3);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transform: translate(-50%, 105%);
      transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .pg-drawer.is-show {
      transform: translate(-50%, 0);
    }

    .pg-drawer-head {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 16px 13px;
      background: #fff;
      border-bottom: 1px solid var(--c-border-soft);
      flex-shrink: 0;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      touch-action: none;
    }

    .pg-drawer-head:active {
      cursor: grabbing;
    }

    /* 底部抽屉的把手指示条 */
    .pg-drawer-head::before {
      content: '';
      position: absolute;
      top: 6px;
      left: 50%;
      transform: translateX(-50%);
      width: 34px;
      height: 3.5px;
      background: #e5e7eb;
      border-radius: 2px;
    }

    .pg-drawer-title {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 14.5px;
      font-weight: 600;
      color: var(--c-text);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .pg-drawer-title i {
      width: 26px;
      height: 26px;
      border-radius: 8px;
      background: linear-gradient(135deg, #5b7cff, #7a5cff);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      flex-shrink: 0;
    }

    .pg-drawer-acts {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .pg-drawer-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: none;
      background: #f1f3f7;
      color: var(--c-text-2);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 13px;
      line-height: 1;
      transition: background 0.2s, color 0.2s;
    }

    .pg-drawer-btn:hover {
      background: #e5e9f2;
      color: var(--c-text);
    }

    /* 页面抽屉关闭按钮：高频操作，单独加大点击区域，悬停放大、图标旋转并变红 */
    #pgDrawerClose {
      width: 42px;
      height: 42px;
      font-size: 19px;
      transition: background 0.2s, color 0.2s, transform 0.25s;
    }

    #pgDrawerClose:hover {
      background: #fee2e2;
      color: #ef4444;
      transform: scale(1.12) rotate(90deg);
    }

    #pgDrawerClose:active {
      transform: scale(0.94) rotate(90deg);
    }

    a.pg-drawer-btn {
      text-decoration: none;
    }

    a.pg-drawer-btn:hover {
      text-decoration: none;
      color: var(--c-text);
    }

    .pg-drawer-body {
      position: relative;
      flex: 1;
      min-height: 0;
    }

    .pg-drawer-frame {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
      background: #f4f6f9;
    }

    .pg-drawer-loading {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background: #f4f6f9;
      color: var(--c-text-3);
      font-size: 13px;
      z-index: 2;
      transition: opacity 0.25s ease;
    }

    .pg-drawer-loading.is-done {
      opacity: 0;
      pointer-events: none;
    }

    .pg-drawer-loading .spinner {
      width: 30px;
      height: 30px;
      border: 3px solid #e5eaf3;
      border-top-color: var(--c-primary);
      border-radius: 50%;
      animation: pgDrawerSpin 0.8s linear infinite;
    }

    @keyframes pgDrawerSpin {
      to { transform: rotate(360deg); }
    }

    /* 拖拽中禁用过渡，跟随手指 */
    .pg-drawer.is-dragging {
      transition: none !important;
    }

    /* 手机版：抽屉全宽、无圆角 */
    @media (max-width: 992px) {
      .pg-drawer {
        width: 100vw;
        height: 94vh;
        border-radius: 0;
      }
    }

    /* =============================================== */
    /* ============== 响应式：手机版 ============== */
    /* =============================================== */
    @media (max-width: 992px) {
      .main-container {
        margin-top: 60px;
        padding: 0 10px;
      }

      /* 手机版：抵消 Bootstrap 给 .navbar-header 的 -15px 负边距，
         并把导航左右内边距改成 10px，让 logo 与下方卡片留白对齐 */
      .navbar-modern .navbar-header {
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      .navbar-modern > .container {
        padding-left: 10px;
        padding-right: 10px;
      }
      /* 手机版：去掉右上角三杠菜单（导航入口走底部 tabbar），
         原位置放 完整 / 极速 风格开关，与 logo 一左一右 */
      .navbar-modern .navbar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .theme-switch {
        display: inline-flex;
        margin-left: 0;
        flex-shrink: 0;
      }

      /* 电脑版左侧抽屉整体隐藏，分类导航改为吸顶横排条 */
      .sidebar,
      .sidebar-backdrop,
      .sidebar-toggle {
        display: none !important;
      }

      /* 手机版：layout 改竖排堆叠，避免被横排分类条撑爆 */
      .shop-layout {
        flex-direction: column;
        gap: 0;
      }

      .mobile-classbar {
        display: block;
        position: sticky;
        top: 50px;
        z-index: 999;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--c-border-soft);
        /* 上下留白保持一致（与下方 12px 对称，配合 jy-top-wrap 手机版 margin-bottom:12px） */
        margin: 12px -10px;
        padding: 0;
        /* 关键：flex 子项的宽度不能超出父容器，
           否则会把整个 .shop-layout 撑出 viewport */
        width: calc(100% + 20px);
        max-width: 100vw;
        overflow: hidden;
        flex-shrink: 0;
      }

      .mobile-classbar-scroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        /* 上下留足 padding：overflow-x: auto 会连带裁切纵向，
           选中态的 box-shadow 光晕必须在容器内完整渲染，否则顶部被切脏 */
        padding: 8px 12px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
      }

      .mobile-classbar-scroll::-webkit-scrollbar {
        display: none;
      }

      .mobile-classbar-scroll .class-nav {
        display: flex;
        gap: 10px;
        padding: 0;
        margin: 0;
        flex-direction: row;
        width: max-content;
      }

      /* 手机版分类导航条：横排正方形图标 + 名称 */
      .mobile-classbar-scroll .class-nav li {
        flex: 0 0 auto;
        width: 74px;
        padding: 0;
        margin: 0;
        flex-direction: column;
        gap: 5px;
        background: transparent;
        text-align: center;
      }

      .mobile-classbar-scroll .class-nav li .class-icon {
        /* 固定 58×58 正方形盒子，非方形原图一律裁切填充，杜绝拉伸扭曲 */
        width: 58px !important;
        height: 58px !important;
        max-width: 58px !important;
        min-width: 58px !important;
        flex: 0 0 58px !important;
        object-fit: cover !important;
        display: block;
        line-height: 58px;
        font-size: 16px;
        border-radius: 16px;
        overflow: hidden;
        border: 2px solid transparent;
        background: #fff;
        margin: 0 auto;
        transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
      }

      /* 选中态：细边框 + 光感淡蓝，边框粗细保持 2px 不变，避免图标跳动 */
      .mobile-classbar-scroll .class-nav li.active .class-icon {
        border-color: #38bdf8;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15), 0 0 14px rgba(56, 189, 248, 0.55);
        transform: translateY(-1px);
      }

      .mobile-classbar-scroll .class-nav li .class-name {
        font-size: 11px;
        color: var(--c-text-3);
        line-height: 1.25;
        -webkit-line-clamp: 2;
        font-weight: 500;
      }

      .mobile-classbar-scroll .class-nav li.active .class-name {
        color: #0ea5e9;
        font-weight: 600;
      }

      /* 商品区 */
      .class-section {
        margin-bottom: 12px;
        border-radius: var(--radius-md);
        /* 兼顾 hash 定位：预留固定导航 + 吸顶分类条的高度，表头不被盖住 */
        scroll-margin-top: 180px;
      }

      /* shop-main 在 mobile 下要避免被 flex 子项撑大 */
      .shop-main {
        min-width: 0;
        width: 100%;
      }

      /* 手机版价格已在 meta 下方展示，右侧列隐藏避免重复 */
      .product-right {
        display: none;
      }

      .class-header {
        padding: 10px 14px;
        font-size: 13px;
      }

      /* 商品行：竖排更紧凑 */
      .product-row {
        gap: 10px;
        padding: 10px 12px;
      }

      .product-img {
        flex: 0 0 66px;
        width: 66px;
        height: 66px;
        border-radius: 10px;
      }

      .product-info {
        flex: 1;
        min-width: 0;
      }

      .product-name {
        font-size: 13px;
      }

      .product-meta {
        margin-top: 5px;
      }

      .product-stock {
        font-size: 11.5px;
      }

      /* 手机版价格：与库存/活动信息同一行，一左一右，价格靠右落在卡片右下角 */
      .product-meta {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 5px;
      }

      /* 手机版：活动徽章从商品名行移到底部信息行，与价格一左一右 */
      .product-name .activity-days {
        display: none;
      }

      .product-meta .meta-activity {
        display: inline-flex;
        align-items: center;
      }

      .product-meta .meta-activity .activity-days {
        font-size: 11.5px;
        padding: 1px 7px;
        border-radius: 4px;
        white-space: nowrap;
        font-weight: 600;
        display: inline-block;
      }

      .mobile-price {
        display: inline-flex;
        align-items: baseline;
        gap: 3px;
        line-height: 1.2;
        /* 无库存标签时也要保持靠右 */
        margin-left: auto;
      }

      .mobile-price .mobile-price-value {
        font-size: 14px;
        font-weight: 700;
        color: var(--c-accent);
      }

      .mobile-price .mobile-price-unit {
        font-size: 11px;
        color: var(--c-text-3);
        font-weight: 500;
      }

      /* 悬浮按钮位置调整 */
      .cart-float {
        right: 14px;
        bottom: 14px;
      }

      .cart-btn {
        width: 44px;
        height: 44px;
        font-size: 18px;
      }

      .customer-service-float {
        left: 14px;
        bottom: 14px;
      }

      .customer-service-btn {
        padding: 7px 13px;
        font-size: 12.5px;
      }

      #audio-play {
        right: 14px;
        bottom: 64px;
      }

      #audio-btn {
        width: 36px;
        height: 36px;
      }
    }

    @media (min-width: 993px) {
      .mobile-classbar {
        display: none;
      }

      .mobile-price {
        display: none;
      }

      /* logo + 风格开关整体垂直居中（三杠菜单已移除，手机版在上方媒体查询中
         同样用 flex 把开关顶到最右侧） */
      .navbar-modern .navbar-header {
        display: flex;
        align-items: center;
      }
    }

    /* ============ 极速版（电脑版部分）：隐藏图片、商品信息一行显示 ============
       由顶部导航开关切换，偏好存 localStorage（table_tpl_theme=fast），
       head 内前置脚本在渲染前给 html 挂 theme-fast 类 */
    @media (min-width: 993px) {
      /* 1. 商品列表：不显示商品图（含挂在图上的已下架角标，下架行仍靠整体灰显提示） */
      html.theme-fast .product-img-wrap {
        display: none;
      }

      /* 2. 商品信息压成一行：名称（超出一行自动省略）+ 剩余时间 + 库存 */
      html.theme-fast .product-row .product-info {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      html.theme-fast .product-name {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      html.theme-fast .product-name .name-main {
        display: inline;
        overflow: visible;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
      }

      html.theme-fast .product-name .activity-days {
        margin-top: 0;
      }

      html.theme-fast .product-meta {
        margin-top: 0;
        flex-wrap: nowrap;
        flex-shrink: 0;
      }

      html.theme-fast .product-row {
        padding-top: 9px;
        padding-bottom: 9px;
      }

      /* 极速版悬停改整行均匀高亮（默认是从左到右淡出的渐变，价格区不亮） */
      html.theme-fast .product-row:hover {
        background: rgba(79, 124, 255, 0.09);
      }

      /* 右侧价格只留金额，去掉 /N件 单位后缀 */
      html.theme-fast .product-right .product-unit {
        display: none;
      }

      /* 极速版价格数字改小、变细，弱化视觉重量 */
      html.theme-fast .product-price {
        font-size: 13.5px;
        font-weight: 600;
      }

      /* 3. 导航：不显示分类导航图片（左侧分类栏 + 分类标题图标） */
      html.theme-fast .class-nav .class-icon-img,
      html.theme-fast .class-header .class-icon-img {
        display: none;
      }
    }

    /* ============ 极速版（手机版生效）：隐藏图片、分类导航改左侧竖排文字栏 ============
       分类栏参考 Vant Sidebar：全部竖向展开贴左、纯文字（超长只留前 4 字），
       选中项白底 + 左侧主色指示条；商品列表同步去图、压成紧凑行 */
    @media (max-width: 992px) {
      /* 1. 商品列表：不显示商品图（含挂在图上的已下架角标） */
      html.theme-fast .product-img-wrap {
        display: none;
      }

      /* 商品行更紧凑；商品名不用省略号，长名完整换行显示 */
      html.theme-fast .product-row {
        padding-top: 8px;
        padding-bottom: 8px;
      }

      html.theme-fast .product-name .name-main {
        display: inline;
        overflow: visible;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
      }

      html.theme-fast .product-name .activity-days {
        margin-top: 0;
      }

      /* 价格只留金额，去掉 /N件 单位后缀，数字改小弱化 */
      html.theme-fast .mobile-price .mobile-price-unit {
        display: none;
      }

      html.theme-fast .mobile-price .mobile-price-value {
        font-size: 13px;
        font-weight: 600;
      }

      /* 2. 分类图标全部隐藏（导航条 + 分类标题） */
      html.theme-fast .mobile-classbar .class-icon,
      html.theme-fast .class-header .class-icon {
        display: none;
      }

      /* 3. 分类导航条：由吸顶横排改为左侧竖排文字栏 */
      html.theme-fast .shop-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 6px;
        /* 与上方公告卡的间距（完整版由横排分类条的 margin 提供，极速版左右并排后
         * 右栏商品区没有上间距，分类卡片会贴到公告卡上） */
        margin-top: 12px;
      }

      /* 防溢出保险：jy-main-wrap 是 flex 子项（column 方向 cross 轴按 fit-content
         定宽），内容里一旦有不可断行的宽元素就会把整页撑出视口（公告、价格被顶到屏外）；
         width:100% 给它确定宽度，直接按容器宽度布局 */
      html.theme-fast .jy-main-wrap {
        width: 100%;
        min-width: 0;
      }

      html.theme-fast .mobile-classbar {
        position: sticky;
        top: 62px;
        /* 文字最多 4em（48px）：左 10px 留白（含选中指示条）+ 48px + 右侧少量余量 */
        flex: 0 0 64px;
        width: 64px;
        max-width: 64px;
        /* 负左边距抵消 main-container 的 10px 内边距，侧栏直接贴到屏幕左缘；
           顶部间距由 .shop-layout 统一提供，与右侧商品卡顶部对齐 */
        margin: 0 0 12px -10px;
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        background: #f7f8fa;
        border-bottom: none;
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      html.theme-fast .mobile-classbar-scroll {
        display: block;
        padding: 4px 0;
        overflow: visible;
      }

      html.theme-fast .mobile-classbar-scroll .class-nav {
        flex-direction: column;
        gap: 0;
        width: auto;
      }

      /* 文字统一左对齐，左右留白压到最小，尽可能多显示字（约 5 个）。
         注意必须 align-items: flex-start：li 继承了横排条基础的 flex-direction: column，
         交叉轴是横向，仅设 text-align 不够——align-items:center 会把短名字的文本盒子
         整体居中（文字少时看起来还是居中） */
      html.theme-fast .mobile-classbar-scroll .class-nav li {
        width: auto;
        padding: 11px 3px 11px 10px;
        border-radius: 0;
        position: relative;
        text-align: left;
        align-items: flex-start;
      }

      /* 最多只显示 4 个字：中文一字正好 1em，4em 硬切、不带省略号 */
      html.theme-fast .mobile-classbar-scroll .class-nav li .class-name {
        display: block;
        max-width: 4em;
        margin: 0;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
      }

      /* 选中态（Vant 风格）：白底 + 左侧主色指示条 + 加粗 */
      html.theme-fast .mobile-classbar-scroll .class-nav li.active {
        background: #fff;
      }

      html.theme-fast .mobile-classbar-scroll .class-nav li.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 16px;
        border-radius: 0 3px 3px 0;
        background: var(--c-primary);
      }

      html.theme-fast .mobile-classbar-scroll .class-nav li.active .class-name {
        color: var(--c-primary);
        font-weight: 600;
      }

      /* 右侧商品区占满剩余宽度（覆盖手机版 width:100%，防止把侧栏挤出去） */
      html.theme-fast .shop-main {
        flex: 1;
        width: auto;
        min-width: 0;
      }

      /* 极速版顶部不再有吸顶横排条，hash 定位只需预留固定导航高度 */
      html.theme-fast .class-section {
        scroll-margin-top: 70px;
      }
    }

    /* ============ 交易猫风格顶部：左分类智能跟随 | 右 banner+商品 ============ */
    /* 左分类：外层只负责占位（定宽、撑开 flex 列），真正的卡片在内层 .jy-aside-inner，
       由 JS 智能定位：侧栏矮于可视区 → 吸顶跟随；高于可视区 → 上下自适应跟随
       （往下滚底部对齐、往上滚顶部对齐，滚到主区底部前自动停住）。
       无 JS / JS 未执行时，内层就是普通静态卡片，布局不会塌。 */
    .jy-page-layout {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }
    .jy-left-aside {
      flex: 0 0 200px;
      width: 200px;
    }
    .jy-aside-inner {
      background: var(--c-card);
      border-radius: var(--radius-md);
      box-shadow: 0 6px 20px rgba(255, 140, 80, 0.08);
      border: 1px solid var(--c-border-soft);
      padding: 8px;
      box-sizing: border-box;
      /* 进入跟随（浮动）状态时投影略加深，制造层次感 */
      transition: box-shadow 0.25s ease;
    }
    .jy-aside-inner.is-floating {
      box-shadow: 0 10px 28px rgba(255, 140, 80, 0.16);
    }
    .jy-main-wrap {
      flex: 1;
      min-width: 0;
    }
    /* 顶部 banner：只放公告和操作卡片（2 栏） */
    .jy-top-wrap {
      display: grid;
      grid-template-columns: 1fr 336px;
      gap: 14px;
      margin-bottom: 16px;
    }
    .jy-panel {
      background: var(--c-card);
      border-radius: var(--radius-md);
      box-shadow: 0 6px 20px rgba(255, 140, 80, 0.08);
      border: 1px solid var(--c-border-soft);
      padding: 14px;
      box-sizing: border-box;
      /* 不强制最小高度，让 grid 行高跟随最高子元素自动撑开 */
    }

    /* 左：游戏分类（去掉标题，直接列表） */
    .jy-left-aside .class-nav {
      padding: 0;
    }
    .jy-left-aside .class-nav li {
      margin: 0;
      padding: 7px 10px;
      border-radius: var(--radius-sm);
      transition: all 0.2s;
    }
    .jy-left-aside .class-nav li:hover {
      background: linear-gradient(90deg, #fff5e8, #ffe9d4);
      color: var(--c-accent);
      transform: translateX(2px);
    }
    .jy-left-aside .class-nav li.active {
      background: linear-gradient(90deg, #fff0e0, #ffd9b8);
      color: var(--c-accent);
      font-weight: 600;
    }
    .jy-left-aside .class-nav li::after {
      content: '\f105';
      font-family: 'FontAwesome';
      margin-left: auto;
      color: #ffc79a;
      font-size: 12px;
      transition: transform 0.2s;
    }
    .jy-left-aside .class-nav li:hover::after {
      transform: translateX(3px);
      color: var(--c-accent);
    }

    /* 中：站点公告 */
    .jy-panel.jy-mid {
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      padding-bottom: 0px;
    }
    .jy-mid-announce {
      font-size: 13px;
      line-height: 1.85;
      color: var(--c-text-2);
      flex: 1;
      overflow: hidden;
    }
    .jy-mid-announce ul,
    .jy-mid-announce .list-group {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .jy-mid-announce .list-group-item {
      border: none !important;
      background: transparent !important;
      padding: 6px 0 !important;
      border-bottom: 1px dashed #f3e6d4 !important;
      box-shadow: none !important;
    }
    .jy-mid-announce .list-group-item:last-child {
      border-bottom: none !important;
    }
    .jy-mid-announce .btn,
    .jy-mid-announce .btn-xs {
      padding: 2px 8px !important;
      font-size: 11px !important;
      margin-right: 6px;
    }

    /* 右：用户信息卡片（登录=数据总览 / 未登录=引导登录） */
    .jy-panel.jy-right {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .jy-r-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 2px;
    }
    .jy-r-user {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
    }
    .jy-r-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      object-fit: cover;
      flex: 0 0 42px;
      border: 2px solid #eef1ff;
      box-shadow: 0 2px 8px rgba(79, 124, 255, 0.18);
    }
    .jy-r-mascot {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: linear-gradient(135deg, #e8ecff, #f6ecff);
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 42px;
      overflow: hidden;
    }
    .jy-r-mascot img {
      width: 82%;
      height: 82%;
      object-fit: contain;
      margin-top: 6%;
    }
    .jy-r-user-info {
      min-width: 0;
    }
    .jy-r-hi {
      font-size: 13px;
      color: var(--c-text-2);
      font-weight: 600;
    }
    .jy-r-hi-clip {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 220px;
    }
    .jy-r-uid {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: #9aa3b2;
      margin-top: 3px;
    }
    .jy-r-level {
      display: inline-block;
      padding: 1px 9px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 600;
      line-height: 1.6;
      color: #fff;
    }
    .jy-lv-normal {
      background: linear-gradient(135deg, #9aa3b2, #b6bfce);
    }
    .jy-lv-pu {
      background: linear-gradient(135deg, #4f7cff, #6a72f5);
    }
    .jy-lv-pro {
      background: linear-gradient(135deg, #f7b733, #fc9f45);
    }
    .jy-lv-ultimate {
      background: linear-gradient(135deg, #b06ab3, #4568dc);
    }
    .jy-r-sub {
      font-size: 11px;
      color: #9aa3b2;
      margin-top: 2px;
    }
    .jy-r-login {
      color: var(--c-accent);
      font-size: 13px;
      text-decoration: none;
      font-weight: 600;
      flex: 0 0 auto;
    }
    .jy-r-login:hover {
      text-decoration: underline;
    }
    .jy-r-logout {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: #f56c6c;
      font-size: 12px;
      font-weight: 600;
      text-decoration: none;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(245, 108, 108, 0.08);
      flex: 0 0 auto;
      transition: background 0.2s, color 0.2s;
    }
    .jy-r-logout:hover {
      background: rgba(245, 108, 108, 0.16);
      color: #e6373f;
      text-decoration: none;
    }

    /* 余额主视觉块 */
    .jy-r-balance {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, #6a72f5 0%, #4f7cff 55%, #818ae8 100%);
      color: #fff;
      padding: 12px 14px;
      box-shadow: 0 8px 20px rgba(79, 124, 255, 0.28);
    }
    .jy-r-balance::before,
    .jy-r-balance::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      pointer-events: none;
    }
    .jy-r-balance::before {
      width: 110px;
      height: 110px;
      top: -46px;
      right: -30px;
    }
    .jy-r-balance::after {
      width: 70px;
      height: 70px;
      bottom: -30px;
      left: -22px;
    }
    .jy-r-balance-top {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      opacity: 0.92;
    }
    .jy-r-balance-bottom {
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-top: 7px;
    }
    .jy-r-balance-num {
      display: flex;
      align-items: baseline;
      line-height: 1;
      min-width: 0;
    }
    .jy-r-balance-num i {
      font-style: normal;
      font-family: 'Baloo2';
      font-size: 14px;
      opacity: 0.95;
      margin-right: 3px;
    }
    .jy-r-balance-num b {
      font-family: 'Baloo2';
      font-weight: 700;
      font-size: 26px;
      letter-spacing: 0.5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .jy-r-recharge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #fff;
      color: #e6372f;
      font-size: 12px;
      font-weight: 700;
      padding: 6px 13px;
      border-radius: 6px;
      text-decoration: none;
      box-shadow: 0 3px 10px rgba(38, 48, 92, 0.22);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .jy-r-recharge:hover {
      transform: translateY(-1px);
      box-shadow: 0 5px 14px rgba(38, 48, 92, 0.3);
      color: #e6372f;
      text-decoration: none;
    }

    /* 购买记录摘要（四项数据总览：累计/今日 × 订单/消费） */
    .jy-r-orders {
      display: flex;
      align-items: center;
      border: 1px solid var(--c-border-soft);
      border-radius: var(--radius-md);
      padding: 10px;
      text-decoration: none;
      transition: box-shadow 0.2s;
    }
    .jy-r-orders:hover {
      box-shadow: 0 4px 14px rgba(79, 124, 255, 0.1);
      text-decoration: none;
    }
    /* 点击/聚焦态同样去下划线（Bootstrap 默认 a:focus 带下划线） */
    .jy-r-orders:focus,
    .jy-r-orders:active {
      text-decoration: none;
      outline: none;
    }
    .jy-r-order-item {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 3px;
    }
    .jy-r-order-item + .jy-r-order-item {
      border-left: 1px dashed #eef0f5;
      padding-left: 8px;
      margin-left: 8px;
    }
    .jy-r-order-item b {
      font-family: 'Baloo2';
      font-weight: 700;
      font-size: 15px;
      color: #1f2937;
      line-height: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .jy-r-order-item span {
      font-size: 11px;
      color: #9aa3b2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 手机版：个人中心卡片整卡屏蔽 */
    @media (max-width: 992px) {
      .jy-panel.jy-right {
        display: none;
      }
    }

    /* 双入口大按钮（未登录） */
    .jy-r-buy {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .jy-r-buy a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 14px 6px;
      border-radius: var(--radius-sm);
      text-decoration: none;
      color: #fff;
      font-weight: 600;
      font-size: 14px;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .jy-r-buy a i {
      font-size: 20px;
      margin-bottom: 4px;
    }
    .jy-r-buy a.jy-buy-red {
      background: linear-gradient(135deg, #ff4936, #e62129);
      box-shadow: 0 6px 14px rgba(230, 33, 41, 0.28);
    }
    .jy-r-buy a.jy-buy-blue {
      background: linear-gradient(135deg, #5a8bff, #6a5ae0);
      box-shadow: 0 6px 14px rgba(79, 124, 255, 0.28);
    }
    .jy-r-buy a:hover {
      transform: translateY(-2px);
      color: #fff;
    }

    /* 快捷图标行（两种状态共用） */
    .jy-r-tools {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    .jy-r-tools a {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 4px;
      border-radius: var(--radius-sm);
      text-decoration: none;
      color: var(--c-text-2);
      font-size: 11px;
      transition: background 0.2s;
    }
    .jy-r-tools a i {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 15px;
      color: #fff;
    }
    .jy-r-tools a:hover {
      background: #f2f5ff;
    }
    .jy-r-tools a.jy-t-search i { background: linear-gradient(135deg, #ff6a8a, #9c27b0); }
    .jy-r-tools a.jy-t-kf i { background: linear-gradient(135deg, #4cd296, #00bcd4); }
    .jy-r-tools a.jy-t-reg i { background: linear-gradient(135deg, #5b9bf0, #2146d1); }
    .jy-r-tools a.jy-t-help i { background: linear-gradient(135deg, #ffc739, #ff9a3c); }
    .jy-r-tools a.jy-t-order i { background: linear-gradient(135deg, #4f7cff, #6a5ae0); }
    .jy-r-tools a.jy-t-batch i { background: linear-gradient(135deg, #ff7a45, #ff4936); }
    .jy-r-tools a.jy-t-cdk i { background: linear-gradient(135deg, #b06ff5, #7a5cff); }

    /* 已登录快捷入口：素色低饱和风格（浅灰底 + 灰蓝图标），不抓眼球 */
    .jy-r-tools a.jy-ts-order i,
    .jy-r-tools a.jy-ts-record i,
    .jy-r-tools a.jy-ts-set i,
    .jy-r-tools a.jy-ts-msg i {
      background: #f1f4f9;
      border: 1px solid #e7ebf2;
      color: #7e8db0;
      transition: background 0.2s, color 0.2s;
    }
    .jy-r-tools a.jy-ts-order:hover i,
    .jy-r-tools a.jy-ts-record:hover i,
    .jy-r-tools a.jy-ts-set:hover i,
    .jy-r-tools a.jy-ts-msg:hover i {
      background: #e8edf6;
      color: #5b6d94;
    }

    /* 未登录底部引导横幅 */
    .jy-r-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px;
      border-radius: var(--radius-sm);
      background: linear-gradient(135deg, #6a72f5, #4f7cff 55%, #818ae8);
      color: #fff;
      font-weight: 600;
      text-decoration: none;
      font-size: 12.5px;
      box-shadow: 0 4px 12px rgba(79, 124, 255, 0.28);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .jy-r-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(79, 124, 255, 0.4);
      color: #fff;
    }

    /* 响应式：992px 以下 3 栏变竖排 */
    @media (max-width: 991px) {
      .jy-top-wrap {
        grid-template-columns: 1fr;
        gap: 12px;
        /* 底部间距清零：与吸顶分类导航条的间距统一由导航条自身 margin 控制，
           避免两处 margin 叠加导致导航条上方间隙比下方大一倍 */
        margin-bottom: 0;
      }
      .jy-panel {
        min-height: auto;
      }
      /* 手机端隐藏左栏分类（已有吸顶 mobile-classbar） */
      .jy-left-aside {
        display: none;
      }
      .jy-page-layout {
        flex-direction: column;
      }
    }

    /* ============ 图片固定大小防御（防止大图撑爆布局） ============ */
    /* 全局兜底：所有 img 不超过容器 */
    img {
      max-width: 100%;
      height: auto;
    }

    /* 商品图：原图多大都强制 56×56 显示 */
    .product-img,
    .shop-main .product-img,
    .class-section .product-img,
    .product-row .product-img {
      width: 56px !important;
      height: 56px !important;
      max-width: 56px !important;
      min-width: 56px !important;
      flex: 0 0 56px !important;
      object-fit: cover !important;
      border-radius: var(--radius-md);
      background: #f7f8fa;
      display: block;
    }

    /* 手机版商品图放大到 66×66 */
    @media (max-width: 992px) {
      .product-img,
      .shop-main .product-img,
      .class-section .product-img,
      .product-row .product-img {
        width: 66px !important;
        height: 66px !important;
        max-width: 66px !important;
        min-width: 66px !important;
        flex: 0 0 66px !important;
      }
    }

    /* 左栏分类图标：强制固定大小 */
    .jy-left-aside .class-icon {
      flex: 0 0 36px !important;
      width: 36px !important;
      height: 36px !important;
      max-width: 36px !important;
      line-height: 36px;
      border-radius: 8px;
      overflow: hidden;
      background: #fff5e8;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .jy-left-aside .class-icon-img {
      width: 100% !important;
      height: 100% !important;
      max-width: 100% !important;
      object-fit: cover !important;
      display: block;
    }

    /* class-header 内的分类图标：shop_class_icon_html 输出 class="class-icon class-icon-img"，
       不是 class-nav 的后代，所以 .class-nav .class-icon 选择器匹配不上，必须单独写 */
    .class-header .class-icon,
    .class-header .class-icon-img {
      width: 22px !important;
      height: 22px !important;
      max-width: 22px !important;
      min-width: 22px !important;
      flex: 0 0 22px !important;
      object-fit: cover !important;
      border-radius: 5px;
      background: #f1f3f5;
      display: inline-block;
      vertical-align: middle;
    }
    /* 兼容旧选择器（以防其他地方用了 header-icon-img） */
    .class-header .header-icon-img {
      width: 22px !important;
      height: 22px !important;
      max-width: 22px !important;
      object-fit: cover !important;
    }
  

/* ==== 块分隔 ==== */


.only-pc-show {
  display: block;
  width: 100%;
}

.notice-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.notice-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
  padding: 7px 12px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--row-gradient);
  box-shadow: 0 2px 6px var(--shadow-color);
  transition: transform .2s ease, box-shadow .2s ease;
}

.notice-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--shadow-color);
}

.notice-badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--badge-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.notice-title,
.notice-link,
.notice-first-line-text {
  background: var(--text-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 14px;
  font-weight: 700;
}

.notice-title {
  flex: 0 0 auto;
}

.notice-link {
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.notice-link:hover {
  filter: brightness(.85);
}

.notice-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding-left: 8px;
  color: var(--status-color);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.notice-status-icon {
  display: block;
  width: 16px;
  height: 16px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-1 .notice-status-icon {
  fill: currentColor;
  stroke: none;
}

.notice-first-line-window {
  position: relative;
  display: block;
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 20px;
  overflow: hidden;
}

.notice-first-line-text {
  position: absolute;
  top: 50%;
  left: 100%;
  display: block;
  max-width: none !important;
  overflow: visible !important;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: clip !important;
  transform: translate(0, -50%);
  will-change: left, transform;
  animation: notice-first-line-scroll 30s linear infinite !important;
}

.notice-first-line-window:hover .notice-first-line-text {
  animation-play-state: paused !important;
}

@keyframes notice-first-line-scroll {
  from {
    left: 100%;
    transform: translate(0, -50%);
  }

  to {
    left: 0;
    transform: translate(-100%, -50%);
  }
}

.theme-1 {
  --row-gradient: linear-gradient(135deg, #f5f2ff, #eef4ff);
  --badge-gradient: linear-gradient(135deg, #5b3fd6, #8068f2);
  --text-gradient: linear-gradient(135deg, #4734c7, #8a45d6);
  --border-color: #dcd3ff;
  --shadow-color: rgba(91, 63, 214, .14);
  --status-color: #35aa50;
}

.theme-2 {
  --row-gradient: linear-gradient(135deg, #fff1f7, #fff5ec);
  --badge-gradient: linear-gradient(135deg, #ec176d, #ff8a32);
  --text-gradient: linear-gradient(135deg, #d90063, #f06b23);
  --border-color: #ffd2dc;
  --shadow-color: rgba(236, 23, 109, .13);
  --status-color: #ec176d;
}

.theme-3 {
  --row-gradient: linear-gradient(135deg, #edf5ff, #ebfffd);
  --badge-gradient: linear-gradient(135deg, #1769e0, #00b8c8);
  --text-gradient: linear-gradient(135deg, #075ac8, #009aaa);
  --border-color: #c9e6f5;
  --shadow-color: rgba(23, 105, 224, .13);
  --status-color: #1769e0;
}

.theme-4 {
  --row-gradient: linear-gradient(135deg, #faf0ff, #fff6e9);
  --badge-gradient: linear-gradient(135deg, #9636d8, #ff8a1f);
  --text-gradient: linear-gradient(135deg, #8227bf, #e96d00);
  --border-color: #ead0f4;
  --shadow-color: rgba(150, 54, 216, .13);
  --status-color: #f07a18;
}

.theme-5 {
  --row-gradient: linear-gradient(135deg, #effcef, #e9fbff);
  --badge-gradient: linear-gradient(135deg, #30a852, #00abc5);
  --text-gradient: linear-gradient(135deg, #218d42, #008da5);
  --border-color: #c9ead3;
  --shadow-color: rgba(48, 168, 82, .13);
  --status-color: #23a464;
}

.jy-r-tools {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 5px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 4px !important;
  overflow: visible !important;
  border-radius: 0 0 17px 17px !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(36, 41, 85, .08) !important;
}

.jy-r-tools > a.jy-tool {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  float: none !important;
  overflow: hidden !important;
  border: 1px solid #e8eaf2 !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow:
    0 2px 5px rgba(52, 57, 106, .08),
    inset 0 0 0 1px rgba(244, 245, 250, .9) !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  animation: jy-tool-float 2.2s ease-in-out infinite !important;
  will-change: transform;
}

.jy-r-tools > a.jy-tool:nth-child(2) {
  animation-delay: -.3s !important;
}

.jy-r-tools > a.jy-tool:nth-child(3) {
  animation-delay: -.6s !important;
}

.jy-r-tools > a.jy-tool:nth-child(4) {
  animation-delay: -.9s !important;
}

.jy-r-tools > a.jy-tool .jy-tool-icon,
.jy-r-tools > a.jy-tool .jy-tool-icon::before {
  display: inline-flex !important;
  flex: 0 0 14px !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  font-size: 13px !important;
  line-height: 1 !important;
  -webkit-text-fill-color: currentColor !important;
}

.jy-r-tools > a.jy-tool .jy-tool-label {
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: #37396d !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  writing-mode: horizontal-tb !important;
}

.jy-t-batch {
  --tool-gradient: linear-gradient(135deg, #8656ff, #4f46e5);
}

.jy-t-cdk {
  --tool-gradient: linear-gradient(135deg, #ff5f00, #ff9b2f);
}

.jy-t-order {
  --tool-gradient: linear-gradient(135deg, #00b8d4, #198cff);
}

.jy-t-kf {
  --tool-gradient: linear-gradient(135deg, #26953e, #13a889);
}

.jy-t-batch .jy-tool-icon {
  color: #7952f5 !important;
}

.jy-t-cdk .jy-tool-icon {
  color: #ff6508 !important;
}

.jy-t-order .jy-tool-icon {
  color: #00b9d3 !important;
}

.jy-t-kf .jy-tool-icon {
  color: #27883c !important;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .jy-r-tools > a.jy-tool .jy-tool-label {
    background-image: var(--tool-gradient) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }
}

@keyframes jy-tool-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@media (hover: hover) {
  .jy-r-tools > a.jy-tool:hover {
    transform: translateY(-2px) !important;
    border-color: #d9d9ea !important;
    box-shadow: 0 7px 15px rgba(65, 61, 127, .14) !important;
  }
}

.jy-r-tools > a.jy-tool:active {
  transform: scale(.98) !important;
}

.jy-r-tools > a.jy-tool:focus-visible {
  outline: 2px solid #7762ef !important;
  outline-offset: 2px !important;
}

@media (max-width: 768px) {
  .only-pc-show {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .notice-list {
    position: relative;
    width: 100%;
    height: 34px;
    overflow: hidden;
  }

  .notice-item {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 34px;
    gap: 4px;
    margin: 0;
    padding: 4px 7px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 1px 4px var(--shadow-color);
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    animation: none !important;
  }

  .notice-item:nth-child(1) {
    animation: notice-mobile-first-row 56s linear infinite !important;
  }

  .notice-item:nth-child(n + 2) {
    animation: notice-mobile-follow-row 56s linear infinite !important;
  }

  .notice-item:nth-child(2) {
    animation-delay: 35.5s !important;
  }

  .notice-item:nth-child(3) {
    animation-delay: 40.5s !important;
  }

  .notice-item:nth-child(4) {
    animation-delay: 45.5s !important;
  }

  .notice-item:nth-child(5) {
    animation-delay: 50.5s !important;
  }

  .notice-badge {
    padding: 1px 5px;
    font-size: 10px;
  }

  .notice-title,
  .notice-link,
  .notice-first-line-text {
    font-size: 12px;
  }

  .notice-link {
    display: block;
    flex: 1 1 auto;
  }

  .notice-first-line-window {
    height: 18px;
  }

  .notice-first-line-text {
    line-height: 18px;
    animation: notice-mobile-first-text 56s linear infinite !important;
  }

  .notice-status {
    gap: 0;
    padding-left: 2px;
  }

  .notice-status-icon {
    width: 15px;
    height: 15px;
  }

  .notice-status-text {
    display: none;
  }

  @keyframes notice-mobile-first-row {
    0%,
    64.2857% {
      z-index: 1;
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
    }

    64.29%,
    100% {
      z-index: 0;
      opacity: 0;
      visibility: hidden;
      transform: translateX(-100%);
    }
  }

  @keyframes notice-mobile-first-text {
    0% {
      left: 100%;
      transform: translate(0, -50%);
    }

    64.2857% {
      left: 0;
      transform: translate(-100%, -50%);
    }

    64.29%,
    100% {
      left: 0;
      transform: translate(-100%, -50%);
    }
  }

  @keyframes notice-mobile-follow-row {
    0% {
      z-index: 1;
      opacity: 1;
      visibility: visible;
      transform: translateX(100%);
    }

    1%,
    9% {
      z-index: 1;
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
    }

    10% {
      z-index: 1;
      opacity: 1;
      visibility: visible;
      transform: translateX(-100%);
    }

    10.01%,
    100% {
      z-index: 0;
      opacity: 0;
      visibility: hidden;
      transform: translateX(-100%);
    }
  }

  .jy-r-tools {
    gap: 2px !important;
    width: calc(100% - 4px) !important;
    max-width: none !important;
    margin: 0 2px !important;
    padding: 3px !important;
    border-radius: 12px !important;
  }

  .jy-r-tools > a.jy-tool {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 30px !important;
    padding: 0 2px !important;
    float: none !important;
    animation-name: jy-tool-float-mobile !important;
  }

  .jy-r-tools > a.jy-tool .jy-tool-icon,
  .jy-r-tools > a.jy-tool .jy-tool-icon::before {
    flex: 0 0 10px !important;
    width: 10px !important;
    font-size: 9.5px !important;
  }

  .jy-r-tools > a.jy-tool .jy-tool-label {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    font-size: clamp(10px, 2.8vw, 11.5px) !important;
    font-weight: 800 !important;
    letter-spacing: -.04em !important;
    white-space: nowrap !important;
  }

  @keyframes jy-tool-float-mobile {
    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-3px);
    }
  }
}

@media (max-width: 360px) {
  .jy-r-tools > a.jy-tool {
    height: 28px !important;
    padding: 0 1px !important;
  }

  .jy-r-tools > a.jy-tool .jy-tool-icon,
  .jy-r-tools > a.jy-tool .jy-tool-icon::before {
    flex: 0 0 9px !important;
    width: 9px !important;
    font-size: 10px !important;
  }

  .jy-r-tools > a.jy-tool .jy-tool-label {
    font-size: 10px !important;
  }
}


/* ==== 块分隔 ==== */


  .site-footer-item {
    width: fit-content;
    max-width: 100%;
    margin: 2px auto;
    padding: 1px 4px;
    box-sizing: border-box;
    list-style: none;
    text-align: center;
    color: #666;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
      "PingFang SC", Arial, sans-serif;
    font-size: clamp(7px, 1.7vw, 11px);
    line-height: 1.35;
    word-break: break-word;
  }

  .site-records {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3px 10px;
  }

  .site-record {
    display: inline-flex;
    align-items: center;
    color: inherit;
    white-space: nowrap;
    text-decoration: none;
  }

  .site-record img {
    display: block;
    width: 14px;
    height: 14px;
    margin-right: 3px;
    object-fit: contain;
    flex: 0 0 14px;
  }

  .site-notice,
  .site-copyright,
  .feedback-email {
    white-space: nowrap;
  }

  .feedback-email a {
    color: #1677ff;
    text-decoration: none;
  }

  .site-record:hover,
  .feedback-email a:hover {
    color: #1677ff;
    text-decoration: underline;
  }

  /* 手机端：每行都保持一行，同时再缩小一点 */
  @media (max-width: 600px) {
    .site-footer-item {
      font-size: clamp(6px, 2.4vw, 10px);
      line-height: 1.25;
      padding: 1px 2px;
    }

    .site-records {
      gap: 2px 8px;
      flex-wrap: nowrap;
    }

    .site-record img {
      width: 12px;
      height: 12px;
      margin-right: 2px;
      flex-basis: 12px;
    }
  }

  /* 极窄手机端：备案信息仍然每项一行 */
  @media (max-width: 360px) {
    .site-records {
      flex-direction: column;
      gap: 2px;
    }
  }