/* ============================================================
   leaf API · Aleph 主题
   ------------------------------------------------------------
   设计语言来源：os.inori.ai (NoriOS / Aleph landing)
   目标：new-api 前端（Tailwind v4 + shadcn/ui）
   原则：只覆盖设计令牌 + 精准命中既有类名，绝不泛化 !important
   ============================================================ */

/* ---------- 0. 强制暗色基底 ----------
   不依赖 cookie(vite-ui-theme)，用 CSS 直接锁死暗色。
   只作用于 :root 令牌，不动任何组件结构。            */
:root,
html.light,
html.dark {
  /* 核心面 */
  --background: #05070a;
  --foreground: #cfdde5;

  /* 卡片与浮层 */
  --card: #090e14;
  --card-foreground: #cfdde5;
  --popover: #090e14;
  --popover-foreground: #cfdde5;

  /* 主色：Aleph 淡青 */
  --primary: #7fd4e8;
  --primary-foreground: #05070a;

  /* 次级 */
  --secondary: #12202b;
  --secondary-foreground: #b9d5e2;

  /* 弱化文字 */
  --muted: #0d151d;
  --muted-foreground: #7d93a3;

  /* 强调 */
  --accent: #10212c;
  --accent-foreground: #cfdde5;

  /* 边框与输入 */
  --border: rgba(127, 212, 232, .16);
  --input: rgba(127, 212, 232, .16);
  --ring: #7fd4e8;

  /* 状态色（保持语义可辨，但降饱和以融入冷调） */
  --destructive: #e0655f;
  --destructive-foreground: #fdf3f2;
  --success: #5fb98a;
  --success-foreground: #04120b;
  --warning: #d8a95c;
  --warning-foreground: #170f02;
  --info: #7fb4d4;
  --info-foreground: #04121a;
  --neutral: #7d93a3;
  --neutral-foreground: #05070a;

  /* 侧边栏 */
  --sidebar: #070b10;
  --sidebar-foreground: #cfdde5;
  --sidebar-accent: #10212c;
  --sidebar-accent-foreground: #cfdde5;
  --sidebar-border: rgba(127, 212, 232, .14);
  --sidebar-primary: #7fd4e8;
  --sidebar-primary-foreground: #05070a;
  --sidebar-ring: #7fd4e8;

  /* 图表 */
  --chart-1: #7fd4e8;
  --chart-2: #4f9fb8;
  --chart-3: #a8e6f2;
  --chart-4: #2f6b80;
  --chart-5: #cfeef7;

  /* 表格 */
  --table-header-bg: #070b10;
  --table-row: #090e14;
  --table-disabled: #0a1017;

  /* 近直角——Aleph 特征 */
  --radius: .25rem;
  --radius-sm: .125rem;
  --radius-md: .25rem;
}

/* ---------- 1. 基底与字体 ---------- */
html,
body {
  background-color: #05070a !important;
  color: #cfdde5;
}

/* 等宽字体打底，符合 Aleph 的技术感 */
body {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
               Monaco, Consolas, "Liberation Mono", monospace !important;
  -webkit-font-smoothing: antialiased;
}

/* 标题走衬线，形成「技术 + 叙事」的对比 */
h1, h2, h3, h4,
.text-3xl, .text-4xl, .text-5xl, .text-6xl {
  font-family: "Newsreader", "Bodoni Moda", Georgia,
               "Songti SC", "LXGW WenKai", "Noto Serif SC", serif !important;
  letter-spacing: -.01em;
}

/* ---------- 2. 渐变文字 → 淡青 ----------
   命中 Tailwind 的渐变变量，保持 -webkit-text-fill-color:transparent
   不变，避免文字被「吃掉」。                        */
.from-blue-400 {
  --tw-gradient-from: #6fc9de !important;
  --tw-gradient-stops: var(--tw-gradient-via-stops,
    var(--tw-gradient-position),
    #6fc9de var(--tw-gradient-from-position),
    var(--tw-gradient-to)) !important;
}
.via-violet-400 {
  --tw-gradient-via: #a8e6f2 !important;
  --tw-gradient-via-stops: var(--tw-gradient-position),
    #6fc9de var(--tw-gradient-from-position),
    #a8e6f2 var(--tw-gradient-via-position),
    var(--tw-gradient-to) !important;
  --tw-gradient-stops: var(--tw-gradient-via-stops) !important;
}
.to-purple-500 {
  --tw-gradient-to: #2f8ba6 !important;
}

/* ---------- 3. 顶栏 ----------
   原为 fixed 透明层，加毛玻璃与底边线。             */
header.fixed {
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
header.fixed::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(127, 212, 232, .22), transparent);
  pointer-events: none;
}

/* ---------- 4. 链接与导航态 ---------- */
a.text-muted-foreground:hover {
  color: #a8e6f2 !important;
}

/* ---------- 5. 表单与输入 ---------- */
input, textarea, select {
  background-color: #0a1017 !important;
  border-color: rgba(127, 212, 232, .18) !important;
  color: #cfdde5 !important;
}
input::placeholder, textarea::placeholder {
  color: #62798a !important;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(127, 212, 232, .42) !important;
  box-shadow: 0 0 0 3px rgba(127, 212, 232, .12) !important;
}

/* ---------- 6. 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #05070a; }
::-webkit-scrollbar-thumb {
  background: #16242f;
  border-radius: 5px;
  border: 2px solid #05070a;
}
::-webkit-scrollbar-thumb:hover { background: #1e3341; }

/* ---------- 7. 选中态 ---------- */
::selection {
  background: rgba(127, 212, 232, .26);
  color: #edf6fa;
}

/* ---------- 8. 细节：发光描边（Aleph 标志性）---------- */
[data-slot="card"],
.semi-card {
  border: 1px solid rgba(127, 212, 232, .12);
  box-shadow: 0 0 0 1px rgba(5, 7, 10, .6),
              0 8px 32px -12px rgba(0, 0, 0, .8);
}

/* ---------- 8. 硬编码浅色兜底 ----------
   组件里存在 bg-white / bg-black 这类不走令牌的颜色类，
   必须单独点名覆盖，否则会露出浅色块。               */
.bg-white,
.bg-white\/95,
.bg-white\/90,
.bg-white\/80,
.bg-white\/70,
.bg-white\/60,
.bg-white\/50,
[class*="bg-white/"] {
  background-color: rgba(9, 14, 20, .92) !important;
}

.bg-black,
[class*="bg-black/"] {
  background-color: rgba(5, 7, 10, .92) !important;
}

/* 浅灰系（tab 底、代码块底、骨架屏） */
.bg-gray-50, .bg-gray-100, .bg-gray-200,
.bg-slate-50, .bg-slate-100, .bg-slate-200,
.bg-zinc-50, .bg-zinc-100,
.bg-neutral-50, .bg-neutral-100 {
  background-color: #0a1017 !important;
}

.bg-gray-800, .bg-gray-900, .bg-slate-800, .bg-slate-900,
.bg-zinc-800, .bg-zinc-900, .bg-neutral-800, .bg-neutral-900 {
  background-color: #0a1017 !important;
}

/* ---------- 9. 圆角统一为近直角 ----------
   Aleph 的语言是 2-3px 硬边，把 oversized 圆角压下来。 */
.rounded-2xl, .rounded-3xl { border-radius: .375rem !important; }
.rounded-xl               { border-radius: .3125rem !important; }

/* ---------- 10. 阴影与描边 ---------- */
[class*="shadow-["] {
  box-shadow: 0 12px 40px -20px rgba(0, 0, 0, .9),
              0 0 0 1px rgba(127, 212, 232, .08) !important;
}

/* ---------- 11. 卡片插入动画 ----------
   覆盖两类卡片，因为本站这两套卡片写的类名完全不同：

     ① 排行榜 /console / 模型广场的 shadcn 卡片
        类名含 bg-card（卡片语义 token --card）

     ② 「裸卡片」兜底 —— 只对不带 bg-card 的模型卡生效

   ⚠️ new-api 大版本升级会换掉卡片的类名写法，两个实例就各是一种：

     版本           模型卡类名关键片段                     边框怎么写
     v1.0.0-rc.25   group relative flex flex-col ...      border
                    rounded-xl border
     v1.0.0-rc.37   group/card bg-card text-card-...      ring-1
                    flex flex-col ... rounded-xl ...
                    ring-1                              （改用 ring 了）

     rc.25 的模型卡**没有** bg-card，背景透明，靠父级网格露底色，
     所以只认 ① 的话这个页面一张卡都不会动 → 必须有 ② 兜底。
     rc.37 反过来，模型卡已经带上 bg-card，① 就能全接住。

   ② 的选择器是「rounded-xl + 有描边 + flex-col」：
     · rounded-xl 定位圆角卡容器；
     · 描边写成 :is([class*="border"], [class*="ring"])
       —— 不写死 border，才能同时覆盖 rc.25(border) 与
          rc.37(ring-1) 两种版本；
     · flex-col 是关键的一刀 —— 过滤侧栏 <aside> 也带
       rounded-xl + 描边，但它没有 flex-col，正好被排除掉；
     · 实测：rc.25 命中 20 个、rc.37 命中 0 个（已被 ① 全接住），
       两边都零误伤。

   为什么用 animation 而不是 transition：
     transition 需要「初始态 → 终态」两次样式写入才能触发。
     卡片是 React 挂载出来的，创建那一刻就已经是终态（opacity:1），
     没有初始态可言 —— 浏览器会把两帧合并，什么都不会发生。
     animation 的 from 关键帧自己带初始态，渲染一出现就跑。

   错峰用 nth-child：模型广场的卡片同属一个
     <div class="grid grid-cols-1 ... md:grid-cols-2 lg:grid-cols-3">
     是真正的同级兄弟，nth-child 直接可用，且不需要 JS 参与。
     桌面三列时，延迟按 DOM 顺序递增，形成从左上到右下的波浪。   */
@keyframes leaf-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ① shadcn 卡片 */
[class*="bg-card"] {
  animation: leaf-card-in .55s cubic-bezier(.22, .61, .36, 1) both;
}
[class*="bg-card"]:nth-child(2)   { animation-delay: 55ms; }
[class*="bg-card"]:nth-child(3)   { animation-delay: 110ms; }
[class*="bg-card"]:nth-child(4)   { animation-delay: 165ms; }
[class*="bg-card"]:nth-child(5)   { animation-delay: 220ms; }
[class*="bg-card"]:nth-child(n+6) { animation-delay: 275ms; }

/* ② 裸卡片兜底（rc.25 的模型卡走这条；rc.37 已被 ① 接住） */
div[class*="rounded-xl"]:is([class*="border"], [class*="ring"])[class*="flex-col"] {
  animation: leaf-card-in .55s cubic-bezier(.22, .61, .36, 1) both;
}
div[class*="rounded-xl"]:is([class*="border"], [class*="ring"])[class*="flex-col"]:nth-child(1)  { animation-delay: 0ms; }
div[class*="rounded-xl"]:is([class*="border"], [class*="ring"])[class*="flex-col"]:nth-child(2)  { animation-delay: 45ms; }
div[class*="rounded-xl"]:is([class*="border"], [class*="ring"])[class*="flex-col"]:nth-child(3)  { animation-delay: 90ms; }
div[class*="rounded-xl"]:is([class*="border"], [class*="ring"])[class*="flex-col"]:nth-child(4)  { animation-delay: 135ms; }
div[class*="rounded-xl"]:is([class*="border"], [class*="ring"])[class*="flex-col"]:nth-child(5)  { animation-delay: 180ms; }
div[class*="rounded-xl"]:is([class*="border"], [class*="ring"])[class*="flex-col"]:nth-child(6)  { animation-delay: 225ms; }
div[class*="rounded-xl"]:is([class*="border"], [class*="ring"])[class*="flex-col"]:nth-child(n+7) { animation-delay: 270ms; }

/* ---------- 12. 减弱动效偏好 ----------
   放在最后，保证它能压住上面所有动画。
   注意这里必须显式把 opacity/transform 复位：卡片动画用了
   `both` 填充模式，若只把时长压到 .01ms，元素仍可能停在
   起始帧（opacity:0）上 —— 那卡片就永远看不见了。   */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  [class*="bg-card"],
  div[class*="rounded-xl"]:is([class*="border"], [class*="ring"])[class*="flex-col"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}