@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ============================================================
   姓名配对 · 对联版（2026-10-16）
   右列「你」= 上联、左列「Ta」= 下联；中间五个结 = 五格。
   红线：相生两根在结里接上；墨线：同气；断线：相克；虚线：平。
   页头、模式栏、底栏、纸墨与字体沿用测名入口；朱红只表示吉。
   ============================================================ */
body.pair-page {
  --pair-paper: #f6f5f0;
  --pair-ink: #111110;
  --pair-ink-2: #5e5d58;
  --pair-mute: #8c8a82;
  --pair-faint: #b9b7af;
  --pair-ghost: #c4c2ba;
  --pair-hair: #d6d4cc;
  --pair-red: #a6392a;
  --pair-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --pair-ease: cubic-bezier(.2, .8, .2, 1);
  margin: 0;
  min-height: 100dvh;
  background: var(--pair-paper);
  color: var(--pair-ink);
  font-family: "Noto Serif SC", "Songti SC", STSong, serif;
  -webkit-font-smoothing: antialiased;
}
.pair-page *, .pair-page *::before, .pair-page *::after { box-sizing: border-box; }
.pair-page [hidden] { display: none !important; }
.pair-page button, .pair-page a { -webkit-tap-highlight-color: transparent; }
.pair-page .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 页头 / 模式栏：与测名入口一致 */
.pair-page .fc-app-header.fc-app-header--surface-paper {
  --fc-header-line-color: transparent;
  --fc-header-shadow-color: transparent;
  background-color: var(--pair-paper);
  color: var(--pair-ink);
  box-shadow: none;
}
.pair-page .name-brand { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-indent: .14em; color: inherit; text-decoration: none; }
.pair-page .fc-app-header .fc-header-back,
.pair-page .fc-header-account {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--pair-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.pair-page .name-mode-bar {
  --fc-mode-bar-surface: var(--pair-paper);
  --fc-mode-bar-line: transparent;
  position: sticky;
  top: var(--fc-header-height, 58px);
  padding-block: 0;
  transition: opacity var(--fc-motion-slow) var(--fc-motion-ease);
}
.pair-page .name-mode-tabs {
  --fc-mode-count: 3;
  --fc-mode-width: 240px;
  --fc-mode-item-color: var(--pair-mute);
  --fc-mode-item-active-color: var(--pair-ink);
  --fc-mode-item-letter-spacing: 3px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.pair-page .name-mode-tabs .fc-mode-switch__item { font-size: 14px; }
.pair-page .name-mode-tabs .fc-mode-switch__item:is([aria-current="page"], .is-selected) { font-weight: 600; }
.pair-page .name-mode-tabs .fc-mode-switch__indicator {
  inset-block: 0;
  left: 0;
  width: calc(100% / var(--fc-mode-count));
  border-radius: 0;
  background: linear-gradient(var(--pair-ink), var(--pair-ink)) center bottom 7px / 20px 1.5px no-repeat;
  box-shadow: none;
}
.pair-page .name-tab-bar { transition: opacity var(--fc-motion-slow) var(--fc-motion-ease); }
body.pair-is-loading .name-mode-bar,
body.pair-is-loading .name-tab-bar { opacity: 0; pointer-events: none; }

/* 主体 */
.pair-main {
  width: min(100%, 460px);
  margin: 0 auto;
  padding: 0 0 calc(96px + env(safe-area-inset-bottom));
}
.pair-section {
  min-height: calc(100dvh - var(--fc-header-height, 58px) - 45px - 66px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 0 0;
}
.pair-page[data-stage="result"] .pair-section { justify-content: flex-start; padding-top: 30px; }

.pair-today { margin: 0; font: 400 13px/20.8px var(--pair-mono); letter-spacing: 2.5px; color: var(--pair-ink-2); }
.pair-title { margin: 14px 0 0; font: 500 19px/24.7px "Noto Serif SC", serif; letter-spacing: 3px; text-indent: 3px; text-align: center; }

/* 横批位：四道短线，结果出来时档位名落在这里 */
.pair-banner-slot { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.pair-banner-slot > span { display: flex; gap: 12px; }
.pair-banner-slot i { display: block; width: 20px; height: 1.5px; background: var(--pair-hair); transition: background-color var(--fc-motion-slow) var(--fc-motion-ease); }
.pair-banner-slot small { font: 400 10px/14px "Noto Serif SC", serif; letter-spacing: 3px; text-indent: 3px; color: var(--pair-faint); transition: color var(--fc-motion-slow) var(--fc-motion-ease); }
.pair-page.is-ready .pair-banner-slot i { background: rgba(166, 57, 42, .55); }
.pair-page.is-ready .pair-banner-slot small { color: var(--pair-mute); }

.pair-loading-head { margin: 0; height: 44px; display: flex; align-items: baseline; gap: 10px; }
.pair-loading-head span { font: 500 13px/20px "Noto Serif SC", serif; letter-spacing: 3px; }
.pair-loading-head small { font: 400 11px/20px var(--pair-mono); letter-spacing: 1px; color: var(--pair-mute); }

.pair-result-head { display: flex; flex-direction: column; align-items: center; }
.pair-banner { margin: 0; font: 500 28px/36px "Noto Serif SC", serif; letter-spacing: 12px; text-indent: 12px; animation: pair-banner .9s var(--pair-ease) both; }
.pair-banner.is-lucky { color: var(--pair-red); }
.pair-score { margin: 10px 0 0; display: flex; align-items: baseline; gap: 6px; }
.pair-score small { font: 400 12px/16px "Noto Serif SC", serif; letter-spacing: 3px; color: var(--pair-ink-2); }
.pair-score b { font: 300 34px/1 "Noto Serif SC", serif; font-variant-numeric: tabular-nums; }
.pair-summary { margin: 8px 0 0; font: 400 12.5px/20px "Noto Serif SC", serif; letter-spacing: 1.5px; color: var(--pair-ink-2); text-align: center; }

/* 舞台：两列 + 中间五个结 */
.pair-stage { position: relative; width: 100%; max-width: 420px; margin-top: 26px; transition: height var(--fc-motion-slow) var(--pair-ease); }
.pair-page[data-stage="loading"] .pair-stage { margin-top: 18px; }
.pair-page[data-stage="result"] .pair-stage { margin-top: 22px; }
.pair-threads { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.pair-entry-thread { fill: none; stroke-linecap: round; transition: d var(--fc-motion-slow) var(--pair-ease), stroke var(--fc-motion-slow) var(--fc-motion-ease), stroke-width var(--fc-motion-slow) var(--fc-motion-ease), opacity var(--fc-motion-slow) var(--fc-motion-ease); }
.pair-thread { fill: none; stroke-linecap: round; transition: opacity var(--fc-motion-medium) var(--fc-motion-ease), stroke-width var(--fc-motion-medium) var(--fc-motion-ease); }

.pair-col-label { position: absolute; top: 0; width: 80px; text-align: center; transition: left var(--fc-motion-slow) var(--pair-ease); pointer-events: none; }
.pair-col-label small { display: block; font: 400 9px/12px "Noto Serif SC", serif; letter-spacing: 3px; text-indent: 3px; color: var(--pair-faint); }
.pair-col-label b { display: block; font: 500 15px/18px "Noto Serif SC", serif; letter-spacing: 2px; text-indent: 2px; color: var(--pair-ink-2); }

.pair-char { position: absolute; width: 58px; height: 58px; transition: left var(--fc-motion-slow) var(--pair-ease), top var(--fc-motion-slow) var(--pair-ease), color var(--fc-motion-state) var(--fc-motion-ease); pointer-events: none; }
.pair-char b { display: block; width: 58px; height: 58px; text-align: center; font: 500 42px/58px "Noto Serif SC", serif; animation: pair-fall .46s var(--pair-ease) both; }
.pair-char i { position: absolute; left: 17px; bottom: 2px; width: 24px; height: 1.5px; background: transparent; }
.pair-char.is-bad i { background: var(--pair-ink); }
.pair-char.is-ghost { color: #c9c7bf; }
.pair-char.is-dim { color: var(--pair-ghost); }
.pair-meta { position: absolute; width: 44px; font: 400 9px/12px var(--pair-mono), "Noto Serif SC", serif; color: var(--pair-ink-2); white-space: nowrap; transition: left var(--fc-motion-slow) var(--pair-ease), top var(--fc-motion-slow) var(--pair-ease), color var(--fc-motion-state) var(--fc-motion-ease); pointer-events: none; }
.pair-meta.is-ghost { color: #c9c7bf; }
.pair-meta.is-dim { color: var(--pair-ghost); }
.pair-caret { position: absolute; width: 24px; height: 1.5px; background: var(--pair-ink); animation: pair-blink 1.05s steps(1) infinite; pointer-events: none; }

.pair-spine-knot { position: absolute; width: 18px; height: 18px; border: 1px solid #dad8d0; border-radius: 50%; background: var(--pair-paper); display: grid; place-items: center; font: 400 9.5px/1 "Noto Serif SC", serif; color: var(--pair-ghost); transition: border-color var(--fc-motion-slow) var(--fc-motion-ease), color var(--fc-motion-slow) var(--fc-motion-ease); pointer-events: none; }
.pair-page.is-ready .pair-spine-knot { border-color: rgba(166, 57, 42, .38); color: rgba(166, 57, 42, .75); }

.pair-knot { position: absolute; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center; cursor: pointer; transition: opacity var(--fc-motion-medium) var(--fc-motion-ease); }
.pair-knot > span { width: 20px; height: 20px; border: 1px solid transparent; border-radius: 50%; background: var(--pair-paper); color: transparent; display: grid; place-items: center; transition: border-color var(--fc-motion-medium) var(--fc-motion-ease), color var(--fc-motion-medium) var(--fc-motion-ease), background-color var(--fc-motion-state) var(--fc-motion-ease); }
.pair-knot > span b { display: block; font: 500 10.5px/1 "Noto Serif SC", serif; }
.pair-knot.is-gen > span { width: 17px; height: 17px; border-radius: 3px; transform: rotate(45deg); }
.pair-knot.is-gen > span b { transform: rotate(-45deg); }
.pair-knot.is-tied.is-gen > span { border-color: var(--pair-red); color: var(--pair-red); }
.pair-knot.is-tied.is-same > span { border-color: var(--pair-ink); color: var(--pair-ink); }
.pair-knot.is-tied.is-con > span,
.pair-knot.is-tied.is-none > span { border-color: var(--pair-ghost); color: var(--pair-mute); }
.pair-knot[aria-pressed="true"] > span { background: rgba(17, 17, 16, .07); }
.pair-knot.is-gen[aria-pressed="true"] > span { background: rgba(166, 57, 42, .1); }
.pair-knot.is-dim { opacity: .4; }
.pair-knot:focus-visible { outline: 2px solid rgba(17, 17, 16, .5); outline-offset: 2px; }

.pair-field { position: absolute; top: 0; width: 104px; cursor: text; }
.pair-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; outline: 0;
  background: transparent; color: transparent; caret-color: transparent;
  font-size: 16px; text-align: center; cursor: text;
  -webkit-appearance: none; appearance: none;
}
.pair-input::selection { background: transparent; }

.pair-readout { margin: 16px 0 0; min-height: 21px; padding: 0 28px; font: 400 13px/21px "Noto Serif SC", serif; letter-spacing: 1px; text-align: center; color: var(--pair-ink-2); }
.pair-readout.is-issue { color: var(--pair-ink); }
.pair-chips { margin-top: 10px; display: flex; gap: 8px; justify-content: center; animation: pair-rise .4s var(--pair-ease) both; }
.pair-chip {
  --fc-button-padding: 0 14px;
  --fc-button-radius: 22px;
  --fc-button-surface: rgba(17, 17, 16, .06);
  --fc-button-hover-surface: rgba(17, 17, 16, .1);
  --fc-button-color: var(--pair-ink);
  min-width: 64px;
  gap: 6px;
  align-items: baseline;
}
.pair-chip b { font: 500 17px/44px "Noto Serif SC", serif; }
.pair-chip small { font: 400 10px/44px var(--pair-mono); color: var(--pair-ink-2); }

.pair-start {
  --fc-button-border: var(--pair-ink);
  --fc-button-surface: transparent;
  --fc-button-color: var(--pair-ink);
  --fc-button-hover-border: var(--pair-ink);
  --fc-button-hover-surface: rgba(17, 17, 16, .04);
  --fc-button-hover-color: var(--pair-ink);
  --fc-button-radius: 26px;
  width: min(334px, calc(100% - 56px));
  min-height: 52px;
  margin-top: 30px;
  font: 500 15px/24px "Noto Serif SC", serif;
  letter-spacing: 6px;
  text-indent: 6px;
}
.pair-page.is-ready .pair-start {
  --fc-button-surface: var(--pair-ink);
  --fc-button-color: var(--pair-paper);
  --fc-button-hover-surface: #000;
  --fc-button-hover-color: var(--pair-paper);
}
.pair-start:disabled { opacity: 1; cursor: progress; }

.pair-loading-note { margin-top: 22px; min-height: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pair-loading-note small { font: 400 11px/18px "Noto Serif SC", serif; letter-spacing: 3px; color: var(--pair-mute); }
.pair-loading-note b { font: 500 17px/24px "Noto Serif SC", serif; letter-spacing: 3px; }

.pair-result-body { width: min(334px, calc(100% - 56px)); display: flex; flex-direction: column; }
.pair-legend { margin: 8px 0 0; padding: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; font: 400 10px/14px "Noto Serif SC", serif; letter-spacing: 1px; color: var(--pair-mute); }
.pair-legend li { display: inline-flex; align-items: center; gap: 5px; }
.pair-legend i { display: block; width: 16px; border-top: 1px solid var(--pair-ink); }
.pair-legend .is-gen i { border-top: 1.5px solid var(--pair-red); }
.pair-legend .is-con i { border-top: 1px dashed var(--pair-mute); }
.pair-legend .is-none i { border-top: 1px dotted var(--pair-mute); }
.pair-detail { margin-top: 18px; min-height: 76px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pair-detail b { font: 500 15px/22px "Noto Serif SC", serif; letter-spacing: 2px; }
.pair-detail b.is-gen { color: var(--pair-red); }
.pair-detail span { font: 400 11px/18px var(--pair-mono), "Noto Serif SC", serif; color: var(--pair-ink-2); }
.pair-detail small { font: 400 11px/18px "Noto Serif SC", serif; color: var(--pair-mute); }
.pair-detail p { margin: 0; font: 400 12px/22px "Noto Serif SC", serif; letter-spacing: 1px; color: var(--pair-mute); }
.pair-tags { margin: 22px 0 0; text-align: center; font: 400 12px/20px "Noto Serif SC", serif; letter-spacing: 3px; color: var(--pair-ink-2); }
.pair-desc { margin: 14px 0 0; font: 400 13.5px/2 "Noto Serif SC", serif; letter-spacing: .5px; text-align: justify; }
.pair-caveat { margin: 16px 0 0; font: 400 11.5px/1.8 "Noto Serif SC", serif; letter-spacing: .5px; color: var(--pair-mute); }
.pair-actions { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; }
.pair-action {
  --fc-button-radius: 26px;
  min-height: 52px;
  font: 500 15px/24px "Noto Serif SC", serif;
  letter-spacing: 4px;
  text-indent: 4px;
}
.pair-action--primary {
  --fc-button-surface: var(--pair-ink);
  --fc-button-color: var(--pair-paper);
  --fc-button-hover-surface: #000;
  --fc-button-hover-color: var(--pair-paper);
}
.pair-action--ghost {
  --fc-button-surface: rgba(17, 17, 16, .06);
  --fc-button-color: var(--pair-ink);
  --fc-button-hover-surface: rgba(17, 17, 16, .1);
  --fc-button-hover-color: var(--pair-ink);
}
.pair-rise { animation: pair-rise .55s var(--pair-ease) both; }

/* 分享预览 */
.pair-share-mask { position: fixed; inset: 0; z-index: 10020; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(17, 17, 16, .74); }
.pair-share-surface { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(100%, 320px); }
.pair-share-surface img { width: 100%; max-width: 300px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
.pair-share-surface p { margin: 0; font: 400 11px/18px "Noto Serif SC", serif; letter-spacing: 1px; color: rgba(246, 245, 240, .72); text-align: center; }
.pair-share-actions { display: flex; gap: 12px; }
.pair-share-btn { --fc-button-radius: 24px; min-height: 48px; font: 500 14px/20px "Noto Serif SC", serif; letter-spacing: 3px; text-indent: 3px; }
.pair-share-btn--ghost { --fc-button-border: rgba(246, 245, 240, .4); --fc-button-color: var(--pair-paper); --fc-button-hover-border: rgba(246, 245, 240, .7); --fc-button-hover-color: var(--pair-paper); width: 120px; }
.pair-share-btn--primary { --fc-button-surface: var(--pair-paper); --fc-button-color: var(--pair-ink); --fc-button-hover-surface: #fff; --fc-button-hover-color: var(--pair-ink); width: 160px; }

.pair-toast { position: fixed; left: 50%; bottom: max(96px, calc(88px + env(safe-area-inset-bottom))); z-index: 10030; padding: 8px 20px; border-radius: 20px; background: rgba(17, 17, 16, .88); color: var(--pair-paper); font: 400 13px/20px "Noto Serif SC", serif; letter-spacing: 1px; white-space: nowrap; transform: translateX(-50%); opacity: 0; transition: opacity var(--fc-motion-state) var(--fc-motion-ease); pointer-events: none; }
.pair-toast.is-shown { opacity: 1; }

@keyframes pair-fall { from { opacity: 0; filter: blur(6px); transform: translateY(-14px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes pair-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pair-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pair-banner { from { opacity: 0; letter-spacing: 2px; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }

@media (prefers-reduced-motion: reduce) {
  .pair-page *, .pair-page *::before, .pair-page *::after {
    animation-duration: var(--fc-motion-instant, .001ms) !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}