/* ==========================================================================
   青鹿卡密 · 设计系统 (Design Tokens / Reset / Typography / Utilities)
   ========================================================================== */

:root {
  /* ---------- 品牌色 ---------- */
  --brand: #4f46e5;
  --brand-700: #4338ca;
  --brand-600: #4f46e5;
  --brand-500: #6366f1;
  --brand-400: #818cf8;
  --brand-200: #c7d2fe;
  --brand-soft: #eef0ff;
  --brand-soft-2: #e0e7ff;
  --brand-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #a855f7 100%);
  --brand-grad-soft: linear-gradient(135deg, rgba(79, 70, 229, .12), rgba(168, 85, 247, .12));

  /* ---------- 语义色 ---------- */
  --ok: #10b981;
  --ok-soft: #e6f8f1;
  --warn: #f59e0b;
  --warn-soft: #fef5e7;
  --danger: #ef4444;
  --danger-soft: #fdecec;
  --info: #3b82f6;
  --info-soft: #e8f1fe;
  --cyan: #06b6d4;
  --cyan-soft: #e2f8fc;
  --purple: #8b5cf6;
  --purple-soft: #f2ecfe;

  /* ---------- 中性色 ---------- */
  --bg: #f4f5fa;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, #eef0ff 0%, transparent 60%),
             radial-gradient(900px 500px at -10% 0%, #e6fbf5 0%, transparent 55%);
  --surface: #ffffff;
  --surface-2: #fafbfe;
  --surface-3: #f3f5fa;
  --surface-hover: #f7f8fd;
  --text: #0f172a;
  --text-2: #4b5675;
  --text-3: #8b93ab;
  --text-4: #aab1c5;
  --border: #e9ebf3;
  --border-2: #f1f3f8;
  --border-strong: #d9dced;

  /* ---------- 侧边栏（始终深色） ---------- */
  --side-bg: #0d1224;
  --side-bg-2: #111834;
  --side-text: #a8b0cc;
  --side-text-active: #ffffff;
  --side-hover: rgba(255, 255, 255, .06);
  --side-active: linear-gradient(90deg, rgba(99, 102, 241, .28), rgba(99, 102, 241, .04));
  --side-border: rgba(255, 255, 255, .07);

  /* ---------- 尺寸 ---------- */
  --sidebar-w: 248px;
  --sidebar-w-mini: 76px;
  --topbar-h: 66px;
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius: 13px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* ---------- 阴影 ---------- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow: 0 4px 16px -4px rgba(16, 24, 40, .09), 0 2px 6px -2px rgba(16, 24, 40, .05);
  --shadow-lg: 0 18px 40px -12px rgba(16, 24, 40, .18), 0 6px 16px -8px rgba(16, 24, 40, .1);
  --shadow-brand: 0 10px 26px -10px rgba(79, 70, 229, .55);

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .18s;

  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei",
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, "Cascadia Code", monospace;
}

/* ============================ 暗色主题 ============================ */
[data-theme="dark"] {
  --brand-soft: rgba(99, 102, 241, .16);
  --brand-soft-2: rgba(99, 102, 241, .26);

  --ok-soft: rgba(16, 185, 129, .14);
  --warn-soft: rgba(245, 158, 11, .14);
  --danger-soft: rgba(239, 68, 68, .14);
  --info-soft: rgba(59, 130, 246, .14);
  --cyan-soft: rgba(6, 182, 212, .14);
  --purple-soft: rgba(139, 92, 246, .14);

  --bg: #080c18;
  --bg-grad: radial-gradient(1100px 560px at 100% -12%, rgba(79, 70, 229, .18) 0%, transparent 60%),
             radial-gradient(900px 500px at -10% 0%, rgba(6, 182, 212, .1) 0%, transparent 55%);
  --surface: #0f1526;
  --surface-2: #131a2e;
  --surface-3: #18203a;
  --surface-hover: #18203a;
  --text: #eaeefb;
  --text-2: #a5aecb;
  --text-3: #6f7899;
  --text-4: #566080;
  --border: #1e2740;
  --border-2: #1a2238;
  --border-strong: #2a3554;

  --side-bg: #0a0f1e;
  --side-bg-2: #0e142a;
  --side-border: rgba(255, 255, 255, .06);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
  --shadow: 0 6px 20px -6px rgba(0, 0, 0, .6);
  --shadow-lg: 0 22px 48px -14px rgba(0, 0, 0, .75);
  --shadow-brand: 0 10px 26px -10px rgba(79, 70, 229, .7);
}

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

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, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: 0; }

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================ 滚动条 ============================ */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-4); background-clip: content-box; }

/* ============================ 排版工具 ============================ */
.t-xs { font-size: 11px; }
.t-sm { font-size: 12px; }
.t-base { font-size: 14px; }
.t-lg { font-size: 16px; }
.t-xl { font-size: 19px; }
.t-2xl { font-size: 24px; }
.t-3xl { font-size: 30px; }
.t-4xl { font-size: 38px; }

.fw-4 { font-weight: 400; }
.fw-5 { font-weight: 500; }
.fw-6 { font-weight: 600; }
.fw-7 { font-weight: 700; }
.fw-8 { font-weight: 800; }

.c-1 { color: var(--text); }
.c-2 { color: var(--text-2); }
.c-3 { color: var(--text-3); }
.c-brand { color: var(--brand-600); }
.c-ok { color: var(--ok); }
.c-warn { color: var(--warn); }
.c-danger { color: var(--danger); }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; letter-spacing: -.2px; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================ 布局工具 ============================ */
.row { display: flex; align-items: center; }
.row-top { display: flex; align-items: flex-start; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.center { justify-content: center; }
.end { justify-content: flex-end; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.shrink-0 { flex-shrink: 0; }

.g-2 { gap: 2px; } .g-4 { gap: 4px; } .g-6 { gap: 6px; } .g-8 { gap: 8px; }
.g-10 { gap: 10px; } .g-12 { gap: 12px; } .g-14 { gap: 14px; } .g-16 { gap: 16px; }
.g-18 { gap: 18px; } .g-20 { gap: 20px; } .g-24 { gap: 24px; } .g-28 { gap: 28px; }

.mt-2 { margin-top: 2px; } .mt-4 { margin-top: 4px; } .mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; }
.mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; }
.ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; }

.grid { display: grid; gap: 18px; }
.g-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-auto-260 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.g-auto-300 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.g-auto-340 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

/* ============================ 动画 ============================ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes slideRight { from { transform: translateX(100%); } to { transform: none; } }
@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes drawLine { from { stroke-dashoffset: var(--len, 1200); } to { stroke-dashoffset: 0; } }
@keyframes growBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.anim-up { animation: fadeUp .38s var(--ease-out) both; }
.anim-in { animation: fadeIn .25s var(--ease) both; }

.stagger > * { animation: fadeUp .42s var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .06s; }
.stagger > *:nth-child(3) { animation-delay: .1s; }
.stagger > *:nth-child(4) { animation-delay: .14s; }
.stagger > *:nth-child(5) { animation-delay: .18s; }
.stagger > *:nth-child(6) { animation-delay: .22s; }
.stagger > *:nth-child(7) { animation-delay: .26s; }
.stagger > *:nth-child(8) { animation-delay: .3s; }

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

/* ============================ 响应式断点辅助 ============================ */
.hide-lg { display: none; }
@media (max-width: 1400px) {
  .g-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .g-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .g-cols-2, .g-cols-3, .g-cols-4, .g-cols-5 { grid-template-columns: minmax(0, 1fr); }
}