.page {
  min-height: 100vh;
  background: #F0EDE8;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.close-btn {
  position: fixed;
  left: 4.267vw;
  z-index: 10;
  width: 9.6vw;
  height: 9.6vw;
  border-radius: 50%;
  background: rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon {
  width: 4.8vw;
  height: 4.8vw;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.poster-wrap {
  padding: 13.333vw 6.4vw 6.4vw;
  width: 100%;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  align-items: center;        /* 竖直居中，避免海报挤在上半屏、下面空一大块 */
  justify-content: center;
}
/* 金句海报内容较短时，撑高一点让卡片饱满、不显空 */
.qp-in { min-height: 120vw; }

.poster {
  width: 100%;
  background: #F7F6F4;
  border-radius: 4.267vw;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5.333vw 16vw rgba(0,0,0,.18);
}

.pg {
  position: absolute;
  border-radius: 50%;
}
.pg-tr {
  width: 69.333vw;
  height: 69.333vw;
  top: -24vw;
  right: -18.667vw;
  background: radial-gradient(circle, rgba(212,179,78,.18) 0%, transparent 70%);
}
.pg-bl {
  width: 53.333vw;
  height: 53.333vw;
  bottom: 10.667vw;
  left: -24vw;
  background: radial-gradient(circle, rgba(212,179,78,.10) 0%, transparent 70%);
}

.poster-in {
  position: relative;
  padding: 10.133vw 8.533vw 7.467vw;
  display: flex;
  flex-direction: column;
  min-height: 128vw;
  box-sizing: border-box;
}

.poster-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.poster-brand {
  display: flex;
  align-items: center;
  gap: 2.933vw;
}

.poster-logo {
  width: 8vw;
  height: 8vw;
}

.pbk-nm {
  font-family: 'Noto Serif SC', 'STSong', Georgia, serif;
  font-weight: 700;
  font-size: 4.267vw;
  letter-spacing: .1em;
  color: #1B1B1A;
  line-height: 1.1;
}

.pbk-en {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 3.2vw;
  color: #C2841A;
  margin-top: 0.8vw;
}

.ptype {
  font-size: 2.933vw;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 0.8vw 2.133vw;
  border-radius: 1.067vw;
}
.deep-tag { color: #C2841A; background: #F4ECDB; }
.long-tag { color: #C2841A; background: #F4ECDB; }
.news-tag { color: #3A6EA5; background: #E4EDF6; }
.note-tag { color: #8A8578; background: #EFEDE8; letter-spacing: 0.14em; }

.poster-ip {
  display: flex;
  align-items: center;
  gap: 1.867vw;
  font-size: 3.333vw;
  font-weight: 500;
  color: #9C9C97;
  letter-spacing: .04em;
  margin-top: 8vw;
}

.vdot {
  width: 1.333vw;
  height: 1.333vw;
  border-radius: 50%;
  background: #D99A2B;
  box-shadow: 0 0 2.133vw 0.267vw rgba(217,154,43,.4);
}

.poster-title {
  font-family: 'Noto Serif SC', 'STSong', Georgia, serif;
  font-weight: 700;
  font-size: 6.933vw;
  line-height: 1.52;
  letter-spacing: .01em;
  color: #1B1B1A;
  margin-top: 3.733vw;
}

.poster-rule {
  width: 8vw;
  height: 0.533vw;
  background: #D99A2B;
  border-radius: 0.267vw;
  margin: 6.4vw 0 4.8vw;
}

.poster-quote {
  font-family: 'Noto Serif SC', 'STSong', Georgia, serif;
  font-weight: 400;
  font-size: 4vw;
  line-height: 1.95;
  letter-spacing: .015em;
  color: #6B6B68;
  flex: 1;
}

.poster-foot {
  margin-top: auto;
  padding-top: 6.4vw;
  border-top: 0.133vw solid #ECEAE6;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4.267vw;
}

.pf-brand {
  font-size: 3.333vw;
  font-weight: 600;
  color: #1B1B1A;
  letter-spacing: .02em;
}

.pf-sub {
  font-size: 3.067vw;
  color: #9C9C97;
  margin-top: 1.6vw;
  letter-spacing: .02em;
}

.pf-r {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.867vw;
}

.qr {
  width: 19.733vw;
  height: 19.733vw;
  border-radius: 0;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.qr::before {
  content: '';
  position: absolute;
  inset: 2.133vw;
  background: repeating-conic-gradient(#1B1B1A 0 25%, transparent 0 50%) 0 / 2.133vw 2.133vw;
  opacity: .12;
}
.qr.has-real-qr::before { display: none; }

.qr-logo {
  position: relative;
  width: 6.4vw;
  height: 6.4vw;
  z-index: 1;
}

.qr-img {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  mix-blend-mode: multiply;
}

.qr-cap {
  font-size: 2.933vw;
  color: #9C9C97;
  letter-spacing: .02em;
}

.bar {
  width: 100%;
  display: flex;
  gap: 3.2vw;
  padding: 4.267vw 6.4vw calc(4.267vw + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.save-btn, .share-btn {
  flex: 1;
  height: 13.333vw;
  border-radius: 6.667vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.867vw;
  font-size: 3.733vw;
  font-weight: 600;
}

.save-btn {
  background: #D99A2B;
  color: #1B1B1A;
  box-shadow: 0 2.133vw 5.333vw -2.133vw #D99A2B;
}

.share-btn {
  background: #F1EFEB;
  color: #1B1B1A;
  border: none;
  margin: 0;
  line-height: normal;
  font-size: 3.733vw;
  font-weight: 600;
}
.share-btn::after { border: none; }

.save-icon {
  width: 4.8vw;
  height: 4.8vw;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1B1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.share-line-icon {
  width: 4.8vw;
  height: 4.8vw;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1B1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ── 深色模式 ── */
.dk { background: #1B1B1A; }
.dk .poster { background: #131312; box-shadow: 0 5.333vw 16vw rgba(0,0,0,.5); }
.dk .pbk-nm { color: #ECEAE4; }
.dk .poster-ip { color: #6E6C66; }
.dk .poster-title { color: #ECEAE4; }
.dk .poster-quote { color: #9A988F; }
.dk .poster-foot { border-top-color: #2B2B28; }
.dk .pf-brand { color: #ECEAE4; }
.dk .pf-sub { color: #6E6C66; }
.dk .qr { background: transparent; border-color: transparent; }
.dk .qr-cap { color: #6E6C66; }
.dk .share-btn { background: #242422; color: #ECEAE4; }

/* ══ 金句海报（划选金句分享）══ */
.qposter {
  position: relative;
  width: 100%;
  border-radius: 4.8vw;
  overflow: hidden;
  background: #F8F3EA;
  box-shadow: 0 5.333vw 13.333vw -4vw rgba(0,0,0,.28);
}
.qposter.dk { background: #1B1B1A; }
.qp-glow {
  position: absolute;
  top: -16vw; right: -16vw;
  width: 56vw; height: 56vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,154,43,.22), transparent 70%);
}
.qposter.dk .qp-glow { background: radial-gradient(circle, rgba(230,178,78,.18), transparent 70%); }
.qp-in {
  position: relative;
  padding: 7.467vw 6.933vw 5.867vw;
  display: flex;
  flex-direction: column;
  min-height: 101.333vw;
}

/* 头部品牌 */
.qp-head { display: flex; align-items: center; gap: 2.133vw; }
.qp-logo { width: 7.467vw; height: 7.467vw; }
.qp-bk .nm {
  font-family: 'Noto Serif SC', serif; font-weight: 700;
  font-size: 4vw; letter-spacing: 0.08em; color: #1B1B1A;
}
.qposter.dk .qp-bk .nm { color: #ECEAE4; }
.qp-bk .en {
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
  font-size: 2.933vw; color: #C2841A; margin-top: 0.267vw;
}
.qposter.dk .qp-bk .en { color: #E6B24E; }

/* 金句主体 */
.qp-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 5.333vw 0; }
.qp-mark {
  font-family: Georgia, serif;
  font-size: 17.333vw; line-height: 0.6; height: 9.333vw;
  color: #D99A2B;
}
.qposter.dk .qp-mark { color: #E6B24E; }
.qp-quote {
  font-family: 'Noto Serif SC', 'STSong', serif;
  font-weight: 500; font-size: 5.867vw; line-height: 1.75;
  letter-spacing: 0.01em; color: #1B1B1A;
  margin-top: 2.667vw;
}
.qposter.dk .qp-quote { color: #ECEAE4; }
.qp-quote .hl { background: linear-gradient(transparent 60%, #F4ECDB 60%); }
.qp-attr { display: flex; align-items: flex-start; gap: 2.133vw; margin-top: 5.867vw; }
.qp-attr-bar { width: 4.8vw; height: 0.533vw; background: #D99A2B; margin-top: 2.133vw; flex-shrink: 0; }
.qp-attr .tx { font-size: 3.2vw; line-height: 1.7; color: #9C9C97; }
.qp-attr .tx, .qp-attr .tx { font-weight: 400; }

/* 底部品牌 + 二维码 */
.qp-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding-top: 4.8vw; border-top: 0.133vw solid rgba(0,0,0,.08);
}
.qposter.dk .qp-foot { border-top-color: rgba(255,255,255,.1); }
.qp-foot .fl .t {
  display: flex; align-items: center; gap: 1.333vw;
  font-size: 3.467vw; font-weight: 600; color: #1B1B1A;
}
.qposter.dk .qp-foot .fl .t { color: #ECEAE4; }
.qp-foot-logo { width: 4.267vw; height: 4.267vw; }
.qp-foot .fl .s { font-size: 2.933vw; color: #9C9C97; margin-top: 1.067vw; }
.qp-foot .fr { display: flex; flex-direction: column; align-items: center; gap: 1.067vw; }
.qp-qr {
  width: 16vw; height: 16vw; border-radius: 2.133vw;
  background: transparent; border: none;
  display: flex; align-items: center; justify-content: center;
}
.qposter.dk .qp-qr { background: transparent; border-color: transparent; }
.qp-qr-logo { width: 8.533vw; height: 8.533vw; opacity: 0.85; }
.qp-qr-cap { font-size: 2.667vw; color: #9C9C97; }

/* H5 海报保存浮层 */
.poster-save-mask{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.86);display:flex;align-items:center;justify-content:center;padding:6vw;}
.psm-in{display:flex;flex-direction:column;align-items:center;gap:3vw;max-width:86vw;}
.psm-in img{width:78vw;max-width:360px;border-radius:3vw;box-shadow:0 6vw 16vw -4vw rgba(0,0,0,.6);}
.psm-tip{color:#F3EEE3;font-size:3.6vw;}
.psm-dl{color:#E6B24E;font-size:3.6vw;text-decoration:none;border:1px solid rgba(230,178,78,.5);padding:2vw 6vw;border-radius:6vw;}
.psm-close{color:rgba(243,238,227,.6);font-size:3.4vw;margin-top:1vw;}