/* ============================================================
   设计运营台 · 标准件库 — 第 1 层：令牌
   颜色 / 字体 / 间距 / 圆角 / 阴影 / 动效，全部收敛于此。
   ============================================================ */
:root {
  /* —— 色彩 · 松墨绿 —— */
  --pine-950: #0B211A;
  --pine-900: #0E2A22;
  --pine-800: #12362B;
  --pine-700: #154A37;
  --brand:    #176B4D;
  --brand-ink:#0F4A35;
  --brand-50: #E8F2EC;
  --brand-100:#D3E7DB;

  --ink:      #182019;
  --ink-2:    #42503F;
  --ink-3:    #6E7A6C;
  --ink-4:    #9AA395;

  --paper:    #F4F5F1;
  --surface:  #FFFFFF;
  --surface-2:#FAFBF7;
  --line:     #E4E7DF;
  --line-strong: #D2D8CB;

  --accent:   #C7502F;   /* 朱 · 仅用于异常与危险操作 */
  --accent-50:#FBEAE4;
  --info:     #3468D8;
  --info-50:  #E9EFFC;
  --amber:    #B67B14;
  --amber-50: #FAF1DA;
  --violet:   #7653C9;
  --violet-50:#F0EBFB;

  /* —— 字体 —— */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-16: 16px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px;
  --fs-hero: clamp(40px, 4.6vw, 60px);

  /* —— 间距 —— */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* —— 圆角 —— */
  --r-xs: 6px; --r-s: 10px; --r-m: 14px; --r-l: 20px; --r-pill: 999px;

  /* —— 阴影：只给浮层用 —— */
  --shadow-menu: 0 10px 32px -10px rgba(11,33,26,.30), 0 1px 4px rgba(11,33,26,.08);
  --shadow-pop:  0 24px 64px -20px rgba(11,33,26,.36), 0 4px 14px rgba(11,33,26,.08);
  --shadow-toast:0 16px 44px -14px rgba(11,33,26,.38);

  /* —— 动效 —— */
  --ease: cubic-bezier(.22,.9,.26,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: 130ms;
  --t-mid: 220ms;
  --t-slow: 360ms;
  --t-page: 420ms;

  /* —— 布局 —— */
  --rail-w: 216px;
  --topbar-h: 64px;
  --page-max: 1440px;
}

/* —— 基础重置 —— */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,p { margin: 0; }
h1 { font-size: var(--fs-24); font-weight: 620; letter-spacing: -.02em; line-height: 1.25; }
h2 { font-size: var(--fs-16); font-weight: 620; letter-spacing: -.01em; }
h3 { font-size: var(--fs-14); font-weight: 600; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img, svg { display: block; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--brand-100); color: var(--pine-950); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* —— 滚动条 —— */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* —— 数字：一律等宽对齐 —— */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: -.015em; }
.muted { color: var(--ink-3); }
.faint { color: var(--ink-4); }
.small { font-size: var(--fs-12); }
.mono-note { font-size: var(--fs-12); color: var(--ink-3); }

/* —— 工具类 —— */
.row { display: flex; align-items: center; gap: var(--sp-2); }
.row.wrap { flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.col { display: flex; flex-direction: column; gap: var(--sp-2); }
.grow { flex: 1; min-width: 0; }
.gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); }
.mt-2{margin-top:var(--sp-2);} .mt-4{margin-top:var(--sp-4);} .mt-6{margin-top:var(--sp-6);} .mt-8{margin-top:var(--sp-8);}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* —— 动效关键帧 —— */
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes scale-in { from { opacity: 0; transform: scale(.965) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes slide-right { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes slide-up { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 页面进入：每次路由只播一次，单一编排 */
.page { animation: fade-up var(--t-page) var(--ease-out) both; }
.page > .stagger > * { animation: rise-in 480ms var(--ease-out) both; }
.page > .stagger > *:nth-child(2) { animation-delay: 40ms; }
.page > .stagger > *:nth-child(3) { animation-delay: 80ms; }
.page > .stagger > *:nth-child(4) { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}