/* =====================================================================
   refine.css —— 质感层（2026-10-06）
   刻意做成"加一层"而不是"改原来"：app.css 一行不动，这里只用更高优先级的
   选择器与 CSS 变量覆盖。这样万一某处不好看，删掉这个文件就回到原样。

   做四件事：
     1 色相收敛：主色一条（靛蓝），中性色做成有温度的灰阶（不再纯白纯灰）
     2 层次：卡片用"极淡渐变 + 1px 描边 + 双层阴影"，靠层次而不是靠边框线
     3 字：数字一律 tabular-nums（日期、倒计时、统计对齐不打飘）；标题收紧字距
     4 动效：hover 抬升、按下回弹、弹窗淡入缩放、toast 滑入、卡片入场交错
        并且整体尊重 prefers-reduced-motion（晕动的人能关掉全部动画）
   ===================================================================== */

:root {
  /* —— 主色：一条靛蓝 + 它的深浅梯 —— */
  --agh-brand: #3B5BDB;
  --agh-brand-soft: #EDF2FF;
  --agh-brand-line: #D0D9FF;
  --agh-brand-deep: #2F44AD;

  /* —— 中性：带一点蓝灰，比纯灰贵；纯白换成微暖白，大面积不刺眼 —— */
  --agh-ink: #16181D;
  --agh-ink-2: #3B4048;
  --agh-ink-3: #6B7280;
  --agh-ink-4: #9AA2AF;
  --agh-line: #E7EAF0;
  --agh-line-2: #DDE2EC;
  --agh-surface: #FBFCFE;
  --agh-surface-2: #F4F6FA;
  --agh-canvas: #EEF1F6;

  /* —— 语义色：把原来偏"警告黄橙"的调子压深一点，红与跳过仍然一眼分得开 —— */
  --agh-ok: #2F9E44;
  --agh-warn: #E8590C;
  --agh-bad: #D6336C;
  --agh-info: #1971C2;

  /* —— 空间与圆角：统一梯度，别这里 6 那里 10 —— */
  --agh-r-sm: 8px;
  --agh-r: 12px;
  --agh-r-lg: 16px;
  --agh-gap: 14px;

  /* —— 阴影：双层（贴地的软影 + 一圈极淡的描边影）才不像贴纸 —— */
  --agh-sh-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --agh-sh-2: 0 2px 6px rgba(16, 24, 40, .05), 0 8px 20px rgba(16, 24, 40, .07);
  --agh-sh-3: 0 10px 30px rgba(16, 24, 40, .10), 0 2px 8px rgba(16, 24, 40, .06);
  --agh-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ----------  画布与文字  ---------- */
body {
  background:
    radial-gradient(1200px 620px at 12% -8%, #F7F9FF 0%, rgba(247, 249, 255, 0) 62%),
    radial-gradient(900px 520px at 100% 0%, #F2F6FB 0%, rgba(242, 246, 251, 0) 58%),
    var(--agh-canvas) !important;
  color: var(--agh-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .card-title, b { letter-spacing: -0.012em; }

/* 数字一律等宽对齐：日期、倒计时、统计数、报名费不再左右打飘 */
.tag, .small, .hint, td, li, .stat-num, .card b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ----------  卡片：靠层次，不靠描边线  ---------- */
.card {
  border: 1px solid var(--agh-line) !important;
  border-radius: var(--agh-r) !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFF 100%) !important;
  box-shadow: var(--agh-sh-1) !important;
  transition: box-shadow .22s var(--agh-ease), transform .22s var(--agh-ease),
              border-color .22s var(--agh-ease);
}
.card:hover {
  box-shadow: var(--agh-sh-2) !important;
  border-color: var(--agh-line-2) !important;
}

/* ----------  按钮：主/次/幽灵三档统一手感  ---------- */
.btn-primary {
  background: linear-gradient(180deg, #4C6EF5 0%, var(--agh-brand) 100%) !important;
  border-color: var(--agh-brand-deep) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, var(--agh-sh-1) !important;
  transition: transform .12s var(--agh-ease), box-shadow .18s var(--agh-ease),
              filter .18s var(--agh-ease);
}
.btn-primary:hover { filter: saturate(1.06) brightness(1.03); box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, var(--agh-sh-2) !important; }
.btn-primary:active { transform: translateY(1px) scale(.995); }

.btn-soft, .btn-ghost2 {
  transition: transform .12s var(--agh-ease), background-color .16s var(--agh-ease),
              border-color .16s var(--agh-ease);
}
.btn-soft:active, .btn-ghost2:active { transform: translateY(1px); }

/* 键盘可达性：只在 Tab 出来时画环，鼠标点击不画（点了也闪环很难受） */
:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 91, 219, .22) !important;
  border-radius: var(--agh-r-sm) !important;
}

/* ----------  标签：更克制的小胶囊  ---------- */
.tag {
  border-radius: 999px !important;
  padding: 1px 9px !important;
  letter-spacing: .01em;
}

/* ----------  弹窗：淡入 + 轻微缩放 + 背景模糊  ---------- */
.modal-mask { transition: opacity .18s var(--agh-ease) !important; }
.modal-mask > * {
  animation: agh-pop .22s var(--agh-ease) both;
  box-shadow: var(--agh-sh-3) !important;
  border-radius: var(--agh-r-lg) !important;
}
@keyframes agh-pop {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ----------  toast：滑入 + 底部进度条（知道它会自己消失） ---------- */
#agh-toast-host > *, .agh-toast {
  animation: agh-slide .26s var(--agh-ease) both !important;
  border-radius: var(--agh-r) !important;
  box-shadow: var(--agh-sh-3) !important;
}
@keyframes agh-slide {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}

/* ----------  滚动条：细、淡，跟随悬停  ---------- */
* { scrollbar-width: thin; scrollbar-color: #C9D0DC transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: #C9D0DC; border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #AEB8C8; background-clip: content-box; }

/* ----------  交互层用到的类（由 refine.js 挂/摘） ---------- */

/* 卡片入场：交错淡入，只在第一次进视口时来一次 */
.agh-reveal { opacity: 0; transform: translateY(10px); }
.agh-reveal.agh-in {
  opacity: 1; transform: none;
  transition: opacity .42s var(--agh-ease), transform .42s var(--agh-ease);
}

/* 粘性工具栏：往下滚时筛选条贴在顶上并加一条毛玻璃 */
.agh-sticky {
  position: sticky; top: 8px; z-index: 6;
  backdrop-filter: saturate(1.2) blur(8px);
}
.agh-sticky.agh-stuck { box-shadow: var(--agh-sh-2); }

/* 紧凑/舒适密度：一行开关，记在本地 */
.agh-compact .card { padding: 10px 12px !important; }
.agh-compact .row.gap8, .agh-compact .row { gap: 6px !important; }
.agh-compact .mt8 { margin-top: 6px !important; }
.agh-compact .mt12 { margin-top: 9px !important; }
.agh-compact .small { font-size: 12.2px; }

/* 按钮忙态：点了没反应最难受，给它一个转圈 */
.agh-busy { pointer-events: none; opacity: .72; position: relative; }
.agh-busy::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  margin-top: -5px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .55); border-top-color: #fff;
  animation: agh-spin .7s linear infinite;
}
@keyframes agh-spin { to { transform: rotate(360deg); } }

/* 回到顶部 */
#agh-top {
  position: fixed; right: 18px; bottom: 20px; z-index: 40;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .86); border: 1px solid var(--agh-line-2);
  box-shadow: var(--agh-sh-2); color: var(--agh-ink-2);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s var(--agh-ease), transform .2s var(--agh-ease);
}
#agh-top.agh-show { opacity: 1; transform: none; pointer-events: auto; }
#agh-top:hover { background: #fff; color: var(--agh-brand); }

/* 快捷键提示条 */
#agh-kbd {
  position: fixed; left: 14px; bottom: 14px; z-index: 40;
  font-size: 11.5px; color: var(--agh-ink-3);
  background: rgba(255, 255, 255, .8); border: 1px solid var(--agh-line);
  border-radius: 999px; padding: 3px 10px; box-shadow: var(--agh-sh-1);
  backdrop-filter: blur(6px);
}
#agh-kbd kbd {
  font: inherit; background: var(--agh-surface-2); border: 1px solid var(--agh-line-2);
  border-bottom-width: 2px; border-radius: 5px; padding: 0 4px; margin: 0 2px;
}

/* 晕动/省电：一键关掉所有动效 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .agh-reveal { opacity: 1 !important; transform: none !important; }
}
.agh-nomotion *, .agh-nomotion *::before, .agh-nomotion *::after {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
}
.agh-nomotion .agh-reveal { opacity: 1 !important; transform: none !important; }