/* ============================================================
 * 时薪透视 · 三端设计令牌（H5 / PC / 后台 共用）
 * 视觉基线继承小程序：主蓝 #1866d4 + 强调橙 #ff7a29 + 浅灰底 #f4f6f9
 * 字体全部为开源可商用（系统栈优先命中思源黑体 / Noto Sans SC），
 * 不做 @font-face 本地化，避免体积与授权风险。
 * ============================================================ */

:root {
  /* ---------- 品牌色 ---------- */
  --brand-50:  #eff5ff;
  --brand-100: #dbe8fc;
  --brand-200: #bcd6f8;
  --brand-300: #8fbcff;
  --brand-400: #4a9bff;
  --brand-500: #1866d4;
  --brand-600: #1259bb;
  --brand-700: #0e3f88;
  --brand-800: #0b2f66;

  --accent-50:  #fff4ea;
  --accent-100: #ffe6d2;
  --accent-300: #ffb066;
  --accent-500: #ff7a29;
  --accent-600: #e5641a;

  /* ---------- 中性色 ---------- */
  --ink-900: #0a1220;
  --ink-800: #16202e;
  --ink-700: #26313f;
  --ink-600: #3d4a5c;
  --ink-500: #5b6b80;
  --ink-400: #8b97a8;
  --ink-300: #b3bcc9;
  --ink-200: #d4dbe5;

  --line:      #e6ebf3;
  --line-soft: #f1f4f8;
  --bg:        #f4f6f9;
  --bg-2:      #eef2f7;
  --card:      #ffffff;

  /* ---------- 语义色 ---------- */
  --good:      #10a56a;
  --good-bg:   #e8f8f1;
  --warn:      #e08a00;
  --warn-bg:   #fff6e6;
  --bad:       #e5484d;
  --bad-bg:    #fdeced;

  /* ---------- 深色区（PC hero / 后台深色侧栏） ---------- */
  --deep-900: #050b16;
  --deep-800: #08111f;
  --deep-700: #0d1d33;
  --deep-600: #14304f;
  --deep-line: rgba(255, 255, 255, .08);
  --deep-text: rgba(255, 255, 255, .92);
  --deep-text-2: rgba(255, 255, 255, .58);
  --deep-text-3: rgba(255, 255, 255, .38);

  /* ---------- 圆角 ---------- */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   22px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ---------- 阴影（分层，越重要越深） ---------- */
  --sh-1: 0 1px 2px rgba(16, 37, 66, .04), 0 2px 8px rgba(16, 37, 66, .04);
  --sh-2: 0 2px 6px rgba(16, 37, 66, .05), 0 12px 28px -10px rgba(16, 37, 66, .12);
  --sh-3: 0 8px 24px rgba(16, 37, 66, .07), 0 32px 64px -20px rgba(16, 37, 66, .18);
  --sh-brand: 0 6px 20px -4px rgba(24, 102, 212, .40);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .06);

  /* ---------- 动效 ---------- */
  --ease:      cubic-bezier(.22, 1, .36, 1);     /* 主曲线：快起慢收 */
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-back: cubic-bezier(.34, 1.4, .64, 1);   /* 轻微回弹，只用于小元素 */
  --t-fast: 140ms;
  --t:      220ms;
  --t-slow: 420ms;

  /* ---------- 字体 ---------- */
  --font: "PingFang SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei",
          system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "DIN Alternate", "SF Mono", ui-monospace, "Roboto Mono", Consolas, monospace;

  /* ---------- 布局 ---------- */
  --w-pc: 1280px;      /* PC 内容最大宽 */
  --w-pc-wide: 1440px; /* 大屏可放宽 */
  --h5: 390px;         /* H5 设计基准宽 */
  --nav-h: 64px;
  --side-w: 232px;     /* 后台侧栏 */
  --rail-w: 60px;      /* 后台图标栏 */
}

/* ============================================================
 * Reset
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-800);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--brand-200); color: var(--brand-800); }

/* 滚动条：细、淡、不抢视线 */
* { scrollbar-width: thin; scrollbar-color: var(--ink-200) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ink-200);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-300); background-clip: content-box; }

/* ============================================================
 * 排版工具
 * ============================================================ */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mono { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.t-xs   { font-size: 11px; line-height: 1.5; }
.t-sm   { font-size: 12px; line-height: 1.55; }
.t-md   { font-size: 14px; }
.t-lg   { font-size: 16px; }
.t-xl   { font-size: 20px; }
.t-2xl  { font-size: 26px; }
.t-3xl  { font-size: 34px; }

.w-500 { font-weight: 500; }
.w-600 { font-weight: 600; }
.w-700 { font-weight: 700; }

.c-ink-800 { color: var(--ink-800); }
.c-ink-600 { color: var(--ink-600); }
.c-ink-500 { color: var(--ink-500); }
.c-ink-400 { color: var(--ink-400); }
.c-brand   { color: var(--brand-500); }
.c-accent  { color: var(--accent-500); }
.c-good    { color: var(--good); }
.c-bad     { color: var(--bad); }

.tabular { font-variant-numeric: tabular-nums; }

/* ============================================================
 * 卡片
 * ============================================================ */
.card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  border: 1px solid var(--line-soft);
}
.card-pad { padding: 20px 22px; }
.card-hover {
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
  border-color: var(--line);
}

/* 卡片标题：左侧 4px 渐变竖条，继承小程序 .card-h */
.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.card-title .tt {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-800);
  letter-spacing: -.01em;
}
.card-title .tt::before {
  content: '';
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-500), var(--brand-400));
  margin-right: 9px;
}
.card-title .ts { font-size: 12px; color: var(--ink-400); }

/* ============================================================
 * 按钮
 * ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: all var(--t) var(--ease);
  position: relative;
  overflow: hidden;
}
.btn:active { transform: scale(.975); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-400), var(--brand-500) 55%, var(--brand-600));
  color: #fff;
  box-shadow: var(--sh-brand);
}
.btn-primary:hover {
  box-shadow: 0 8px 26px -4px rgba(24, 102, 212, .52);
  transform: translateY(-1px);
}

.btn-ghost {
  background: var(--card);
  color: var(--ink-700);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--brand-300); color: var(--brand-500); background: var(--brand-50); }

.btn-quiet { background: var(--bg-2); color: var(--ink-600); }
.btn-quiet:hover { background: var(--line); color: var(--ink-800); }

.btn-sm { height: 30px; padding: 0 12px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn-lg { height: 46px; padding: 0 26px; font-size: 15px; border-radius: var(--r-lg); }

/* ============================================================
 * 标签
 * ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  background: var(--brand-50);
  color: var(--brand-600);
  white-space: nowrap;
}
.tag-gray   { background: var(--line-soft); color: var(--ink-400); }
.tag-orange { background: var(--accent-50); color: var(--accent-600); }
.tag-good   { background: var(--good-bg); color: var(--good); }
.tag-warn   { background: var(--warn-bg); color: var(--warn); }
.tag-bad    { background: var(--bad-bg); color: var(--bad); }
.tag-solid  { background: var(--brand-500); color: #fff; }
.tag-deep   { background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .82); }

/* 状态圆点 */
.dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-good { background: var(--good); box-shadow: 0 0 0 3px rgba(16, 165, 106, .14); }
.dot-warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(224, 138, 0, .14); }
.dot-bad  { background: var(--bad);  box-shadow: 0 0 0 3px rgba(229, 72, 77, .14); }
.dot-live { background: var(--good); animation: beath 2.2s var(--ease-soft) infinite; }

@keyframes beath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 165, 106, .34); }
  50%      { box-shadow: 0 0 0 5px rgba(16, 165, 106, 0); }
}

/* ============================================================
 * 条形 / 进度
 * ============================================================ */
.bar-wrap { height: 6px; background: var(--line-soft); border-radius: var(--r-pill); overflow: hidden; }
.bar {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand-400), var(--brand-500));
  transition: width var(--t-slow) var(--ease);
}
.bar.orange { background: linear-gradient(90deg, var(--accent-300), var(--accent-500)); }
.bar.good   { background: linear-gradient(90deg, #4fd3a0, var(--good)); }

/* ============================================================
 * 分段控件（继承小程序 .seg）
 * ============================================================ */
.seg {
  display: inline-flex;
  background: var(--bg-2);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 2px;
}
.seg .it {
  padding: 6px 14px;
  font-size: 12.5px;
  color: var(--ink-500);
  border-radius: var(--r-sm);
  transition: all var(--t) var(--ease);
  white-space: nowrap;
}
.seg .it:hover { color: var(--ink-800); }
.seg .it.on {
  background: var(--card);
  color: var(--brand-500);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(16, 37, 66, .10);
}

/* ============================================================
 * 入场动画（配合 IntersectionObserver）
 * ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* 逐条延迟 */
.reveal[data-d="1"] { transition-delay: 60ms; }
.reveal[data-d="2"] { transition-delay: 120ms; }
.reveal[data-d="3"] { transition-delay: 180ms; }
.reveal[data-d="4"] { transition-delay: 240ms; }
.reveal[data-d="5"] { transition-delay: 300ms; }
.reveal[data-d="6"] { transition-delay: 360ms; }

/* ============================================================
 * 可访问性：焦点可见（鼠标点击不显示，键盘导航显示）
 * ============================================================ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
  border-radius: 6px;
}
/* 深色区用亮色焦点环 */
.hero :focus-visible, .side :focus-visible, .footer :focus-visible {
  outline-color: #8fbcff;
}

/* ============================================================
 * 无障碍 / 动效降级
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}