/* =========================================================================
   阿越云验证 · 设计系统
   -------------------------------------------------------------------------
   全部手写，不依赖任何 CDN / 框架。
   设计基调：Indigo→Violet 主色、8pt 栅格、分层阴影、微交互、双主题。

   命名约定：
     --c-*   颜色令牌
     --s-*   间距令牌（space）
     --r-*   圆角令牌（radius）
     --f-*   字号令牌（font）
     --sh-*  阴影令牌（shadow）
     --t-*   过渡令牌（transition）
   ========================================================================= */

/* ── 设计令牌 ─────────────────────────────────────────────────────────── */
:root {
  /* 主色阶：indigo */
  --c-primary-50:  #eef2ff;
  --c-primary-100: #e0e7ff;
  --c-primary-200: #c7d2fe;
  --c-primary-300: #a5b4fc;
  --c-primary-400: #818cf8;
  --c-primary-500: #6366f1;
  --c-primary-600: #4f46e5;
  --c-primary-700: #4338ca;
  --c-primary-800: #3730a3;
  --c-primary-900: #312e81;

  /* 辅助色 */
  --c-violet: #8b5cf6;
  --c-cyan:   #06b6d4;
  --c-emerald:#10b981;
  --c-amber:  #f59e0b;
  --c-rose:   #f43f5e;
  --c-blue:   #3b82f6;

  /* 语义色 */
  --c-success:      #10b981;
  --c-success-bg:   #ecfdf5;
  --c-success-text: #047857;
  --c-warning:      #f59e0b;
  --c-warning-bg:   #fffbeb;
  --c-warning-text: #b45309;
  --c-danger:       #f43f5e;
  --c-danger-bg:    #fff1f2;
  --c-danger-text:  #be123c;
  --c-info:         #3b82f6;
  --c-info-bg:      #eff6ff;
  --c-info-text:    #1d4ed8;

  /* 中性阶 */
  --c-white:   #ffffff;
  --c-gray-25: #fcfcfd;
  --c-gray-50: #f8fafc;
  --c-gray-100:#f1f5f9;
  --c-gray-200:#e2e8f0;
  --c-gray-300:#cbd5e1;
  --c-gray-400:#94a3b8;
  --c-gray-500:#64748b;
  --c-gray-600:#475569;
  --c-gray-700:#334155;
  --c-gray-800:#1e293b;
  --c-gray-900:#0f172a;
  --c-gray-950:#020617;

  /* 表面 */
  --c-bg:           var(--c-gray-50);
  --c-surface:      var(--c-white);
  --c-surface-alt:  var(--c-gray-25);
  --c-border:       var(--c-gray-200);
  --c-border-soft:  var(--c-gray-100);
  --c-text:         var(--c-gray-800);
  --c-text-soft:    var(--c-gray-500);
  --c-text-faint:   var(--c-gray-400);
  --c-text-strong:  var(--c-gray-900);

  /* 间距（8pt 栅格 + 4 的半阶） */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;

  /* 圆角 */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 9999px;

  /* 字号 */
  --f-xs: 11px;
  --f-sm: 12px;
  --f-base: 14px;
  --f-md: 15px;
  --f-lg: 17px;
  --f-xl: 20px;
  --f-2xl: 24px;
  --f-3xl: 30px;
  --f-4xl: 38px;
  --f-5xl: 48px;

  /* 字重 */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* 行高 */
  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* 阴影（分层，用色带而不只是黑） */
  --sh-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 6px rgba(15, 23, 42, 0.04);
  --sh-md: 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 20px -4px rgba(15, 23, 42, 0.08);
  --sh-lg: 0 4px 8px rgba(15, 23, 42, 0.04), 0 16px 40px -8px rgba(15, 23, 42, 0.12);
  --sh-xl: 0 8px 16px rgba(15, 23, 42, 0.06), 0 32px 64px -16px rgba(15, 23, 42, 0.18);
  --sh-primary: 0 4px 14px -2px rgba(99, 102, 241, 0.35);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* 过渡 */
  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring: 480ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* 布局 */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 60px;
  --content-max: 1440px;

  /* 字体栈：优先系统 UI，中文回退到苹方/微软雅黑 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
               "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
}

/* ── 深色主题 ─────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  /* 中性阶整体反转：先重定义基础灰阶，
     这样 --c-bg / --c-border 等间接引用会自动跟随，
     不需要在深色块里逐条重复声明。 */
  --c-white:   #131a2e;
  --c-gray-25: #161e33;
  --c-gray-50: #0f1526;
  --c-gray-100:#1a2237;
  --c-gray-200:#232c45;
  --c-gray-300:#2d3a58;
  --c-gray-400:#5d6b87;
  --c-gray-500:#8a97b1;
  --c-gray-600:#a9b5cc;
  --c-gray-700:#c6d0e2;
  --c-gray-800:#dbe3f4;
  --c-gray-900:#f1f5fd;
  --c-gray-950:#ffffff;

  --c-bg:          #0b1020;
  --c-surface:     #131a2e;
  --c-surface-alt: #0f1526;
  --c-border:      #232c45;
  --c-border-soft: #1a2237;

  --c-text:        #dbe3f4;
  --c-text-soft:   #8a97b1;
  --c-text-faint:  #5d6b87;
  --c-text-strong: #f1f5fd;

  --c-primary-50:  #1a2140;
  --c-primary-100: #1f2952;

  --c-success-bg:  #062b22;
  --c-success-text:#4ade9d;
  --c-warning-bg:  #2b1f05;
  --c-warning-text:#fbbf24;
  --c-danger-bg:   #2d0b14;
  --c-danger-text: #fb7185;
  --c-info-bg:     #0a1e3d;
  --c-info-text:   #60a5fa;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.25);
  --sh-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 20px -4px rgba(0, 0, 0, 0.45);
  --sh-lg: 0 4px 8px rgba(0, 0, 0, 0.35), 0 16px 40px -8px rgba(0, 0, 0, 0.55);
  --sh-xl: 0 8px 16px rgba(0, 0, 0, 0.4), 0 32px 64px -16px rgba(0, 0, 0, 0.65);
  --sh-primary: 0 4px 14px -2px rgba(99, 102, 241, 0.5);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ── 重置 ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--f-base);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--t-base), color var(--t-base);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--c-text-strong);
  letter-spacing: -0.011em;
}

p { margin: 0; }
a { color: var(--c-primary-600); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-primary-700); }

img, svg, video, canvas { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { cursor: pointer; background: none; border: none; padding: 0; }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--c-primary-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* 自定义滚动条 */
* { scrollbar-width: thin; scrollbar-color: var(--c-gray-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--c-gray-300);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--c-gray-400); background-clip: content-box; }
[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #2d3a58; background-clip: content-box; }

::selection { background: var(--c-primary-200); color: var(--c-primary-900); }
[data-theme="dark"] ::selection { background: var(--c-primary-800); color: var(--c-primary-100); }

/* ── 工具类 ───────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.stack { display: flex; flex-direction: column; }
.row   { display: flex; flex-direction: row; align-items: center; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); }
.grow { flex: 1 1 auto; min-width: 0; }
.wrap { flex-wrap: wrap; }
.center { align-items: center; justify-content: center; }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }

.mt-0 { margin-top: 0; }   .mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); } .mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); } .mb-6 { margin-bottom: var(--s-6); }

.text-xs   { font-size: var(--f-xs); }
.text-sm   { font-size: var(--f-sm); }
.text-base { font-size: var(--f-base); }
.text-lg   { font-size: var(--f-lg); }
.text-xl   { font-size: var(--f-xl); }

.text-soft  { color: var(--c-text-soft); }
.text-faint { color: var(--c-text-faint); }
.text-strong{ color: var(--c-text-strong); }
.text-success { color: var(--c-success-text); }
.text-danger  { color: var(--c-danger-text); }
.text-warning { color: var(--c-warning-text); }

.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}