/* 小账本：她在聊天里说，晏晏记。流水 / 月结两页，颜色跟皮肤。 */
.ledger-page {
  --lg-accent: var(--nc-accent, var(--accent, #78bf9c));
  --lg-soft: var(--nc-accent-soft, color-mix(in srgb, var(--lg-accent) 28%, #fff));
  --lg-ink: var(--nc-text, var(--text, #3a3437));
  --lg-ink-2: var(--nc-muted, var(--text-soft, #8a8287));
  --lg-ink-3: color-mix(in srgb, var(--lg-ink-2) 60%, transparent);
  --lg-seal: color-mix(in srgb, var(--lg-accent) 35%, #b03a3f);
  --lg-hair: color-mix(in srgb, var(--lg-ink) 14%, transparent);
  --lg-paper: color-mix(in srgb, #fffdf8 90%, var(--lg-soft));
  --lg-bar: color-mix(in srgb, var(--lg-accent) 75%, var(--lg-ink));
  --lg-cn: var(--font-cn, "Songti SC", "Noto Serif SC", serif);
  --lg-en: var(--font-en, "Cormorant Garamond", Georgia, serif);
  position: fixed; inset: 0; z-index: 235; display: flex; flex-direction: column; color: var(--lg-ink);
  background: linear-gradient(180deg, var(--route-top-bg, #fbfaf6), color-mix(in srgb, var(--route-top-bg, #fbfaf6) 40%, #fbfaf6) 30%, color-mix(in srgb, var(--lg-soft) 25%, #fbfaf6));
}
.ledger-page.hidden { display: none !important; }
.ledger-page button { all: unset; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ledger-page button:focus-visible { outline: 1px solid var(--lg-seal); outline-offset: 3px; }
.ledger-page p, .ledger-page h3, .ledger-page h4 { margin: 0; }
.lg-num { font-variant-numeric: tabular-nums; }
.lg-head { flex: none; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; padding: calc(env(safe-area-inset-top) + 8px) 8px 0; }
.lg-head .lg-ic { height: 40px; display: grid; place-items: center; color: var(--lg-ink-2); font: 300 12px/1 var(--lg-cn); letter-spacing: .15em; }
.lg-head .lg-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ledger-page .lg-ic[disabled] { opacity: .25; pointer-events: none; }
.lg-who { text-align: center; }
.lg-who b { display: block; font: 400 14px/1 var(--lg-cn); letter-spacing: .5em; text-indent: .5em; }
.lg-who small { display: block; margin-top: 7px; font: italic 400 11.5px/1 var(--lg-en); letter-spacing: .1em; color: var(--lg-ink-2); }
.lg-tabs { flex: none; display: flex; justify-content: center; gap: 28px; margin-top: 14px; }
.lg-tabs button { position: relative; padding: 4px 2px; font: 400 13px/1 var(--lg-cn); letter-spacing: .3em; text-indent: .3em; color: var(--lg-ink-3); }
.lg-tabs button[aria-selected="true"] { color: var(--lg-ink); }
.lg-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: -6px; height: 1.5px; background: var(--lg-seal); }
.lg-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.lg-body::-webkit-scrollbar { display: none; }

.lg-trio { display: grid; grid-template-columns: 1.3fr 1fr 1fr; margin: 24px 22px 0; }
.lg-trio div + div { padding-left: 14px; border-left: 1px solid var(--lg-hair); }
.lg-trio small { display: block; font: 300 10.5px/1 var(--lg-cn); letter-spacing: .25em; color: var(--lg-ink-2); }
.lg-trio em { display: block; margin-top: 9px; font: italic 500 22px/1 var(--lg-en); white-space: nowrap; }
.lg-trio div:first-child em { font-size: 32px; margin-top: 6px; }
.lg-trio em.in { color: var(--lg-bar); }

.lg-cats { display: flex; gap: 8px; margin: 24px 18px 0; overflow-x: auto; scrollbar-width: none; padding: 2px 4px; }
.lg-cats::-webkit-scrollbar { display: none; }
.lg-cat { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 38px; }
.lg-ch { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 400 12px/1 var(--lg-cn); color: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 8%, #fff); }
.lg-cat small { font: italic 400 10.5px/1 var(--lg-en); color: var(--lg-ink-2); }
.lg-cat[aria-pressed="true"] .lg-ch { background: var(--c); color: #fff; }

.lg-book { margin: 22px 14px 0; padding: 4px 16px 16px; background: var(--lg-paper); border-radius: 4px; box-shadow: 0 1px 0 var(--lg-hair), 0 18px 30px -24px color-mix(in srgb, var(--lg-ink) 45%, transparent); }
.lg-day { padding-top: 16px; }
.lg-dh { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--lg-hair); }
.lg-dh b { font: 400 12.5px/1 var(--lg-cn); letter-spacing: .15em; }
.lg-dh small { margin-left: 8px; font: italic 400 11px/1 var(--lg-en); color: var(--lg-ink-3); }
.lg-dh span { font: italic 400 12px/1 var(--lg-en); color: var(--lg-ink-2); white-space: pre; }
.ledger-page .lg-row { box-sizing: border-box; display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 11px 0; border-bottom: 1px dashed var(--lg-hair); }
.lg-row .lg-ch { width: 24px; height: 24px; font-size: 11px; margin-top: 1px; }
.lg-nt { flex: 1; min-width: 0; }
.lg-nt b { display: block; font: 300 13px/1.4 var(--lg-cn); }
.lg-nt q { display: block; margin-top: 3px; font: 300 11px/1.45 var(--lg-cn); color: var(--lg-ink-3); quotes: "「" "」"; }
.lg-am { font: italic 500 16px/1.3 var(--lg-en); white-space: nowrap; }
.lg-am.in { color: var(--lg-bar); }
.lg-yan { margin-top: 10px; text-align: right; font: italic 300 11.5px/1.5 var(--lg-cn); color: var(--lg-seal); }
.lg-yan::before { content: "晏晏批："; font-style: normal; color: var(--lg-ink-3); }
.lg-empty { padding: 40px 10px; text-align: center; font: 300 12.5px/1.9 var(--lg-cn); color: var(--lg-ink-2); }

.lg-say { position: absolute; z-index: 5; left: 18px; right: 18px; bottom: calc(20px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 999px; background: color-mix(in srgb, #fff 88%, var(--lg-soft)); box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--lg-ink) 60%, transparent), inset 0 0 0 1px var(--lg-hair); }
.lg-say[hidden] { display: none; }
.lg-say p { flex: 1; min-width: 0; font: 300 12px/1.4 var(--lg-cn); color: var(--lg-ink-2); }
.lg-say p b { font-weight: 400; color: var(--lg-ink); }
.lg-say button { padding: 8px 14px; border-radius: 999px; background: var(--lg-ink); color: #fff; font: 400 12px/1 var(--lg-cn); letter-spacing: .2em; white-space: nowrap; }

.lg-scrim { position: absolute; inset: 0; z-index: 6; background: color-mix(in srgb, var(--lg-ink) 25%, transparent); }
.lg-sheet { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; padding: 22px 24px calc(26px + env(safe-area-inset-bottom)); background: var(--lg-paper); border-radius: 22px 22px 0 0; }
.lg-scrim[hidden], .lg-sheet[hidden] { display: none; }
.lg-sheet .lg-hd { display: flex; align-items: center; gap: 12px; }
.lg-sheet .lg-hd b { flex: 1; font: 400 15px/1.3 var(--lg-cn); }
.lg-sheet .lg-hd em { font: italic 500 26px/1 var(--lg-en); }
.lg-chat { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.lg-bub { max-width: 80%; padding: 8px 12px; border-radius: 14px; font: 300 12.5px/1.5 var(--lg-cn); }
.lg-bub.me { align-self: flex-end; background: color-mix(in srgb, var(--lg-soft) 70%, #fff); border-bottom-right-radius: 4px; }
.lg-bub.yan { align-self: flex-start; background: #fff; box-shadow: inset 0 0 0 1px var(--lg-hair); border-bottom-left-radius: 4px; }
.lg-meta { margin-top: 16px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font: 300 12px/1.4 var(--lg-cn); color: var(--lg-ink-2); }
.lg-meta span:nth-child(odd) { color: var(--lg-ink-3); letter-spacing: .2em; }
.lg-acts { margin-top: 20px; display: flex; gap: 10px; }
.ledger-page .lg-acts button { box-sizing: border-box; flex: 1; text-align: center; padding: 10px 0; border-radius: 999px; font: 400 12.5px/1 var(--lg-cn); letter-spacing: .2em; box-shadow: inset 0 0 0 1px var(--lg-hair); }
.ledger-page .lg-acts .del { color: var(--lg-seal); }

.lg-sec { margin: 26px 22px 0; }
.lg-sec h3 { display: flex; align-items: baseline; gap: 10px; font: 400 13px/1 var(--lg-cn); letter-spacing: .35em; }
.lg-sec h3 i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--lg-hair), transparent); align-self: center; }
.lg-sec h3 small { font: italic 400 11px/1 var(--lg-en); letter-spacing: .08em; color: var(--lg-ink-3); }
.lg-vs { margin-top: 10px; font: 300 12px/1.6 var(--lg-cn); color: var(--lg-ink-2); }
.lg-vs b { font: italic 500 14px/1 var(--lg-en); color: var(--lg-ink); }
.lg-rank { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.lg-rk { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; }
.lg-tr { position: relative; height: 18px; margin-top: 5px; }
.lg-tr i { position: absolute; left: 0; top: 0; height: 6px; border-radius: 0 3px 3px 0; background: var(--lg-bar); width: var(--w); }
.lg-tr span { position: absolute; left: 0; top: -14px; font: 300 11px/1 var(--lg-cn); color: var(--lg-ink-2); white-space: nowrap; }
.lg-v { font: italic 500 14px/1 var(--lg-en); text-align: right; }
.lg-v small { display: block; margin-top: 3px; font: italic 400 10px/1 var(--lg-en); color: var(--lg-ink-3); }
.lg-daily { position: relative; margin-top: 16px; height: 90px; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--lg-hair); }
.lg-daily i { flex: 1; height: var(--h); background: var(--lg-bar); border-radius: 2px 2px 0 0; opacity: .85; }
.lg-daily i.zero { height: 2px; background: var(--lg-hair); opacity: 1; }
.lg-avg { position: absolute; left: 0; right: 0; bottom: var(--a); border-top: 1px dashed color-mix(in srgb, var(--lg-seal) 60%, transparent); pointer-events: none; }
.lg-avg span { position: absolute; right: 0; top: -14px; font: italic 400 10px/1 var(--lg-en); color: var(--lg-seal); background: #fbfaf6; padding-left: 4px; }
.lg-dax { display: flex; justify-content: space-between; margin-top: 5px; font: italic 400 10px/1 var(--lg-en); color: var(--lg-ink-3); }
.lg-tip { position: absolute; z-index: 4; transform: translate(-50%, -100%); padding: 5px 8px; border-radius: 8px; background: var(--lg-ink); color: #fff; font: 300 11px/1.3 var(--lg-cn); white-space: nowrap; pointer-events: none; }
.lg-facts { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lg-fact { padding: 12px 14px; background: var(--lg-paper); border-radius: 4px; box-shadow: 0 1px 0 var(--lg-hair); }
.lg-fact small { display: block; font: 300 10.5px/1 var(--lg-cn); letter-spacing: .2em; color: var(--lg-ink-3); }
.lg-fact b { display: block; margin-top: 8px; font: 400 13px/1.35 var(--lg-cn); }
.lg-fact b em { font: italic 500 16px/1 var(--lg-en); margin-right: 2px; }
.lg-letter { margin: 26px 22px 0; padding: 18px 20px 16px; background: var(--lg-paper); border-radius: 4px; transform: rotate(-.6deg); box-shadow: 0 10px 20px -16px color-mix(in srgb, var(--lg-ink) 50%, transparent); }
.lg-letter h4 { font: 400 12px/1 var(--lg-cn); letter-spacing: .35em; color: var(--lg-seal); }
.lg-letter p { margin-top: 10px; font: 300 12.5px/1.95 var(--lg-cn); color: var(--lg-ink-2); white-space: pre-wrap; }
.lg-letter.wait p { color: var(--lg-ink-3); }

/* home 花枝上的第四条签：挂在右上主枝，比「月出皎兮」高一截 */
#menuPanel .hp-hang.hp-ledger { left: 90%; top: 136px; }
#menuPanel .hp-hang.hp-ledger .hp-thread { height: 62px; }

#ledgerPage .ledger-design-frame{display:block;width:100%;height:100%;border:0;flex:1;min-height:0;background:var(--lg-paper);color-scheme:light}