/* ============================================================
   福袋插件样式 — 主题 UI v2
   设计语言：礼盒/红包感 + 渐变头部 + 丝带装饰 + 点击粒子特效
   ============================================================ */

/* ---- 卡片容器 ---- */
.fudai-card {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  border: none;
  box-shadow: 0 2px 12px rgba(180, 120, 30, 0.1);
  transition: transform .2s ease, box-shadow .2s ease;
  background: #fffef8;
  /* 根据内容自适应宽度：短文本时收缩，长文本不溢出容器 */
  width: fit-content;
  min-width: 260px;
  max-width: 100%;
}
.fudai-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(180, 120, 30, 0.18);
}

/* ---- 头部（渐变背景 + 图标 + 标题）---- */
.fudai-card__head {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ff6b35 0%, #f7c948 50%, #e85d75 100%);
}

/* 头部渐变层（通过 JS/PHP 动态切换状态色） */
.fudai-card--open     .fudai-card__head { background: linear-gradient(135deg, #ff6b35 0%, #f7c948 50%, #e85d75 100%); }
.fudai-card--claimed  .fudai-card__head { background: linear-gradient(135deg, #a8b5c0 0%, #94a3b0 100%); }
.fudai-card--claimed-mail .fudai-card__head { background: linear-gradient(135deg, #74b9ff 0%, #5a9bd4 100%); }
.fudai-card--closed   .fudai-card__head,
.fudai-card--expired  .fudai-card__head,
.fudai-card--soldout  .fudai-card__head { background: linear-gradient(135deg, #d4d4d4, #bbb); }

/* 图标容器 */
.fudai-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
  z-index: 1;
}

/* 标题文字 */
.fudai-card__title {
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  line-height: 1.3;
}

/* ---- HOT 丝带（仅 open 状态显示）---- */
.fudai-ribbon {
  position: absolute;
  top: -2px;
  right: 18px;
  width: 52px;
  height: 52px;
  overflow: hidden;
  z-index: 2;
}
.fudai-ribbon__inner {
  position: absolute;
  top: 6px;
  right: -14px;
  width: 72px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  padding: 4px 0;
  transform: rotate(45deg);
  box-shadow: 0 2px 6px rgba(192, 57, 43, 0.35);
  letter-spacing: .5px;
}
.fudai-card:not(.fudai-card--open) .fudai-ribbon { display: none; }

/* ---- 主体区域 ---- */
.fudai-card__body {
  padding: 16px 18px;
  background: #fffef8;
}
.fudai-card--claimed  .fudai-card__body,
.fudai-card--claimed-mail .fudai-card__body,
.fudai-card--closed   .fudai-card__body,
.fudai-card--expired  .fudai-card__body,
.fudai-card--soldout  .fudai-card__body { background: #fafafa; }

/* 奖励行（积分 / 用户组）*/
.fudai-card__rewards {
  font-size: 14px;
  font-weight: 700;
  color: #b84a00;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
.fudai-card__rewards svg {
  flex-shrink: 0;
}
.fudai-card__rewards-sub {
  font-size: 12px;
  color: #c9a05a;
  font-weight: 400;
  margin-left: 4px;
}

/* 元信息行（密码/口令标签 + 库存）*/
.fudai-card__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* 标签式密码/口令 */
.fudai-card__locks {
  color: #a07a2a;
  font-size: 12px;
  background: #fff5d6;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid #f0dca0;
  white-space: nowrap;
}

/* 库存文字 */
.fudai-card__stock {
  font-size: 11px;
  color: #c9a05a;
}

/* 查看领取详情链接 */
.fudai-card__detail-link {
  display: inline-block;
  font-size: 11px;
  color: #b0854f;
  text-decoration: none;
  margin: 2px 0 6px;
  transition: color .15s;
}
.fudai-card__detail-link:hover {
  color: #ff6b35;
  text-decoration: underline;
}

/* 领取分类标签 */
.fudai-card__type {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: middle;
}
.fudai-card__type--normal {
  background: #eef2f7;
  color: #5a6b82;
}
.fudai-card__type--lucky {
  background: linear-gradient(135deg, #fff3d6, #ffd9a0);
  color: #b9770a;
}
.fudai-card__type--passphrase {
  background: #e6f4ea;
  color: #1f7a3d;
}

/* ---- 领取按钮 ---- */
.fudai-claim-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: 999px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all .25s cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f6b73c, #e8902a);
  box-shadow: 0 4px 14px rgba(232, 144, 42, 0.38);
}
.fudai-claim-btn:hover:not(:disabled) {
  transform: scale(1.04);
  box-shadow: 0 6px 20px rgba(232, 144, 42, 0.48);
}
.fudai-claim-btn:active:not(:disabled) {
  transform: scale(.96);
}
.fudai-claim-btn:disabled {
  background: linear-gradient(135deg, #d4ccc4, #c4bba8);
  box-shadow: none;
  cursor: default;
}
/* 福袋有效期提示（按钮下方，仅设置了截止时间的福袋显示） */
.fudai-card__expire {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: #9a9284;
  text-align: center;
  letter-spacing: .2px;
}
.fudai-card__expire--over {
  color: #c0392b;
  font-weight: 600;
}
  transform: none;
}

/* 领取中脉冲动画 */
.fudai-claim-btn--claiming {
  animation: fudaiPulse .6s ease infinite alternate;
}
@keyframes fudaiPulse {
  from { box-shadow: 0 0 0 0 rgba(246, 183, 60, 0.45); }
  to   { box-shadow: 0 0 0 10px rgba(246, 183, 60, 0); }
}

/* claimed-mail 按钮蓝色 */
.fudai-card--claimed-mail .fudai-claim-btn {
  background: linear-gradient(135deg, #6ea8fe, #3d7fe0);
  box-shadow: 0 4px 14px rgba(61, 127, 224, 0.32);
}

/* ---- 消息提示 ---- */
.fudai-card__msg {
  margin-top: 10px;
  font-size: 13px;
  min-height: 18px;
  line-height: 1.5;
}
.fudai-card__msg--ok  { color: #1e8e3e; }
.fudai-card__msg--err { color: #c0392b; }

/* 邮件链接 */
.fudai-card__maillink {
  color: #1a73e8;
  font-weight: 600;
  text-decoration: none;
  margin-left: 2px;
  white-space: nowrap;
}
.fudai-card__maillink:hover { text-decoration: underline; }

/* ---- 粒子特效容器（绝对定位覆盖卡片）---- */
.fudai-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 16px;
  z-index: 10;
}
.fudai-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  animation: fudaiSparkleFly .7s ease-out forwards;
}
@keyframes fudaiSparkleFly {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-70px) translateX(var(--sp-dx, 0px)) scale(0); }
}

/* ---- 工具栏按钮 ---- */
.fudai-toolbar-btn {
  font-size: 16px;
  line-height: 1;
}
.fudai-toolbar-btn--disabled {
  opacity: .35;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* ---- 状态变体：已领取/已结束（整体降灰）---- */
.fudai-card--claimed,
.fudai-card--closed,
.fudai-card--expired,
.fudai-card--soldout {
  filter: grayscale(0.15);
  opacity: 0.92;
}
/* 邮件发放态保留彩色，不置灰 */
.fudai-card--claimed-mail {
  filter: none;
  opacity: 1;
}
.fudai-card--claimed-mail .fudai-card__rewards { color: #1655a8; }
.fudai-card--claimed-mail .fudai-card__meta  { color: #5c85bd; }
.fudai-card--claimed-mail .fudai-card__locks { background: #eaf2fb; border-color: #bdd4f0; color: #3d7fe0; }

/* ---- 缺失福袋 ---- */
.fudai-card--missing {
  border-color: #ddd;
  background: #f7f7f7;
  color: #999;
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 12px;
}

/* ============================================================
   弹窗（保持原有布局，微调配色与新风格统一）
   ============================================================ */
.fudai-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.fudai-modal {
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  font-size: 14px;
  color: #333;
}
.fudai-modal__head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-weight: 700;
  font-size: 16px;
  background: linear-gradient(135deg, #ff6b35 0%, #f7c948 50%, #e85d75 100%);
  color: #fff;
  border-bottom: none;
  border-radius: 16px 16px 0 0;
}
.fudai-modal__close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: rgba(255,255,255,.85);
}
.fudai-modal__close:hover { color: #fff; }
.fudai-modal__body { padding: 16px 18px; }
.fudai-row { display: flex; gap: 12px; }
.fudai-row .fudai-field { flex: 1; }
.fudai-field { margin-bottom: 12px; }
.fudai-field > label {
  display: block;
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}
.fudai-field input[type="text"],
.fudai-field input[type="number"],
.fudai-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
}
.fudai-field input:focus,
.fudai-field select:focus { border-color: #e8902a; }
.fudai-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 6px 0;
  max-height: 130px;
  overflow-y: auto;
  border: 1px dashed #f0e2c0;
  border-radius: 8px;
  background: #fefdf8;
}
.fudai-check {
  font-size: 13px;
  color: #555;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fudai-hint { color: #aaa; font-size: 13px; }

/* 弹窗内领取方式说明 */
.fudai-notice {
  margin: 10px 0 4px;
  padding: 9px 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff8e7, #fff3db);
  border: 1px solid #f0e2c0;
  font-size: 12px;
  line-height: 1.6;
  color: #8a5a00;
}
.fudai-notice b { color: #6b4400; }

.fudai-modal__msg {
  min-height: 16px;
  font-size: 13px;
  margin-top: 4px;
}
.fudai-modal__msg--err { color: #c0392b; }

.fudai-modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px 18px;
}
.fudai-btn {
  border: none;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.fudai-btn--ghost {
  background: #f0f0f0;
  color: #555;
}
.fudai-btn--ghost:hover { background: #e4e4e4; }
.fudai-btn--primary {
  background: linear-gradient(135deg, #f6b73c, #e8902a);
  color: #fff;
  box-shadow: 0 3px 10px rgba(232, 144, 42, 0.35);
}
.fudai-btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(232, 144, 42, 0.45);
}
.fudai-btn--primary:disabled {
  opacity: .6;
  cursor: default;
  transform: none;
}

/* ---- 弹窗 TAB 导航（发放新福袋 / 本帖福袋）---- */
.fudai-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 18px 0;
  border-bottom: 1px solid #f0e6d4;
}
.fudai-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 8px 11px;
  font-size: 13.5px;
  font-weight: 600;
  color: #9a7b4f;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  position: relative;
  transition: color .2s, background .2s;
}
.fudai-tab:hover { color: #c07020; background: #fff8ee; }
.fudai-tab--active {
  color: #b85c00;
}
.fudai-tab--active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(135deg, #ff6b35, #f7c948);
}
.fudai-tab-panel { padding-top: 12px; }

/* ---- 本帖福袋列表 ---- */
.fudai-bag-list-tip {
  font-size: 12.5px;
  line-height: 1.6;
  color: #8a6a3a;
  background: linear-gradient(135deg, #fff8e7, #fff3db);
  border: 1px solid #f0e2c0;
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 12px;
}
.fudai-list-msg {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.fudai-list-msg--ok {
  color: #1e8e3e;
  background: #e9f7ef;
  border: 1px solid #c6ecd3;
}
.fudai-bag-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 140, 60, 0.5) transparent;
}
.fudai-bag-list::-webkit-scrollbar { width: 8px; }
.fudai-bag-list::-webkit-scrollbar-thumb {
  background: rgba(200, 140, 60, 0.5);
  border-radius: 4px;
}
.fudai-bag-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #fffdf7;
  border: 1px solid #f0e6d4;
  border-radius: 10px;
  transition: box-shadow .15s, transform .15s;
}
.fudai-bag-item:hover {
  box-shadow: 0 3px 12px rgba(180, 120, 30, 0.12);
  transform: translateY(-1px);
}
.fudai-bag-item__title {
  font-size: 14px;
  font-weight: 700;
  color: #5a3d12;
  margin-bottom: 3px;
}
.fudai-bag-item__meta {
  font-size: 12px;
  color: #a07a3a;
  line-height: 1.4;
}
.fudai-bag-item__action { flex-shrink: 0; }
.fudai-bag-edit {
  padding: 7px 16px;
  font-size: 13px;
}
.fudai-bag-noedit {
  font-size: 12px;
  color: #bbb;
}
.fudai-list-empty,
.fudai-list-loading {
  text-align: center;
  padding: 36px 16px;
  color: #a98a5a;
  font-size: 13.5px;
  line-height: 1.7;
}

/* ============================================================
   福袋UI风格：有图片版（.fudai-card--imgstyle）
   后台「福袋UI风格」= 有图片版 时启用；图片可在后台自定义
   ============================================================ */
.fudai-card--imgstyle {
  background: radial-gradient(120% 100% at 50% 0%, #fff4d6 0%, #fffdf6 55%, #ffffff 100%);
  text-align: center;
  padding-top: 6px;
  /* 图片版内容多（图+标题+奖励+按钮），最小宽度比纯 CSS 版宽 */
  min-width: 320px;
}

/* 图片容器（视觉主体） */
.fudai-bagwrap {
  position: relative;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 0;
  user-select: none;
}

/* 福袋图片 */
.fudai-bag__img {
  position: relative;
  z-index: 2;
  max-height: 118px;
  max-width: 72%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 16px rgba(200, 120, 20, .28));
  transition: transform .25s ease;
  transform-origin: 50% 85%;
}
/* 待领取状态：轻微呼吸浮动，暗示可点击 */
.fudai-card--imgstyle.fudai-card--open .fudai-bag__img {
  animation: fudaiBagFloat 2.8s ease-in-out infinite;
  cursor: pointer;
}
.fudai-card--imgstyle.fudai-card--open:hover .fudai-bag__img {
  transform: scale(1.05);
}
@keyframes fudaiBagFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-1.5deg); }
}

/* 背后光晕（常驻淡光） */
.fudai-bag__glow {
  position: absolute;
  z-index: 1;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 102, .55) 0%, rgba(255, 186, 82, .25) 45%, rgba(255, 186, 82, 0) 72%);
  opacity: .85;
  pointer-events: none;
}

/* 放射光线（开袋时出现） */
.fudai-bag__rays {
  position: absolute;
  z-index: 1;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background:
    conic-gradient(from 0deg,
      rgba(255, 209, 102, .85) 0deg 8deg, transparent 8deg 45deg,
      rgba(255, 209, 102, .85) 45deg 53deg, transparent 53deg 90deg,
      rgba(255, 209, 102, .85) 90deg 98deg, transparent 98deg 135deg,
      rgba(255, 209, 102, .85) 135deg 143deg, transparent 143deg 180deg,
      rgba(255, 209, 102, .85) 180deg 188deg, transparent 188deg 225deg,
      rgba(255, 209, 102, .85) 225deg 233deg, transparent 233deg 270deg,
      rgba(255, 209, 102, .85) 270deg 278deg, transparent 278deg 315deg,
      rgba(255, 209, 102, .85) 315deg 323deg, transparent 323deg 360deg);
  -webkit-mask-image: radial-gradient(circle, transparent 26%, #000 42%, #000 70%, transparent 78%);
          mask-image: radial-gradient(circle, transparent 26%, #000 42%, #000 70%, transparent 78%);
}

/* 状态徽章（右上角小圆标） */
.fudai-bag__badge {
  position: absolute;
  z-index: 3;
  top: 4px;
  right: 18%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 8px rgba(180, 120, 30, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}

/* 图片版标题 */
.fudai-card__title--img {
  padding: 8px 18px 2px;
  font-size: 16px;
  font-weight: 700;
  color: #a24b00;
  text-shadow: none;
  letter-spacing: .3px;
}

/* 图片版正文居中 */
.fudai-card--imgstyle .fudai-card__body {
  text-align: center;
  padding-top: 8px;
}
.fudai-card--imgstyle .fudai-card__rewards,
.fudai-card--imgstyle .fudai-card__meta {
  justify-content: center;
}
.fudai-card--imgstyle .fudai-claim-btn {
  min-width: 168px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- 开袋特效：点击领取时 JS 添加 is-opening / is-opened ---- */
.fudai-card--imgstyle.is-opening .fudai-bag__img {
  animation: fudaiBagShake .5s ease-in-out 1;
}
.fudai-card--imgstyle.is-opening .fudai-bag__glow {
  animation: fudaiGlowBurst .9s ease-out 1;
}
.fudai-card--imgstyle.is-opening .fudai-bag__rays {
  animation: fudaiRaysSpin 1s ease-out 1;
}
.fudai-card--imgstyle.is-opened .fudai-bag__img {
  animation: fudaiBagPop .6s cubic-bezier(.34, 1.56, .64, 1) 1 forwards;
}
.fudai-card--imgstyle.is-opened .fudai-bag__badge {
  animation: fudaiBadgePop .45s cubic-bezier(.34, 1.56, .64, 1) 1;
}

@keyframes fudaiBagShake {
  0%, 100% { transform: rotate(0deg)    scale(1); }
  12%      { transform: rotate(-9deg)   scale(1.03); }
  26%      { transform: rotate(8deg)    scale(1.04); }
  40%      { transform: rotate(-7deg)   scale(1.05); }
  54%      { transform: rotate(6deg)    scale(1.06); }
  70%      { transform: rotate(-4deg)   scale(1.07); }
  85%      { transform: rotate(3deg)    scale(1.05); }
}
@keyframes fudaiBagPop {
  0%   { transform: scale(1)    translateY(0); }
  38%  { transform: scale(1.2)  translateY(-10px); }
  68%  { transform: scale(.95)  translateY(2px); }
  100% { transform: scale(1.04) translateY(0); }
}
@keyframes fudaiGlowBurst {
  0%   { opacity: .3; transform: scale(.45); }
  38%  { opacity: 1;  transform: scale(1.15); }
  100% { opacity: .85; transform: scale(1); }
}
@keyframes fudaiRaysSpin {
  0%   { opacity: 0;   transform: rotate(0deg)   scale(.45); }
  30%  { opacity: .95; transform: rotate(35deg)  scale(1.05); }
  100% { opacity: 0;   transform: rotate(90deg)  scale(1.45); }
}
@keyframes fudaiBadgePop {
  0%   { transform: scale(0)   rotate(-45deg); }
  60%  { transform: scale(1.3) rotate(8deg); }
  100% { transform: scale(1)   rotate(0deg); }
}

/* ---- 图片版的状态差异 ---- */
/* 已领取（即时到账）：福袋图降饱和 + 缩小一点，表示已开启 */
.fudai-card--imgstyle.fudai-card--claimed .fudai-bag__img {
  filter: grayscale(.55) drop-shadow(0 5px 10px rgba(120, 120, 120, .22));
  transform: scale(.94);
}
.fudai-card--imgstyle.fudai-card--claimed .fudai-bag__glow { opacity: .25; }
.fudai-card--imgstyle.fudai-card--claimed .fudai-card__title--img { color: #6b7280; }

/* 邮件发放：保留彩色，光晕转蓝 */
.fudai-card--imgstyle.fudai-card--claimed-mail {
  background: radial-gradient(120% 100% at 50% 0%, #e8f2ff 0%, #f8fbff 55%, #ffffff 100%);
}
.fudai-card--imgstyle.fudai-card--claimed-mail .fudai-bag__glow {
  background: radial-gradient(circle, rgba(116, 185, 255, .5) 0%, rgba(90, 155, 212, .2) 45%, rgba(90, 155, 212, 0) 72%);
}
.fudai-card--imgstyle.fudai-card--claimed-mail .fudai-card__title--img { color: #1655a8; }

/* 已结束 / 已过期 / 已抢光：整体灰化 */
.fudai-card--imgstyle.fudai-card--closed,
.fudai-card--imgstyle.fudai-card--expired,
.fudai-card--imgstyle.fudai-card--soldout {
  background: radial-gradient(120% 100% at 50% 0%, #f1f1f1 0%, #fafafa 55%, #ffffff 100%);
}
.fudai-card--imgstyle.fudai-card--closed  .fudai-bag__img,
.fudai-card--imgstyle.fudai-card--expired .fudai-bag__img,
.fudai-card--imgstyle.fudai-card--soldout .fudai-bag__img {
  filter: grayscale(.9) drop-shadow(0 4px 8px rgba(120, 120, 120, .18));
  opacity: .8;
}
.fudai-card--imgstyle.fudai-card--closed  .fudai-bag__glow,
.fudai-card--imgstyle.fudai-card--expired .fudai-bag__glow,
.fudai-card--imgstyle.fudai-card--soldout .fudai-bag__glow { opacity: .12; }
.fudai-card--imgstyle.fudai-card--closed  .fudai-card__title--img,
.fudai-card--imgstyle.fudai-card--expired .fudai-card__title--img,
.fudai-card--imgstyle.fudai-card--soldout .fudai-card__title--img { color: #9ca3af; }

/* 图片版的飘星粒子起点抬高到福袋中部 */
.fudai-card--imgstyle .fudai-sparkles { z-index: 4; }

/* 移动端 */
@media (max-width: 480px) {
  .fudai-bagwrap { height: 112px; }
  .fudai-bag__img { max-height: 100px; }
  .fudai-bag__glow { width: 124px; height: 124px; }
  .fudai-bag__rays { width: 156px; height: 156px; }
  .fudai-card--imgstyle .fudai-claim-btn { min-width: 140px; }
}

/* 尊重系统「减少动效」偏好 */
@media (prefers-reduced-motion: reduce) {
  .fudai-card--imgstyle.fudai-card--open .fudai-bag__img,
  .fudai-card--imgstyle.is-opening .fudai-bag__img,
  .fudai-card--imgstyle.is-opening .fudai-bag__glow,
  .fudai-card--imgstyle.is-opening .fudai-bag__rays,
  .fudai-card--imgstyle.is-opened  .fudai-bag__img,
  .fudai-card--imgstyle.is-opened  .fudai-bag__badge { animation: none; }
}

/* ============================================================
   领取详情弹窗（福袋主题活动窗口）
   ============================================================ */

.fudai-claims-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
}

.fudai-claims-modal {
  position: relative;
  width: 92%;
  max-width: 560px;
  max-height: 80vh;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(180, 120, 30, 0.25), 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 福袋主题背景层 */
.fudai-claims-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 200, 80, 0.35) 0%, transparent 60%),
    linear-gradient(160deg, #fff8e8 0%, #ffecd2 30%, #ffd4a3 60%, #ffb347 100%);
  z-index: 0;
}
.fudai-claims-glow {
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 100, 0.6) 0%, transparent 70%);
  filter: blur(24px);
  z-index: 0;
  animation: claimsGlowPulse 3s ease-in-out infinite alternate;
}
@keyframes claimsGlowPulse {
  from { opacity: 0.5; transform: translateX(-50%) scale(1); }
  to   { opacity: 0.9; transform: translateX(-50%) scale(1.08); }
}

/* 内容容器 */
.fudai-claims-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

.fudai-claims-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 12px;
}
.fudai-claims-title {
  font-size: 17px;
  font-weight: 700;
  color: #8b5a00;
}
.fudai-claims-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  color: #996600;
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.fudai-claims-close:hover {
  background: #fff;
  color: #d45500;
  transform: scale(1.1);
}

.fudai-claims-body {
  padding: 0 20px 16px;
  overflow-y: auto;
  flex: 1;
}
.fudai-claims-loading {
  text-align: center;
  padding: 48px 0;
  color: #b0854f;
  font-size: 14px;
}

/* 概要信息栏 */
.fudai-claims-info {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 14px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  font-size: 12px;
  color: #8b6914;
  line-height: 1.6;
}

/* 领取列表 */
.fudai-claims-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 440px;            /* 约 10 行，超出出现纵向滑块 */
  overflow-y: auto;
  padding-right: 4px;           /* 给滑块留空隙，避免贴边 */
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 140, 60, 0.5) transparent;
}
.fudai-claims-list::-webkit-scrollbar { width: 8px; }
.fudai-claims-list::-webkit-scrollbar-thumb {
  background: rgba(200, 140, 60, 0.5);
  border-radius: 4px;
}
.fudai-claims-list::-webkit-scrollbar-track { background: transparent; }

.fudai-claims-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto 110px;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 12px;
  font-size: 13px;
  transition: transform .15s, box-shadow .15s;
}
.fudai-claims-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(180, 120, 30, 0.12);
  background: rgba(255, 255, 255, 0.85);
}

/* 排名 */
.fudai-claims-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 12px;
  background: #e8e0d4;
  color: #8b7355;
}
.fudai-claims-rank--gold .fudai-claims-rank {
  background: linear-gradient(135deg, #ffe066, #ffc107);
  color: #7a5c00;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.4);
}
.fudai-claims-rank--silver .fudai-claims-rank {
  background: linear-gradient(135deg, #e0e0e0, #bdbdbd);
  color: #555;
}
.fudai-claims-rank--bronze .fudai-claims-rank {
  background: linear-gradient(135deg, #ebc9a3, #cd9a61);
  color: #6b4423;
}

.fudai-claims-user {
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s;
}
.fudai-claims-user:hover {
  color: #c07020;
}
.fudai-claims-reward {
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fudai-claims-pts {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(135deg, #fff3d6, #ffd9a0);
  color: #b9770a;
  white-space: nowrap;
}
.fudai-claims-time {
  color: #aaa;
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

/* 底部统计 */
.fudai-claims-foot {
  text-align: center;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid rgba(180, 140, 80, 0.2);
  font-size: 11px;
  color: #a08050;
}

/* 空状态 */
.fudai-claims-empty {
  text-align: center;
  padding: 42px 0 36px;
}
.fudai-claims-empty-icon {
  font-size: 38px;
  margin-bottom: 8px;
}
.fudai-claims-empty p {
  color: #99774d;
  font-size: 13px;
}

@media (max-width: 520px) {
  .fudai-claims-modal { width: 96%; }
  .fudai-claims-row {
    grid-template-columns: 28px 1fr auto;
    gap: 6px;
    padding: 8px 10px;
  }
  .fudai-claims-pts { grid-column: span 1; }
  .fudai-claims-time { display: none; }
}