/* ============================================================
   留叙拾忆 · 全站风格和谐层（theme.css）
   ------------------------------------------------------------
   目标：在不逐页改写内联样式的前提下，将各页共用的组件统一到
   v2 新中式科技感——朱砂红主强调 + 宣纸玻璃 + 衬线标题 + 统一圆角。
   机制：以 .screen 作用域 + 必要 !important 覆盖各页内联的硬编码旧色，
        使 base.css 的设计系统（令牌 / 组件）在全部页面真正生效。
   约束：仅在 颜色 / 描边 / 圆角 / 背景令牌 上生效，
        绝不触碰 布局 / 定位 / 尺寸 / 动画，避免破坏页内特定排版。
   说明：本文件是"其他页面沿用首页风格"的统一入口；
        如需某页特例，请在该页内联 <style> 用更高特异性覆盖。
   ============================================================ */

/* ---------- 1. 朱砂红主强调色：激活 / 选中 / 主操作态 ---------- */
/* 选中态（is-on / is-primary / is-active）统一为朱砂红底 */
.screen [class*="is-on"],
.screen [class*="is-primary"] {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #FFF7F2 !important;
}

/* 链接 / 文字型操作统一朱砂红 */
.screen a,
.screen .profile-link,
.screen .day-link,
.screen .clan-browse-link,
.screen .nav-user,
.screen .setting-sub {
  color: var(--accent) !important;
}

/* 宗族印章：实体朱砂红印 */
.screen .clan-seal {
  background: var(--accent) !important;
  color: #FFF7F2 !important;
  border-color: var(--accent) !important;
  box-shadow: 0 2px 10px rgba(181, 70, 46, 0.38) !important;
}

/* 区块标题前的引首条：朱砂红 */
.screen .section-head h2::before,
.screen .add-visitor-title::before,
.screen .browse-pending-title::before {
  content: "" !important;
  display: inline-block !important;
  width: 3px !important;
  height: 12px !important;
  border-radius: 2px !important;
  background: var(--accent) !important;
  margin-right: 7px !important;
  vertical-align: -1px !important;
}

/* 今日 / 黄历类卡片：左侧朱砂红引首（与首页一致） */
.screen .day-card,
.screen .almanac-item {
  border-left: 3px solid var(--accent) !important;
}

/* ---------- 2. 衬线标题：强化新中式气质 ---------- */
.screen h1,
.screen h2,
.screen h3,
.screen .section-head h2,
.screen .role-name,
.screen .pending-name,
.screen .pending-title,
.screen .add-visitor-title,
.screen .browse-pending-title,
.screen .nav-title,
.screen .action-title,
.screen .info-card h3,
.screen .list-name,
.screen .clan-name {
  font-family: var(--font-serif) !important;
  letter-spacing: 0.04em !important;
}

/* ---------- 3. 统一圆角 + 玻璃卡片 ---------- */
.screen .card,
.screen .info-card,
.screen .note-identity,
.screen .visitor-admin-row,
.screen .guest-note,
.screen .delete-warning,
.screen .pending-row,
.screen .role-row,
.screen .member-row,
.screen .list-row,
.screen .action-row,
.screen .kv-row,
.screen .avatar-mono,
.screen .avatar-sm {
  border-radius: var(--radius) !important;
  background: var(--glass) !important;
  border: 1px solid rgba(122, 106, 88, 0.14) !important;
  box-shadow: var(--shadow-card) !important;
}

/* 卡片悬浮微光（与首页 .card 一致） */
.screen .card:hover,
.screen .info-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(181, 70, 46, 0.18) !important;
}

/* ---------- 4. 强制 base.css 共享组件在全部页面生效 ---------- */
/* 表单字段：统一玻璃白底 + 朱砂红聚焦（覆盖各页内联旧色） */
.screen .field-input,
.screen .form-input,
.screen .form-select,
.screen .clan-field {
  width: 100% !important;
  border: 1px solid rgba(122, 106, 88, 0.22) !important;
  border-radius: 7px !important;
  background: #FFFFFF !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  padding: 10px 11px !important;
  box-sizing: border-box !important;
}
.screen .field-input:focus,
.screen .form-input:focus,
.screen .form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(181, 70, 46, 0.12) !important;
}
.screen .field-label,
.screen .form-label {
  font-family: var(--font-sans) !important;
  font-size: 10.5px !important;
  color: #8C8375 !important;
  letter-spacing: 0.02em !important;
}

/* 取消 / 次级按钮：统一幽灵描边 */
.screen .btn-cancel {
  border: 1px solid rgba(122, 106, 88, 0.26) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
}
.screen .btn-cancel:active {
  background: rgba(122, 106, 88, 0.06) !important;
}

/* 各页次级操作按钮（pending / role / visitor / seg）统一幽灵 + 朱砂红激活 */
.screen .pending-btn,
.screen .role-btn,
.screen .visitor-browse,
.screen .visitor-remove,
.screen .mini-seg .seg-btn,
.screen .quick-btn,
.screen .profile-link {
  border: 1px solid rgba(122, 106, 88, 0.24) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
}

/* 弹窗 / Sheet：统一底部滑入卡片（base.css 已定义，强制覆盖各页内联旧样式） */
.screen .sheet-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 60 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: opacity 0.28s var(--ease-out, ease), visibility 0.28s var(--ease-out, ease) !important;
}
.screen .sheet-layer.is-open { visibility: visible !important; opacity: 1 !important; }
/* 仅作用于 .sheet-layer 内部的 .sheet：避免误伤 home/genealogy 等「无 layer 包裹」的裸底部弹层
   （裸弹层需保持自身 position:fixed，否则会掉回文档流占位、底部出现空白块） */
.screen .sheet-layer .sheet {
  position: relative !important;
  width: 100% !important;
  max-width: 460px !important;
  max-height: 84vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--paper-card, #FCFAF5) !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: 0 -10px 40px rgba(60, 44, 28, 0.22) !important;
  transform: translateY(100%) !important;
  transition: transform 0.32s var(--ease-out, ease) !important;
  overflow: hidden !important;
}
.screen .sheet-layer.is-open .sheet { transform: translateY(0) !important; }
/* 弹窗头部：左右分布（修复此前被全局 display:block 覆盖的问题） */
.screen .sheet-layer .sheet .sheet-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px 10px !important;
  border-bottom: 1px solid rgba(122, 106, 88, 0.1) !important;
}
.screen .sheet-layer .sheet .sheet-head h3 {
  margin: 0 !important;
  font-family: var(--font-serif) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  color: var(--text) !important;
}

/* Toast：统一暗色玻璃提示 */
.screen .toast {
  position: absolute !important;
  left: 50% !important;
  bottom: 132px !important;
  z-index: 30 !important;
  transform: translate(-50%, 8px) !important;
  max-width: 280px !important;
  padding: 9px 16px !important;
  border-radius: var(--radius) !important;
  background: rgba(46, 42, 36, 0.9) !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  text-align: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.screen .toast.is-visible { opacity: 1 !important; transform: translate(-50%, 0) !important; }

/* hint / 说明文字：统一浅褐 */
.screen .hint {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  line-height: 1.7 !important;
  color: #A9A091 !important;
}

/* ---------- 内容区：空状态居中占位 + 淡纸纹兜底 ----------
   剥除外壳后内容区高度 = 视口高（.screen 为 min-height:100dvh 的固定框架），
   列表数据少时下半屏会是一整片空白纸面。这里给内容容器加极淡纸纹，
   并把空状态绝对定位到容器垂直中央——空白被上下均分，不再堆积在页面下方。
   （空状态用 absolute 而非 margin:auto，避免在 flex 列布局中把容器撑高） */
.screen .page-body,
.screen .profile-body,
.screen .friend-panel,
.screen .public-panel,
.screen .private-panel {
  position: relative !important;
  background-image: radial-gradient(rgba(122, 106, 88, 0.05) 0.5px, transparent 0.6px) !important;
  background-size: 4px 4px !important;
}

/* 空状态占位：印章风（呼应 v2 新中式风格） */
.screen .empty-state {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 46px 24px !important;
  text-align: center !important;
  pointer-events: none !important;
}
.screen .empty-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  height: 54px !important;
  margin: 0 auto 16px !important;
  border: 1px solid rgba(181, 70, 46, 0.3) !important;
  border-radius: 3px !important;
  background: rgba(181, 70, 46, 0.06) !important;
  color: var(--accent) !important;
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  transform: rotate(-3deg) !important;
  box-shadow: 0 10px 22px -14px rgba(120, 60, 40, 0.55) !important;
}
.screen .empty-title {
  margin: 0 0 7px !important;
  font-family: var(--font-serif) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  color: var(--text) !important;
}
.screen .empty-desc {
  margin: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 10.5px !important;
  line-height: 1.95 !important;
  color: var(--muted) !important;
}

/* 空态：统一 */
.screen .empty {
  color: var(--muted-2) !important;
  font-family: var(--font-sans) !important;
}

/* 分隔线统一为淡褐 */
.screen .sep,
.screen hr,
.screen .day-divider,
.screen .role-row,
.screen .pending-row {
  border-color: rgba(122, 106, 88, 0.12) !important;
}