/* ══════════════════ 新功能弹窗 · What's New ══════════════════
   刻意不用产品紫，而是延续 OA 的那套视觉语汇（暖象牙纸 + 炭黑墨 + 古铜箔，
   见 10-oa-ledger.css / 07-message.css 的登录卡）——弹窗宣告的就是 OA 功能，
   让它和它介绍的东西是同一个世界；同时避开「紫色太多显廉价」那条约定。
   全部选择器以 wn- 前缀 / #whatsnew- 隔离。 */

#whatsnew-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: grid; place-items: center; padding: 20px;
  background: rgba(28,27,25,0.42); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
#whatsnew-overlay.wn-open { opacity: 1; pointer-events: auto; }

#whatsnew-modal {
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  background: #F7F4EE; color: #1C1B19;
  border: 1px solid #E4DCC9; border-radius: 16px;
  box-shadow: 0 2px 4px rgba(28,27,25,.05), 0 28px 70px rgba(28,27,25,.30);
  transform: translateY(10px); opacity: 0;
  transition: transform .34s cubic-bezier(.22,.61,.36,1), opacity .28s ease;
}
#whatsnew-overlay.wn-open #whatsnew-modal { transform: translateY(0); opacity: 1; }
#whatsnew-modal::-webkit-scrollbar { width: 9px; }
#whatsnew-modal::-webkit-scrollbar-thumb {
  background: #E0D8C4; border-radius: 6px; border: 2px solid #F7F4EE;
}

/* ── 头 ───────────────────────────────────────────── */
.wn-head { position: relative; padding: 26px 30px 20px; }
.wn-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 10px/1 'Inter', var(--font); letter-spacing: .28em;
  text-transform: uppercase; color: #9C7A3C;
}
.wn-eyebrow::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: #9C7A3C;
}
.wn-title {
  margin: 12px 0 0; font-family: 'Noto Serif SC', serif; font-weight: 600;
  font-size: 26px; line-height: 1.25; letter-spacing: .01em; color: #1C1B19;
}
.wn-title .wn-title-en {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500;
  font-size: 22px; color: #9C7A3C; margin-left: 8px;
}
.wn-sub {
  margin: 10px 0 0; font: 400 13.5px/1.7 var(--font); color: #6B6558;
}
.wn-close {
  position: absolute; top: 20px; right: 20px; width: 30px; height: 30px;
  display: grid; place-items: center; border: none; border-radius: 50%;
  background: transparent; color: #8A8372; cursor: pointer;
  transition: background .15s, color .15s;
}
.wn-close:hover { background: rgba(28,27,25,.06); color: #1C1B19; }
.wn-close:focus-visible { outline: 2px solid rgba(28,27,25,.45); outline-offset: 2px; }

.wn-rule { height: 1px; background: #E4DCC9; margin: 0 30px; }

/* ── 签名元素：两块账簿铭牌 ──────────────────────────
   摆的就是用户之后在每条工具结果第一行会看到的那两个横幅。
   这套工具唯一一类「静默的错误答案」就是选错系统，所以先教这个。 */
.wn-plates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 22px 30px 0; }
.wn-plate {
  padding: 15px 14px 13px; text-align: center;
  background: #F4EEDF; border: 1px solid #E0CF9E; border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.wn-plate-name {
  font-family: 'Noto Serif SC', serif; font-weight: 600; font-size: 15px;
  letter-spacing: .02em; color: #75601F;
}
.wn-plate-host {
  margin-top: 6px; font: 400 10.5px/1 var(--mono); color: #A08A55;
  overflow-wrap: anywhere;
}
.wn-plates-note {
  padding: 12px 30px 22px; font: 400 12.5px/1.75 var(--font); color: #6B6558;
}
.wn-plates-note b { font-weight: 700; color: #1C1B19; }

/* ── 能力三行（台账式，动词做标记；不是流程所以不编号）── */
.wn-rows { padding: 20px 30px 4px; }
.wn-row { display: flex; gap: 14px; padding: 0 0 18px; }
.wn-row-mark {
  flex: 0 0 30px; height: 30px; display: grid; place-items: center;
  font-family: 'Noto Serif SC', serif; font-weight: 600; font-size: 15px;
  color: #9C7A3C; background: #FCFAF4;
  border: 1px solid #E4DCC9; border-radius: 8px;
}
.wn-row-text { font: 400 13px/1.75 var(--font); color: #4A4539; padding-top: 4px; }
.wn-row-text b { font-weight: 700; color: #1C1B19; }

/* ── 试一句：本身就是 CTA，点了直接填进输入框 ────────── */
.wn-try { padding: 4px 30px 0; }
.wn-try-label {
  font: 600 10px/1 'Inter', var(--font); letter-spacing: .2em;
  text-transform: uppercase; color: #8A8372;
}
.wn-try-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px;
  padding: 13px 14px; text-align: left; cursor: pointer;
  font: 400 13px/1.5 var(--font); color: #1C1B19;
  background: #FCFAF4; border: 1px solid #E4DCC9; border-radius: 10px;
  transition: border-color .15s, background .15s, transform .15s;
}
.wn-try-btn:hover { border-color: #C9BEA3; background: #fff; }
.wn-try-btn:focus-visible { outline: 2px solid rgba(28,27,25,.45); outline-offset: 2px; }
.wn-try-btn span { flex: 1; }
.wn-try-btn em { font-style: normal; color: #9C7A3C; }
.wn-try-arrow { flex: 0 0 auto; color: #9C7A3C; transition: transform .15s; }
.wn-try-btn:hover .wn-try-arrow { transform: translateX(3px); }

/* ── 脚：一条老实话 + 一个关闭 ───────────────────────── */
.wn-foot {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 30px 24px; margin-top: 20px;
  border-top: 1px solid #E4DCC9;
}
.wn-foot-note { flex: 1; font: 400 11.5px/1.6 var(--font); color: #8A8372; }
.wn-ok {
  flex: 0 0 auto; padding: 9px 22px; cursor: pointer;
  font: 600 13px var(--font); letter-spacing: .02em;
  color: #F1E6CE; background: #1C1B19; border: 1px solid #1C1B19; border-radius: 8px;
  transition: background .15s;
}
.wn-ok:hover { background: #34322D; }
.wn-ok:focus-visible { outline: 2px solid rgba(28,27,25,.45); outline-offset: 2px; }

/* ── 入场：整体升起后两块铭牌错开落位 ─────────────────── */
@keyframes wnPlateIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
#whatsnew-overlay.wn-open .wn-plate {
  animation: wnPlateIn .40s cubic-bezier(.22,.61,.36,1) both;
}
#whatsnew-overlay.wn-open .wn-plate:nth-child(1) { animation-delay: .12s; }
#whatsnew-overlay.wn-open .wn-plate:nth-child(2) { animation-delay: .19s; }

@media (prefers-reduced-motion: reduce) {
  #whatsnew-overlay, #whatsnew-modal { transition: none; }
  #whatsnew-overlay.wn-open .wn-plate { animation: none; }
  .wn-try-btn, .wn-try-arrow { transition: none; }
}

/* ── 窄屏 ──────────────────────────────────────────── */
@media (max-width: 520px) {
  .wn-head { padding: 22px 20px 16px; }
  .wn-title { font-size: 22px; }
  .wn-rule { margin: 0 20px; }
  .wn-plates { grid-template-columns: 1fr; padding: 18px 20px 0; }
  .wn-plates-note, .wn-rows, .wn-try { padding-left: 20px; padding-right: 20px; }
  .wn-foot { padding: 18px 20px 20px; flex-wrap: wrap; }
  .wn-ok { width: 100%; }
}

/* ══ 夜曲皮肤（body.private-active）══
   古铜在深底上要提亮，否则整块糊成一团；纸底换成墨紫，保持"账簿"的质感而不是纯黑。 */
body.private-active #whatsnew-overlay { background: rgba(6,5,12,0.62); }
body.private-active #whatsnew-modal {
  background: #1A1826; color: #ECE9F5; border-color: rgba(201,169,97,.20);
  box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 28px 70px rgba(0,0,0,.55);
}
body.private-active #whatsnew-modal::-webkit-scrollbar-thumb {
  background: rgba(201,169,97,.26); border-color: #1A1826;
}
body.private-active .wn-eyebrow { color: #C9A961; }
body.private-active .wn-eyebrow::before { background: #C9A961; }
body.private-active .wn-title { color: #ECE9F5; }
body.private-active .wn-title .wn-title-en { color: #C9A961; }
body.private-active .wn-sub,
body.private-active .wn-plates-note { color: #A7A2B8; }
body.private-active .wn-plates-note b { color: #ECE9F5; }
body.private-active .wn-rule,
body.private-active .wn-foot { border-color: rgba(201,169,97,.18); }
body.private-active .wn-rule { background: rgba(201,169,97,.18); }
body.private-active .wn-close { color: #8A8397; }
body.private-active .wn-close:hover { background: rgba(255,255,255,.07); color: #ECE9F5; }
body.private-active .wn-plate {
  background: rgba(201,169,97,.10); border-color: rgba(201,169,97,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
body.private-active .wn-plate-name { color: #E4CE94; }
body.private-active .wn-plate-host { color: #A08A55; }
body.private-active .wn-row-mark {
  color: #C9A961; background: #221F30; border-color: rgba(201,169,97,.22);
}
body.private-active .wn-row-text { color: #B8B3C6; }
body.private-active .wn-row-text b { color: #ECE9F5; }
body.private-active .wn-try-label, body.private-active .wn-foot-note { color: #8A8397; }
body.private-active .wn-try-btn {
  color: #ECE9F5; background: #221F30; border-color: rgba(201,169,97,.20);
}
body.private-active .wn-try-btn:hover { background: #2A2639; border-color: rgba(201,169,97,.40); }
body.private-active .wn-try-btn em,
body.private-active .wn-try-arrow { color: #C9A961; }
body.private-active .wn-ok {
  color: #1A1826; background: #C9A961; border-color: #C9A961;
}
body.private-active .wn-ok:hover { background: #E4CE94; }
body.private-active .wn-close:focus-visible,
body.private-active .wn-try-btn:focus-visible,
body.private-active .wn-ok:focus-visible { outline-color: rgba(201,169,97,.75); }