/* ============================================================
   版权登记系统 — 全局 UI 精修层（B/C 端共用）
   在原原型组件库之上做质感增强：层次、动效、细节
   ============================================================ */

/* ---------- 基础质感 ---------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(22, 100, 255, 0.05), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(22, 100, 255, 0.04), transparent 55%),
    #f7f8fa !important;
  letter-spacing: 0.01em;
}
::selection { background: rgba(22, 100, 255, 0.16); }

/* 细滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d4d9e0; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #b8c0cc; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* 数字/表格数据等宽数字，避免跳动 */
.td-mono, table td, .stat-value { font-variant-numeric: tabular-nums; }

/* ---------- 侧边导航 ---------- */
.sidenav {
  background: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 1px 0 0 rgba(234, 237, 241, 0.8);
}
.menu-item {
  position: relative;
  border-radius: 8px;
  margin: 2px 8px;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.menu-item:hover { background: rgba(22, 100, 255, 0.06); }
.menu-item:active { transform: scale(0.985); }
.menu-item.active {
  background: linear-gradient(90deg, rgba(22, 100, 255, 0.1), rgba(22, 100, 255, 0.05));
  font-weight: 600;
}
.menu-item.active::before {
  content: '';
  position: absolute;
  left: -8px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 0 3px 3px 0;
  background: #1664ff;
  box-shadow: 0 0 8px rgba(22, 100, 255, 0.5);
}

/* ---------- 卡片与容器 ---------- */
.table-wrapper, .modal, [class*="card"], [class*="Card"] {
  border-radius: 12px !important;
}
.table-wrapper {
  border: 1px solid rgba(234, 237, 241, 0.9) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -12px rgba(16, 24, 40, 0.12) !important;
  overflow: hidden;
}

/* ---------- 按钮 ---------- */
.btn { transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important; position: relative; }
.btn:not(:disabled):hover { transform: translateY(-1px); }
.btn:not(:disabled):active { transform: translateY(0) scale(0.98); }
.btn-primary:not(:disabled):hover { box-shadow: 0 4px 14px -2px rgba(22, 100, 255, 0.45); }
.btn-danger:not(:disabled):hover { box-shadow: 0 4px 14px -2px rgba(215, 49, 42, 0.4); }
.btn-outline:not(:disabled):hover, .btn-secondary:not(:disabled):hover { box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08); }
.btn:focus-visible { outline: 2px solid rgba(22, 100, 255, 0.55); outline-offset: 2px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- 表格 ---------- */
.table thead th {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  color: #86909c !important;
  background: #fafbfc;
}
.table tbody tr { transition: background 0.15s ease; }
.table tbody tr:hover { background: rgba(22, 100, 255, 0.03); }

/* ---------- 输入框 ---------- */
.ved-input { transition: box-shadow 0.18s ease, border-color 0.18s ease; }
.ved-input:hover { border-color: #c3ccd9; }
.ved-input:focus-within {
  border-color: #1664ff !important;
  box-shadow: 0 0 0 3px rgba(22, 100, 255, 0.12);
}

/* ---------- 状态徽标 ---------- */
.status-tag { border-radius: 999px !important; font-weight: 500; letter-spacing: 0.02em; }

/* ---------- 文字链接 ---------- */
.action-link { transition: color 0.15s ease, opacity 0.15s ease; position: relative; }
.action-link:hover { opacity: 0.82; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 弹窗 ---------- */
.modal {
  box-shadow: 0 24px 64px -16px rgba(16, 24, 40, 0.28) !important;
  animation: crModalIn 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes crModalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 页面入场 ---------- */
main section, .table-wrapper, [class*="stat"], [class*="metric"] {
  animation: crFadeUp 0.45s cubic-bezier(0.22, 0.9, 0.32, 1) both;
}
main section:nth-of-type(2) { animation-delay: 0.05s; }
@keyframes crFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Toast 精修 ---------- */
#cr-toast-box > div {
  border-radius: 10px !important;
  box-shadow: 0 8px 28px -6px rgba(16, 24, 40, 0.22) !important;
  backdrop-filter: blur(8px);
  animation: crToastIn 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes crToastIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 登录页 ---------- */
.login-brand {
  background:
    radial-gradient(800px 400px at 20% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
    radial-gradient(600px 500px at 100% 100%, rgba(0, 60, 200, 0.35), transparent 60%),
    linear-gradient(160deg, #2e7aff 0%, #1664ff 45%, #0047d6 100%) !important;
}
.login-brand::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.6), transparent 75%);
}

/* ---------- 分页 ---------- */
.pagination-controls .btn { min-width: 28px; }
.pagination-ellipsis { color: #86909c; }

/* ---------- 上传区 ---------- */
[class*="upload"], [class*="drop"] { transition: border-color 0.18s ease, background 0.18s ease; }

/* ---------- 图片预览弹层 ---------- */
img { user-select: none; }