/* ============================================================
   后台外壳的材质与动效（参考 scaffold-master「珍珠玻璃」）。

   只挂在 body.fx-app 下：登录页、HR 子系统这些不走 base.html 的页面不受影响。
   所有页面的白卡片在这里统一换材质，**不要回到各模板里逐个改 class**——
   66 个页面改一遍，迟早有漏的，看起来就像两套系统。

   动效只动 transform / opacity；开了「减少动态效果」一律不播（文件末尾）。
   ============================================================ */

:root {
  --fx-ease-reveal: cubic-bezier(.16, 1, .3, 1);   /* 显现：expo.out */
  --fx-ease-settle: cubic-bezier(.34, 1.56, .64, 1); /* 落定：back.out */
  --fx-blue: #2b5cff;
  --fx-e1: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px -6px rgba(16, 24, 40, .08);
  --fx-e2: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 32px -12px rgba(43, 92, 255, .22);
}

/* ── 背景：珍珠灰白 + 两团极淡的静态环境光 ── */
body.fx-app {
  background-color: #eef1f6;
  background-image:
    radial-gradient(900px 600px at 100% 0%, rgba(43, 92, 255, .07), transparent 60%),
    radial-gradient(800px 560px at 0% 100%, rgba(132, 204, 22, .06), transparent 60%);
  background-attachment: fixed;
  font-variant-numeric: tabular-nums;
}

/* ── 卡片材质：主内容区里的白卡统一柔和阴影、大一号圆角 ── */
body.fx-app main .bg-white.rounded-lg.border {
  border-radius: 14px;
  border-color: rgba(15, 23, 42, .07);
  box-shadow: var(--fx-e1);
}
/* 可点的卡片（看板上的流水卡）悬停浮起一点，告诉你它能点进去 */
body.fx-app main a.rounded-lg.border.block {
  transition: transform .34s var(--fx-ease-reveal), box-shadow .34s var(--fx-ease-reveal);
}
body.fx-app main a.rounded-lg.border.block:hover {
  transform: translateY(-2px);
  box-shadow: var(--fx-e2);
}

/* ── 侧栏：深色导航轨 + 顶部一道高光 ── */
body.fx-app #sidebar {
  background:
    radial-gradient(260px 200px at 0% 0%, rgba(43, 92, 255, .22), transparent 70%),
    linear-gradient(180deg, #1f2850 0%, #171e3d 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
}
#sidenav { position: relative; }
#sidenav .nav-link { position: relative; z-index: 1; }
#sidenav .nav-active { background: var(--fx-blue); color: #fff; }

/* 选中滑块：JS 就位后接管高亮，从上一页的位置滑到当前项。
   JS 没跑起来时上面那条 .nav-active 的底色兜底，菜单不会一项都不亮。 */
#navPill {
  position: absolute; left: 8px; right: 8px; top: 0; height: 0;
  border-radius: 10px; pointer-events: none; opacity: 0;
  background: linear-gradient(135deg, #3b6bff 0%, #2b5cff 55%, #4f46e5 100%);
  box-shadow: 0 6px 18px -6px rgba(43, 92, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .28);
}
#sidenav.fx-pill-on .nav-active { background: transparent; }
#sidenav.fx-pill-on #navPill { opacity: 1; }
#navPill.fx-glide {
  transition: transform .52s var(--fx-ease-reveal), height .52s var(--fx-ease-reveal);
}

/* ── 顶栏：半透明磨砂玻璃，内容滚过去时还能隐约看到 ── */
body.fx-app .fx-topbar {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: rgba(15, 23, 42, .07);
}

/* ── 按压反馈：按下收一点，松开带一点回弹（放 Discharge） ── */
body.fx-app button:not(:disabled),
body.fx-app #sidenav .nav-link,
.fx-press {
  transition-property: transform, background-color, color, box-shadow, opacity;
  transition-duration: .42s;
  transition-timing-function: var(--fx-ease-settle);
}
body.fx-app button:not(:disabled):active,
body.fx-app #sidenav .nav-link:active,
.fx-press:active {
  transform: scale(.955);
  transition-duration: .14s;
  transition-timing-function: ease-out;
}

/* 主按钮涟漪：从点击点化开 */
.fx-ripple {
  position: absolute; border-radius: 9999px; pointer-events: none;
  background: rgba(255, 255, 255, .45);
  transform: translate(-50%, -50%) scale(0);
  animation: fx-ripple .62s var(--fx-ease-reveal) forwards;
}
@keyframes fx-ripple {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ── 进场级联：主内容按阅读顺序浮现 ── */
.fx-rise {
  animation: fx-rise .62s var(--fx-ease-reveal) both;
  animation-delay: var(--fx-delay, 0ms);
}
/* 终态写 transform: none 而不是 translateY(0)：后者会给里面的 fixed 弹窗
   造一个新的定位参照，弹窗就跟着卡片走了 */
@keyframes fx-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ── 读数：逐位滚动落定（结 Crystallize） ── */
.fx-num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fx-digit {
  display: inline-block; height: 1.2em; line-height: 1.2em;
  overflow: hidden; vertical-align: text-bottom;
}
.fx-digit > span {
  display: block;
  transition: transform 1.1s var(--fx-ease-reveal);
  transition-delay: var(--fx-delay, 0ms);
}
.fx-digit > span > span { display: block; height: 1.2em; }

/* ── 进度条：第一名的条上周期性扫过一道高光（宿主需 overflow:hidden） ── */
.fx-sheen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: fx-sheen 5.5s var(--fx-ease-reveal) var(--fx-sheen-delay, 0ms) infinite;
}
@keyframes fx-sheen {
  0%   { transform: translateX(-100%); }
  28%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ── 登录页：神经网络画布 + 卡片轻倾 ── */
.fx-neural { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fx-tilt { transition: transform .5s var(--fx-ease-reveal); transform-style: preserve-3d; will-change: transform; }
.fx-spin {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.15em; margin-right: .4em;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
  animation: fx-spin .7s linear infinite;
}
@keyframes fx-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .fx-rise, .fx-ripple, .fx-sheen::after { animation: none !important; }
  #navPill.fx-glide, .fx-digit > span, .fx-tilt { transition: none !important; }
  body.fx-app main a.rounded-lg.border.block:hover { transform: none; }
}