/* ===================================================================
   czrouter theme — 定制皮肤，经 Nginx sub_filter 注入 <head>
   设计语言移植自 A7m0spHere/dsh-phl (PHL)：冷调近中性 + azure 强调色、
   桌面工具级密度、hairline 分隔、克制短动效、尊重 prefers-reduced-motion。
   机制：New API 前端是 shadcn/ui + Tailwind，全部颜色由 :root/.dark 的
   CSS 变量驱动，因此只需重定义变量即可整套重着色，不触碰编译后的 hash 类。
   =================================================================== */

/* PHL 色板换算成 New API 用到的语义 token（亮色 = 中性冷灰 + azure） */
:root {
  --radius: 0.75rem;                 /* 收紧默认 1rem 的圆润感 → 更利落的工具质感 */

  --background: #f4f6f9;             /* 冷调画布，非纯白 */
  --foreground: #171b21;
  --card: #ffffff;
  --card-foreground: #171b21;
  --popover: #ffffff;
  --popover-foreground: #171b21;

  --primary: #2f6fed;                /* azure，替换 New API 的天蓝 #3ea4ec */
  --primary-foreground: #ffffff;

  --secondary: #e9edf3;
  --secondary-foreground: #233046;
  --muted: #eef1f5;
  --muted-foreground: #626b78;
  --accent: #eaf1ff;
  --accent-foreground: #1b3c6e;

  --border: #e3e8ef;
  --input: #d7dee8;
  --ring: #2f6fed;
}

/* 深色优先：整套切换为 PHL dark（近黑冷调 + 提亮 azure） */
.dark {
  --background: #0d1016;
  --foreground: #e9edf3;
  --card: #151922;
  --card-foreground: #e9edf3;
  --popover: #171c26;
  --popover-foreground: #e9edf3;

  --primary: #4d8bff;                /* 深色下提亮，保证对比度 */
  --primary-foreground: #0a1220;

  --secondary: #1d2430;
  --secondary-foreground: #cbd5e6;
  --muted: #1a202b;
  --muted-foreground: #8a95a6;
  --accent: #1e2a44;
  --accent-foreground: #cfe0ff;

  --border: #232b38;
  --input: #2a3444;
  --ring: #4d8bff;
}

/* PHL 缓动令牌 */
:root {
  --cz-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --cz-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* 字体：优先 Inter（New API 已用 font-inter），补中文字栈与抗锯齿 */
html { font-feature-settings: "cv11", "ss01"; text-rendering: optimizeLegibility; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* 选中态用品牌色淡底（PHL ::selection 手感） */
::selection { background: color-mix(in srgb, var(--primary) 24%, transparent); }

/* 细滚动条（桌面工具风） */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--foreground) 20%, transparent) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--foreground) 16%, transparent);
  border-radius: 999px; border: 3px solid transparent; background-clip: content-box;
  transition: background 160ms var(--cz-ease);
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--foreground) 30%, transparent); background-clip: content-box; }

/* ---------------------------------------------------------------
   认证页（/sign-in, /sign-up）深度重设计
   标记：boot.js 会给 <html> 加 .cz-auth 类，所有针对性样式挂它下面，
   这样后台界面只吃到变量层的统一重配色，布局零风险。
   --------------------------------------------------------------- */

/* 认证页背景：从"裸透明"变成有层次的品牌场景 */
html.cz-auth body {
  background:
    radial-gradient(90% 60% at 82% -8%, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 55%),
    radial-gradient(70% 55% at 10% 110%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 50%),
    var(--background);
}

/* 顶部左上角 logo 文字品牌化（默认绝对定位，保留） */
html.cz-auth a[href="/"] { font-weight: 650; letter-spacing: -0.01em; }

/* 卡片本体：默认透明无边框 → 做成实化的玻璃浮层 */
html.cz-auth form.grid.gap-4 {
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 0.5rem);
  padding: 2rem;
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset,
    0 18px 50px -18px color-mix(in srgb, #000 55%, transparent);
}

/* 输入框：加高、聚焦更明显、占位更克制 */
html.cz-auth input.border-input,
html.cz-auth .border-input {
  height: 2.75rem;
  border-radius: calc(var(--radius) - 0.1rem);
  background: color-mix(in srgb, var(--background) 60%, transparent);
  transition: border-color 150ms var(--cz-ease), box-shadow 150ms var(--cz-ease), background 150ms var(--cz-ease);
}
html.cz-auth input.border-input:focus,
html.cz-auth .border-input:focus-within {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 28%, transparent);
}

/* 主按钮（登录 / 注册）：品牌渐变 + 悬停上浮 + 按压回落 */
html.cz-auth button[type="submit"],
html.cz-auth .bg-primary,
html.cz-auth form.grid.gap-4 > button {
  height: 2.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 100%, #fff 12%),
    var(--primary));
  border: 1px solid color-mix(in srgb, var(--primary) 78%, #000);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--primary) 70%, transparent);
  transition: transform 140ms var(--cz-ease), box-shadow 140ms var(--cz-ease), filter 140ms var(--cz-ease);
}
html.cz-auth button[type="submit"]:hover,
html.cz-auth form.grid.gap-4 > button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--primary) 78%, transparent);
}
html.cz-auth button[type="submit"]:active { transform: translateY(0); }

/* 入场动画：卡片上浮淡入，表单内容错峰 */
@keyframes cz-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.cz-auth form.grid.gap-4 { animation: cz-rise 480ms var(--cz-ease) both; }
html.cz-auth a[href="/"] { animation: cz-rise 420ms var(--cz-ease) both; }
html.cz-auth form.grid.gap-4 > * { animation: cz-rise 520ms var(--cz-ease) both; }
html.cz-auth form.grid.gap-4 > *:nth-child(1) { animation-delay: 60ms; }
html.cz-auth form.grid.gap-4 > *:nth-child(2) { animation-delay: 120ms; }
html.cz-auth form.grid.gap-4 > *:nth-child(3) { animation-delay: 180ms; }

/* 减少动效偏好：全部动画/过渡归零 */
@media (prefers-reduced-motion: reduce) {
  html.cz-auth *,
  html.cz-auth *::before,
  html.cz-auth *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------
   首页（/）：隐藏 New API 默认营销 hero（大标题/演示卡片/应用图标区），
   替换为 boot.js 注入的 #cz-home-hero 定制版面。
   --------------------------------------------------------------- */
html.cz-home .min-h-svh > section { display: none !important; }
html.cz-home .min-h-svh {
  background:
    radial-gradient(70% 55% at 78% -10%, color-mix(in srgb, var(--primary) 16%, transparent) 0%, transparent 55%),
    radial-gradient(50% 45% at -5% 105%, color-mix(in srgb, var(--primary) 10%, transparent) 0%, transparent 50%),
    var(--background);
}

#cz-home-hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: 6rem 1.5rem 4rem;
}
#cz-home-hero .czh-inner {
  width: 100%; max-width: 72rem; margin: 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem;
}
#cz-home-hero .czh-badge {
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  padding: .3rem .7rem; border-radius: 999px;
}
#cz-home-hero .czh-title {
  margin: 0;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.05; letter-spacing: -0.03em; font-weight: 680;
  color: var(--foreground);
}
#cz-home-hero .czh-sub {
  margin: 0; max-width: 34rem;
  font-size: 1.02rem; line-height: 1.75; color: var(--muted-foreground);
}
#cz-home-hero .czh-actions { display: flex; gap: .75rem; margin-top: .5rem; flex-wrap: wrap; }
#cz-home-hero .czh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.75rem; padding: 0 1.4rem; border-radius: var(--radius);
  font-size: .95rem; font-weight: 600; text-decoration: none;
  transition: transform 140ms var(--cz-ease), box-shadow 140ms var(--cz-ease),
              filter 140ms var(--cz-ease), background 140ms var(--cz-ease);
}
#cz-home-hero .czh-btn-primary {
  color: var(--primary-foreground);
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 100%, #fff 12%), var(--primary));
  border: 1px solid color-mix(in srgb, var(--primary) 78%, #000);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--primary) 70%, transparent);
}
#cz-home-hero .czh-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
#cz-home-hero .czh-btn-ghost {
  color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 4%, transparent);
  border: 1px solid var(--border);
}
#cz-home-hero .czh-btn-ghost:hover { background: color-mix(in srgb, var(--foreground) 8%, transparent); }
#cz-home-hero .czh-endpoint {
  margin-top: 1.25rem;
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .9rem;
  background: color-mix(in srgb, var(--card) 78%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius);
  backdrop-filter: blur(8px);
  max-width: 100%;
}
#cz-home-hero .czh-ep-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-foreground); white-space: nowrap;
}
#cz-home-hero .czh-ep-url {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: .86rem; color: var(--foreground); overflow-x: auto; white-space: nowrap;
}
#cz-home-hero .czh-copy {
  flex-shrink: 0; cursor: pointer;
  font-size: .78rem; font-weight: 500;
  color: var(--muted-foreground);
  background: transparent; border: 1px solid var(--border);
  border-radius: calc(var(--radius) - .3rem); padding: .28rem .6rem;
  transition: color 140ms var(--cz-ease), border-color 140ms var(--cz-ease);
}
#cz-home-hero .czh-copy:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
#cz-home-hero .czh-badge,
#cz-home-hero .czh-title,
#cz-home-hero .czh-sub,
#cz-home-hero .czh-actions,
#cz-home-hero .czh-endpoint { animation: cz-rise 520ms var(--cz-ease) both; }
#cz-home-hero .czh-title { animation-delay: 70ms; }
#cz-home-hero .czh-sub { animation-delay: 140ms; }
#cz-home-hero .czh-actions { animation-delay: 210ms; }
#cz-home-hero .czh-endpoint { animation-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
  #cz-home-hero * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------
   首页统计条（50+ 上游服务适配 / 100+ 模型计费支持 …）删除
   它是 .min-h-svh 的直接子 div（带 border-y），不带 section，所以上面那条
   「隐藏默认营销 section」的规则盖不到它——按 2026-09-17 要求整条隐藏。
   --------------------------------------------------------------- */
html.cz-home .min-h-svh > .border-y { display: none !important; }

/* ===================================================================
   背景壁纸层（2026-09-17 新增，可开关；同日改版为「淡化」而非「虚化」）
   · 设计逻辑参考 https://new.xinjianya.top/ ：背景图**不虚化**，靠低透明度
     融进页面底色——画面看得清，又不抢内容。所以这里用 opacity 与 body 的
     底色混合，而不是 blur+蒙版（后者会糊到"什么都看不见"）。
   · 构图：原图左上角有 DeepSeek 字样与中文标语，正压在 hero 文字上会打架，
     因此放大到 165% + 取景右移，把那些文字推出画面（--cz-wall-zoom/pos-x）。
   · html.cz-wall 由 boot.js 按 localStorage['cz-wall'] 挂到 <html>（默认开），
     右下角浮动胶囊就是开关；教程页共用同一个键，两处状态一致。
   · 站点 2026-09-17 起**强制浅色**（boot.js forceLight + 隐藏主题切换按钮），
     壁纸只按亮色调；要更淡改 --cz-wall-opacity，想柔化可把 --cz-wall-blur 调 4~8px。
   =================================================================== */
:root {
  --cz-wall-image: url("/brand/wallpaper.jpg");
  --cz-wall-opacity: 0.42;           /* 淡化程度：越低越淡（参考站用 0.4） */
  --cz-wall-zoom: 165%;              /* 放大倍数（高度口径，竖屏也能铺满） */
  --cz-wall-pos-x: 78%;              /* 横向取景位置：避开原图左侧文字 */
  --cz-wall-blur: 0px;               /* 默认不虚化 */
}

html.cz-wall body::before {
  content: "";
  position: fixed;
  inset: calc(-2px - var(--cz-wall-blur) * 3);   /* 留出虚化所需的出血边（不虚化时即 -2px） */
  z-index: 0;                                    /* 内容之下：#root 在 body::before 之后绘制 */
  pointer-events: none;
  background-image: var(--cz-wall-image);
  background-size: auto var(--cz-wall-zoom);
  background-position: var(--cz-wall-pos-x) center;
  background-repeat: no-repeat;
  filter: blur(var(--cz-wall-blur));
  opacity: var(--cz-wall-opacity);
}

/* 顶层容器让出"底色"，壁纸才透得出来（body 的底色要留着给壁纸做混合底，别透明） */
html.cz-wall .min-h-svh,
html.cz-wall .min-h-screen { background-color: transparent; }
html.cz-wall.cz-home .min-h-svh {
  background-image:
    radial-gradient(70% 55% at 78% -10%, color-mix(in srgb, var(--primary) 16%, transparent) 0%, transparent 55%),
    radial-gradient(50% 45% at -5% 105%, color-mix(in srgb, var(--primary) 10%, transparent) 0%, transparent 50%);
}

/* 控制台（登录后）：外壳与侧栏让位，主面板留 74% 底色保读数 */
html.cz-wall [class*="sidebar-wrapper"] { background-color: transparent !important; }
html.cz-wall .bg-sidebar { background-color: color-mix(in srgb, var(--sidebar) 82%, transparent) !important; }
html.cz-wall main.bg-background { background-color: color-mix(in srgb, var(--background) 74%, transparent) !important; }

/* 强制浅色（站级决定 2026-09-17）：导航里的主题入口隐藏（实测首页按钮用
   title="切换主题"、控制台用 aria-label="打开主题设置"，故按属性包含匹配，
   且限定在 header/nav 里，避免误伤设置页里同名的区块）；
   类名层面的压制在 boot.js 的 forceLight() 里做（含 MutationObserver 兜底） */
header [title*="主题"],
header [aria-label*="主题"],
nav [title*="主题"],
nav [aria-label*="主题"] { display: none !important; }

/* 右下角开关：胶囊按钮，开=品牌色，关=灰 */
#cz-wall-toggle {
  position: fixed; right: 14px; bottom: 14px; z-index: 60;
  display: inline-flex; align-items: center; gap: .42rem;
  height: 2.05rem; padding: 0 .75rem;
  font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: var(--muted-foreground);
  background: color-mix(in srgb, var(--card) 82%, transparent);
  border: 1px solid var(--border); border-radius: 999px;
  backdrop-filter: blur(10px);
  cursor: pointer;
  box-shadow: 0 8px 22px -14px color-mix(in srgb, #000 70%, transparent);
  transition: color 150ms var(--cz-ease), border-color 150ms var(--cz-ease),
              background 150ms var(--cz-ease), transform 150ms var(--cz-ease);
}
#cz-wall-toggle:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); transform: translateY(-1px); }
#cz-wall-toggle .czw-dot {
  width: .48rem; height: .48rem; border-radius: 999px;
  background: currentColor; opacity: .5;
  transition: opacity 150ms var(--cz-ease), box-shadow 150ms var(--cz-ease);
}
#cz-wall-toggle[aria-pressed="true"] { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 38%, var(--border)); }
#cz-wall-toggle[aria-pressed="true"] .czw-dot { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
/* 窄屏：抬到固定页脚（备案号那行）上方，避免压字 */
@media (max-width: 640px) { #cz-wall-toggle { bottom: 3.6rem; } }

/* 若某次前端升级导致 hash 类变动，这里用 .cz-auth 作为兜底总开关，
   后台界面因不带该类而完全不受影响。 */