:root {
          --dq-color-01: #425D5F;
          --dq-color-02: #BACACB;
          --dq-color-03: #F8F7F2;
          --dq-color-04: #FDE7A2;
          --dq-color-05: #FAA943;
      
          --dq-bg: #F8F7F2;
          --dq-text-main: var(--dq-color-01);
          --dq-accent: var(--dq-color-05);
        }
      
        .dq-widget {
          width: 100%;
          max-width: 100%;
          margin: 0 auto;
          padding: 40px 0 64px;
          background: transparent;
        }
      
        .dq-title {
          font-size: 1.4rem;
          font-weight: 500;
          line-height: 1.5;
          margin: 0 4vw 18px;
          max-width: 700px;
          color: var(--dq-text-main);
          font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
        }
      
        .dq-title em {
          font-style: italic;
          opacity: 0.95;
        }
      
        .dq-shell {
          position: relative;
          height: 500px;
          margin: 0 4vw;
          padding: 20px 0 80px;
          overflow: hidden;
          font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
        }
      
        .dq-track {
          position: relative;
          display: flex;
          will-change: transform;
        }
      
        /* 4 条“弹幕车道” */
        .dq-inner {
          display: flex;
          flex-direction: column;
          row-gap: 22px;
          padding: 4px 40px 4px 4px;
        }
      
        .dq-lane {
          position: relative;
          display: flex;
          flex-wrap: nowrap;
          column-gap: 16px;
        }
      
        .dq-card {
          --offset-x: 0px;
          --offset-y: 0px;
      
          padding: 10px 28px;
          border-radius: 999px;
          background: rgba(248, 247, 242, 0.96);
          border: 1px solid rgba(186, 202, 203, 0.9);
          box-shadow: 0 8px 22px rgba(66, 93, 95, 0.14);
          color: var(--dq-text-main);
          font-size: 1.2rem;
          line-height: 1.35;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          white-space: normal;
          word-wrap: break-word;
          opacity: 0.9;
          transform: translate(var(--offset-x), var(--offset-y));
          transition:
            transform 0.18s ease,
            box-shadow 0.18s ease,
            background 0.18s ease,
            opacity 0.18s ease,
            border-color 0.18s ease;
        }
      
        .dq-card-text {
          margin: 0;
        }
      
        .dq-card-cta {
          margin: 0;
          font-size: 0.9rem;
          color: var(--dq-accent);
          opacity: 0;
          max-height: 0;
          overflow: hidden;
          display: inline-flex;
          align-items: center;
          gap: 4px;
          transform: translateY(2px);
          transition:
            opacity 0.18s ease,
            transform 0.18s ease,
            max-height 0.18s ease,
            margin-top 0.18s ease;
        }
      
        .dq-card-cta span.dq-arrow {
          font-size: 0.9rem;
        }
      
        /* 悬浮时的效果（桌面） */
        .dq-card:hover {
          opacity: 1;
          background: #ffffff;
          box-shadow: 0 14px 30px rgba(66, 93, 95, 0.22);
          border-color: rgba(250, 169, 67, 0.75);
          transform: translate(var(--offset-x), var(--offset-y)) scale(1.02);
          z-index: 2;
        }
      
        .dq-card:hover .dq-card-cta {
          opacity: 0.85;
          max-height: 24px;
          margin-top: 4px;
          transform: translateY(0);
        }
      
        /* 点击激活状态（桌面 & 手机通用） */
        .dq-card.dq-card-active {
          opacity: 1;
          background: #ffffff;
          box-shadow: 0 16px 32px rgba(66, 93, 95, 0.3);
          border-color: rgba(250, 169, 67, 0.95);
          transform: translate(var(--offset-x), var(--offset-y)) scale(1.05);
          z-index: 5;
        }
      
        .dq-card.dq-card-active .dq-card-cta {
          opacity: 0.95;
          max-height: 28px;
          margin-top: 6px;
          transform: translateY(0);
        }
      
        @media (max-width: 768px) {
  .dq-widget {
    padding: 32px 0 56px;
  }

  .dq-title {
    font-size: 1.15rem;
    margin-left: 5vw;
    margin-right: 5vw;
  }

  .dq-shell {
    height: 440px;
    margin: 0 5vw;
    padding-bottom: 64px;
  }

  .dq-inner {
    padding-right: 12px;
  }

  .dq-card {
    font-size: 1rem;                 /* 稍微小一点 */
    padding: 10px 22px;
    width: auto !important;
    min-width: 70vw;                  /* 至少占 70% 屏宽 */
    max-width: 90vw;                  /* 最多占 90% 屏宽，不会太宽 */
    box-sizing: border-box;
    border-radius: 999px;             /* 保持“圆形长条” */
    /* 手机端不再左右偏移，只保留上下轻微错位 */
    transform: translate(0, var(--offset-y)) scale(1);
  }

  .dq-card:hover {
    transform: translate(0, var(--offset-y)) scale(1.01);
  }

  .dq-card-text {
    display: block;
    overflow: visible;
    white-space: normal;
    word-wrap: break-word;
  }

  .dq-card.dq-card-active {
    transform: translate(0, var(--offset-y)) scale(1.04);
  }
}