/* 人情簿 · 设计系统
 * 视觉：中式账本/信笺质感——宣纸米色底、墨色文字、朱砂红点缀。
 * 衬线标题（宋体栈）+ 无衬线正文。移动优先响应式。全中文、无 emoji。
 */

/* ---------- 设计令牌 ---------- */
:root {
  --paper: #f4ecd8;          /* 宣纸米色 */
  --paper-2: #efe6cf;        /* 略深纸色 */
  --card: #fbf6e9;           /* 卡片底 */
  --card-2: #f7f0df;
  --ink: #2a2620;            /* 墨色 */
  --ink-soft: #6f6557;       /* 次级墨 */
  --ink-faint: #8a7f6b;      /* 弱墨（加深以提升对比度） */
  --cinnabar: #a8322d;       /* 朱砂红（克制） */
  --cinnabar-2: #8f2a26;     /* 深朱砂 */
  --cinnabar-bg: rgba(168,50,45,0.08);
  --line: #ddd0b3;           /* 主分隔线 */
  --line-soft: #e7dcc2;      /* 弱分隔线 */
  --green: #5d7a4e;          /* 收（素雅绿，非大红大绿） */
  --slate: #4f5d6b;          /* 墨青冷色（白事卡） */
  --slate-bg: rgba(79,93,107,0.07);
  --serif: "Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC","SimSun","宋体",serif;
  --sans: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","微软雅黑","Helvetica Neue",sans-serif;
  --tabbar-h: 62px;
  --maxw: 680px;
}

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* 无障碍跳转链接：键盘焦点时显现，否则隐藏 */
.skip-link {
  position: fixed;
  top: -44px;
  left: 0;
  z-index: 200;
  background: var(--cinnabar);
  color: #fbf6e9;
  border: none;
  border-radius: 0 0 6px 0;
  padding: 10px 18px;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
}
/* scrollbar-gutter: stable 保留滚动条空间，避免页面切换时 fixed 导航栏横向跳动 */
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scrollbar-color: var(--line) transparent;
}
body {
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--paper);
  /* 信笺质感：极淡的竖向朱砂界格 */
  background-image:
    repeating-linear-gradient(to right, transparent 0, transparent 33px, rgba(168,50,45,0.045) 33px, rgba(168,50,45,0.045) 34px);
  background-size: 34px 100%;
  background-attachment: fixed;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 600; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
svg { display: block; }

/* 自定义滚动条（webkit）——与宣纸主题协调，避免默认灰滚动条破坏氛围 */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 6px;
  border: 3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--cinnabar); }
::-webkit-scrollbar-corner { background: transparent; }

/* 键盘焦点可见态（鼠标点击不显示） */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--cinnabar);
  outline-offset: 2px;
  border-radius: 4px;
}
.tab:focus-visible { outline-offset: -2px; }
.icon-btn:focus-visible { outline-offset: 1px; }

/* ---------- 主容器 ---------- */
#app {
  min-height: 100vh;
  padding: 0 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  max-width: var(--maxw);
  margin: 0 auto;
}

/* ---------- 页头 ---------- */
.page-head {
  padding: 22px 2px 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.page-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.page-title {
  font-size: 30px;
  letter-spacing: 4px;
  color: var(--ink);
  line-height: 1.2;
}
.page-sub {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 2px;
  margin-top: 6px;
}
.page-seal {
  width: 38px;
  height: 38px;
  color: var(--cinnabar);
  flex-shrink: 0;
  margin-top: 4px;
}
.page-seal svg { width: 100%; height: 100%; }

.page-head-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 2px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.page-title-sm {
  font-size: 20px;
  letter-spacing: 3px;
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-soft);
  font-size: 14px;
}
.back svg { width: 20px; height: 20px; }
.back:active { color: var(--cinnabar); }

/* ---------- 汇总条 ---------- */
.summary {
  display: flex;
  align-items: stretch;
  margin-top: 18px;
  padding: 14px 8px;
  background: var(--card-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}
.summary-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.summary-num {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}
.summary-num.num-in { color: var(--green); }
.summary-num.num-out { color: var(--cinnabar); }
.summary-label {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 1px;
}
.summary-divider {
  width: 1px;
  background: var(--line);
  margin: 2px 0;
}

/* ---------- 年度趋势图 ---------- */
.trend-chart {
  margin-top: 14px;
  padding: 12px 14px 8px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}
.trend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.trend-label {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 2px;
}
.trend-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--ink-faint);
}
.trend-legend .leg-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.trend-legend .leg-dot-in { background: var(--green); margin-right: 1px; }
.trend-legend .leg-dot-out { background: var(--cinnabar); margin-left: 6px; margin-right: 1px; }
.trend-svg {
  width: 100%;
  height: auto;
  display: block;
}
.trend-bar-in { fill: var(--green); }
.trend-bar-out { fill: var(--cinnabar); }
.trend-month {
  font-family: var(--sans);
  font-size: 9px;
  fill: var(--ink-faint);
}
.trend-summary {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--cinnabar-bg);
  border-left: 2px solid var(--cinnabar);
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  letter-spacing: 0.5px;
}
.trend-summary b {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--cinnabar);
  letter-spacing: 1px;
}

/* ---------- 节令提醒横幅 ---------- */
.festival-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cinnabar-bg);
  border: 1px solid var(--cinnabar);
  border-left-width: 3px;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 16px;
  transition: opacity 0.25s, transform 0.25s, max-height 0.25s;
  max-height: 80px;
  overflow: hidden;
}
.festival-banner.fb-hide {
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  border-width: 0;
}
.fb-seal {
  width: 28px;
  height: 28px;
  color: var(--cinnabar);
  flex-shrink: 0;
}
.fb-seal svg { width: 100%; height: 100%; }
.fb-content { flex: 1; min-width: 0; }
.fb-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.fb-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--cinnabar);
  letter-spacing: 1px;
}
.fb-date {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 1px;
}
.fb-tip {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.fb-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  background: transparent;
  border: none;
  border-radius: 50%;
  padding: 0;
  transition: color 0.15s, background 0.15s;
}
.fb-close svg { width: 16px; height: 16px; }
.fb-close:active { color: var(--cinnabar); background: rgba(168,50,45,0.1); }

/* ---------- 区块 ---------- */
.section { margin-bottom: 24px; }
.section-label {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-soft);
  letter-spacing: 3px;
  padding: 4px 0 12px;
  position: relative;
}
.section-label::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--cinnabar);
  vertical-align: middle;
  margin-right: 8px;
}

/* ---------- 联系人卡片 ---------- */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card {
  display: block;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--cinnabar);
  border-radius: 6px;
  padding: 14px 16px;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(42,38,32,0.04), 0 2px 6px rgba(42,38,32,0.04);
}
.card:active {
  background: var(--card-2);
  transform: scale(0.99);
  box-shadow: 0 1px 2px rgba(42,38,32,0.06);
}
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.card-name-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.card-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 1px;
}
.card-rel {
  font-size: 12px;
  color: var(--cinnabar);
  background: var(--cinnabar-bg);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.card-closeness {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  display: inline-block;
}
.dot.on { background: var(--cinnabar); }

.card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}
.meta-sep { color: var(--ink-faint); }
.card-balance {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: right;
}
.card-balance.bal-in { color: var(--green); }
.card-balance.bal-out { color: var(--ink-soft); }
.card-balance.bal-zero { color: var(--ink-faint); }
/* 搜索高亮：朱砂下划线，不改变行高 */
mark.hl {
  background: transparent;
  color: var(--cinnabar);
  font-weight: 600;
  border-bottom: 1px solid var(--cinnabar);
  padding: 0;
  margin: 0;
}

/* ---------- 空状态 / 占位 ---------- */
.empty, .placeholder {
  text-align: center;
  padding: 32px 20px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--card);
}
.empty-title, .placeholder-title {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: 2px;
}
.empty-sub, .placeholder-sub {
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.8;
}
.placeholder { position: relative; }
.placeholder-big { padding: 56px 20px; }
.placeholder-tag {
  display: inline-block;
  font-size: 11px;
  color: var(--cinnabar);
  border: 1px solid var(--cinnabar);
  padding: 2px 10px;
  border-radius: 10px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.placeholder-focus {
  border-color: var(--cinnabar);
  box-shadow: 0 0 0 1px var(--cinnabar-bg);
}

/* ---------- 单人页 ---------- */
.person-card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 24px 20px;
  text-align: center;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(42,38,32,0.04), 0 2px 8px rgba(42,38,32,0.04);
}
.person-name {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 3px;
}
.person-rel {
  font-size: 13px;
  color: var(--cinnabar);
  margin-top: 6px;
  letter-spacing: 2px;
}
.person-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 10px;
  line-height: 1.7;
}
.person-stats {
  display: flex;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.ps-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ps-num {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
}
.ps-num.num-in { color: var(--green); }
.ps-num.num-out { color: var(--cinnabar); }
.ps-label { font-size: 11px; color: var(--ink-faint); }

/* ---------- 引导页 ---------- */
body.is-onboarding #app { padding-bottom: 0; }
body.is-onboarding .tabbar { display: none; }
.guide {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 28px;
}
.guide-seal {
  width: 64px;
  height: 64px;
  color: var(--cinnabar);
  margin-bottom: 22px;
}
.guide-seal svg { width: 100%; height: 100%; }
.guide-title {
  font-size: 44px;
  letter-spacing: 10px;
  color: var(--ink);
  margin-bottom: 12px;
}
.guide-sub {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--cinnabar);
  letter-spacing: 4px;
  margin-bottom: 28px;
}
.guide-desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.9;
  margin-bottom: 36px;
  max-width: 320px;
}
.guide-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 300px;
}
.btn {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 13px 18px;
  font-size: 15px;
  letter-spacing: 2px;
  transition: opacity 0.15s, background 0.15s;
}
.btn:active { opacity: 0.85; }
.btn-primary {
  background: var(--cinnabar);
  color: #fbf6e9;
  border-color: var(--cinnabar);
}
.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}
.guide-foot {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 28px;
}

/* ---------- 底部 tab 导航 ---------- */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background-color: rgba(244,236,216,0.96);
  /* 与 body 一致的竖向界格纹理，让导航栏融入信笺质感 */
  background-image:
    repeating-linear-gradient(to right, transparent 0, transparent 33px, rgba(168,50,45,0.045) 33px, rgba(168,50,45,0.045) 34px);
  background-size: 34px 100%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs {
  display: flex;
  max-width: var(--maxw);
  margin: 0 auto;
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 11px 2px 8px;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 1px;
  transition: color 0.15s, background 0.15s;
  min-width: 0;
  position: relative;
  border-radius: 4px;
}
/* active 指示器：顶部朱砂小圆点 */
.tab::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cinnabar);
  opacity: 0;
  transition: opacity 0.2s;
}
.tab.active::before { opacity: 1; }
.tab svg {
  width: 22px;
  height: 22px;
  transition: transform 0.2s ease;
}
.tab.active { color: var(--cinnabar); }
.tab.active svg { transform: scale(1.1); }
.tab:active { color: var(--cinnabar-2); }
.tab:active svg { transform: scale(0.92); }
/* hover 仅在支持鼠标悬停的设备生效（避免触屏粘滞） */
@media (hover: hover) {
  .tab:hover {
    color: var(--ink-soft);
    background: rgba(168,50,45,0.05);
  }
  .tab:hover svg { transform: scale(1.05); }
  .tab.active:hover { color: var(--cinnabar); }
  .tab.active:hover svg { transform: scale(1.1); }
}
.brand { display: none; }

/* ---------- 桌面端：顶部导航 ---------- */
@media (min-width: 720px) {
  body {
    background-size: 34px 100%;
  }
  .tabbar {
    top: 0;
    bottom: auto;
    border-top: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0;
  }
  .tabbar .tabs {
    max-width: var(--maxw);
    align-items: center;
    padding: 0 8px;
    height: 56px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--serif);
    font-size: 20px;
    letter-spacing: 4px;
    color: var(--ink);
    margin-right: auto;
    padding: 0 4px;
  }
  /* 品牌印章：朱砂方印质感 */
  .brand::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--cinnabar);
    border-radius: 1px;
    box-shadow: 0 0 0 1px var(--cinnabar-2);
  }
  .tab {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 6px;
    padding: 0 14px;
    height: 100%;
    font-size: 14px;
  }
  /* 桌面端 active 指示器：底部短下划线 */
  .tab::before {
    top: auto;
    bottom: 0;
    width: 24px;
    height: 2px;
    border-radius: 2px 2px 0 0;
  }
  .tab svg { width: 20px; height: 20px; }
  #app {
    padding-top: 76px;
    padding-bottom: 40px;
  }
  .page-title { font-size: 34px; }
  .guide-title { font-size: 52px; }
}

/* ---------- 窄屏保护 ---------- */
@media (max-width: 360px) {
  .page-title { font-size: 26px; letter-spacing: 3px; }
  .card-name { font-size: 18px; }
  .summary-num { font-size: 18px; }
  #app { padding-left: 12px; padding-right: 12px; }
}

/* ============ R2：表单浮层 / 时间线 / 人情天平 ============ */

/* ---------- 顶部图标按钮 ---------- */
.page-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 4px;
}
.person-head-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  padding: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:active {
  color: var(--cinnabar);
  border-color: var(--cinnabar);
  background: var(--cinnabar-bg);
}
.icon-btn-danger { color: var(--cinnabar); border-color: var(--cinnabar-bg); }
.icon-btn-danger:active { background: var(--cinnabar-bg); }

/* 首页"记一笔"快捷按钮：朱砂描边胶囊，比纯图标更醒目 */
.btn-quick-record {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 14px;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--cinnabar);
  background: var(--cinnabar-bg);
  border: 1px solid var(--cinnabar);
  border-radius: 17px;
  transition: transform 0.15s, background 0.15s;
}
.btn-quick-record svg { width: 15px; height: 15px; }
.btn-quick-record:active {
  transform: scale(0.96);
  background: rgba(168,50,45,0.16);
}

/* ---------- 底部抽屉 sheet ---------- */
.sheet-mask {
  position: fixed;
  inset: 0;
  background: rgba(42,38,32,0.45);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.sheet-mask.show { opacity: 1; }
.sheet-panel {
  background: var(--card);
  width: 100%;
  max-width: var(--maxw);
  max-height: 90vh;
  border-radius: 14px 14px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 -4px 24px rgba(42,38,32,0.12);
}
.sheet-mask.show .sheet-panel { transform: translateY(0); }
.sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin: 8px auto 0;
  flex-shrink: 0;
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 8px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.sheet-title {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 2px;
  color: var(--ink);
}
.sheet-close {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  background: transparent;
  border: none;
  padding: 0;
}
.sheet-close:active { color: var(--cinnabar); }
.sheet-close svg { width: 18px; height: 18px; }
.sheet-body {
  padding: 16px 18px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 720px) {
  .sheet-mask { align-items: center; }
  .sheet-panel {
    border-radius: 12px;
    max-height: 86vh;
    width: 90%;
  }
}

/* ---------- 表单元素 ---------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-label {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 1px;
}
.form-label em {
  color: var(--cinnabar);
  font-style: normal;
  margin-left: 2px;
}
.form-input, .form-textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, background 0.15s;
}
.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--cinnabar);
  background: var(--card);
}
.form-textarea {
  min-height: 64px;
  resize: vertical;
  line-height: 1.6;
  font-family: var(--sans);
}
.form-hint {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 2px;
  line-height: 1.5;
}
.form-actions { margin-top: 4px; }
.form-actions .btn { width: 100%; }

/* 亲疏圆点选择器 */
.closeness-picker {
  display: flex;
  gap: 10px;
  padding: 4px 0;
}
.closeness-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  display: inline-block;
}
.closeness-dot:active { transform: scale(0.9); }
.closeness-dot.on {
  background: var(--cinnabar);
  border-color: var(--cinnabar);
}

/* 方向选择器（送/收） */
.dir-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dir-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  transition: all 0.15s;
}
.dir-btn .dir-zh {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.1;
}
.dir-btn .dir-desc {
  font-size: 11px;
  color: var(--ink-faint);
}
.dir-btn.dir-out.on {
  background: var(--cinnabar-bg);
  border-color: var(--cinnabar);
  color: var(--cinnabar);
}
.dir-btn.dir-in.on {
  background: rgba(93,122,78,0.1);
  border-color: var(--green);
  color: var(--green);
}
.dir-btn.dir-out.on .dir-desc { color: var(--cinnabar); }
.dir-btn.dir-in.on .dir-desc { color: var(--green); }

/* 事件标签选择器 */
.event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.event-tag {
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 13px;
  color: var(--ink-soft);
  transition: all 0.15s;
}
.event-tag:active { transform: scale(0.95); }
.event-tag.on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--card);
}

/* 金额预设快捷按钮 */
.amount-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.amount-preset {
  padding: 5px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-soft);
  transition: all 0.15s;
}
.amount-preset:active { transform: scale(0.95); }
.amount-preset.on {
  background: var(--cinnabar-bg);
  border-color: var(--cinnabar);
  color: var(--cinnabar);
}

/* ---------- 确认对话框 ---------- */
.confirm-mask {
  position: fixed;
  inset: 0;
  background: rgba(42,38,32,0.5);
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s;
}
.confirm-mask.show { opacity: 1; }
.confirm-dialog {
  background: var(--card);
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  max-width: 320px;
  border: 1px solid var(--line);
  transform: scale(0.92);
  transition: transform 0.2s;
  box-shadow: 0 8px 32px rgba(42,38,32,0.18);
}
.confirm-mask.show .confirm-dialog { transform: scale(1); }
.confirm-title {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.confirm-body {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 18px;
}
.confirm-text { margin: 0; }
.confirm-text b { color: var(--cinnabar); font-weight: 600; }
.confirm-actions {
  display: flex;
  gap: 10px;
}
.confirm-actions .btn {
  flex: 1;
  padding: 10px;
  font-size: 14px;
  letter-spacing: 1px;
}
.btn-danger {
  background: var(--cinnabar);
  color: var(--card);
  border-color: var(--cinnabar);
}
.btn-danger:active { background: var(--cinnabar-2); }

/* ---------- 单人页抬头 ---------- */
.person-head {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 22px 18px;
  text-align: center;
  margin-bottom: 14px;
}
.person-head .person-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--ink);
}
.person-head .person-rel {
  font-size: 13px;
  color: var(--cinnabar);
  margin-top: 4px;
  letter-spacing: 2px;
}
.person-closeness {
  justify-content: center;
  margin-top: 8px;
}
.person-head .person-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 10px;
  line-height: 1.7;
}

/* ---------- 人情天平 ---------- */
.balance {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 14px 14px 12px;
  margin-bottom: 18px;
  text-align: center;
}
.balance-svg {
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto;
  display: block;
}
/* 天平盘上金额：衬线宋体（SVG presentation attribute 不支持 CSS 变量，用类） */
.bal-amt {
  font-family: var(--serif);
}
.balance-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}
.leg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.leg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.leg-in .leg-dot { background: var(--green); }
.leg-out .leg-dot { background: var(--cinnabar); }
.balance-judge {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-soft);
  letter-spacing: 2px;
  margin-top: 8px;
  line-height: 1.6;
}

/* ---------- 失衡提醒卡片 ---------- */
.imbalance-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.imbalance-alert.ia-in {
  background: var(--cinnabar-bg);
  border-left: 3px solid var(--cinnabar);
}
.imbalance-alert.ia-out {
  background: var(--slate-bg);
  border-left: 3px solid var(--slate);
}
.ia-body { flex: 1; min-width: 0; }
.ia-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.ia-in .ia-title { color: var(--cinnabar); }
.ia-out .ia-title { color: var(--slate); }
.ia-text {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.ia-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ia-cta svg { width: 16px; height: 16px; }

/* ---------- mini 天平条（卡片用） ---------- */
.mini-balance {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
}
.mini-bar-wrap {
  display: flex;
  align-items: stretch;
  height: 8px;
  background: var(--paper-2);
  border-radius: 4px;
  overflow: hidden;
}
.mini-half {
  flex: 1;
  display: flex;
  min-width: 0;
}
.mini-half-left { justify-content: flex-end; }
.mini-half-right { justify-content: flex-start; }
.mini-bar-in {
  height: 100%;
  background: var(--green);
}
.mini-bar-out {
  height: 100%;
  background: var(--cinnabar);
}
.mini-bar-center {
  width: 2px;
  background: var(--ink);
  flex-shrink: 0;
}
.mini-bar-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-faint);
  gap: 4px;
}
.mb-label-in { color: var(--green); }
.mb-label-out { color: var(--cinnabar); }
.mb-label-net {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ink-soft);
}
.mb-label-net.mb-in { color: var(--green); }
.mb-label-net.mb-out { color: var(--cinnabar); }
.mb-label-net.mb-zero { color: var(--ink-faint); }

/* ---------- 区块头 + mini 按钮 ---------- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0 12px;
}
.section-head .section-label { padding: 0; }
.btn-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 13px;
  letter-spacing: 1px;
  border-radius: 14px;
}
.btn-mini svg { width: 14px; height: 14px; }

/* ---------- 双向时间线 ---------- */
.timeline {
  position: relative;
  padding-left: 22px;
  margin-top: 4px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line);
}
.tl-item {
  position: relative;
  margin-bottom: 12px;
}
.tl-item:last-child { margin-bottom: 0; }
.tl-node {
  position: absolute;
  left: -21px;
  top: 10px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--ink-faint);
  box-sizing: border-box;
}
.tl-in .tl-node {
  border-color: var(--green);
  background: var(--green);
}
.tl-out .tl-node {
  border-color: var(--cinnabar);
  background: var(--cinnabar);
}
.tl-card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 11px 13px;
}
.tl-in .tl-card { border-left: 3px solid var(--green); }
.tl-out .tl-card { border-left: 3px solid var(--cinnabar); }
.tl-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.tl-date {
  font-size: 12px;
  color: var(--ink-faint);
}
.tl-event {
  font-size: 11px;
  color: var(--ink-soft);
  background: var(--paper-2);
  padding: 1px 8px;
  border-radius: 8px;
}
.tl-dir {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  margin-left: auto;
  letter-spacing: 1px;
  line-height: 1;
}
.tl-in .tl-dir { color: var(--green); }
.tl-out .tl-dir { color: var(--cinnabar); }
.tl-amount {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.5px;
}
.tl-gift {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: normal;
  color: var(--ink-soft);
  margin-left: 6px;
  letter-spacing: 0;
}
.tl-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
  line-height: 1.6;
}
.tl-actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-soft);
}
.tl-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  font-size: 12px;
  color: var(--ink-faint);
  padding: 0;
}
.tl-action svg { width: 13px; height: 13px; }
.tl-action:active { color: var(--ink); }
.tl-action-del:active { color: var(--cinnabar); }
.empty-tl {
  padding: 24px 16px;
}

/* ============ R3：AI 回礼参谋 ============ */

/* select 适配（form-input 通用，带朱砂箭头） */
select.form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%236f6557' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 34px;
}

/* ---------- 参谋输入区 ---------- */
.advisor-input {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.advisor-input .form-row { gap: 8px; }
.adv-go-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.adv-go-btn svg { width: 16px; height: 16px; }
.advisor-hint {
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 2px;
  letter-spacing: 1px;
}

/* ---------- 参谋书卡片 ---------- */
.advisor-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cinnabar);
  border-radius: 8px;
  padding: 18px 16px 16px;
  position: relative;
}
.advisor-card::before {
  content: "";
  position: absolute;
  top: 9px;
  right: 11px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--cinnabar);
  border-radius: 2px;
  opacity: 0.22;
}
.adv-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line-soft);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.adv-card-tag {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--card);
  background: var(--cinnabar);
  padding: 3px 10px;
  border-radius: 3px;
  letter-spacing: 3px;
}
.adv-card-target {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 1px;
}

/* ---------- 建议区间 ---------- */
.adv-range {
  text-align: center;
  padding: 14px 8px 16px;
  margin-bottom: 16px;
  background: var(--paper-2);
  border-radius: 6px;
}
.adv-range-label {
  display: block;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 3px;
  margin-bottom: 6px;
}
.adv-range-num {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--cinnabar);
  letter-spacing: 1px;
  line-height: 1.1;
}
.adv-range-unit {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-soft);
  margin-left: 4px;
}

/* ---------- 推理链 ---------- */
.adv-steps-wrap { margin-bottom: 14px; }
.adv-steps-title {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 3px;
  padding: 4px 0 10px;
}
.adv-steps-title::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--cinnabar);
  vertical-align: middle;
  margin-right: 8px;
}
.adv-steps {
  position: relative;
  padding-left: 18px;
}
.adv-steps::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
.adv-step {
  position: relative;
  margin-bottom: 12px;
}
.adv-step:last-child { margin-bottom: 0; }
.adv-step::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--cinnabar);
  box-sizing: border-box;
}
.adv-step-label {
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--cinnabar);
  letter-spacing: 2px;
  margin-bottom: 3px;
}
.adv-step-detail {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.7;
}

/* 无历史说明条（区别于正式步骤：虚线框 + 灰圆点） */
.adv-note {
  position: relative;
  margin: 0 0 12px -18px;
  padding: 9px 10px 9px 28px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 6px;
}
.adv-note::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--ink-faint);
  box-sizing: border-box;
}
.adv-note-tag {
  display: inline-block;
  font-family: var(--serif);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 2px;
  margin-right: 6px;
}
.adv-note-text {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* 参照条（我给过的同类惯例） */
.adv-outref {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(93,122,78,0.07);
  border: 1px solid rgba(93,122,78,0.25);
  border-radius: 6px;
  margin-bottom: 14px;
}
.adv-outref-tag {
  flex-shrink: 0;
  font-family: var(--serif);
  font-size: 11px;
  color: var(--green);
  border: 1px solid var(--green);
  padding: 1px 7px;
  border-radius: 3px;
  letter-spacing: 2px;
  margin-top: 1px;
}
.adv-outref-text {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* 礼俗提示 */
.adv-tip {
  padding: 12px;
  background: var(--paper-2);
  border-radius: 6px;
  margin-bottom: 12px;
}
.adv-tip-label {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.adv-tip-text {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.7;
}

/* 免责 */
.adv-disclaimer {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
  letter-spacing: 2px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-soft);
}

/* ---------- 单人页问参谋按钮 ---------- */
.person-head-action {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
  display: flex;
  justify-content: center;
}
.person-head-action .btn-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.person-head-action .btn-mini svg {
  width: 14px;
  height: 14px;
}

/* 窄屏保护 */
@media (max-width: 360px) {
  .adv-range-num { font-size: 26px; }
  .adv-card-target { font-size: 12px; }
}

/* ============ R4：称呼计算器 ============ */

/* 卡片容器（正查 / 反查共用） */
.ks-card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 16px 16px 14px;
}

/* 链选容器 */
.ks-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 面包屑：我 › 的母亲 › 的哥哥 */
.ks-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 4px;
  font-size: 14px;
  line-height: 1.6;
  min-height: 24px;
}
.ks-crumb {
  display: inline-block;
  padding: 3px 9px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  color: var(--ink);
}
.ks-crumb-me {
  background: var(--cinnabar-bg);
  border-color: var(--cinnabar);
  color: var(--cinnabar);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 1px;
}
.ks-sep {
  color: var(--ink-faint);
  font-size: 12px;
  padding: 0 1px;
}

/* 工具栏：加一跳 / 删末跳 / 清空 */
.ks-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ks-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--card);
  border: 1px dashed var(--cinnabar);
  border-radius: 16px;
  color: var(--cinnabar);
  font-size: 13px;
}
.ks-add svg { width: 14px; height: 14px; }
.ks-add:active { background: var(--cinnabar-bg); }
.ks-tool {
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink-soft);
  font-size: 12px;
}
.ks-tool:active { color: var(--cinnabar); border-color: var(--cinnabar); }

/* 原子选择层 */
.ks-atom-layer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  background: var(--paper-2);
  border-radius: 6px;
}
.ks-atom-layer[hidden] { display: none; }
.ks-atom {
  padding: 6px 11px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  color: var(--ink);
  font-size: 13px;
}
.ks-atom:active {
  background: var(--cinnabar-bg);
  border-color: var(--cinnabar);
  color: var(--cinnabar);
}

/* 结果区 */
.ks-result {
  text-align: center;
  padding: 14px 8px 6px;
  border-top: 1px dashed var(--line-soft);
}
.ks-result-label {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 3px;
  margin-bottom: 6px;
}
.ks-result-term {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--cinnabar);
  letter-spacing: 4px;
  line-height: 1.2;
}
.ks-term-fallback { color: var(--ink-soft); font-size: 22px; letter-spacing: 2px; }
.ks-result-note {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 6px;
  line-height: 1.6;
}
.ks-result-empty {
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.7;
}

/* 确认按钮（表单内嵌时） */
.ks-confirm {
  margin-top: 4px;
  width: 100%;
}

/* 表单里的触发按钮 + 内嵌展开容器 */
.ks-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  margin-top: 8px;
  font-size: 13px;
}
.ks-trigger svg { width: 15px; height: 15px; }
.ks-mount-inline {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
}
.ks-mount-inline[hidden] { display: none; }

/* 反查结果 */
.ks-reverse-result {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.ks-reverse-empty {
  text-align: center;
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1.7;
}
.ks-reverse-term {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--cinnabar);
  letter-spacing: 3px;
  margin-bottom: 6px;
}
.ks-reverse-def {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 8px;
}
.ks-reverse-meta {
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 1px;
}

/* R4 窄屏保护 */
@media (max-width: 360px) {
  .ks-result-term { font-size: 26px; }
  .ks-reverse-term { font-size: 20px; }
  .ks-atom { padding: 5px 9px; font-size: 12px; }
}

/* ============ R5：礼数速查 + 我的页 ============ */

/* 参考说明小字 */
.eq-note {
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.7;
  padding: 8px 12px;
  background: var(--paper-2);
  border-left: 3px solid var(--cinnabar);
  border-radius: 0 4px 4px 0;
  margin-bottom: 16px;
}

/* 子标题（事件参考行情 / 红白喜事礼俗） */
.eq-events-title,
.eq-cards-title {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-soft);
  letter-spacing: 2px;
  margin: 4px 0 10px;
}
.eq-cards-title { margin-top: 22px; }

/* 事件参考行情列表 */
.eq-events {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 4px 14px;
  margin-bottom: 8px;
}
.eq-event {
  padding: 12px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.eq-event:last-child { border-bottom: 0; }
.eq-event-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.eq-event-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 2px;
}
.eq-event-range {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--cinnabar);
  font-weight: 600;
  white-space: nowrap;
}
.eq-event-tip {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* 红白节礼俗卡（手风琴） */
.eq-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eq-card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--ink-faint);
  border-radius: 8px;
  overflow: hidden;
}
.eq-card-red { border-left-color: var(--cinnabar); background: linear-gradient(180deg, rgba(168,50,45,0.05), var(--card) 60%); }
.eq-card-white { border-left-color: var(--slate); background: linear-gradient(180deg, var(--slate-bg), var(--card) 60%); }
.eq-card-festival { border-left-color: var(--green); background: linear-gradient(180deg, rgba(93,122,78,0.06), var(--card) 60%); }

.eq-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 14px 14px 14px 12px;
  background: transparent;
  border: 0;
  text-align: left;
}
.eq-card-head-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.eq-card-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 3px;
}
.eq-card-red .eq-card-title { color: var(--cinnabar); }
.eq-card-white .eq-card-title { color: var(--slate); }
.eq-card-festival .eq-card-title { color: var(--green); }
.eq-card-events {
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: 1px;
}
.eq-card-chev {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--ink-faint);
  transition: transform 0.28s ease;
}
.eq-card-chev svg { width: 100%; height: 100%; }
.eq-card.open .eq-card-chev { transform: rotate(180deg); color: var(--ink-soft); }

.eq-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease;
  padding: 0 14px 0 12px;
}
.eq-card.open .eq-card-body { max-height: 1000px; padding-bottom: 14px; }

.eq-field {
  padding: 10px 0;
  border-top: 1px dashed var(--line-soft);
}
.eq-field:first-child { border-top: 0; }
.eq-field-label {
  display: inline-block;
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.eq-card-red .eq-field-label { color: var(--cinnabar); }
.eq-card-white .eq-field-label { color: var(--slate); }
.eq-card-festival .eq-field-label { color: var(--green); }
.eq-field-text {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.75;
}

/* ---------- 我的页 ---------- */
.set-block {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 16px 16px 18px;
  margin-bottom: 14px;
}
.set-block-head { margin-bottom: 14px; }
.set-block-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.set-block-title svg { width: 18px; height: 18px; color: var(--cinnabar); }
.set-block-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.75;
}
.set-handover-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.set-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  letter-spacing: 2px;
}
.set-btn svg { width: 16px; height: 16px; }

/* 危险区 */
.set-danger-block {
  background: var(--card);
  border: 1px solid rgba(168,50,45,0.35);
  border-radius: 8px;
  padding: 14px;
}
.set-clear-btn { width: 100%; }

/* 关于 */
.set-about {
  text-align: center;
  padding: 28px 16px 12px;
  margin-top: 10px;
}
.set-about-seal {
  width: 46px;
  height: 46px;
  color: var(--cinnabar);
  margin: 0 auto 12px;
}
.set-about-seal svg { width: 100%; height: 100%; }
.set-about-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 6px;
  color: var(--ink);
  margin-bottom: 10px;
}
.set-about-slogan {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-soft);
  letter-spacing: 1px;
  line-height: 1.8;
  margin-bottom: 8px;
}
.set-about-meta {
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.7;
  margin-bottom: 14px;
}
.set-about-ver {
  display: inline-block;
  font-size: 11px;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2px 12px;
  letter-spacing: 1px;
}

/* ---------- 轻提示 toast ---------- */
.toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translate(-50%, -24px);
  z-index: 120;
  max-width: calc(100% - 32px);
  padding: 11px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(42,38,32,0.18);
  font-size: 13.5px;
  color: var(--ink);
  letter-spacing: 1px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.26s ease, opacity 0.26s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast.has-action { pointer-events: auto; }
.toast-ok { border-left: 3px solid var(--green); }
.toast-err { border-left: 3px solid var(--cinnabar); color: var(--cinnabar-2); }
.toast-info { border-left: 3px solid var(--ink-soft); }
.toast-text { flex: 1; min-width: 0; }
.toast-action {
  flex-shrink: 0;
  background: none;
  border: none;
  border-left: 1px solid var(--line);
  padding: 2px 0 2px 12px;
  margin-left: 4px;
  color: var(--cinnabar);
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 2px;
  cursor: pointer;
}
.toast-action:active { color: var(--cinnabar-2); }

/* R5 窄屏保护 */
@media (max-width: 360px) {
  .eq-card-title { font-size: 16px; }
  .eq-event-name { font-size: 15px; }
  .set-about-name { font-size: 23px; }
  .toast { font-size: 12.5px; padding: 10px 14px; }
}

/* ---------- R2B：视图切换 + 搜索 + 往来图谱 ---------- */
.view-toggle {
  display: flex;
  gap: 0;
  margin: 14px 0 0;
  border-bottom: 1px solid var(--line);
}
.vt-btn {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 0 10px;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 4px;
  color: var(--ink-faint);
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.vt-btn.on {
  color: var(--cinnabar);
  border-bottom-color: var(--cinnabar);
}

/* 搜索框 */
.book-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 12px 0 0;
}
.book-search.hide { display: none; }
.book-search-icon {
  width: 16px;
  height: 16px;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.book-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  letter-spacing: 1px;
}
.book-search-input::placeholder { color: var(--ink-faint); }
.book-search-clear {
  background: none;
  border: none;
  padding: 2px;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.book-search-clear.hide { display: none; }
.book-search-clear svg { width: 14px; height: 14px; }
.book-search-clear:active { color: var(--ink-soft); }

/* 往来图谱 */
.book-list-sec { padding-top: 4px; }
.book-graph-sec { padding-top: 4px; }
.graph-svg {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  cursor: grab;
  touch-action: none;
}
.graph-svg.dragging { cursor: grabbing; }
.graph-wrap { position: relative; margin: 0 auto; }
/* 中心「我」印章 */
.graph-me { fill: var(--cinnabar); stroke: var(--cinnabar-2); stroke-width: 1; }
.graph-me-text {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  fill: var(--paper);
}
/* 连线：净送=朱砂 / 净收=墨青 / 两清=弱墨 */
.graph-line-out { stroke: var(--cinnabar); stroke-linecap: round; opacity: 0.55; }
.graph-line-in { stroke: var(--slate); stroke-linecap: round; opacity: 0.55; }
.graph-line-zero { stroke: var(--ink-faint); stroke-linecap: round; opacity: 0.4; }
/* 节点：净送=朱砂 / 净收=墨青 / 两清=弱墨 */
.graph-node-out { fill: var(--cinnabar); stroke: var(--cinnabar-2); stroke-width: 1; }
.graph-node-in { fill: var(--slate); stroke: #3a4654; stroke-width: 1; }
.graph-node-zero { fill: var(--ink-faint); stroke: var(--ink-soft); stroke-width: 1; }
.graph-node-a { cursor: pointer; }
.graph-hit { fill: transparent; }
.graph-node-a:hover .graph-node-out,
.graph-node-a:hover .graph-node-in,
.graph-node-a:hover .graph-node-zero { opacity: 0.82; }
.graph-name {
  font-family: var(--sans);
  font-size: 10.5px;
  fill: var(--ink-soft);
  letter-spacing: 0.5px;
}
.graph-legend {
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 1px;
  line-height: 1.8;
  padding: 10px 8px 4px;
}
.graph-hint {
  text-align: center;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.5px;
  padding: 0 8px 8px;
  opacity: 0.75;
}
.graph-reset {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px 5px 8px;
  background: rgba(251,246,233,0.92);
  border: 1px solid var(--line);
  border-radius: 16px;
  font-size: 11px;
  color: var(--ink-soft);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.graph-reset svg { width: 14px; height: 14px; }
.graph-reset:active { transform: scale(0.95); }

/* 图谱聚焦态：hover/tap 某节点时，其他节点和连线弱化 */
.graph-svg.graph-focused .graph-node-a:not(.focus) { opacity: 0.22; }
.graph-svg.graph-focused .graph-line:not(.focus) { opacity: 0.08; }
.graph-svg.graph-focused .graph-me,
.graph-svg.graph-focused .graph-me-text { opacity: 0.4; }
.graph-node-a.focus .graph-node-out,
.graph-node-a.focus .graph-node-in,
.graph-node-a.focus .graph-node-zero { opacity: 1; }
.graph-node-a.focus .graph-name { fill: var(--ink); font-weight: 600; }
.graph-line.focus { opacity: 1; }

/* 图谱节点概况浮层 */
.snap { padding: 4px 0; }
.snap-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.snap-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 1px;
}
.snap-rel { font-size: 13px; color: var(--ink-soft); }
.snap-closeness { display: flex; gap: 3px; margin-left: auto; align-items: center; }
.snap-stats {
  display: flex;
  margin: 14px 0;
  padding: 12px 8px;
  background: var(--card-2);
  border-radius: 6px;
}
.snap-stat { flex: 1; text-align: center; min-width: 0; }
.snap-stat-num {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.snap-stat-num.snap-in { color: var(--green); }
.snap-stat-num.snap-out { color: var(--cinnabar); }
.snap-stat-label {
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 4px;
  letter-spacing: 1px;
}
.snap-balance {
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
  padding: 8px 0 14px;
}
.snap-balance-in { color: var(--green); font-weight: 600; }
.snap-balance-out { color: var(--cinnabar); font-weight: 600; }
.snap-balance-zero { color: var(--ink-faint); }
.snap-recent {
  background: var(--card-2);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
}
.snap-recent-label {
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.snap-recent-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.snap-dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: var(--paper);
  flex-shrink: 0;
}
.snap-dir-in { background: var(--green); }
.snap-dir-out { background: var(--cinnabar); }
.snap-recent-event { flex: 1; font-size: 14px; color: var(--ink); }
.snap-recent-amount {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.snap-recent-date { font-size: 12px; color: var(--ink-faint); margin-top: 6px; }
.snap-empty { font-size: 13px; color: var(--ink-faint); padding: 4px 0; }
.snap-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}
.snap-cta svg { width: 18px; height: 18px; }

/* R2B 窄屏保护 */
@media (max-width: 360px) {
  .vt-btn { font-size: 14px; letter-spacing: 3px; }
  .graph-name { font-size: 9.5px; }
  .graph-me-text { font-size: 14px; }
  .graph-legend { font-size: 11px; }
}