/* 2026-10-23 · 「浅蓝科技」主题
 *
 * 配色思路（撞色而非同类堆叠）：
 *   - 主色：浅蓝 #1E6FE0 + 更浅的蓝底 #F2F8FF / #E7F1FF，占比约 70%；
 *   - 撞色：珊瑚橙 #FF7A45（浅蓝的互补色方向），只用在强调点/悬停/徽标，占比约 10%；
 *   - 点缀：青色 #19C3E6 接主按钮渐变，做出科技感的冷光；
 *   - 墨色：#0A2340 做正文，保证浅底上 AA 对比度。
 * 动效只做「轻」：入场浮现、悬停抬升、按钮扫光、背景柔光漂移；
 * 全部内容在 prefers-reduced-motion 下静止。
 */

:root {
  --tb-bg: #F2F8FF;
  --tb-bg-2: #E6F1FF;
  --tb-surface: #FFFFFF;
  --tb-ink: #0A2340;
  --tb-ink-2: #4A6480;
  --tb-ink-3: #5B7590;
  --tb-primary: #1E6FE0;
  --tb-primary-deep: #0B4AA8;
  --tb-primary-soft: #E7F1FF;
  --tb-line: #D5E6F8;
  --tb-accent: #FF7A45;
  --tb-accent-2: #FFC24B;
  --tb-cyan: #19C3E6;
  --tb-ok: #0F8A5F;
  --tb-warn: #A9660A;
  --tb-bad: #C0362C;
  --tb-radius: 16px;
  --tb-shadow: 0 1px 2px rgba(10, 35, 64, .04), 0 10px 30px rgba(30, 111, 224, .10);
  --tb-ring: 0 0 0 3px rgba(30, 111, 224, .16);
}

/* 页面底层：浅蓝渐变 + 蓝/珊瑚两团柔光，缓慢漂移 */
body { background: var(--tb-bg); }
body::before {
  content: "";
  position: fixed;
  inset: -10vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42vmax 32vmax at 12% 8%, rgba(25, 195, 230, .18), transparent 62%),
    radial-gradient(38vmax 30vmax at 88% 12%, rgba(255, 122, 69, .13), transparent 60%),
    radial-gradient(50vmax 40vmax at 50% 100%, rgba(30, 111, 224, .12), transparent 65%),
    linear-gradient(180deg, #F8FCFF, #EAF4FF 60%, #F2F8FF);
  animation: tb-aurora 26s ease-in-out infinite alternate;
}
@keyframes tb-aurora {
  0%   { transform: translate3d(-1.2%, -0.8%, 0) scale(1.02); }
  50%  { transform: translate3d(1.4%, 0.6%, 0) scale(1.06); }
  100% { transform: translate3d(-0.6%, 1.2%, 0) scale(1.03); }
}

/* 入场：卡片依次浮现 */
@keyframes tb-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.card, .form-card, .stat, .kpi, .panel { animation: tb-rise .55s cubic-bezier(.22, .9, .28, 1) both; }
.card:nth-child(2), .stat:nth-child(2), .kpi:nth-child(2) { animation-delay: .05s; }
.card:nth-child(3), .stat:nth-child(3), .kpi:nth-child(3) { animation-delay: .1s; }
.card:nth-child(4), .stat:nth-child(4), .kpi:nth-child(4) { animation-delay: .15s; }
.card:nth-child(5), .stat:nth-child(5), .kpi:nth-child(5) { animation-delay: .2s; }
.card:nth-child(n+6) { animation-delay: .24s; }

/* 悬停：轻微抬起 + 蓝色光晕 */
.card, .stat, .kpi { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(30, 111, 224, .14);
  border-color: #C7DEF8;
}

/* 主按钮：蓝→青渐变 + 扫光（珊瑚橙做角标点缀） */
.btn {
  position: relative;
  overflow: hidden;
  border: 0;
  background: linear-gradient(135deg, #093E8C, #1E6FE0);
  box-shadow: 0 8px 18px rgba(30, 111, 224, .22);
}
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
}
.btn:hover::after { animation: tb-sheen .8s ease; }
.btn:hover { transform: translateY(-1px); }
@keyframes tb-sheen { to { left: 130%; } }

/* 导航/表格/输入框的轻交互 */
.top nav a { transition: color .18s, background .18s, box-shadow .18s; }
.top nav a:hover { box-shadow: inset 0 0 0 1px rgba(30, 111, 224, .18); }
tbody tr { transition: background .15s; }
tbody tr:hover { background: #F3F9FF; }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: var(--tb-ring); border-color: #8FC0FF; }

/* 撞色小标签：珊瑚橙，只用于「新/重点」提示 */
.tb-accent, .badge-accent {
  color: #C2410C;
  background: #FFF1EA;
  border: 1px solid #FFD2BF;
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .card, .form-card, .stat, .kpi, .panel { animation: none; }
  .btn::after { display: none; }
  .card:hover, .btn:hover { transform: none; }
}