/* ============================================================ 词元无限 · New API 面板皮肤 v3 宿主真相：Tailwind v4 + shadcn + TanStack Router（不是 Semi Design） v3 设计主张：数字优先（numerals-first） 计量数字都在 font-mono tabular-nums 节点里。皮肤把预算花在 数字的层次上，不花在卡片装饰上。v2 的玻璃拟态/辉光/悬浮已全部移除。 克莱因蓝 #002FA7（白底 10.69:1） 浅蓝 #3E6BE0（白底 4.79:1） 深蓝 #00227A（白底 13.91:1） ============================================================ */ /* token 覆盖：写在 body 而非 :root。 上游把 data-theme-preset 写到 document.body，自定义属性按继承链 就近解析，:root 会被 body 级预设打败。挂 body[data-theme-preset] 是刻意让品牌色赢过预设切换器。 代价：ConfigDrawer 的 10 个预设对主色不再生效（已知取舍）。 */ body, body[data-theme-preset] { --primary: oklch(0.3785 0.1954 263.23); --ring: oklch(0.5618 0.1854 265.07); /* chart 色阶按明度拉开，不全挤在一个色相上。 v2 把 1..5 全设成 263-271 色相，导致上游区分三张卡的唯一手段失效。 */ --chart-1: oklch(0.3785 0.1954 263.23); --chart-2: oklch(0.5618 0.1854 265.07); --chart-3: oklch(0.5600 0.1050 250.00); --chart-4: oklch(0.4600 0.1500 285.00); --chart-5: oklch(0.5400 0.0700 232.00); --overview-accent-1: oklch(0.3785 0.1954 263.23); --overview-accent-2: oklch(0.5618 0.1854 265.07); --overview-accent-3: oklch(0.5600 0.1050 250.00); --iw-klein: #002FA7; --iw-klein-deep: #00227A; --iw-blue-lite: #3E6BE0; } /* --accent 不再覆盖：v2 设的 oklch(0.7637 0.0832 270.56) = #9EB0E8， 白底仅 2.14:1，且 43 处 bg-accent/text-accent-foreground 配对使用 （下拉菜单、菜单栏），深色模式下白字压上去只有 2.05:1。 交给上游自己的值。 */ /* 深色模式：把品牌色换成能在深底上活的亮度，其余交还上游。 上游 .dark 加在 ，与 body 选择器不冲突，此处显式提亮。 */ html.dark body, html.dark body[data-theme-preset] { /* 全部实测 ≥4.5:1 on 深色卡片 #3D3D3D（注释为 hex 等价值与比值） */ --primary: oklch(0.7445 0.1195 263.67); /* #85ABF8 4.75:1 */ --ring: oklch(0.7445 0.1195 263.67); --chart-1: oklch(0.7445 0.1195 263.67); /* #85ABF8 4.75:1 */ --chart-2: oklch(0.7900 0.1050 262.00); /* #96BBFE 5.60:1 */ --chart-3: oklch(0.8350 0.0800 248.00); /* #A0CEFB 6.58:1 */ --chart-4: oklch(0.7600 0.1300 290.00); /* #B0A2FE 4.89:1 */ --chart-5: oklch(0.8100 0.0650 232.00); /* #97C9E4 6.10:1 */ --overview-accent-1: oklch(0.7445 0.1195 263.67); --overview-accent-2: oklch(0.7900 0.1050 262.00); --overview-accent-3: oklch(0.8350 0.0800 248.00); /* #85ABF8 是深色卡片(#3D3D3D)上仍达 AA 4.5:1 的最深蓝(4.75:1)， 保留最多品牌浓度。#6E9BF5 只有 3.97:1，不可用。 */ --iw-klein: #85ABF8; --iw-klein-deep: #A8C2FA; --iw-blue-lite: #8FB0F2; } /* ============================================================ 数字优先：这是 v3 的唯一「签名」处 计量数字用等宽 + 紧字距 + 品牌色，形成可并行识别的层次。 仅作用于 font-mono tabular-nums 节点（上游用它渲染所有度量值）。 ============================================================ */ [data-iw-route="dashboard"] [class*="font-mono"][class*="tabular-nums"] { color: var(--iw-klein) !important; font-weight: 700 !important; letter-spacing: -.03em !important; font-variant-numeric: tabular-nums slashed-zero !important; } /* 零值与占位破折号压低，避免「空」被误读成「坏」。 由 theme.js 打 data-iw-void 标记（textContent 为 — 或 0/¥0）。 */ [data-iw-route="dashboard"] [data-iw-void] { color: color-mix(in oklab, var(--iw-klein) 34%, transparent) !important; font-weight: 600 !important; } /* 页面唯一锚点：剩余额度。 由 theme.js 按 bg-[linear-gradient( 任意类识别并打标。 这是全页唯一放大的数字，其余卡片保持安静。 */ [data-iw-credit] [class*="font-mono"][class*="tabular-nums"], [data-iw-credit] [class*="text-2xl"], [data-iw-credit] [class*="text-3xl"] { font-size: 2.4rem !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -.035em !important; color: var(--iw-klein) !important; } [data-iw-credit] { border: 1px solid color-mix(in oklab, var(--iw-klein) 22%, transparent) !important; } /* 页面主标题（看板里是 h3，不是 h2 —— v2 写 h2 从未命中） */ [data-iw-route="dashboard"] h3[class*="font-semibold"], [data-iw-route="dashboard"] h3[class*="tracking-tight"] { color: var(--iw-klein-deep) !important; letter-spacing: -.015em !important; } /* 分段控件选中态：蓝底白字（此处白字是刻意的，9.53:1） */ [data-iw-route="dashboard"] [class*="bg-muted/6"] [class*="bg-background"][class*="shadow-sm"] { background: var(--iw-klein) !important; color: #FFFFFF !important; } /* ============================================================ 表格关键列：浅蓝标注，但不吃掉语义色 v2 用 td[...] * 后代通配 + !important，把 StatusBadge 的 text-destructive（失败=红）和 text-success（正常=绿）一起刷成蓝， 等于删掉了日志页最重要的扫读信号。此处用 :not() 放行语义色。 ============================================================ */ [data-slot="table-body"] td[data-column-id="created_at"], [data-slot="table-body"] td[data-column-id="token_name"], [data-slot="table-body"] td[data-column-id="model_name"], [data-slot="table-body"] td[data-column-id="quota"], [data-slot="table-body"] td[data-column-id="prompt_tokens"], [data-slot="table-body"] td[data-column-id="key"], [data-slot="table-body"] td[data-column-id="name"], [data-slot="table-body"] td[data-column-id="created_time"], [data-slot="table-body"] td[data-column-id="accessed_time"], [data-slot="table-body"] td[data-column-id="expired_time"] { color: var(--iw-blue-lite) !important; } [data-slot="table-body"] td[data-column-id="created_at"] *:not([class*="text-destructive"]):not([class*="text-success"]):not([class*="text-warning"]), [data-slot="table-body"] td[data-column-id="token_name"] *:not([class*="text-destructive"]):not([class*="text-success"]):not([class*="text-warning"]), [data-slot="table-body"] td[data-column-id="model_name"] *:not([class*="text-destructive"]):not([class*="text-success"]):not([class*="text-warning"]), [data-slot="table-body"] td[data-column-id="quota"] *:not([class*="text-destructive"]):not([class*="text-success"]):not([class*="text-warning"]), [data-slot="table-body"] td[data-column-id="prompt_tokens"] *:not([class*="text-destructive"]):not([class*="text-success"]):not([class*="text-warning"]) { color: var(--iw-blue-lite) !important; } /* 费用列用等宽紧字距，金额纵向可对齐比较 */ [data-slot="table-body"] td[data-column-id="quota"], [data-slot="table-body"] td[data-column-id="prompt_tokens"] { font-variant-numeric: tabular-nums slashed-zero !important; letter-spacing: -.02em !important; } /* ============================================================ 钱包统计卡：保留 v2 的层次（这是原版唯一有主张的地方） 加路由限定：v2 无限定，导致个人资料页 profile-header.tsx:166 的三列统计也被打标并套上余额待遇。 ============================================================ */ [data-iw-route="wallet"] [data-iw-wallet-stats] { border: 1px solid color-mix(in oklab, var(--iw-klein) 16%, transparent) !important; border-radius: 14px !important; overflow: hidden !important; } [data-iw-route="wallet"] [data-iw-wallet-stats] > div { padding: 1.7rem 1.5rem !important; } [data-iw-route="wallet"] [data-iw-wallet-stats] > div > div:nth-child(2) { font-size: 2rem !important; line-height: 1.15 !important; letter-spacing: -.03em !important; font-variant-numeric: tabular-nums slashed-zero !important; } [data-iw-route="wallet"] [data-iw-balance] { background: linear-gradient(135deg, #FFFFFF 0%, #EDF2FC 100%) !important; border-right: 1px solid color-mix(in oklab, var(--iw-klein) 20%, transparent) !important; } [data-iw-route="wallet"] [data-iw-balance] > div:nth-child(2) { color: var(--iw-klein) !important; font-size: 2.7rem !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -.035em !important; } [data-iw-route="wallet"] [data-iw-balance] > div:first-child { color: var(--iw-klein) !important; } /* 次要说明行：v2 用 rgba(0,47,167,.65) 合成后在渐变末端仅 3.79:1， 不达 AA。改用深蓝实色，白底 13.91:1。 */ [data-iw-route="wallet"] [data-iw-balance] > div:last-child { color: var(--iw-klein-deep) !important; } html.dark [data-iw-route="wallet"] [data-iw-balance] { background: color-mix(in oklab, var(--iw-klein) 14%, transparent) !important; } @media (max-width: 640px) { [data-iw-route="wallet"] [data-iw-wallet-stats] > div { padding: 1rem .85rem !important; } [data-iw-route="wallet"] [data-iw-wallet-stats] > div > div:nth-child(2) { font-size: 1.45rem !important; } [data-iw-route="wallet"] [data-iw-balance] > div:nth-child(2) { font-size: 1.85rem !important; } [data-iw-credit] [class*="font-mono"][class*="tabular-nums"], [data-iw-credit] [class*="text-2xl"], [data-iw-credit] [class*="text-3xl"] { font-size: 1.8rem !important; } } /* 减少动态效果：v3 无动画，此块仅为兜底 */ @media (prefers-reduced-motion: reduce) { [data-iw-credit], [data-iw-route="wallet"] [data-iw-wallet-stats] { transition: none !important; transform: none !important; } } /* ============================================================ 首页浮动导航条：加磨砂白底 原样式 header.fixed > nav 背景全透明、文字用 text-foreground（近黑）， 浮在深色 Hero 上时黑字压深蓝，几乎看不清。 这里给内层 nav 一个白色磨砂胶囊底，与主页浅色导航观感一致。 ============================================================ */ header.pointer-events-none.fixed > nav { pointer-events: auto; margin: .55rem auto 0 !important; max-width: 1180px !important; padding-left: 1rem !important; padding-right: .6rem !important; height: 3.25rem !important; border-radius: 999px !important; background: rgba(255, 255, 255, .82) !important; border: 1px solid color-mix(in oklab, var(--iw-klein, #002FA7) 12%, transparent) !important; box-shadow: 0 4px 20px rgba(0, 47, 167, .1), 0 1px 2px rgba(0, 47, 167, .06) !important; -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); } /* 导航文字：统一压到深墨色，保证白底上的对比度 */ header.pointer-events-none.fixed > nav a, header.pointer-events-none.fixed > nav button { color: #3A4150 !important; } header.pointer-events-none.fixed > nav a:hover, header.pointer-events-none.fixed > nav button:hover { color: var(--iw-klein, #002FA7) !important; background: color-mix(in oklab, var(--iw-klein, #002FA7) 8%, transparent) !important; } /* 当前页高亮 */ header.pointer-events-none.fixed > nav a.active { color: var(--iw-klein, #002FA7) !important; font-weight: 600 !important; } /* 品牌名保持最深 */ header.pointer-events-none.fixed > nav a.group { color: #0F0F0F !important; } /* 暗色模式：换成深色磨砂，浅字 */ .dark header.pointer-events-none.fixed > nav { background: rgba(0, 17, 51, .72) !important; border-color: rgba(255, 255, 255, .12) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, .35) !important; } .dark header.pointer-events-none.fixed > nav a, .dark header.pointer-events-none.fixed > nav button { color: rgba(255, 255, 255, .78) !important; } .dark header.pointer-events-none.fixed > nav a:hover, .dark header.pointer-events-none.fixed > nav button:hover { color: #fff !important; background: rgba(255, 255, 255, .1) !important; } .dark header.pointer-events-none.fixed > nav a.group { color: #fff !important; } .dark header.pointer-events-none.fixed > nav a.active { color: #A9C0FF !important; } /* 小屏：收窄留白，避免胶囊贴边 */ @media (max-width: 640px) { header.pointer-events-none.fixed > nav { margin-left: .6rem !important; margin-right: .6rem !important; border-radius: 1.1rem !important; } }