/* 广告位 + 自助购买（高亮色跟随站点主题 --accent） */

.ad-slot{display:flex;flex-direction:column;gap:12px;margin:10px 0}

.ad-banner,.ad-banner-img{display:block;width:100%;border-radius:10px;overflow:hidden}

.ad-banner-img{height:auto;object-fit:cover;background:var(--accent-soft,#f1f5f9)}

.ad-text{

  display:block;padding:12px 14px;border-radius:10px;background:var(--card,#fff);

  border:1px solid var(--line,rgba(0,0,0,.08));color:var(--text,#0f172a);

  font-size:13px;line-height:1.55;text-decoration:none;word-break:break-word

}

.ad-text:hover{border-color:var(--accent,#0a0a0a);color:var(--accent,#0a0a0a)}

/* 背景图 + 文字 */

.ad-bg-text{

  position:relative;display:block;border-radius:12px;overflow:hidden;

  min-height:72px;text-decoration:none;color:#fff;box-sizing:border-box

}

.ad-bg-text__bg{

  position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat

}

.ad-bg-text__bg::after{

  content:"";position:absolute;inset:0;

  background:linear-gradient(90deg,rgba(15,23,42,.62),rgba(15,23,42,.28) 55%,rgba(15,23,42,.18))

}

.ad-bg-text__label{

  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;

  min-height:72px;padding:14px 16px;font-size:14px;font-weight:650;line-height:1.45;

  letter-spacing:.01em;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.35);word-break:break-word

}

.ad-promo-slot--small .ad-bg-text,

.ad-promo-slot--cell .ad-bg-text{min-height:60px;border-radius:10px}

.ad-promo-slot--small .ad-bg-text__label,

.ad-promo-slot--cell .ad-bg-text__label{min-height:60px;padding:8px 10px;font-size:13px}

.ad-slot--ad_feed_below_slider{margin:12px 0 6px}

.ad-slot--ad_feed_below_slider > .ad-promo{padding:14px}

.ad-promo-slot.is-filled .ad-bg-text{border-radius:12px}

.ad-field textarea{resize:vertical;min-height:72px;font-family:inherit}

/* 图标 + 标题卡片 */
.ad-icon-card{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;text-decoration:none;box-sizing:border-box;
  width:100%;height:100%;min-height:100%;padding:12px 8px 10px;
  background:var(--card,#fff);border-radius:12px;
  border:1px solid var(--line,rgba(0,0,0,.06));color:inherit;
  overflow:visible;transition:border-color .15s,box-shadow .15s
}
.ad-icon-card:hover{
  border-color:var(--accent,#0a0a0a);
  box-shadow:0 4px 14px var(--accent-soft,rgba(10,10,10,.08))
}
.ad-icon-card__icon-wrap{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;flex:none;margin:0 auto;
  border-radius:12px
}
.ad-icon-card:not(.ad-icon-card--skel) .ad-icon-card__icon-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:1;
  background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.14) 34%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.14) 66%,transparent 82%);
  width:180%;
  transform:translateX(-100%);
  animation:ad-icon-shine 2s ease-in-out infinite
}
@keyframes ad-icon-shine{
  0%,12%{transform:translateX(-100%)}
  72%{transform:translateX(55%)}
  100%{transform:translateX(55%)}
}
@media (prefers-reduced-motion:reduce){
  .ad-icon-card:not(.ad-icon-card--skel) .ad-icon-card__icon-wrap::after{
    animation:none;
    display:none
  }
}
.ad-icon-card__icon{
  width:48px;height:48px;border-radius:12px;object-fit:cover;display:block;background:var(--accent-soft,#f1f5f9)
}
.ad-icon-card__title{
  display:block;
  margin-top: 0;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  min-height:1.35em;
  color:var(--accent,#0a0a0a);
  word-break:break-word;
  overflow-wrap:anywhere;
  white-space:normal
}
.ad-icon-card__desc{
  display:block;
  font-size:12px;
  font-weight:500;
  line-height: 1;
  min-height: 1em;
  color:var(--text-soft,#334155);
  word-break:break-word;
  overflow-wrap:anywhere;
  white-space:normal
}
.ad-promo--icon-title{
  container-type:inline-size;container-name:ad-icon-promo
}
.ad-promo--icon-title .ad-promo-grid,
.ad-promo--icon-title .ad-promo-small{
  align-items:stretch;
  grid-auto-rows:auto
}
/* 同一行内：图标 / 标题 / 副标题三行基线对齐（仅真实图标卡） */
.ad-promo--icon-title .ad-promo-slot:has(> .ad-icon-card),
.ad-promo--icon-title .ad-promo-slot.ad-icon-skel-wrap{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 3;
  overflow:visible;min-width:0;height:auto;align-self:stretch
}
/* 背景图+文字等非图标卡：普通矩阵格子，行列间距一致 */
.ad-promo--icon-title .ad-promo-slot:has(> .ad-bg-text),
.ad-promo--icon-title .ad-promo-slot:has(> .ad-banner),
.ad-promo--icon-title .ad-promo-slot:has(> .ad-text),
.ad-promo--feed .ad-promo-slot:has(> .ad-bg-text){
  display:block;
  grid-template-rows:none;
  grid-row:auto;
  overflow:hidden;
  height:auto;
  min-height:0;
  margin:0;
  padding:0;
  line-height:0;
  align-self:stretch
}
.ad-promo--icon-title .ad-promo-slot > .ad-icon-card{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 3;
  align-content:start;
  justify-items:center;
  justify-content:center;
  text-align:center;
  height:auto;min-height:0;width:100%
}
.ad-promo--icon-title .ad-icon-card > *{
  justify-self:center;
  text-align:center;
  max-width:100%;
  box-sizing:border-box
}
.ad-promo--icon-title .ad-icon-card__title,
.ad-promo--icon-title .ad-icon-card__desc{
  width:100%
}
.ad-promo--icon-title .ad-icon-card__icon-wrap{
  justify-self:center;
  margin-left:auto;margin-right:auto
}
.ad-promo--icon-title .ad-promo-slot.is-filled{line-height:normal}
.ad-promo-slot--cell.is-filled .ad-icon-card{border-radius:12px}

/* 图标+标题空位：外层透明按钮，内层与真实卡片同结构 */
button.ad-icon-skel-wrap{
  appearance:none;display:grid;grid-template-rows:subgrid;grid-row:span 3;
  width:100%;height:auto;min-height:0;margin:0;padding:0;border:0;background:transparent;
  font:inherit;color:inherit;cursor:pointer;text-align:center;box-shadow:none;
  justify-items:stretch
}
button.ad-icon-skel-wrap:hover{background:transparent;border:0;color:inherit}
button.ad-icon-skel-wrap:hover .ad-icon-card--skel{
  border-color:var(--accent,#0a0a0a);
  box-shadow:0 4px 14px var(--accent-soft,rgba(10,10,10,.08))
}
.ad-icon-card--skel{
  border-style:dashed;
  justify-items:center;text-align:center
}
.ad-icon-card--skel .ad-icon-skel__fill{
  background:linear-gradient(90deg,#e8eef5 0%,#f5f8fb 45%,#e8eef5 90%);
  background-size:200% 100%;animation:ad-skel-shine 1.35s ease-in-out infinite
}
.ad-icon-card--skel .ad-icon-card__title{
  display:flex;align-items:center;justify-content:center;
  width:100%;color:transparent;text-align:center
}
.ad-icon-card--skel .ad-icon-skel__bar{
  display:block;width:3.6em;height:0.72em;border-radius:999px;flex:none;margin:0 auto;
  background:linear-gradient(90deg,#e8eef5 0%,#f5f8fb 45%,#e8eef5 90%);
  background-size:200% 100%;animation:ad-skel-shine 1.35s ease-in-out infinite
}
.ad-icon-card--skel .ad-icon-card__desc{
  color:var(--muted,#8a8a8a);width:100%;text-align:center
}
@keyframes ad-skel-shine{
  0%{background-position:100% 0}
  100%{background-position:-100% 0}
}

/* 推广广告位模块 */

.ad-promo{

  background:var(--card,#fff);

  border-radius:var(--radius,20px);

  box-shadow:var(--card-shadow,0 1px 2px rgba(0,0,0,.03),0 8px 24px rgba(0,0,0,.05));

  padding:16px;

  box-sizing:border-box

}

.ad-slot > .ad-promo{overflow:visible;border:0}

.ad-promo-hd{

  display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px

}

.ad-promo-hd:has(.ad-promo-help):not(:has(.ad-promo-title)){justify-content:flex-end}

.ad-promo--bare{padding-top:16px}

.ad-promo--bare .ad-promo-large:first-child,

.ad-promo--bare > .ad-promo-small:first-child,

.ad-promo--bare > .ad-promo-grid:first-child{margin-top:0}

.ad-promo-title{font-size:15px;font-weight:800;color:var(--text,#0a0a0a);line-height:1.3;letter-spacing:-.01em}

.ad-promo-help{

  appearance:none;border:0;background:transparent;padding:0;margin:0;

  font-size:11px;color:var(--muted,#8a8a8a);cursor:pointer;line-height:1;font-weight:600

}

.ad-promo-help:hover{color:var(--text-soft,#2e2e2e)}

.ad-promo-large{display:flex;flex-direction:column;gap:10px}

/* 所有端统一跟随后台「每行显示数量」（--ad-cols）；行列间距一致 */
.ad-promo-small,.ad-promo-grid{
  display:grid;
  grid-template-columns:repeat(var(--ad-cols, 2), minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
  align-items:stretch;
  justify-items:stretch
}

.ad-promo-large + .ad-promo-small{margin-top:10px}

/* 矩阵：只统一间距，不改图片高度 */
.ad-promo--feed .ad-promo-grid,
.ad-promo--bg-text .ad-promo-grid,
.ad-promo--bg-text .ad-promo-small{
  gap:10px;
  row-gap:10px;
  column-gap:10px;
  margin-top:0;
  padding:0
}
.ad-promo--feed .ad-promo-grid:has(.ad-bg-text),
.ad-promo--icon-title.ad-promo--feed .ad-promo-grid:has(.ad-bg-text){
  gap:10px;
  row-gap:10px;
  column-gap:10px;
  grid-auto-rows:auto;
  align-items:stretch
}
.ad-promo--bg-text .ad-promo-slot--cell .ad-bg-text,
.ad-promo--bg-text .ad-promo-slot--small .ad-bg-text,
.ad-promo--feed .ad-promo-slot--cell .ad-bg-text{
  min-height:60px
}
.ad-promo--bg-text .ad-promo-slot--cell .ad-bg-text__label,
.ad-promo--bg-text .ad-promo-slot--small .ad-bg-text__label,
.ad-promo--feed .ad-promo-slot--cell .ad-bg-text__label{
  min-height:60px;padding:8px 10px
}

.ad-promo-slot{min-width:0;width:100%;box-sizing:border-box}

.ad-promo-slot.is-filled .ad-banner,

.ad-promo-slot.is-filled .ad-banner-img{border-radius:12px}

.ad-promo-slot--large.is-filled,.ad-promo-slot--small.is-filled,.ad-promo-slot--cell.is-filled{line-height:0}

.ad-promo-slot--cell.is-filled .ad-bg-text,

.ad-promo-slot--cell.is-filled .ad-text,

.ad-promo-slot--cell.is-filled .ad-banner{border-radius:12px}

.ad-buy-card{

  appearance:none;width:100%;max-width:100%;text-align:center;cursor:pointer;

  display:flex;align-items:center;justify-content:center;padding:16px;

  border-radius:12px;border:1px dashed var(--line,rgba(0,0,0,.14));background:var(--card,#fff);

  color:var(--muted,#8a8a8a);transition:border-color .15s,background .15s,color .15s;box-sizing:border-box

}

.ad-promo-slot--large.ad-buy-card{min-height:72px}

.ad-promo-slot--small.ad-buy-card,.ad-promo-slot--cell.ad-buy-card{min-height:60px;padding:10px}

.ad-buy-card:hover{

  border-color:var(--accent,#0a0a0a);

  color:var(--accent,#0a0a0a);

  background:var(--accent-soft,#fafafa)

}

.ad-buy-card__text{font-size:14px;font-weight:500;letter-spacing:.02em}

.ad-tier-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}

.ad-tier-item{

  display:flex;align-items:center;justify-content:space-between;gap:10px;

  padding:12px;border:1px solid var(--line,#e2e8f0);border-radius:10px;cursor:pointer;background:var(--accent-soft,#f8fafc)

}

.ad-tier-item.is-active{border-color:var(--accent,#0a0a0a);background:var(--accent-soft,#eff6ff)}

.ad-tier-days{font-size:14px;font-weight:700;color:var(--text,#0f172a)}

.ad-tier-price{font-size:12px;color:#16a34a;text-align:right}

.ad-tier-check{width:18px;height:18px;border-radius:50%;border:2px solid #cbd5e1;flex:none}

.ad-tier-item.is-active .ad-tier-check{

  border-color:var(--accent,#0a0a0a);background:var(--accent,#0a0a0a);

  box-shadow:inset 0 0 0 3px #fff

}

.ad-modal{position:fixed;inset:0;z-index:10060;display:none;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}

.ad-modal.open{display:flex}

.ad-modal-mask{position:absolute;inset:0;background:rgba(15,23,42,.45)}

.ad-modal-panel{position:relative;z-index:1;width:100%;max-width:480px;max-height:min(90vh,720px);overflow:auto;background:#fff;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.2)}

.ad-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 8px}

.ad-modal-hd h3{margin:0;font-size:16px;font-weight:700}

.ad-modal-close{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:#64748b}

.ad-modal-body{padding:8px 18px 18px}

.ad-field{margin-top:12px}

.ad-field label{display:block;font-size:12px;color:#64748b;margin:0 0 6px}

.ad-field input,.ad-field textarea{

  width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:8px;padding:10px 12px;font-size:14px;outline:none

}

.ad-field input:focus,.ad-field textarea:focus{

  border-color:var(--accent,#0a0a0a);

  box-shadow:0 0 0 3px var(--accent-soft,rgba(10,10,10,.12))

}

.ad-upload-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.ad-upload-preview{width:96px;height:64px;border-radius:8px;object-fit:cover;background:#f1f5f9;border:1px solid #e2e8f0}

.ad-btn{appearance:none;border-radius:8px;padding:8px 14px;font-size:14px;cursor:pointer;border:1px solid #cbd5e1;background:#fff;color:#334155}

.ad-btn-primary{

  background:var(--accent,#0a0a0a);border-color:var(--accent,#0a0a0a);color:var(--accent-ink,#fff)

}

.ad-btn-ok{background:#16a34a;border-color:#16a34a;color:#fff}

.ad-modal-ft{display:flex;justify-content:flex-end;gap:10px;padding:0 18px 16px}

.ad-pay-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}

.ad-pay-item{

  display:flex;align-items:center;justify-content:space-between;gap:10px;

  padding:12px;border:1px solid var(--line,#e2e8f0);border-radius:10px;cursor:pointer;background:var(--accent-soft,#f8fafc)

}

.ad-pay-item.is-active{border-color:var(--accent,#0a0a0a);background:var(--accent-soft,#eff6ff)}

.ad-pay-item-main{min-width:0}

.ad-pay-item-text{font-size:14px;font-weight:600;color:var(--text,#0f172a)}

.ad-pay-item-desc{font-size:12px;color:#94a3b8;margin-top:2px}

.ad-pay-check{width:18px;height:18px;border-radius:50%;border:2px solid #cbd5e1;flex:none}

.ad-pay-item.is-active .ad-pay-check{

  border-color:var(--accent,#0a0a0a);background:var(--accent,#0a0a0a);

  box-shadow:inset 0 0 0 3px #fff

}

.ad-pkg-meta{font-size:13px;color:#64748b;line-height:1.55;margin:0 0 4px}

.ad-qr-wrap{text-align:center;padding:8px 0}

.ad-qr-wrap img{width:200px;height:200px;object-fit:contain;background:#fff;border:1px solid #e2e8f0;border-radius:8px}

.ad-qr-amount{font-size:22px;font-weight:700;color:#0f172a;margin:4px 0 10px}

.ad-qr-status{font-size:13px;color:#64748b;margin-top:10px}

.ad-qr-no{font-size:12px;color:#94a3b8;margin-top:6px;word-break:break-all}

/* 窄屏：缩小间距，列数仍跟随后台；内容完整换行显示 */
@media (max-width:900px){
  .ad-promo--icon-title{padding-left:12px;padding-right:12px}
  .ad-promo--icon-title .ad-promo-grid,
  .ad-promo--icon-title .ad-promo-small{gap:8px}
  .ad-promo--icon-title .ad-icon-card{padding:10px 4px 8px}
  .ad-promo--icon-title .ad-icon-card__icon-wrap,
  .ad-promo--icon-title .ad-icon-card__icon{width:42px;height:42px;border-radius:10px}
  .ad-promo--icon-title .ad-icon-card__title{margin-top: 0;font-size:12px}
  .ad-promo--icon-title .ad-icon-card__desc{font-size:11px}
}
@media (max-width:420px){
  .ad-promo-small,.ad-promo-grid{gap:8px}
  .ad-promo--feed .ad-promo-grid,
  .ad-promo--bg-text .ad-promo-grid,
  .ad-promo--bg-text .ad-promo-small{gap:8px}
  .ad-promo--icon-title .ad-promo-grid,
  .ad-promo--icon-title .ad-promo-small{gap:6px}
  .ad-promo-slot--small.ad-buy-card,
  .ad-promo-slot--cell.ad-buy-card{min-height:60px}
  .ad-promo--icon-title .ad-icon-card__icon-wrap,
  .ad-promo--icon-title .ad-icon-card__icon{width:40px;height:40px}
}