/* ==========================================================================
   抖音热点宝 · 框架层样式（T02）
   ------------------------------------------------------------
   本文件只负责「官方全量复刻」新增的三块结构样式：
     1. 榜单聚合 → 画廊网格（.dou-gallery / .dou-gcard）
     2. 活动日历 → 区间色带 + 右侧常驻详情面板（.dou-cal-wrap / .cal-band）
     3. 详情浮层壳（.dou-detail-layer）
   颜色变量沿用主站 style.css（--bg/--surface/--border/--text…）与抖音品牌色
   #fe2c55 / #c1123d，保证深色主题（news-theme）下一致。
   ========================================================================== */

/* ---------------------------------------------------------------- *
   1. 榜单聚合 · 画廊网格（官方为 2 列卡片）
 * ---------------------------------------------------------------- */

.dou-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 16px 20px;
}

.dou-gcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--bg-soft);
  overflow: hidden;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.dou-gcard:hover { border-color: rgba(254, 44, 85, .45); box-shadow: var(--shadow-md); }

.dou-gcard-h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), transparent);
}
.dou-gcard-name { position: relative; padding-left: 11px; font-size: 14px; font-weight: 820; color: var(--text); }
.dou-gcard-name::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, #fe2c55, #c1123d);
}
.dou-gcard-n {
  font-size: 11px; font-weight: 700; color: #fe2c55;
  background: rgba(254, 44, 85, .12); padding: 1px 8px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.dou-gcard-time { margin-left: auto; font-size: 11px; color: var(--text-3); white-space: nowrap; }

/* 卡片级筛选器（垂类 / 时间） */
.dou-gcard-flt { display: flex; gap: 6px; flex-wrap: wrap; padding: 9px 14px 0; }
.dou-gcard-flt .dou-chip { padding: 3px 9px; font-size: 11.5px; border-radius: 7px; }
.dou-chip.soon {
  border-style: dashed; color: var(--text-3); cursor: not-allowed;
  display: inline-flex; align-items: center; gap: 4px;
}
.dou-chip.soon:hover { border-color: var(--border); color: var(--text-3); }

/* TOP5 行 */
.dou-glist { display: flex; flex-direction: column; padding: 4px 0; }
.dou-grow {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border: none; background: none; text-align: left; cursor: pointer;
  text-decoration: none; color: inherit; transition: background .14s; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.dou-grow:hover { background: var(--surface-hover); }
.dou-grank {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 850;
  background: var(--bg-soft); color: var(--text-3); font-variant-numeric: tabular-nums;
}
.dou-grow.top1 .dou-grank { background: linear-gradient(135deg, #ef4444, #f97316); color: #fff; }
.dou-grow.top2 .dou-grank { background: linear-gradient(135deg, #f97316, #fbbf24); color: #fff; }
.dou-grow.top3 .dou-grank { background: linear-gradient(135deg, #eab308, #84cc16); color: #fff; }
.dou-gcover {
  flex: 0 0 auto; width: 40px; height: 52px; border-radius: 8px; object-fit: cover;
  background: var(--bg-soft); display: block;
}
.dou-gmain { flex: 1; min-width: 0; }
.dou-gtitle {
  font-size: 12.8px; font-weight: 650; line-height: 1.42; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dou-gmeta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; font-size: 10.8px; color: var(--text-3); }
.dou-gmeta .au { color: #fe2c55; font-weight: 700; }
.dou-gspark { flex: 0 0 auto; width: 64px; }
.dou-gspark .spark { height: 28px; }
.dou-gstats {
  flex: 0 0 auto; display: flex; gap: 10px; font-size: 10.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums; text-align: right;
}
.dou-gstats b { display: block; font-size: 12px; color: var(--text); font-weight: 750; }
.dou-gstats .rate b { color: #fe2c55; }

.dou-gcard-more {
  margin-top: auto; width: 100%; border: none; border-top: 1px solid var(--border);
  background: none; color: #fe2c55; font-weight: 750; font-size: 12.5px;
  padding: 11px; cursor: pointer; font-family: inherit; transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.dou-gcard-more:hover { background: var(--surface-hover); }

/* ---------------------------------------------------------------- *
   2. 活动日历 · 区间色带 + 右侧详情面板
 * ---------------------------------------------------------------- */

.dou-cal-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; padding: 14px 16px 18px; }
.dou-cal-main { min-width: 0; }

/* 周行：day 数字条 + band 轨道 */
.cal-grid2 { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--border); }
.cal-wk-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal-wk-head > div {
  background: var(--bg-soft); text-align: center; padding: 7px 0;
  font-size: 11.5px; font-weight: 750; color: var(--text-3);
}
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); }
.cal-week + .cal-week { border-top: 1px solid var(--border); }

.cal-day { background: var(--surface-solid); min-height: 40px; padding: 5px 6px 3px; cursor: pointer; transition: background .15s; }
.cal-day.out { background: var(--bg-soft); opacity: .55; cursor: default; }
.cal-day:not(.out):hover { background: var(--surface-hover); }
.cal-day.sel { box-shadow: inset 0 0 0 2px #fe2c55; }
.cal-day-num { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 750; }
.cal-day-num .d { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.cal-day.today .cal-day-num .d { background: #fe2c55; color: #fff; }
.cal-holiday { font-size: 10px; font-weight: 700; color: #f97316; white-space: nowrap; }
[data-theme="dark"] .cal-holiday { color: #fbbf24; }

/* band 轨道：每条 lane 是 7 列子网格，band 用 grid-column 跨格绘制连续色带 */
.cal-bands { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; padding: 3px 2px 5px; }
.cal-lane { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; min-height: 17px; }
.cal-band {
  height: 16px; margin: 1px 1px; border-radius: 5px; padding: 0 6px; line-height: 16px;
  font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: none; cursor: pointer; text-align: left; font-family: inherit;
  background: rgba(148, 163, 184, .28); color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.cal-band.lv1 { background: linear-gradient(90deg, rgba(239,68,68,.92), rgba(249,115,22,.82)); color: #fff; }
.cal-band.lv2 { background: linear-gradient(90deg, rgba(245,158,11,.9), rgba(251,191,36,.8)); color: #3b2a05; }
.cal-band.lv3 { background: linear-gradient(90deg, rgba(99,102,241,.85), rgba(56,189,248,.8)); color: #fff; }
.cal-band.active { outline: 2px solid #fe2c55; outline-offset: -1px; }
.cal-band-more {
  grid-column: 1 / -1; height: 16px; margin: 1px 2px; font-size: 10px; font-weight: 650;
  color: var(--text-3); display: flex; align-items: center;
}

/* 右侧常驻详情面板 */
.dou-cal-side {
  border: 1px solid var(--border); border-radius: 13px; background: var(--bg-soft);
  padding: 14px 15px; align-self: start; position: sticky; top: 14px;
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.cal-side-h { font-size: 13px; font-weight: 800; color: var(--text-2); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px; }
.cal-side-h .n { background: rgba(254,44,85,.12); color: #fe2c55; font-size: 11px; padding: 1px 8px; border-radius: 999px; }
.cal-side-empty { color: var(--text-3); font-size: 12.5px; padding: 26px 6px; text-align: center; line-height: 1.7; }

.dou-act { border-top: 1px dashed var(--border); padding: 12px 0 4px; }
.dou-act:first-of-type { border-top: none; padding-top: 2px; }
.dou-act-h { display: flex; align-items: flex-start; gap: 8px; }
.dou-act-name { font-size: 14px; font-weight: 760; line-height: 1.5; flex: 1; min-width: 0; }
.dou-act-lv { flex-shrink: 0; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 5px;
  background: var(--bg-soft); color: var(--text-2); border: 1px solid var(--border); }
.dou-act-lv.lv1 { background: #fee2e2; color: #b91c1c; border-color: transparent; }
.dou-act-lv.lv2 { background: #fef3c7; color: #b45309; border-color: transparent; }
.dou-act-lv.lv3 { background: #e0e7ff; color: #3730a3; border-color: transparent; }
[data-theme="dark"] .dou-act-lv.lv1 { background: rgba(239,68,68,.2); color: #fca5a5; }
[data-theme="dark"] .dou-act-lv.lv2 { background: rgba(245,158,11,.2); color: #fcd34d; }
[data-theme="dark"] .dou-act-lv.lv3 { background: rgba(99,102,241,.22); color: #a5b4fc; }

.dou-act-cover { width: 100%; max-height: 132px; object-fit: cover; border-radius: 9px; margin: 9px 0 4px; display: block; }
.dou-act-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; font-size: 12px; color: var(--text-2); }
.dou-act-rows .r { display: flex; gap: 8px; align-items: flex-start; line-height: 1.6; }
.dou-act-rows .k { flex: 0 0 auto; color: var(--text-3); font-weight: 650; min-width: 62px; }
.dou-act-rows .v { flex: 1; min-width: 0; word-break: break-word; }
.dou-act-cat { display: inline-block; flex: 0 0 auto; font-size: 11px; font-weight: 700; color: #fe2c55;
  background: rgba(254,44,85,.1); border-radius: 6px; padding: 1px 8px; }
/* 关联话题：可点击复制（按钮语义） */
.dou-act-topic { display: inline-flex; align-items: center; gap: 4px; margin: 2px 6px 2px 0;
  font-size: 11.5px; font-weight: 650; font-family: inherit; color: #fe2c55; text-decoration: none;
  border: 1px solid rgba(254,44,85,.3); background: rgba(254,44,85,.06); border-radius: 7px;
  padding: 2px 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: .15s; }
.dou-act-topic:hover { background: rgba(254,44,85,.14); border-color: #fe2c55; }
.dou-act-topic:active { transform: scale(.97); }
.dou-act-copy { font-size: 11px; opacity: .75; line-height: 1; }
.dou-act-hot { font-weight: 700; color: #f59e0b; }
/* 相关热点：无数据时整行隐藏（见 actDetailHtml） */
.dou-act-rows .r { min-height: 0; }
/* 右侧活动前后切换 */
.cal-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px;
  padding-top: 10px; border-top: 1px dashed var(--border); }
.cal-nav-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); font-size: 16px; line-height: 1; cursor: pointer;
  display: inline-grid; place-items: center; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.cal-nav-btn:hover { border-color: #fe2c55; color: #fe2c55; }
.cal-nav-i { font-size: 12.5px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 42px; text-align: center; }
.dou-act-topic:hover { text-decoration: underline; }
.dou-act-summary { margin-top: 9px; font-size: 12px; color: var(--text-2); line-height: 1.7;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; }
.dou-act-btns { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.dou-act-btn {
  flex: 1; min-width: 108px; text-align: center; text-decoration: none;
  background: linear-gradient(135deg, #fe2c55, #c1123d); color: #fff; font-weight: 750;
  font-size: 12.5px; padding: 9px 14px; border-radius: 9px; border: none; cursor: pointer;
  font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.dou-act-btn.ghost { background: var(--surface); color: #fe2c55; border: 1px solid #fe2c55; }

/* 图例：推荐活动色块（月/周视图切换已统一到筛选区，见 douyin.html renderFilterBar） */
.cal-lg3 { background: #6366f1; }

/* ---------------------------------------------------------------- *
   3. 详情浮层壳
 * ---------------------------------------------------------------- */

.dou-detail-layer {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: stretch; justify-content: center;
  background: rgba(10, 12, 20, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: douFade .18s ease;
}
.dou-detail-layer[hidden] { display: none; }
@keyframes douFade { from { opacity: 0 } to { opacity: 1 } }

.dou-detail-panel {
  position: relative; margin: 22px; width: min(1080px, 100%); max-height: calc(100vh - 44px);
  background: var(--surface-solid, var(--surface)); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 24px 70px -24px rgba(0,0,0,.6);
  display: flex; flex-direction: column; overflow: hidden;
}
.dou-detail-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--bg-soft), transparent);
}
.dou-detail-ttl { font-size: 15.5px; font-weight: 820; display: flex; align-items: center; gap: 8px; min-width: 0; }
.dou-detail-ttl .k { font-size: 18px; }
.dou-detail-tabs { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.dou-detail-tabs .dou-chip { padding: 4px 11px; font-size: 12px; }
.dou-detail-close {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); font-size: 17px; cursor: pointer;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent; font-family: inherit;
}
.dou-detail-close:hover { border-color: #fe2c55; color: #fe2c55; }
.dou-detail-body { padding: 16px 18px 24px; overflow-y: auto; min-height: 220px; }

.dou-detail-err { padding: 44px 20px; text-align: center; color: var(--text-2); }
.dou-detail-err .em { font-size: 38px; display: block; margin-bottom: 10px; }
.dou-detail-err button {
  margin-top: 14px; background: linear-gradient(135deg,#fe2c55,#c1123d); color: #fff;
  border: none; border-radius: 9px; padding: 9px 20px; font-weight: 750; font-size: 13px;
  cursor: pointer; font-family: inherit;
}
/* 中性空态（暂无数据 / 信息不可用）—— 刻意不用 ⚠️，避免暗示「出错了」 */
.dou-na-box { padding: 44px 20px; text-align: center; color: var(--text-2); }
.dou-na-box .ic { font-size: 36px; display: block; margin-bottom: 10px; opacity: .9; }
.dou-na-box .tt { font-size: 15px; font-weight: 750; color: var(--text); margin: 0 0 6px; }
.dou-na-box .hh { color: var(--text-3); font-size: 12.5px; line-height: 1.7; }
.dou-na-box button {
  margin-top: 16px; background: linear-gradient(135deg,#fe2c55,#c1123d); color: #fff;
  border: none; border-radius: 9px; padding: 9px 20px; font-weight: 750; font-size: 13px;
  cursor: pointer; font-family: inherit;
}
/* 单个维度 / 区块内的中性小提示 */
.dou-na-note { padding: 16px; text-align: center; color: var(--text-3); font-size: 12.5px;
  line-height: 1.7; background: var(--bg-soft); border: 1px dashed var(--border); border-radius: 10px; }
.dou-na-note .ic { margin-right: 6px; }
.dou-skel2 { padding: 8px 0; display: flex; flex-direction: column; gap: 12px; }
.dou-skel2 i { display: block; height: 54px; border-radius: 10px;
  background: linear-gradient(90deg, var(--bg-soft) 25%, var(--surface-hover) 37%, var(--bg-soft) 63%);
  background-size: 400% 100%; animation: douShimmer 1.3s ease infinite; }

/* 通用详情块（占位渲染器用；T03/T04 可覆盖） */
.dou-blk { border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; margin-bottom: 12px; background: var(--bg-soft); }
.dou-blk-h { font-size: 12.5px; font-weight: 800; color: var(--text-2); margin-bottom: 8px; }
.dou-kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 12.5px; color: var(--text); }
.dou-kv .k { color: var(--text-3); font-weight: 650; white-space: nowrap; }
.dou-blk details summary { cursor: pointer; color: #fe2c55; font-size: 12px; font-weight: 650; margin-top: 6px; }
.dou-blk pre { max-height: 260px; overflow: auto; font-size: 11px; line-height: 1.5;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 9px; margin-top: 6px; }
.dou-dlist { display: flex; flex-direction: column; }
.dou-dlist .r { display: flex; gap: 9px; padding: 7px 2px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.dou-dlist .r:last-child { border-bottom: none; }

/* 全量列表浮层（榜单「更多」） */
.dou-fullwrap { overflow-x: auto; }

/* ---------------------------------------------------------------- *
   4. 响应式
 * ---------------------------------------------------------------- */

@media (max-width: 1000px) {
  .dou-cal-wrap { grid-template-columns: 1fr; }
  .dou-cal-side { position: static; max-height: none; }
}
@media (max-width: 860px) {
  .dou-gallery { grid-template-columns: 1fr; padding: 14px; }
}
@media (max-width: 700px) {
  .dou-detail-panel { margin: 0; width: 100%; height: 100%; max-height: 100vh; border-radius: 0; }
  .dou-detail-head { padding: 12px 14px; }
  .dou-detail-body { padding: 14px 14px 22px; }
}
@media (max-width: 560px) {
  .dou-grow { padding: 8px 12px; gap: 8px; }
  .dou-gcover { width: 34px; height: 44px; }
  .dou-gspark { width: 46px; }
  .dou-gstats { gap: 8px; font-size: 10px; }
  .cal-day { min-height: 34px; }
  .dou-cal-wrap { padding: 12px; gap: 12px; }
}
@media (max-width: 480px) {
  .dou-gallery { padding: 11px; gap: 12px; }
  .cal-bands .cal-band { font-size: 9px; padding: 0 4px; }
  .dou-gcard-h { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .dou-detail-layer { animation: none !important; }
  .dou-gcard { transition: none !important; }
  .dou-skel2 i { animation: none !important; }
}