/* ============================================================
   安签云 AnSign Cloud · UI 刷新层
   基于 Apple Copy 设计系统优化：颜色、圆角、阴影、动效、微交互
   本文件在 style.css 之后加载，仅做增强与覆盖，不改动原有结构。
   ============================================================ */

/* ---------- 1. 设计 Token 覆盖 ---------- */
:root {
  /* Apple Copy 主色板 */
  --brand: #007aff;
  --brand-600: #0064d6;
  --brand-700: #004fad;
  --brand-50: #e8f2ff;
  --brand-100: #cfe5ff;
  --violet: #5e5ce6;

  /* 文字与表面 */
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --muted: #8e8e93;
  --line: #e5e5ea;
  --line-soft: #f2f2f7;
  --bg: #f2f2f7;
  --card: #ffffff;

  /* 功能色 */
  --success: #34c759;
  --success-bg: #e9f9ee;
  --danger: #ff3b30;
  --danger-bg: #ffecea;
  --warning: #ff9f0a;
  --warning-bg: #fff4e5;
  --warning-dark: #d97706;
  --info: #007aff;
  --info-bg: #e8f2ff;

  /* 圆角：更柔和、更大胆 */
  --radius-xl: 22px;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 8px;

  /* 阴影：更克制、更自然 */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.12), 0 4px 14px rgba(0, 0, 0, 0.05);
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);

  /* 动效曲线 */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.45s;

  /* 间距与尺寸 */
  --topbar-h: 60px;
  --sidebar-w: 230px;
}

/* 暗色模式支持（跟随系统或手动加 .dark） */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f5f5f7;
    --ink-2: #aeaeb2;
    --muted: #8e8e93;
    --line: #3a3a3c;
    --line-soft: #2c2c2e;
    --bg: #000000;
    --card: #1c1c1e;
    --brand-50: rgba(0, 122, 255, 0.15);
    --brand-100: rgba(0, 122, 255, 0.25);
    --success-bg: rgba(52, 199, 89, 0.15);
    --danger-bg: rgba(255, 59, 48, 0.15);
    --warning-bg: rgba(255, 159, 10, 0.15);
    --info-bg: rgba(0, 122, 255, 0.15);
  }
}

html.dark {
  --ink: #f5f5f7;
  --ink-2: #aeaeb2;
  --muted: #8e8e93;
  --line: #3a3a3c;
  --line-soft: #2c2c2e;
  --bg: #000000;
  --card: #1c1c1e;
  --brand-50: rgba(0, 122, 255, 0.15);
  --brand-100: rgba(0, 122, 255, 0.25);
  --success-bg: rgba(52, 199, 89, 0.15);
  --danger-bg: rgba(255, 59, 48, 0.15);
  --warning-bg: rgba(255, 159, 10, 0.15);
  --info-bg: rgba(0, 122, 255, 0.15);
}

/* 字体微调：优先使用系统优化的中文与西文字体栈，避免依赖外部网络字体 */
body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* ---------- 2. 无障碍：减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 3. 焦点环 ---------- */
:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

button:focus-visible,
a:focus-visible,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
.nav-item:focus-visible,
.tab-item:focus-visible {
  outline-offset: 2px;
}

/* ---------- 4. 按钮微交互 ---------- */
.btn {
  border-radius: var(--radius-sm);
  transition: transform var(--duration-fast) var(--ease-spring),
    background-color var(--duration-fast) var(--ease-in-out),
    box-shadow var(--duration-fast) var(--ease-in-out),
    border-color var(--duration-fast) var(--ease-in-out);
  will-change: transform;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.btn-primary {
  background: linear-gradient(180deg, var(--brand), var(--brand-600));
  box-shadow: 0 2px 6px rgba(0, 122, 255, 0.28);
}

.btn-primary:hover {
  background: linear-gradient(180deg, var(--brand-600), var(--brand-700));
  box-shadow: 0 4px 10px rgba(0, 122, 255, 0.35);
}

.btn-dark {
  background: var(--ink);
}

.btn-ghost:hover {
  background: var(--line-soft);
}

/* ---------- 5. 输入框 ---------- */
.input,
.select,
.textarea {
  border-radius: var(--radius-sm);
  border-color: var(--line);
  background: var(--card);
  transition: border-color var(--duration-fast) var(--ease-in-out),
    box-shadow var(--duration-fast) var(--ease-in-out),
    transform var(--duration-fast) var(--ease-in-out);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-50);
}

/* ---------- 6. 卡片与悬浮 ---------- */
.card,
.stat-card,
.quick-card,
.seal-card {
  border-radius: var(--radius);
  background: var(--card);
  transition: transform var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo),
    border-color var(--duration-fast) var(--ease-in-out);
  will-change: transform, box-shadow;
}

.card:hover,
.stat-card:hover,
.quick-card:hover,
.seal-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
}

.card-head {
  border-radius: var(--radius) var(--radius) 0 0;
}

/* 统计卡片数字动画 */
.stat-card .stat-num {
  transition: color var(--duration-fast) var(--ease-in-out);
}

.stat-card:hover .stat-num {
  color: var(--brand);
}

/* ---------- 7. 导航与侧边栏 ---------- */
.navbar {
  background: var(--card);
  border-right-color: var(--line);
}

.nav-item {
  border-radius: var(--radius-sm);
  position: relative;
  transition: background-color var(--duration-fast) var(--ease-in-out),
    color var(--duration-fast) var(--ease-in-out),
    transform var(--duration-fast) var(--ease-spring);
}

.nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 20px;
  background: var(--brand);
  border-radius: 0 3px 3px 0;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.nav-item.active {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 700;
}

.nav-item.active::before {
  transform: translateY(-50%) scaleY(1);
}

.nav-item:hover:not(.active) {
  background: var(--line-soft);
  transform: translateX(2px);
}

/* 顶部栏 */
.topbar {
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: var(--line);
}

html.dark .topbar {
  background: rgba(0, 0, 0, 0.72);
}
@media (prefers-color-scheme: dark) {
  .topbar {
    background: rgba(0, 0, 0, 0.72);
  }
}

.brand-mark {
  background: linear-gradient(135deg, var(--brand) 0%, var(--violet) 100%);
  border-radius: 11px;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.28);
}

.icon-btn {
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease-in-out),
    transform var(--duration-fast) var(--ease-spring);
}

.icon-btn:hover {
  background: var(--line-soft);
}

.icon-btn:active {
  transform: scale(0.92);
}

/* ---------- 8. 视图切换动效 ---------- */
.view {
  animation: none;
}

.view.is-exit {
  animation: viewFadeOut var(--duration-fast) var(--ease-in-out) forwards;
}

.view.is-enter {
  animation: viewFadeUp var(--duration-slow) var(--ease-out-expo) both;
}

@keyframes viewFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes viewFadeOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.995);
  }
}

/* ---------- 9. 列表与表格 ---------- */
.table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-in-out);
}

.table tbody tr:hover {
  background: var(--line-soft);
}

.list-item,
.notice-item {
  transition: background-color var(--duration-fast) var(--ease-in-out),
    transform var(--duration-fast) var(--ease-out-expo);
}

.list-item:hover,
.notice-item:hover {
  background: var(--line-soft);
  transform: translateX(3px);
}

.notice-item.unread {
  background: var(--brand-50);
  border-left: 3px solid var(--brand);
}

/* ---------- 10. 弹窗与 Toast ---------- */
.modal-mask {
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(6px);
}

.modal {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.modal-head {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.toast {
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

.toast::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  opacity: 0.35;
  animation: toastProgress 3s linear forwards;
}

@keyframes toastProgress {
  from { width: 100%; }
  to { width: 0%; }
}

/* ---------- 11. 登录页 ---------- */
.login-page {
  background: var(--bg);
}

.login-side {
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(94, 92, 230, 0.42), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(0, 122, 255, 0.5), transparent 55%),
    linear-gradient(160deg, #00275a 0%, #003b82 55%, #0064d6 100%);
}

.login-card {
  background: var(--card);
}

.login-tabs {
  background: var(--line-soft);
  border-radius: var(--radius-sm);
}

.login-tab.active {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* ---------- 12. 工作台欢迎横幅 ---------- */
.greet-banner {
  background: linear-gradient(120deg, #00275a, #004fad);
  border-radius: var(--radius);
}

.greet-banner .btn {
  color: var(--brand-700);
}

/* ---------- 13. 合同文书 ---------- */
.paper {
  border-radius: var(--radius-sm);
  background: var(--card);
}

.sign-block {
  border-radius: var(--radius-sm);
}

/* ---------- 14. 移动端底部导航 ---------- */
.tabbar {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px) saturate(180%);
  border-top-color: var(--line);
}

.tab-item {
  border-radius: var(--radius-xs);
  transition: color var(--duration-fast) var(--ease-in-out),
    transform var(--duration-fast) var(--ease-spring);
}

.tab-item:active {
  transform: scale(0.92);
}

.tab-fab {
  background: linear-gradient(135deg, var(--brand), var(--violet));
  transition: transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) var(--ease-in-out);
}

.tab-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0, 122, 255, 0.38);
}

/* ---------- 15. 加载骨架屏 ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--line) 50%, var(--line-soft) 75%);
  background-size: 200% 100%;
  border-radius: var(--radius-xs);
  animation: skeletonShimmer 1.4s var(--ease-in-out) infinite;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

.skeleton::after,
.skeleton * {
  opacity: 0 !important;
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text { height: 1em; margin-bottom: 0.5em; }
.skeleton-text.short { width: 60%; }
.skeleton-title { height: 1.25em; width: 40%; margin-bottom: 0.75em; }
.skeleton-circle { border-radius: 50%; }
.skeleton-card { height: 80px; border-radius: var(--radius); }

/* ---------- 16. 通用入场动画工具类 ---------- */
.fade-in { animation: fadeIn var(--duration-normal) var(--ease-out-expo) both; }
.slide-up { animation: slideUp var(--duration-slow) var(--ease-out-expo) both; }
.scale-in { animation: scaleIn var(--duration-normal) var(--ease-out-expo) both; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* 子元素阶梯入场 */
.stagger-children > * {
  opacity: 0;
  transform: translateY(12px);
  animation: staggerIn var(--duration-normal) var(--ease-out-expo) forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.04s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.08s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.12s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.16s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.20s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.24s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.28s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.32s; }

@keyframes staggerIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- 17. 页面切换加载占位 ---------- */
.page-skeleton {
  padding: 26px 30px 90px;
}

.page-skeleton .sk-head {
  height: 28px;
  width: 240px;
  margin-bottom: 24px;
}

.page-skeleton .sk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.page-skeleton .sk-card {
  height: 88px;
}

.page-skeleton .sk-body {
  height: 220px;
}

@media (max-width: 980px) {
  .page-skeleton { padding: 18px 16px 80px; }
}

@media (max-width: 640px) {
  .page-skeleton { padding: 14px 12px 84px; }
}

/* ---------- 18. 徽章与标签 ---------- */
.badge {
  transition: transform var(--duration-fast) var(--ease-spring);
}

.badge:hover {
  transform: scale(1.04);
}

/* ---------- 19. 空状态 ---------- */
.empty {
  animation: fadeIn var(--duration-normal) var(--ease-out-expo) both;
}

.empty .empty-art {
  opacity: 0.65;
}

/* ---------- 20. 图表 ---------- */
.bar {
  transition: height 0.6s var(--ease-out-expo), opacity 0.3s var(--ease-in-out);
}

.bar:hover {
  opacity: 1 !important;
}

/* ---------- 21. 自定义滚动条 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #d1d1d6; }

html.dark ::-webkit-scrollbar-thumb { background: var(--line); }
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb { background: var(--line); }
}

/* ============================================================
   22. 暗黑模式全面适配
   覆盖 style.css 中未使用 CSS 变量的硬编码浅色值
   ============================================================ */

/* 暗黑模式额外变量（html.dark 手动触发） */
html.dark {
  --dark-surface: #1c1c1e;
  --dark-surface-2: #2c2c2e;
  --dark-surface-3: #3a3a3c;
  --dark-hover: rgba(255, 255, 255, 0.06);
  --dark-border: #3a3a3c;
  --dark-text-3: #8e8e93;
  --dark-text-4: #636366;
}

/* ---- html.dark 手动暗黑模式 ---- */
html.dark .btn-ghost { background: var(--dark-surface); }
html.dark .btn-danger:hover { background: rgba(255, 59, 48, 0.25); }
html.dark .input,
html.dark .select,
html.dark .textarea { background: var(--dark-surface); }
html.dark .radio-line { background: var(--dark-surface); }
html.dark .input::placeholder,
html.dark .textarea::placeholder { color: var(--dark-text-4); }
html.dark .b-cancelled,
html.dark .b-draft,
html.dark .b-disabled { background: var(--dark-surface-3); color: var(--dark-text-3); }
html.dark .bg-gray { background: var(--dark-surface-3); color: var(--dark-text-3); }
html.dark .topbar { background: rgba(0, 0, 0, 0.72); }
html.dark .icon-btn .badge-dot { border-color: var(--dark-surface); }
html.dark .navbar { background: var(--dark-surface); }
html.dark .nav-label { color: var(--dark-text-4); }
html.dark .nav-item .icon { color: var(--dark-text-3); }
html.dark .nav-item:hover { background: var(--dark-hover); }
html.dark .icon-btn:hover { background: var(--dark-hover); }
html.dark .user-chip:hover { background: var(--dark-hover); }
html.dark .quick-card,
html.dark .seal-card,
html.dark .signer-card,
html.dark .acc-picker-card,
html.dark .invite-card { background: var(--dark-surface); }
html.dark .stat-card:hover { border-color: var(--dark-surface-3); }
html.dark .table th { background: var(--dark-surface-2); color: var(--dark-text-3); }
html.dark .table tbody tr:hover { background: var(--dark-hover); }
html.dark .modal-foot { background: var(--dark-surface-2); }
html.dark .advanced { background: var(--dark-surface-2); }
html.dark .legend { background: var(--dark-surface-2); border-color: var(--dark-border); }
html.dark .list-item:hover { background: var(--dark-hover); }
html.dark .notice-item:hover { background: var(--dark-hover); }
html.dark .notice-item.unread { background: rgba(0, 122, 255, 0.08); }
html.dark .notice-dot { background: var(--dark-surface-3); }
html.dark .step-dot { background: var(--dark-surface-3); }
html.dark .modal { background: var(--dark-surface); }
html.dark .toast { background: var(--dark-surface); }
html.dark .login-page { background: var(--bg); }
html.dark .login-tabs { background: var(--dark-surface-2); }
html.dark .login-tab.active { background: var(--dark-surface); }
html.dark .greet-banner .btn { background: var(--dark-surface); }
html.dark .greet-banner .btn:hover { background: var(--dark-surface-2); }
html.dark .paper { background: var(--dark-surface); color: var(--ink); }
html.dark .paper::before { color: var(--dark-text-4); }
html.dark .sign-block { background: var(--dark-surface-2); border-color: var(--dark-surface-3); }
html.dark .sign-block.rejected { background: var(--danger-bg); }
html.dark .sign-block.done { background: var(--success-bg); border-color: var(--success); }
html.dark .sign-block .sb-info { color: var(--dark-text-3); }
html.dark .sig-box { background: var(--dark-surface-2); border-color: var(--dark-surface-3); }
html.dark .sig-hint { color: var(--dark-text-4); }
html.dark .sig-line { border-top-color: var(--dark-border); }
html.dark .cert-line { background: rgba(255, 159, 10, 0.12); color: var(--warning); }
html.dark .empty .empty-art { color: var(--dark-surface-3); }
html.dark .empty p { color: var(--dark-text-3); }
html.dark .empty .empty-sub { color: var(--dark-text-4); }
html.dark .verify-ok { border-color: rgba(52, 199, 89, 0.3); }
html.dark .verify-fail { border-color: rgba(255, 59, 48, 0.3); }
html.dark .invite-meta { background: var(--dark-surface-2); border-color: var(--dark-border); }
html.dark .tabbar { background: rgba(0, 0, 0, 0.85); }
html.dark .acc-picker-ic { background: var(--dark-surface-3); color: var(--dark-text-3); }
html.dark ::-webkit-scrollbar-thumb:hover { background: var(--dark-surface-3); }

/* ---- 系统暗黑模式（prefers-color-scheme） ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --dark-surface: #1c1c1e;
    --dark-surface-2: #2c2c2e;
    --dark-surface-3: #3a3a3c;
    --dark-hover: rgba(255, 255, 255, 0.06);
    --dark-border: #3a3a3c;
    --dark-text-3: #8e8e93;
    --dark-text-4: #636366;
  }
  .btn-ghost { background: var(--dark-surface); }
  .btn-danger:hover { background: rgba(255, 59, 48, 0.25); }
  .input, .select, .textarea { background: var(--dark-surface); }
  .radio-line { background: var(--dark-surface); }
  .input::placeholder, .textarea::placeholder { color: var(--dark-text-4); }
  .b-cancelled, .b-draft, .b-disabled { background: var(--dark-surface-3); color: var(--dark-text-3); }
  .bg-gray { background: var(--dark-surface-3); color: var(--dark-text-3); }
  .topbar { background: rgba(0, 0, 0, 0.72); }
  .icon-btn .badge-dot { border-color: var(--dark-surface); }
  .navbar { background: var(--dark-surface); }
  .nav-label { color: var(--dark-text-4); }
  .nav-item .icon { color: var(--dark-text-3); }
  .nav-item:hover { background: var(--dark-hover); }
  .icon-btn:hover { background: var(--dark-hover); }
  .user-chip:hover { background: var(--dark-hover); }
  .quick-card, .seal-card, .signer-card, .acc-picker-card, .invite-card { background: var(--dark-surface); }
  .stat-card:hover { border-color: var(--dark-surface-3); }
  .table th { background: var(--dark-surface-2); color: var(--dark-text-3); }
  .table tbody tr:hover { background: var(--dark-hover); }
  .modal-foot { background: var(--dark-surface-2); }
  .advanced { background: var(--dark-surface-2); }
  .legend { background: var(--dark-surface-2); border-color: var(--dark-border); }
  .list-item:hover { background: var(--dark-hover); }
  .notice-item:hover { background: var(--dark-hover); }
  .notice-item.unread { background: rgba(0, 122, 255, 0.08); }
  .notice-dot { background: var(--dark-surface-3); }
  .step-dot { background: var(--dark-surface-3); }
  .modal { background: var(--dark-surface); }
  .toast { background: var(--dark-surface); }
  .login-page { background: var(--bg); }
  .login-tabs { background: var(--dark-surface-2); }
  .login-tab.active { background: var(--dark-surface); }
  .greet-banner .btn { background: var(--dark-surface); }
  .greet-banner .btn:hover { background: var(--dark-surface-2); }
  .paper { background: var(--dark-surface); color: var(--ink); }
  .paper::before { color: var(--dark-text-4); }
  .sign-block { background: var(--dark-surface-2); border-color: var(--dark-surface-3); }
  .sign-block.rejected { background: var(--danger-bg); }
  .sign-block.done { background: var(--success-bg); border-color: var(--success); }
  .sign-block .sb-info { color: var(--dark-text-3); }
  .sig-box { background: var(--dark-surface-2); border-color: var(--dark-surface-3); }
  .sig-hint { color: var(--dark-text-4); }
  .sig-line { border-top-color: var(--dark-border); }
  .cert-line { background: rgba(255, 159, 10, 0.12); color: var(--warning); }
  .empty .empty-art { color: var(--dark-surface-3); }
  .empty p { color: var(--dark-text-3); }
  .empty .empty-sub { color: var(--dark-text-4); }
  .verify-ok { border-color: rgba(52, 199, 89, 0.3); }
  .verify-fail { border-color: rgba(255, 59, 48, 0.3); }
  .invite-meta { background: var(--dark-surface-2); border-color: var(--dark-border); }
  .tabbar { background: rgba(0, 0, 0, 0.85); }
  .acc-picker-ic { background: var(--dark-surface-3); color: var(--dark-text-3); }
  ::-webkit-scrollbar-thumb:hover { background: var(--dark-surface-3); }
}

/* ============================================================
   23. 水墨公证 · 交互动效增强层
   ============================================================ */

/* 涟漪动画 */
@keyframes ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* 全局入场动画 */
@keyframes inkFadeUp {
  from { opacity: 0; transform: translateY(18px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes inkReveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* 登录页：水墨纹理与光效 */
.login-side::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 35%);
  pointer-events: none;
  opacity: 0.7;
}

.login-side .ls-feature {
  transition: transform 0.25s var(--ease-out-expo), background 0.25s;
  border-radius: var(--radius-sm);
  padding: 14px;
  margin: 0 -14px;
}

.login-side .ls-feature:hover {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.06);
}

.login-tab {
  transition: all 0.2s var(--ease-spring);
}

/* 工作台欢迎横幅 */
.greet-banner {
  position: relative;
  overflow: hidden;
}

.greet-banner::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 65%);
  animation: bannerGlow 6s ease-in-out infinite alternate;
}

@keyframes bannerGlow {
  from { transform: scale(1); opacity: 0.6; }
  to { transform: scale(1.15); opacity: 1; }
}

/* 统计卡片数字 */
.stat-num {
  font-variant-numeric: tabular-nums;
}

/* 卡片与列表项增强 */
.card,
.stat-card,
.quick-card,
.seal-card,
.signer-card {
  transition: transform 0.25s var(--ease-out-expo),
    box-shadow 0.25s var(--ease-out-expo),
    border-color 0.15s var(--ease-in-out);
}

.list-item,
.notice-item {
  transition: background-color 0.15s var(--ease-in-out),
    transform 0.2s var(--ease-out-expo);
}

.list-item:active,
.notice-item:active,
.quick-card:active,
.seal-card:active {
  transform: scale(0.995);
}

/* 按钮焦点增强 */
.btn:focus-visible,
.icon-btn:focus-visible,
.tab-item:focus-visible,
.nav-item:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--brand-50);
}

/* 合同纸张质感 */
.paper {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, transparent 8%),
    var(--card);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.06),
    0 24px 64px rgba(0, 0, 0, 0.08);
  position: relative;
}

.paper::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.5;
  border-radius: inherit;
}

/* 移动端底部导航 */
.tab-fab {
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-in-out);
}

.tab-fab::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.25;
  filter: blur(8px);
  z-index: -1;
}

/* 空状态 */
.empty {
  animation: inkFadeUp 0.5s var(--ease-out-expo) both;
}

/* 徽章 */
.badge {
  transition: transform 0.15s var(--ease-spring);
}

.badge:hover {
  transform: scale(1.05);
}

/* 页面切换加载占位 */
.page-skeleton {
  animation: inkFadeUp 0.3s var(--ease-out-expo) both;
}

/* 表单输入增强 */
.input:hover,
.select:hover,
.textarea:hover {
  border-color: #c7c7cc;
}

/* 弹窗内容入场 */
.modal-body > * {
  animation: inkFadeUp 0.35s var(--ease-out-expo) both;
}

.modal-body > *:nth-child(1) { animation-delay: 0.02s; }
.modal-body > *:nth-child(2) { animation-delay: 0.04s; }
.modal-body > *:nth-child(3) { animation-delay: 0.06s; }
.modal-body > *:nth-child(4) { animation-delay: 0.08s; }
.modal-body > *:nth-child(5) { animation-delay: 0.10s; }

/* 暗黑模式纸张 */
html.dark .paper,
@media (prefers-color-scheme: dark) {
  .paper {
    background: var(--dark-surface);
  }
}

/* --- 打印始终白色 --- */
@media print {
  html.dark .paper,
  html.dark .modal,
  html.dark .toast,
  html.dark .navbar,
  html.dark .quick-card,
  html.dark .seal-card,
  html.dark .signer-card,
  html.dark .topbar {
    background: #fff !important;
    color: #000 !important;
  }
}