/* ============================================================
   活动集合 · 毛玻璃弹窗
   说明：遮罩层完全透明（不做整页遮盖/压暗），只用来居中与点外部关闭；
        毛玻璃只作用在弹窗面板本身。
   ============================================================ */

/* 遮罩层：固定定位 + 高层级，不受首页 .inward / .eyou_xs 的裁切影响。
   背景完全透明 —— 不遮盖整页，页面上的按钮动画依然清晰可见。 */
.jz-act-mask {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: transparent;
}
.jz-act-mask.show {
  display: flex;
}

/* 面板：白天模式 50% 不透明（原来 15% 太透）+ 毛玻璃。
   结构 = 固定标题 + 可滚动列表，活动再多也只在这个框里滚动，不会一直拉长。 */
.jz-act-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: 76vh;                 /* 最高不超过视口 76%，超出由列表内部滚动 */
  overflow: hidden;
  box-sizing: border-box;
  padding: 22px 24px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .5);           /* 白天：透明度砍半 */
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: 0 24px 60px rgba(80, 55, 25, .22), inset 0 1px 0 rgba(255, 255, 255, .5);
  color: #4A3728;
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
  animation: jzActPanelIn .3s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes jzActPanelIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 标题 */
.jz-act-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .6);
}
.jz-act-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #C41E24;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

/* 关闭按钮 */
.jz-act-close {
  position: absolute;
  right: -6px;
  top: -6px;
  width: 34px;
  height: 34px;
  line-height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  color: #8B6B4A;
  font-size: 20px;
  cursor: pointer;
  transition: all .2s ease;
}
.jz-act-close:hover {
  background: rgba(255, 255, 255, .7);
  color: #C41E24;
  transform: rotate(90deg);
}

/* 活动列表：只在这个区域内滚动，活动加多少都不会把弹窗撑长 */
.jz-act-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 6px 2px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 30, 36, .45) transparent;
}
.jz-act-list::-webkit-scrollbar { width: 6px; }
.jz-act-list::-webkit-scrollbar-track { background: transparent; }
.jz-act-list::-webkit-scrollbar-thumb {
  background: rgba(196, 30, 36, .35);
  border-radius: 3px;
}
.jz-act-list::-webkit-scrollbar-thumb:hover { background: rgba(196, 30, 36, .6); }

/* 内容超出时：底部渐隐，并显示滚动提示（由 JS 切换这两个 class） */
.jz-act-panel.is-scrollable:not(.at-bottom) .jz-act-list {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.jz-act-more {
  flex: 0 0 auto;
  display: none;
  padding-top: 9px;
  text-align: center;
  font-size: 12px;
  color: #8B6B4A;
  letter-spacing: .5px;
}
.jz-act-panel.is-scrollable .jz-act-more { display: block; }

.jz-act-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  margin-top: 12px;
  border-radius: 16px;
  background: rgba(255, 252, 246, .62);
  border: 1px solid rgba(255, 233, 205, .95);
  box-shadow: 0 4px 14px rgba(120, 90, 50, .08);
  transition: all .22s ease;
}
.jz-act-row:hover {
  background: rgba(255, 255, 252, .85);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(120, 90, 50, .14);
}
.jz-act-info {
  flex: 1 1 auto;
  min-width: 0;
}
.jz-act-name {
  font-size: 17px;
  font-weight: 800;
  color: #C41E24;          /* 加粗标红 */
  letter-spacing: .5px;
}
.jz-act-desc {
  margin: 5px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: #5C4033;
}

/* 打开按钮：沿用站点橙色系 */
.jz-act-open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ffab76, #ff8533);
  box-shadow: 0 4px 14px rgba(255, 111, 6, .3);
  transition: all .22s ease;
  white-space: nowrap;
}
.jz-act-open:hover {
  background: linear-gradient(135deg, #ffbc90, #ff9a4d);
  box-shadow: 0 6px 20px rgba(255, 111, 6, .45);
  transform: translateY(-2px);
  color: #fff !important;
}

@media (max-width: 560px) {
  .jz-act-panel { padding: 18px 16px 20px; border-radius: 18px; }
  .jz-act-row { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
  .jz-act-open { align-self: flex-end; }
  .jz-act-title { font-size: 19px; }
}

/* ============================================================
   黑暗模式：弹窗改为黑色毛玻璃
   ============================================================ */
body.dark-mode .jz-act-panel {
  /* 暗色下底部常压着浅色卡片，15% 太透会看不清，这里加深到 50% 保证可读 */
  background: rgba(22, 22, 28, .5) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1);
  color: #e6e6ee;
}
body.dark-mode .jz-act-head {
  border-bottom-color: rgba(255, 255, 255, .14);
}
body.dark-mode .jz-act-title {
  color: #ff8f8f;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
body.dark-mode .jz-act-close {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
  color: #cfcfd8;
}
body.dark-mode .jz-act-close:hover {
  background: rgba(255, 255, 255, .22);
  color: #ff8f8f;
}
body.dark-mode .jz-act-row {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
}
body.dark-mode .jz-act-row:hover {
  background: rgba(255, 255, 255, .13);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}
body.dark-mode .jz-act-name {
  color: #ff8f8f;
}
body.dark-mode .jz-act-desc {
  color: #b7b7c2;
}
/* dark-mode.css 里有 `body.dark-mode a{color:#8ab4f8 !important}`，
   会把橙色按钮上的白字刷成浅蓝（橙底上几乎看不见），这里用更高优先级盖回去 */
body.dark-mode .jz-act-open,
body.dark-mode .jz-act-open:hover,
body.dark-mode .jz-act-open:visited,
body.dark-mode .jz-act-open:focus {
  color: #fff !important;
}
body.dark-mode .jz-act-more {
  color: #9a9aa6;
}
body.dark-mode .jz-act-list {
  scrollbar-color: rgba(255, 143, 143, .4) transparent;
}
body.dark-mode .jz-act-list::-webkit-scrollbar-thumb {
  background: rgba(255, 143, 143, .32);
}

/* ============================================================
   手机端黑夜模式（html.night-mode）
   ------------------------------------------------------------
   ⚠️ 手机端不用 body.dark-mode，用的是 <html class="night-mode">，
      所以上面那一整套 body.dark-mode 规则在手机上一条都不生效 ——
      弹窗面板还是「50% 白」，而 night-mode.js 又用 !important 把
      h3 / p / a 刷成了浅色 → 浅字压白底，标题和活动介绍完全看不清。
   这里把同一套配色补到 html.night-mode 上。
   颜色必须带 !important：night-mode.js 的
   `html.night-mode h3{color:#ececec!important}` / `p{color:#c6c6c6!important}`
   / `a{color:#9ec2f7!important}` 都是 !important，普通权重压不过。
   ============================================================ */
html.night-mode .jz-act-panel {
  background: rgba(22, 22, 28, .80) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
  color: #e6e6ee !important;
}
html.night-mode .jz-act-head {
  border-bottom-color: rgba(255, 255, 255, .14) !important;
}
html.night-mode .jz-act-title {
  color: #ff8f8f !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6) !important;
}
html.night-mode .jz-act-close {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .22) !important;
  color: #cfcfd8 !important;
}
html.night-mode .jz-act-row {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  box-shadow: none !important;
}
html.night-mode .jz-act-name {
  color: #ff8f8f !important;
}
html.night-mode .jz-act-desc {
  color: #c3c3cf !important;
}
html.night-mode .jz-act-open,
html.night-mode .jz-act-open:hover,
html.night-mode .jz-act-open:visited,
html.night-mode .jz-act-open:focus {
  color: #fff !important;
}
html.night-mode .jz-act-more {
  color: #9a9aa6 !important;
}
html.night-mode .jz-act-list {
  scrollbar-color: rgba(255, 143, 143, .4) transparent;
}
html.night-mode .jz-act-list::-webkit-scrollbar-thumb {
  background: rgba(255, 143, 143, .32);
}