/* 小蜜Link 周报海报 V8 · 右上人物安全版 · 固定 360×640（9:16） */
.wk-poster-wrap {
  width: 360px;
  max-width: 100%;
  margin: 0 auto;
}

.wk-poster {
  position: relative;
  width: 360px;
  height: 640px;
  overflow: hidden;
  border-radius: 20px;
  padding: 26px;
  background: #fff;
  isolation: isolate;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: #111827;
  box-sizing: border-box;
}

.wk-poster::before,
.wk-poster::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  z-index: -1;
  filter: blur(2px);
}

.wk-poster .inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.wk-poster .top {
  height: auto;
  min-height: 0;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  flex-shrink: 0;
  padding: 10px 0 2px;
}

/* 覆盖全局 .brand { display:flex }，必须纵向堆叠 logo / sub / date */
.wk-poster .brand {
  display: block !important;
  flex: 1 1 auto;
  min-width: 168px;
  max-width: calc(100% - 118px);
  padding: 8px 0 0 !important;
  gap: 0 !important;
  align-items: unset !important;
}

.wk-poster .brand .logo,
.wk-poster .brand .sub,
.wk-poster .brand .date {
  display: block;
  width: 100%;
  max-width: 100%;
}

.wk-poster .brand .sub,
.wk-poster .brand .date {
  white-space: normal;
  word-break: keep-all;
  writing-mode: horizontal-tb;
}

.wk-poster .logo {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -0.5px;
  line-height: 1;
  color: inherit;
}

.wk-poster .logo > span:not(.mark) {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.wk-poster .logo .mark.bee-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px 10px 12px 12px;
  font-size: 14px;
  font-weight: var(--weight-display);
  color: #09213a;
  background: linear-gradient(145deg, #ffd34d, #ffb414);
  transform: rotate(-6deg);
  box-shadow: inset 0 -3px 0 rgba(9, 33, 58, 0.08);
}

.wk-poster .sub {
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.45;
  opacity: 0.68;
  font-weight: var(--weight-strong);
}

.wk-poster .date {
  margin-top: 14px;
  font-size: 10px;
  opacity: 0.58;
  font-weight: var(--weight-strong);
}

.wk-poster .profile {
  width: 112px;
  max-width: 38%;
  text-align: right;
  flex-shrink: 0;
  margin-top: 18px;
}

.wk-poster .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: auto;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
  overflow: hidden;
}

.wk-poster .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.wk-poster .name {
  margin-top: 9px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
}

.wk-poster .role {
  margin-top: 8px;
  font-size: 8.5px;
  line-height: 1.4;
  opacity: 0.62;
  white-space: normal;
  word-break: keep-all;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wk-poster .role-dept,
.wk-poster .role-title {
  display: block;
}

.wk-poster .role-title {
  margin-top: 0;
}

.wk-p2 .profile,
.wk-p8 .profile,
.wk-p12 .profile {
  padding: 4px 6px 5px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
}

.wk-p19 .profile {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

.wk-p8 .profile .avatar {
  background: rgba(250, 204, 21, 0.22);
}

.wk-poster .data {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 10px;
  height: 112px;
  flex-shrink: 0;
}

.wk-poster .total {
  border-radius: 18px;
  padding: 15px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.wk-poster .total .label { font-size: 11px; font-weight: var(--weight-display); opacity: 0.7; }
.wk-poster .total .num { font-size: 42px; line-height: 0.9; font-weight: 950; letter-spacing: -2px; }
.wk-poster .total .unit { font-size: 10px; font-weight: var(--weight-display); opacity: 0.55; }

.wk-poster .metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wk-poster .metric { border-radius: 14px; padding: 9px 8px; min-width: 0; }
.wk-poster .metric b { display: block; font-size: 17px; line-height: 1; font-weight: 950; }
.wk-poster .metric span { display: block; margin-top: 5px; font-size: 8.5px; font-weight: var(--weight-display); opacity: 0.58; white-space: nowrap; }

.wk-poster .quote {
  margin-top: 14px;
  flex: 1 1 auto;
  min-height: 228px;
  height: auto;
  max-height: none;
  border-radius: 22px;
  padding: 20px 20px 22px 22px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-poster .quote-text { font-size: 24px; line-height: 1.34; font-weight: 950; letter-spacing: -0.45px; }
.wk-poster .quote-note {
  position: absolute;
  right: 18px;
  bottom: 18px;
  text-align: right;
  font-size: 10px;
  line-height: 1.55;
  font-weight: var(--weight-display);
  opacity: 0.64;
}

.wk-poster .quote-mark {
  position: absolute;
  right: 16px;
  top: 8px;
  font-size: 58px;
  font-family: Georgia, serif;
  line-height: 1;
  opacity: 0.12;
}

.wk-poster .footer {
  height: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  margin-top: 0;
  padding-top: 8px;
}

.wk-poster .footer span { font-size: 8.5px; font-weight: var(--weight-display); opacity: 0.52; white-space: nowrap; }
.wk-poster .footer b { font-size: 9px; font-weight: 900; opacity: 0.62; white-space: nowrap; }

/* 01 */
.wk-p1 { background: linear-gradient(160deg, #f8fbff, #e8f1ff); }
.wk-p1::before { width: 190px; height: 190px; background: #9fc5ff; right: -70px; top: -60px; opacity: 0.45; }
.wk-p1::after { width: 160px; height: 160px; background: #ffd6a5; left: -70px; bottom: 70px; opacity: 0.45; }
.wk-p1 .total, .wk-p1 .metric, .wk-p1 .quote { background: rgba(255, 255, 255, 0.64); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65), 0 12px 28px rgba(80, 120, 180, 0.13); }

/* 02 */
.wk-p2 { background: #0f172a; color: #fff; }
.wk-p2::before { width: 220px; height: 220px; background: #38bdf8; right: -90px; top: -80px; opacity: 0.34; }
.wk-p2::after { width: 180px; height: 180px; background: #a78bfa; left: -90px; bottom: 60px; opacity: 0.28; }
.wk-p2 .total, .wk-p2 .metric, .wk-p2 .quote { background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.14); }

/* 03 */
.wk-p3 { background: linear-gradient(150deg, #fff7ed, #ffedd5); color: #431407; }
.wk-p3::before { width: 210px; height: 210px; background: #fb923c; right: -80px; top: -70px; opacity: 0.22; }
.wk-p3 .total, .wk-p3 .metric, .wk-p3 .quote { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 12px 26px rgba(154, 52, 18, 0.1); }

/* 04 */
.wk-p4 { background: linear-gradient(160deg, #ecfdf5, #d1fae5); color: #052e16; }
.wk-p4::before { width: 190px; height: 190px; background: #34d399; right: -70px; top: -70px; opacity: 0.28; }
.wk-p4 .total, .wk-p4 .metric, .wk-p4 .quote { background: rgba(255, 255, 255, 0.52); border: 1px solid rgba(255, 255, 255, 0.72); }

/* 05 */
.wk-p5 { background: linear-gradient(160deg, #f5f3ff, #ede9fe); color: #2e1065; }
.wk-p5::before { width: 210px; height: 210px; background: #8b5cf6; right: -80px; top: -80px; opacity: 0.22; }
.wk-p5 .total, .wk-p5 .metric, .wk-p5 .quote { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.72); }

/* 06 */
.wk-p6 { background: #fff; color: #111827; }
.wk-p6::before { width: 150px; height: 150px; background: #111827; right: -70px; top: -70px; opacity: 0.08; }
.wk-p6 .total, .wk-p6 .metric, .wk-p6 .quote { background: #f8fafc; border: 1px solid #e5e7eb; }
.wk-p6 .quote { border: 2px solid #111827; }

/* 07 */
.wk-p7 { background: linear-gradient(150deg, #eff6ff, #fdf2f8); color: #1e1b4b; }
.wk-p7::before { width: 180px; height: 180px; background: #60a5fa; right: -60px; top: -60px; opacity: 0.2; }
.wk-p7::after { width: 150px; height: 150px; background: #f472b6; left: -80px; bottom: 100px; opacity: 0.18; }
.wk-p7 .total, .wk-p7 .metric, .wk-p7 .quote { background: rgba(255, 255, 255, 0.58); border: 1px solid rgba(255, 255, 255, 0.75); }

/* 08 */
.wk-p8 { background: linear-gradient(150deg, #111827, #1e293b); color: #fff; }
.wk-p8::before { width: 180px; height: 180px; background: #facc15; right: -80px; top: -80px; opacity: 0.23; }
.wk-p8 .total, .wk-p8 .metric, .wk-p8 .quote { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); }
.wk-p8 .avatar { background: rgba(250, 204, 21, 0.22); }

/* 09 */
.wk-p9 { background: #fefce8; color: #422006; }
.wk-p9::before { width: 210px; height: 210px; background: #fde047; right: -80px; top: -80px; opacity: 0.34; }
.wk-p9 .total, .wk-p9 .metric, .wk-p9 .quote { background: rgba(255, 255, 255, 0.56); border: 1px solid rgba(255, 255, 255, 0.8); }

/* 10 */
.wk-p10 { background: linear-gradient(160deg, #f0fdfa, #ccfbf1); color: #134e4a; }
.wk-p10::before { width: 210px; height: 210px; background: #2dd4bf; right: -80px; top: -80px; opacity: 0.26; }
.wk-p10 .total, .wk-p10 .metric, .wk-p10 .quote { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.75); }

/* 11 */
.wk-p11 { background: linear-gradient(150deg, #fff1f2, #ffe4e6); color: #4c0519; }
.wk-p11::before { width: 180px; height: 180px; background: #fb7185; right: -70px; top: -70px; opacity: 0.22; }
.wk-p11 .total, .wk-p11 .metric, .wk-p11 .quote { background: rgba(255, 255, 255, 0.58); border: 1px solid rgba(255, 255, 255, 0.78); }

/* 12 */
.wk-p12 { background: linear-gradient(150deg, #020617, #172554); color: #fff; }
.wk-p12::before { width: 230px; height: 230px; background: #2563eb; right: -80px; top: -80px; opacity: 0.35; }
.wk-p12 .total, .wk-p12 .metric, .wk-p12 .quote { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); }

/* 13 */
.wk-p13 { background: #fafaf9; color: #1c1917; }
.wk-p13::before { width: 170px; height: 170px; background: #a8a29e; right: -80px; top: -80px; opacity: 0.18; }
.wk-p13 .total, .wk-p13 .metric, .wk-p13 .quote { background: #fff; border: 1px solid #e7e5e4; box-shadow: 0 12px 26px rgba(41, 37, 36, 0.06); }

/* 14 */
.wk-p14 { background: linear-gradient(150deg, #eef2ff, #e0e7ff); color: #1e1b4b; }
.wk-p14::before { width: 220px; height: 220px; background: #818cf8; right: -80px; top: -80px; opacity: 0.28; }
.wk-p14 .total, .wk-p14 .metric, .wk-p14 .quote { background: rgba(255, 255, 255, 0.58); border: 1px solid rgba(255, 255, 255, 0.78); }

/* 15 */
.wk-p15 { background: linear-gradient(150deg, #fdf4ff, #fae8ff); color: #581c87; }
.wk-p15::before { width: 220px; height: 220px; background: #d946ef; right: -80px; top: -80px; opacity: 0.18; }
.wk-p15 .total, .wk-p15 .metric, .wk-p15 .quote { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.8); }

/* 16 */
.wk-p16 { background: linear-gradient(150deg, #f7fee7, #ecfccb); color: #365314; }
.wk-p16::before { width: 220px; height: 220px; background: #84cc16; right: -90px; top: -90px; opacity: 0.24; }
.wk-p16 .total, .wk-p16 .metric, .wk-p16 .quote { background: rgba(255, 255, 255, 0.58); border: 1px solid rgba(255, 255, 255, 0.78); }

/* 17 */
.wk-p17 { background: linear-gradient(150deg, #f1f5f9, #e2e8f0); color: #0f172a; }
.wk-p17 .total { background: #0f172a; color: #fff; }
.wk-p17 .metric, .wk-p17 .quote { background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(255, 255, 255, 0.8); }

/* 18 */
.wk-p18 { background: linear-gradient(150deg, #fff, #fef3c7); color: #451a03; }
.wk-p18::before { width: 160px; height: 160px; background: #f59e0b; right: -70px; top: -70px; opacity: 0.18; }
.wk-p18 .total, .wk-p18 .metric, .wk-p18 .quote { background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.85); }

/* 19 */
.wk-p19 { background: #18181b; color: #fafafa; }
.wk-p19::before { width: 220px; height: 220px; background: #22c55e; right: -80px; top: -80px; opacity: 0.22; }
.wk-p19 .total, .wk-p19 .metric, .wk-p19 .quote {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* 20 */
.wk-p20 { background: linear-gradient(150deg, #f8fafc, #dbeafe); color: #172554; }
.wk-p20::before { width: 200px; height: 200px; background: #3b82f6; right: -80px; top: -80px; opacity: 0.18; }
.wk-p20 .total, .wk-p20 .metric, .wk-p20 .quote { background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.84); }