/* ============================================
   周报页专用样式
   依赖 assets/style.css 中的 :root 变量
   ============================================ */

/* 返回链接 */
.back-link{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; color:var(--ink-soft); text-decoration:none;
  padding:8px 16px 8px 12px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  margin-bottom:22px;
  transition:transform .18s, box-shadow .18s, color .18s;
}
.back-link:hover{
  transform:translateX(-3px); color:var(--ink);
  box-shadow:0 4px 14px rgba(122,130,168,.13);
}

/* 页头 */
.page-hero{
  position:relative; overflow:hidden;
  border-radius:var(--radius-lg);
  padding:42px 40px;
  margin-bottom:26px;
  background:linear-gradient(125deg,#EAF9F2 0%,#F0F4FF 52%,#FFF4EA 100%);
  box-shadow:var(--shadow);
}
.page-hero::after{
  content:""; position:absolute; right:-70px; top:-80px;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(168,230,207,.5) 0%,transparent 68%);
  pointer-events:none;
}
.page-hero h1{
  font-size:clamp(25px,3.4vw,36px); font-weight:800;
  letter-spacing:.8px; line-height:1.3;
  position:relative; z-index:1;
}
.page-hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--mint-deep),var(--lilac-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-hero p{
  margin-top:12px; font-size:14.5px; color:var(--ink-soft);
  max-width:560px; line-height:1.8; position:relative; z-index:1;
}
.page-hero .meta-row{
  margin-top:20px; display:flex; gap:10px; flex-wrap:wrap;
  position:relative; z-index:1;
}
.pill{
  font-size:12px; font-weight:600;
  padding:5px 13px; border-radius:999px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.95);
  color:var(--ink-soft);
}
.pill b{ color:var(--mint-deep); font-weight:700; }

/* 筛选栏 */
.filter-bar{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-bottom:22px;
  padding:14px 18px;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.filter-bar .f-label{
  font-size:12.5px; color:var(--ink-faint);
  margin-right:2px; white-space:nowrap;
}
.chip{
  font-size:13px; font-weight:600;
  padding:7px 16px; border-radius:999px;
  border:1.5px solid var(--line); background:#fff;
  color:var(--ink-soft); cursor:pointer;
  transition:all .18s;
  white-space:nowrap;
}
.chip:hover{ border-color:var(--mint); color:var(--ink); transform:translateY(-1px); }
.chip.active{
  background:linear-gradient(120deg,var(--mint-deep),#7FD3C4);
  border-color:transparent; color:#fff;
  box-shadow:0 4px 14px rgba(111,207,151,.38);
}

/* 时间线 */
.timeline{ position:relative; padding-left:30px; }
.timeline::before{
  content:""; position:absolute; left:7px; top:10px; bottom:10px;
  width:2px; border-radius:2px;
  background:linear-gradient(180deg,var(--mint) 0%,var(--lilac) 55%,var(--peach) 100%);
  opacity:.65;
}

/* 周报卡片 */
.report-item{
  position:relative;
  margin-bottom:18px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .22s, box-shadow .22s, border-color .22s;
  overflow:hidden;
}
.report-item:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(199,206,234,.8);
}
/* 时间线节点 */
.report-item::before{
  content:""; position:absolute;
  left:-30px; top:26px;
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:3px solid var(--mint-deep);
  box-shadow:0 0 0 4px rgba(168,230,207,.22);
  z-index:1;
}
.report-item.is-new::before{ border-color:var(--peach-deep); box-shadow:0 0 0 4px rgba(255,176,136,.24); }

/* 卡片头部（可点击） */
.report-head{
  display:flex; align-items:flex-start; gap:16px;
  padding:20px 22px;
  cursor:pointer;
  user-select:none;
}
.report-date{
  flex:0 0 auto; text-align:center;
  min-width:56px;
  padding:6px 10px;
  border-radius:13px;
  background:linear-gradient(135deg,#EFF9F4,#E4F3FF);
  line-height:1.25;
}
.report-date .d-day{ display:block; font-size:20px; font-weight:800; color:#4E8F76; }
.report-date .d-mon{ display:block; font-size:10.5px; color:var(--ink-faint); letter-spacing:.5px; }

.report-main{ flex:1; min-width:0; }
.report-title{
  font-size:16px; font-weight:800; letter-spacing:.3px;
  margin-bottom:6px; line-height:1.4;
}
.report-summary{
  font-size:13px; color:#61617A; line-height:1.72;
}

.report-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.tag{
  font-size:10.5px; font-weight:700;
  padding:2.5px 10px; border-radius:999px;
}
.tag.hot { background:#FFEFEF; color:#C06B66; }
.tag.new { background:#E6F9F0; color:#4E8F76; }
.tag.info{ background:#EFF1FC; color:#6B77B8; }
.tag.raid{ background:#FFF4E8; color:#B9713F; }
.tag.fix { background:#F2F0FA; color:#7A6BB0; }

.report-toggle{
  flex:0 0 auto; align-self:center;
  width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center;
  background:#F8F7FC; color:var(--ink-faint);
  font-size:11px;
  transition:transform .25s, background .2s, color .2s;
}
.report-item.open .report-toggle{
  transform:rotate(180deg);
  background:#EAF9F2; color:var(--mint-deep);
}

/* 折叠内容 */
.report-body{
  max-height:0; overflow:hidden;
  transition:max-height .35s cubic-bezier(.4,0,.2,1);
}
.report-item.open .report-body{ max-height:2400px; }

.report-body-inner{
  padding:0 22px 22px 22px;
  border-top:1px dashed var(--line);
  margin-top:0;
  padding-top:18px;
}
.sec-block + .sec-block{ margin-top:18px; }
.sec-heading{
  font-size:13.5px; font-weight:800; color:#4E8F76;
  display:flex; align-items:center; gap:8px;
  margin-bottom:10px;
}
.sec-heading::before{
  content:""; width:4px; height:14px; border-radius:3px;
  background:linear-gradient(180deg,var(--mint-deep),var(--lilac-deep));
}
.sec-list{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.sec-list li{
  position:relative; padding-left:18px;
  font-size:13px; color:#4A4A5C; line-height:1.78;
}
.sec-list li::before{
  content:""; position:absolute; left:3px; top:9px;
  width:5px; height:5px; border-radius:50%;
  background:var(--lilac-deep); opacity:.75;
}

.report-links{
  display:flex; gap:9px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px;
  border-top:1px dashed var(--line);
}
.ext-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600;
  padding:7px 15px; border-radius:999px;
  background:#F7F9FF; color:var(--lilac-deep);
  text-decoration:none; border:1px solid #E8ECFA;
  transition:all .18s;
}
.ext-link:hover{
  background:#EFF3FF; transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(154,168,224,.2);
}

/* 空状态 / 加载 / 错误 */
.state-box{
  text-align:center; padding:56px 24px;
  background:#fff; border:1px dashed var(--line);
  border-radius:var(--radius);
  color:var(--ink-soft); font-size:13.5px;
}
.state-box .s-ico{ font-size:32px; margin-bottom:12px; opacity:.75; }
.state-box .s-title{ font-size:15px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.state-box .s-detail{ font-size:12.5px; color:var(--ink-faint); line-height:1.75; }
.state-box code{
  background:#F5F3FA; padding:2px 7px; border-radius:5px;
  font-size:12px; color:#7A6BB0;
}

.skeleton{
  height:88px; border-radius:var(--radius);
  background:linear-gradient(90deg,#F7F5FB 25%,#EFECF7 50%,#F7F5FB 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
  margin-bottom:18px;
}
@keyframes shimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

/* 统计条 */
.stats-row{
  display:flex; gap:14px; flex-wrap:wrap;
  margin-bottom:20px;
}
.stat-card{
  flex:1 1 120px;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:16px 18px;
  box-shadow:var(--shadow);
}
.stat-card .st-num{
  font-size:23px; font-weight:800;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg,var(--mint-deep),var(--lilac-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-card .st-label{ font-size:11.5px; color:var(--ink-faint); margin-top:3px; }

/* 移动端 */
@media (max-width:640px){
  .page-hero{ padding:30px 22px; border-radius:22px; }
  .timeline{ padding-left:24px; }
  .timeline::before{ left:5px; }
  .report-item::before{ left:-24px; top:24px; width:12px; height:12px; }
  .report-head{ padding:16px 16px; gap:12px; }
  .report-date{ min-width:48px; padding:5px 8px; }
  .report-date .d-day{ font-size:18px; }
  .report-title{ font-size:15px; }
  .report-body-inner{ padding:16px 16px 18px; }
  .sec-list li{ font-size:12.5px; }
  .filter-bar{ padding:12px 14px; gap:7px; }
  .chip{ font-size:12px; padding:6px 13px; }
  .stat-card{ padding:13px 15px; }
  .stat-card .st-num{ font-size:20px; }
}