/* 论文喵 · 分享权益、订单与下载 */
.share-entry-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 18px;
  padding: 15px 18px;
  border: 1px solid #DCE5EF;
  border-radius: 12px;
  background: #F7F9FB;
}
.share-entry-banner.wrap { width: calc(100% - 40px); max-width: 960px; margin: 18px auto 0; }
.share-entry-copy { flex: 1; min-width: 0; }
.share-entry-copy h3 { margin: 0; font-size: 15px; line-height: 1.65; font-weight: 600; color: #29435C; }
.share-entry-copy p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--muted); }
.share-entry-actions { flex: none; display: flex; align-items: center; gap: 12px; }
.share-entry-actions [data-coupon-count] { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.share-entry-actions .btn { min-height: 34px; border-color: #C6D4E2; color: var(--brand-dark); background: #fff; }
.share-entry-actions .btn:hover { border-color: #B9C9D9; background: #EDF2F7; color: var(--brand-dark); box-shadow: 0 8px 16px -12px rgba(10, 32, 54, .55); }

.benefits-modal { width: 560px; max-width: calc(100vw - 24px); min-width: 0; }
.benefits-modal .modal-head { padding: 22px 24px 0; }
.benefits-modal .modal-head h3 { font-size: 20px; line-height: 1.5; }
.benefits-modal .modal-head p { line-height: 1.8; }
.benefits-modal .modal-body { padding: 18px 24px 23px; }
.benefits-modal .modal-foot { padding: 0 24px 22px; flex-wrap: wrap; }
.benefit-coupon {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border: 1px solid #D3DFEA;
  border-radius: 13px;
  background: linear-gradient(120deg, #F4F7FA, #F7F9FB);
  color: #0A2036;
}
.coupon-face { flex: 1; min-width: 0; }
.coupon-face > b, .coupon-face > strong { display: block; margin: 0; color: #0A2036; font-size: 24px; line-height: 1.45; font-weight: 650; }
.coupon-face h4 { margin: 0 0 6px; font-size: 19px; line-height: 1.5; }
.coupon-face p { margin: 7px 0 0; font-size: 13px; line-height: 1.85; color: #4A6076; }
.coupon-face small { display: block; margin-top: 6px; color: var(--muted2); font-size: 12px; line-height: 1.75; }
.coupon-state { flex: none; display: inline-block; border: 1px solid #D3DFEA; border-radius: 6px; padding: 3px 8px; background: #fff; color: #29435C; font-size: 12px; line-height: 1.6; white-space: nowrap; }
.coupon-state.used, .coupon-state.unavailable { border-color: var(--line); background: #F7F9FB; color: var(--muted); }
.share-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 16px; }
.share-actions .btn { flex: 1 1 auto; min-height: 39px; padding-left: 14px; padding-right: 14px; font-size: 14px; }
.share-compose { margin-top: 17px; }
.share-compose > label, .share-compose > b, .share-compose > h4 { display: block; margin: 0 0 8px; font-size: 13.5px; line-height: 1.7; font-weight: 600; color: var(--ink2); }
.share-compose textarea.field { min-height: 100px; font-size: 13px; line-height: 1.9; background: #FAFBFD; overflow-wrap: anywhere; resize: vertical; }
.share-rules { margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.share-rules > b, .share-rules > h4 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.share-rules ul, ul.share-rules { padding-left: 18px; }
.share-rules ul { margin: 7px 0 0; }
.share-rules li { margin: 3px 0; padding-left: 2px; }
.share-success { margin-top: 15px; padding: 12px 14px; border: 1px solid #D3DFEA; border-radius: 9px; background: #F1F5F9; color: #24405C; font-size: 13px; line-height: 1.8; }
.share-success b { display: block; margin-bottom: 2px; font-size: 14px; }
.share-success p { margin: 3px 0 0; }
.share-demo-note { margin: 13px 0 0; color: var(--muted); font-size: 12px; line-height: 1.85; }

.coupon-choice { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; padding: 13px 14px; border: 1px solid #D3DFEA; border-radius: 10px; background: #F4F7FA; color: var(--ink2); font-size: 13.5px; line-height: 1.75; }
.coupon-choice > label { display: flex; align-items: flex-start; gap: 10px; min-width: 0; cursor: pointer; }
label.coupon-choice { cursor: pointer; }
.coupon-choice input[type="checkbox"] { flex: none; margin-top: 4px; accent-color: #0A2036; }
.coupon-choice > div, .coupon-choice > span, .coupon-choice label > span { flex: 1; min-width: 0; }
.coupon-choice b, .coupon-choice strong { display: block; font-size: 13.5px; font-weight: 600; }
.coupon-choice p, .coupon-choice small { display: block; margin: 3px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.75; }
.coupon-choice .btn { flex: none; align-self: center; }
.order-savingsrow, .order-savings-row { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin: 8px 0; color: #24405C; font-size: 13.5px; line-height: 1.75; }
.order-savingsrow > :last-child, .order-savings-row > :last-child { flex: none; font-weight: 600; }
.checkout-policy-note { margin: 13px 0 0; padding-top: 12px; border-top: 1px solid var(--line2); color: var(--muted); font-size: 12.5px; line-height: 1.85; }
.checkout-policy-note b { color: var(--ink2); font-weight: 500; }
.payment-summary { margin: 15px 0; padding: 18px; border: 1px solid #E4EAF2; border-radius: 12px; background: #F7F9FB; text-align: center; color: var(--ink2); font-size: 14px; line-height: 1.8; }
.payment-summary .payment-amount { display: block; margin: 3px 0; color: var(--brand-dark); font-size: 33px; font-weight: 650; letter-spacing: -.025em; line-height: 1.5; }
.payment-summary p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.8; }
.payment-summary .order-savingsrow, .payment-summary .order-savings-row { text-align: left; }
.delivery-nextstep { margin-top: 16px; padding: 14px 15px; border: 1px solid #E3E9F1; border-radius: 10px; background: #F7F9FB; color: var(--ink2); font-size: 13.5px; line-height: 1.8; }
.delivery-nextstep > b, .delivery-nextstep > h4 { display: block; margin: 0; font-size: 14px; font-weight: 600; color: var(--ink2); }
.delivery-nextstep p { margin: 5px 0 0; font-size: 13px; line-height: 1.85; color: var(--muted); }
.delivery-nextstep button { margin-top: 11px; max-width: 100%; }
.delivery-nextstep .btn { font-size: 13px; min-height: 35px; }

@media (max-width: 720px) {
  .share-entry-banner.wrap { width: calc(100% - 24px); margin-top: 14px; }
  .share-entry-banner { align-items: flex-start; gap: 13px; padding: 14px; }
  .share-entry-actions { gap: 8px; flex-direction: column; align-items: flex-end; }
  .share-entry-copy h3 { font-size: 14px; }
  .share-entry-copy p { font-size: 12px; }
  .share-entry-actions .btn { padding-left: 11px; padding-right: 11px; font-size: 13px; }
}
@media (max-width: 560px) {
  #modalPerks { padding: 12px; }
  .benefits-modal { width: 560px; max-width: calc(100vw - 24px); min-width: 0; max-height: 90vh; max-height: 90dvh; border-radius: 15px; }
  .benefits-modal .modal-head { padding: 20px 18px 0; }
  .benefits-modal .modal-head h3 { font-size: 19px; }
  .benefits-modal .modal-body { padding: 16px 18px 20px; }
  .benefits-modal .modal-foot { padding: 0 18px 18px; }
  .benefit-coupon { padding: 16px; gap: 10px; flex-wrap: wrap; }
  .coupon-face > b, .coupon-face > strong { font-size: 22px; }
  .coupon-face h4 { font-size: 17px; }
  .coupon-state { font-size: 11.5px; }
  .share-actions { gap: 8px; }
  .share-actions .btn { font-size: 13px; }
  .share-compose textarea.field { min-height: 115px; font-size: 12.5px; }
  .share-rules { font-size: 12.5px; }
  .coupon-choice { flex-wrap: wrap; padding: 12px; gap: 8px; }
  .coupon-choice .btn { margin-left: 23px; }
  .order-savingsrow, .order-savings-row { font-size: 13px; }
  .payment-summary { padding: 15px; }
  .payment-summary .payment-amount { font-size: 30px; }
  .delivery-nextstep { padding: 12px; }
  .delivery-nextstep .btn { white-space: normal; height: auto; padding: 7px 11px; }
}
@media (max-width: 380px) {
  .share-entry-banner { flex-direction: column; gap: 11px; }
  .share-entry-actions { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
  .share-actions { flex-direction: column; align-items: stretch; }
  .share-actions .btn { width: 100%; }
  .benefits-modal .modal-foot .btn { padding-left: 11px; padding-right: 11px; font-size: 13px; }
}
@media print { .share-entry-banner, .delivery-nextstep { display: none !important; } }

/* 邀请验证弹窗：限制网格内在宽度，长身份信息自然换行。 */
.benefits-modal .modal-head > div { flex: 1; min-width: 0; }
.benefits-modal .modal-head .x { flex: none; }
.benefits-modal .modal-body, .benefits-modal .modal-foot { min-width: 0; max-width: 100%; }
.benefit-coupon { min-width: 0; max-width: 100%; }
.benefit-coupon > .coupon-face { flex: 0 1 112px; min-width: 0; }
.benefit-coupon > .coupon-face + div { flex: 1 1 0; min-width: 0; max-width: 100%; }
.benefit-coupon > .coupon-face > span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.75; }
.benefit-coupon > .coupon-face + div > b { font-size: 14px; line-height: 1.7; }
.benefit-coupon > .coupon-face + div > p { margin: 5px 0 0; font-size: 13px; line-height: 1.85; color: #4A6076; }
.benefit-coupon small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.8; color: var(--muted2); }
.benefit-coupon p, .benefit-coupon small, .benefit-coupon span { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.benefits-modal .share-actions .btn { min-width: 0; white-space: normal; height: auto; padding-top: 9px; padding-bottom: 9px; }
@media (max-width: 560px) {
  .benefit-coupon > .coupon-face { flex-basis: 90px; }
}
@media (max-width: 380px) {
  .benefit-coupon { flex-direction: column; }
  .benefit-coupon > .coupon-face, .benefit-coupon > .coupon-face + div { flex: none; width: 100%; }
}

.share-entry-demo { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.6; }
.benefits-modal { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); overflow: hidden; }
.benefits-modal .modal-head, .benefits-modal .modal-foot { flex-shrink: 0; }
.benefits-modal .modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.benefit-coupon > div:last-child { min-width: 0; font-size: 13px; line-height: 1.8; }
.benefit-coupon > div:last-child b { font-size: 14px; }
.benefit-coupon > div:last-child p { margin: 4px 0; }
.benefit-coupon > div:last-child small { font-size: 12px; }
body[data-page="outline"] .ctx-act, body[data-page="generating"] .ctx-act { display: none; }

.loyalty-benefit { margin: 12px 0; padding: 10px 12px; border: 1px solid #E3E9F1; border-radius: 8px; background: #F7F9FB; color: var(--muted); font-size: 12.5px; line-height: 1.8; }
.loyalty-benefit.active { border-color: #DCE5EF; background: #F7F9FB; color: #14314F; }
.loyalty-preview { color: #14314F; }

/* Existing-outline import */
.outline-upload { margin-top:16px; padding:18px; border:1px solid #DCE5EF; border-radius:12px; background:#F7F9FB; }
.outline-upload-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.outline-upload-bar strong { font-size:15px; color:var(--ink); }
.outline-upload-bar p { margin:5px 0 0; font-size:13px; color:var(--muted); }
.outline-upload .note { margin:12px 0 0; line-height:1.7; }
.outline-file-status { font-size:13px; line-height:1.7; color:var(--muted); overflow-wrap:anywhere; margin:10px 0; }
.outline-file-status.is-error { color:var(--danger); }
.outline-text-label { display:block; margin:12px 0 8px; font-size:14px; font-weight:600; }
.outline-upload textarea { font-size:14px; line-height:1.8; min-height:160px; }
.outline-upload-foot { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-top:8px; font-size:13px; color:var(--muted); }
.outline-foot-acts { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.outline-clear { border:0; background:none; color:var(--brand); cursor:pointer; white-space:nowrap; padding:4px; }
.outline-clear:disabled { color:var(--muted); cursor:default; }
@media(max-width:600px) { .outline-upload { padding:14px; } .outline-upload-bar { align-items:flex-start; flex-direction:column; gap:10px; } .outline-upload-foot { align-items:flex-start; flex-direction:column; gap:8px; } .outline-foot-acts { justify-content:flex-start; } }

/* 交互状态：与主站按钮、卡片统一 */
.coupon-choice {
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.coupon-choice:hover { border-color: #C9D6E2; background: #F1F5F9; }
.coupon-choice:focus-within { border-color: #A9BACB; box-shadow: 0 0 0 3px rgba(10, 32, 54, .16); }
.outline-clear {
  border-radius: 6px;
  transition: color .15s ease, background-color .15s ease;
}
.outline-clear:hover:not(:disabled) { color: var(--brand-dark); background: #EDF2F7; }

/* ============ 2026-10 · 四色体系：券面与返利 ============ */
/* 白纸底 + 陶土券边 + 石榴数字，让卡券在页面里具备识别度。 */
.benefit-coupon {
  border-color: var(--clay-line);
  background: linear-gradient(120deg, #FFFFFF 12%, #FBF2E3);
}
.coupon-face > b, .coupon-face > strong { color: var(--garnet); }
.coupon-state { border-color: var(--clay-line); background: #FFFFFF; color: var(--garnet); }
.coupon-choice { border-color: var(--clay-line); background: #FBF2E3; }
.coupon-choice:hover { border-color: var(--clay); background: #FFFFFF; }
.coupon-choice:focus-within { border-color: var(--clay); box-shadow: 0 0 0 3px rgba(233, 177, 104, .24); }
.coupon-choice input[type="checkbox"] { accent-color: var(--garnet); }
.order-savingsrow, .order-savings-row { color: var(--garnet); }
.payment-summary .payment-amount { color: var(--garnet); }
.share-entry-banner { border-color: var(--clay-line); background: #FBF2E3; }
.share-entry-actions .btn { border-color: var(--clay-line); background: #FFFFFF; color: var(--garnet); }
.share-entry-actions .btn:hover { border-color: var(--clay); background: #FFFFFF; color: var(--garnet); }
.share-success { border-color: var(--clay-line); background: #FBF2E3; color: var(--ink2); }