/* 愿望券「投我以木桃」：花笺票 + 虚线票根；兑过的撕去票根、划一道墨线。字小纸薄。颜色取皮肤变量。 */
#unsaidPanel.wk {
  --wk-bg: var(--nc-bg, var(--bg, #fbf3f5));
  --wk-soft: var(--nc-accent-soft, #f6dde4);
  --wk-accent: var(--nc-accent, #d88aa1);
  --wk-ink: var(--nc-text, var(--text, #3a3236));
  --wk-ink-2: var(--nc-muted, color-mix(in srgb, var(--wk-ink) 65%, transparent));
  --wk-ink-3: var(--nc-faint, color-mix(in srgb, var(--wk-ink) 40%, transparent));
  --wk-seal: color-mix(in srgb, var(--wk-accent) 45%, #b03a3f);
  --wk-hair: color-mix(in srgb, var(--wk-ink) 16%, transparent);
  --wk-paper: color-mix(in srgb, #fffdf8 82%, var(--wk-soft));
  --wk-cn: var(--font-cn, "Songti SC", "Noto Serif SC", serif);
  --wk-en: var(--font-en, "Cormorant Garamond", Georgia, serif);
  background: radial-gradient(ellipse 80% 30% at 100% 0%, color-mix(in srgb, var(--wk-accent) 22%, transparent), transparent 70%), linear-gradient(180deg, var(--route-top-bg, var(--wk-bg)), var(--wk-bg) 30%, color-mix(in srgb, var(--wk-bg) 55%, #fbf9f5));
  color: var(--wk-ink);
}
#unsaidPanel.wk .unsaid-scroll { background: none; }
.wk-v { display: block; width: 1em; word-break: break-all; text-align: center; }

/* 顶栏：返回 + 写一张；原标题收起来 */
#unsaidPanel.wk .home-panel-top { justify-content: space-between; margin-bottom: 0; }
#unsaidPanel.wk .unsaid-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#unsaidPanel.wk .home-panel-back { border: 0; background: none; box-shadow: none; color: var(--wk-ink-2); font: 300 24px/1 var(--wk-cn); }
#unsaidPanel.wk #unsaidNew { width: auto; height: auto; padding: 10px 2px 10px 10px; border: 0; border-radius: 0; background: none; box-shadow: none; white-space: nowrap; font: 300 12px/1 var(--wk-cn); letter-spacing: .3em; color: var(--wk-ink-2); }
#unsaidPanel.wk #unsaidNew i { font-style: normal; color: var(--wk-seal); margin-right: 3px; letter-spacing: 0; }

/* 题头 */
#unsaidPanel.wk .wk-hd { position: relative; display: grid; grid-template-columns: 1fr auto; margin: 10px 8px 0; padding: 0; border: 0; background: none; box-shadow: none; min-height: 0; }
.wk-poem { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 12px; align-items: flex-start; }
.wk-poem p { margin: 0; }
.wk-poem .a { font: 300 26px/1.22 var(--wk-cn); color: var(--wk-ink); }
.wk-poem .b { font: 300 13px/1.5 var(--wk-cn); color: var(--wk-ink-2); margin-top: 54px; padding-left: 8px; border-left: 1px solid color-mix(in srgb, var(--wk-accent) 50%, transparent); box-sizing: content-box; }
.wk-cnt { align-self: end; text-align: right; }
.wk-cnt div { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.wk-cnt div + div { margin-top: 10px; }
.wk-cnt b { font: 300 26px/1 var(--wk-en); color: var(--wk-ink); }
.wk-cnt small { font: 300 11px/1 var(--wk-cn); letter-spacing: .3em; color: var(--wk-ink-2); }
.wk-cnt .u b { color: var(--wk-ink-3); }
.wk-lead { grid-column: 1 / -1; margin: 22px 0 0; font: 300 12px/1.9 var(--wk-cn); letter-spacing: .08em; color: var(--wk-ink-2); }

/* 分节 */
#unsaidPanel.wk .unsaid-list { display: block; gap: 0; }
.wk-sh { display: flex; align-items: baseline; gap: 10px; margin: 30px 8px 14px; }
.wk-sh b { font: 400 13px/1 var(--wk-cn); letter-spacing: .4em; color: var(--wk-ink); }
.wk-sh i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--wk-hair), transparent); }
.wk-sh small { font: italic 400 11px/1 var(--wk-en); letter-spacing: .14em; color: var(--wk-ink-3); }
.wk-more { all: unset; cursor: pointer; font: 300 11px/1 var(--wk-cn); letter-spacing: .2em; color: var(--wk-seal); }
.wk-empty { margin: 30px 8px 0; padding: 26px 16px; text-align: center; border: 1px dashed var(--wk-hair); border-radius: 3px; font: 300 12px/1.8 var(--wk-cn); color: var(--wk-ink-2); }
.wk-empty strong { display: block; margin-bottom: 4px; font-weight: 400; font-size: 14px; letter-spacing: .2em; color: var(--wk-ink); }

/* 花笺票 */
.wk-tk { position: relative; display: flex; margin: 0 4px 12px; min-height: 92px; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--wk-ink) 12%, transparent)); }
.wk-main { flex: 1; min-width: 0; position: relative; padding: 14px 14px 12px 18px; background: var(--wk-paper); border-radius: 3px 0 0 3px;
  -webkit-mask: radial-gradient(circle at 100% 0, transparent 6px, #000 6.5px) top right / 51% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 6px, #000 6.5px) bottom right / 51% 51% no-repeat, linear-gradient(#000, #000) left / 50% 100% no-repeat;
  mask: radial-gradient(circle at 100% 0, transparent 6px, #000 6.5px) top right / 51% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 6px, #000 6.5px) bottom right / 51% 51% no-repeat, linear-gradient(#000, #000) left / 50% 100% no-repeat; }
.wk-main::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 1px; background: color-mix(in srgb, var(--wk-accent) 60%, transparent); }
.wk-from { margin: 0; font: 400 9.5px/1 var(--wk-cn); letter-spacing: .4em; color: var(--wk-ink-3); }
.wk-from em { font: italic 400 11px/1 var(--wk-en); letter-spacing: .08em; margin-left: 4px; }
.wk-main h3 { margin: 8px 0 5px; font: 400 15px/1.4 var(--wk-cn); letter-spacing: .08em; color: var(--wk-ink); overflow-wrap: anywhere; }
.wk-note { margin: 0; font: 300 11.5px/1.7 var(--wk-cn); color: var(--wk-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.wk-stub { flex: none; width: 58px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12px 0 10px; background: color-mix(in srgb, var(--wk-soft) 75%, #fff); border-radius: 0 3px 3px 0;
  -webkit-mask: radial-gradient(circle at 0 0, transparent 6px, #000 6.5px) top left / 51% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 6px, #000 6.5px) bottom left / 51% 51% no-repeat, linear-gradient(#000, #000) right / 50% 100% no-repeat;
  mask: radial-gradient(circle at 0 0, transparent 6px, #000 6.5px) top left / 51% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 6px, #000 6.5px) bottom left / 51% 51% no-repeat, linear-gradient(#000, #000) right / 50% 100% no-repeat; }
.wk-stub::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; border-left: 1px dashed color-mix(in srgb, var(--wk-ink) 30%, transparent); }
.wk-no { margin: 0; font: 400 12px/1.25 var(--wk-cn); color: var(--wk-ink-2); }
.wk-use { all: unset; cursor: pointer; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--wk-seal); font: 400 13px/1 var(--wk-cn); color: var(--wk-seal); background: color-mix(in srgb, #fff 50%, transparent); }
.wk-use:disabled { opacity: .5; }
.wk-use:focus-visible { outline: 1px solid var(--wk-seal); outline-offset: 3px; }

/* 已兑 */
.wk-tk.used { opacity: .72; filter: none; }
.wk-tk.used .wk-main { -webkit-mask: none; mask: none; border-radius: 3px; padding-bottom: 28px; background: color-mix(in srgb, var(--wk-paper) 70%, transparent); box-shadow: inset 0 0 0 .5px var(--wk-hair); }
.wk-tk.used .wk-main::after { content: ""; position: absolute; right: -1px; top: 0; bottom: 0; width: 6px; background: radial-gradient(circle at 100% 50%, var(--wk-bg) 2px, transparent 2.5px) 0 0 / 6px 7px repeat-y; }
.wk-tk.used h3 { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--wk-seal) 70%, transparent); text-decoration-thickness: 1px; }
.wk-when { position: absolute; right: 14px; bottom: 10px; margin: 0; font: 300 10px/1 var(--wk-cn); letter-spacing: .2em; color: var(--wk-seal); }
.wk-kept:not(.open) .wk-tk:nth-child(n+3) { display: none; }

/* 写一张 */
#unsaidPanel.wk .unsaid-form { margin: 26px 4px 0; padding: 16px 18px 14px; gap: 0; border: 0; border-radius: 3px; background: var(--wk-paper); box-shadow: inset 0 0 0 .5px var(--wk-hair); }
.wk-lb { display: block; font: 400 10px/1 var(--wk-cn); letter-spacing: .4em; color: var(--wk-ink-3); }
#unsaidPanel.wk .unsaid-form input, #unsaidPanel.wk .unsaid-form textarea { margin: 8px 0 16px; padding: 4px 0 7px; border: 0; border-bottom: 1px dashed color-mix(in srgb, var(--wk-ink) 25%, transparent); border-radius: 0; background: none; box-shadow: none; font: 300 14px/1.6 var(--wk-cn); color: var(--wk-ink); outline: none; }
#unsaidPanel.wk .unsaid-form textarea { min-height: 64px; resize: none; }
#unsaidPanel.wk .unsaid-form input:focus, #unsaidPanel.wk .unsaid-form textarea:focus { border-bottom-color: var(--wk-seal); }
#unsaidPanel.wk .unsaid-form-actions { gap: 22px; }
#unsaidPanel.wk .unsaid-form-actions button { padding: 4px 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 400 12px/1 var(--wk-cn); letter-spacing: .3em; color: var(--wk-ink-2); }
#unsaidPanel.wk .unsaid-form-actions button[type="submit"] { color: var(--wk-seal); background: none; }
.wk-end { order: 9; margin: 34px 0 20px; text-align: center; font: 300 11px/1 var(--wk-cn); letter-spacing: .5em; color: var(--wk-ink-3); }

/* 面板是纵向 flex：固定各块顺序、不许压缩 */
#unsaidPanel.wk .unsaid-scroll > * { flex: none; }
#unsaidPanel.wk .unsaid-scroll > .home-panel-top { order: 0; }
#unsaidPanel.wk .unsaid-scroll > .wk-hd { order: 1; }
#unsaidPanel.wk .unsaid-scroll > .unsaid-form { order: 2; }
#unsaidPanel.wk .unsaid-scroll > .unsaid-list { order: 3; }
#unsaidPanel.wk .unsaid-scroll > .wk-end { order: 9; }