/* ai.lemongir.shop 控制台皮肤 v4 — 与落地页 v7 同源的 Apple 设计语言
   ------------------------------------------------------------------
   覆盖对象: new-api web (Tailwind v4 + base-ui), 全部颜色走 CSS 变量
   注入方式: nginx sub_filter 在 </head> 前插入 <link>
   优先级: 本文件为「无 @layer」样式, 天然高于 bundle 的 @layer theme/base
   设计基线: SF Pro 排版 / 苹果中性灰阶 / 红色仅压强调位 / 极淡分层阴影
   ------------------------------------------------------------------ */

/* ============ 1. 令牌层: 颜色 / 圆角 / 字体 ============ */
:root {
  --radius: 0.875rem;                    /* 14px, Apple 卡片圆角 */
  --app-header-height: 3.25rem;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --font-body: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, monospace;

  --background: #f5f5f7;
  --foreground: #1d1d1f;
  --card: #ffffff;
  --card-foreground: #1d1d1f;
  --popover: #ffffff;
  --popover-foreground: #1d1d1f;

  --primary: #f5333f;                    /* 品牌红 */
  --primary-foreground: #ffffff;
  --secondary: #f5f5f7;
  --secondary-foreground: #1d1d1f;
  --muted: #f5f5f7;
  --muted-foreground: #6e6e73;           /* Apple secondary label */
  --accent: rgba(245, 51, 63, .08);
  --accent-foreground: #d81f2c;

  --border: #d2d2d7;                     /* Apple separator */
  --input: #d2d2d7;
  --ring: #f5333f;
  --destructive: #d81f2c;
  --destructive-foreground: #ffffff;
  --success: #1d9e4b;
  --success-foreground: #ffffff;
  --warning: #d97706;
  --warning-foreground: #ffffff;
  --info: #0071e3;                       /* Apple 蓝, 仅信息态 */
  --info-foreground: #ffffff;
  --neutral: #86868b;
  --neutral-foreground: #1d1d1f;

  --sidebar: #fbfbfd;
  --sidebar-foreground: #1d1d1f;
  --sidebar-primary: #f5333f;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(245, 51, 63, .08);
  --sidebar-accent-foreground: #d81f2c;
  --sidebar-border: #d2d2d7;
  --sidebar-ring: #f5333f;

  /* 图表: 红色单色阶主导, 中性灰与功能色收尾 */
  --chart-1: #f5333f; --chart-2: #ff8a8a; --chart-3: #6e6e73;
  --chart-4: #1d9e4b; --chart-5: #0071e3;
  --overview-accent-1: #f5333f;
  --overview-accent-2: #6e6e73;
  --overview-accent-3: #0071e3;

  --skeleton-base: #ececf0;
  --skeleton-highlight: #f7f7f9;
  --table-row: #ffffff;
  --table-header: #fbfbfd;
}

.dark {
  --background: #000000;                 /* Apple 纯黑底 */
  --foreground: #f5f5f7;
  --card: #1d1d1f;
  --card-foreground: #f5f5f7;
  --popover: #2c2c2e;
  --popover-foreground: #f5f5f7;

  --primary: #ff5865;
  --primary-foreground: #ffffff;
  --secondary: #2c2c2e;
  --secondary-foreground: #f5f5f7;
  --muted: #2c2c2e;
  --muted-foreground: #a1a1a6;
  --accent: rgba(255, 88, 101, .16);
  --accent-foreground: #ff8a8a;

  --border: #38383a;
  --input: #38383a;
  --ring: #ff5865;
  --destructive: #ff5865;
  --success: #30d158;
  --warning: #ffd60a;
  --warning-foreground: #1d1d1f;
  --info: #0a84ff;
  --neutral: #8e8e93;
  --neutral-foreground: #f5f5f7;

  --sidebar: #1d1d1f;
  --sidebar-foreground: #f5f5f7;
  --sidebar-primary: #ff5865;
  --sidebar-accent: rgba(255, 88, 101, .16);
  --sidebar-accent-foreground: #ff8a8a;
  --sidebar-border: #38383a;
  --sidebar-ring: #ff5865;

  --chart-1: #ff5865; --chart-2: #ff9f9f; --chart-3: #a1a1a6;
  --chart-4: #30d158; --chart-5: #0a84ff;
  --overview-accent-1: #ff5865;
  --overview-accent-2: #a1a1a6;
  --overview-accent-3: #0a84ff;

  --skeleton-base: #2c2c2e;
  --skeleton-highlight: #38383a;
  --table-row: #1d1d1f;
  --table-header: #161618;
}

/* ============ 2. 排版: Apple 的字重与字距 ============ */
body {
  background: var(--background) !important;
  font-family: var(--font-sans);
  letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum" 1;
}

/* Apple 几乎不用 700+ 字重, 统一收敛到 600 并加负字距 */
h1, h2, h3, h4, h5,
.font-bold, .font-extrabold, .font-black, .font-semibold,
[class*="text-2xl"], [class*="text-3xl"], [class*="text-4xl"], [class*="text-5xl"],
[class*="text-[clamp"] {
  font-weight: 600 !important;
  letter-spacing: -.028em;
}
/* 大字号收更紧的字距 (Apple 排版规律: 字号越大, tracking 越负) */
h1, [class*="text-4xl"], [class*="text-5xl"], [class*="text-[clamp"] {
  letter-spacing: -.035em;
  line-height: 1.08;
}
/* 正文与说明文字放松行高, 提高可读性 */
p, .text-sm, .text-xs {
  letter-spacing: -.014em;
}
.text-muted-foreground, [class*="text-muted-foreground"] {
  letter-spacing: -.016em;
}
/* 等宽数字: 表格与统计不跳动 */
.font-mono, .tabular-nums, [class*="tabular-nums"], code, kbd, pre {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

/* ============ 3. 卡片: 无边框 + 极淡分层阴影 ============ */
[data-slot="card"],
.bg-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04) !important;
  border-color: transparent !important;
  transition: box-shadow .35s cubic-bezier(.32, .72, 0, 1),
              transform .35s cubic-bezier(.32, .72, 0, 1);
}
@media (hover: hover) {
  [data-slot="card"]:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, .09) !important;
    transform: translateY(-2px);
  }
}
.dark [data-slot="card"], .dark .bg-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4) !important;
}
.dark [data-slot="card"]:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, .6) !important;
}

/* 模型广场 / 排行榜的 section 卡: 同步为无边框浮起 */
section.bg-card,
aside.rounded-xl.border,
section.rounded-lg.border {
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04) !important;
  border-radius: var(--radius) !important;
}
.dark section.bg-card,
.dark aside.rounded-xl.border,
.dark section.rounded-lg.border {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4) !important;
}

/* ============ 4. 按钮: 药丸 + 实色 + 缩放反馈 ============ */
[data-slot="button"],
button[data-slot="button"] {
  border-radius: 980px !important;
  font-weight: 500 !important;
  letter-spacing: -.01em;
}
.bg-primary {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  box-shadow: none !important;
  transition: background .2s ease, transform .2s cubic-bezier(.32, .72, 0, 1);
}
.bg-primary:hover { background: #d81f2c !important; }
.dark .bg-primary:hover { background: #f5333f !important; }
@media (hover: hover) {
  .bg-primary:hover { transform: scale(1.02); }
}
/* 分段控件 / 标签页按钮保留小圆角, 不做药丸 */
[data-slot="collapsible-trigger"],
[role="tab"] {
  border-radius: 10px !important;
}

/* ============ 5. 玻璃拟态: 顶栏与侧栏 ============ */
[data-slot="sidebar"] {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background: rgba(251, 251, 253, .82) !important;
}
.dark [data-slot="sidebar"] {
  background: rgba(29, 29, 31, .82) !important;
}
/* 公开页顶栏: header > div 是实际的可见容器 */
header.fixed > div,
header[data-slot="header"] {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
header.fixed > div {
  background: rgba(245, 245, 247, .72);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.dark header.fixed > div {
  background: rgba(0, 0, 0, .66);
  border-bottom-color: rgba(255, 255, 255, .1);
}
/* 顶栏导航项: 与落地页一致的 hover 底色 */
header.fixed nav > div > a {
  transition: background .2s, color .2s;
}
header.fixed nav > div > a:hover {
  background: rgba(0, 0, 0, .05);
}
.dark header.fixed nav > div > a:hover {
  background: rgba(255, 255, 255, .09);
}

/* ============ 6. 表格: 发丝线 + 表头浅底 ============ */
[data-slot="table-container"] {
  border-radius: var(--radius);
}
[data-slot="table-header"] {
  background: var(--table-header);
}
[data-slot="table-header"] th {
  font-weight: 500 !important;
  font-size: 12.5px;
  letter-spacing: -.01em;
  color: var(--muted-foreground);
}
[data-slot="table"] tbody tr {
  transition: background .18s ease;
}
[data-slot="table"] tbody tr:hover {
  background: rgba(0, 0, 0, .022);
}
.dark [data-slot="table"] tbody tr:hover {
  background: rgba(255, 255, 255, .04);
}

/* ============ 7. 输入 / 选择: Apple 圆角 + 红色聚焦环 ============ */
input, textarea, select,
[data-slot="input"], [data-slot="select-trigger"],
[data-slot="input-group"] {
  border-radius: 10px !important;
}
input:focus-visible, textarea:focus-visible,
[data-slot="input"]:focus-visible,
[data-slot="select-trigger"]:focus-visible {
  outline: 3px solid rgba(245, 51, 63, .3) !important;
  outline-offset: 1px;
  border-color: var(--primary) !important;
}

/* ============ 8. 徽章 / 药丸 / 提示 ============ */
[data-slot="badge"], [data-slot="status-badge"], [data-slot="provider-badge"] {
  font-weight: 500 !important;
  letter-spacing: -.005em;
}
[data-slot="kbd"] {
  border-radius: 6px !important;
  font-size: 10.5px;
}
[data-slot="tooltip-content"],
[data-slot="popover-content"],
[data-slot="dropdown-menu-content"] {
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .14) !important;
  border-color: transparent !important;
}
.dark [data-slot="tooltip-content"],
.dark [data-slot="popover-content"],
.dark [data-slot="dropdown-menu-content"] {
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6) !important;
}
[data-slot="dialog-content"] {
  border-radius: 18px !important;
  box-shadow: 0 24px 68px rgba(0, 0, 0, .2) !important;
}

/* ============ 9. 顶部装饰渐层: 降到几乎不可见 ============ */
/* pricing / rankings 顶部有一层 opacity-20 的彩色渐层, 与苹果的纯净底冲突 */
.pointer-events-none.absolute.inset-x-0.top-0 {
  opacity: .07 !important;
}
.dark .pointer-events-none.absolute.inset-x-0.top-0 {
  opacity: .05 !important;
}

/* ============ 10. 滚动条: Apple overlay 风格 ============ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .22); border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .35); background-clip: content-box; }
.dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); background-clip: content-box; }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .35); background-clip: content-box; }

/* ============ 11. 无障碍 ============ */
:focus-visible {
  outline-color: var(--primary);
}
@media (prefers-reduced-motion: reduce) {
  [data-slot="card"], .bg-primary, [data-slot="table"] tbody tr {
    transition: none !important;
  }
  [data-slot="card"]:hover { transform: none !important; }
}

/* ============ 12. Hermes 修复: 卡片对齐/溢出 (2026-10-09) ============ */
/* 1) API 信息卡 mono 标签被 flex 压缩导致中文逐字竖排 → 禁止换行 */
.font-mono.font-semibold { white-space: nowrap; }
/* 2) 滚动列表底部留白, 防末条被卡片底边裁一半 */
[data-slot="scroll-area-viewport"] > div { padding-bottom: 6px; }
/* 3) 卡内 flex 列内容区 min-h-0, 让长列表(模型分组/公告)正确滚动而非溢出裁切 */
[class*="rounded-2xl"][class*="bg-card"] > div { min-height: 0; }
/* 4) 顶层两列/三列网格: 右列 align-self start, 消除 7~35px 顶边错位 */
.grid[class*="xl:grid-cols-"] > div:last-child { align-self: start; }