/* ==========================================================================
   GPTEAM Portal 视觉精修层
   加载顺序：必须最后引入，用于统一色板、阴影、排版与微交互。
   原则：只做视觉收敛，不改变布局结构与交互逻辑。
   ========================================================================== */

:root {
  /* 暖中性墨色轴（与 js/portal_theme.js 保持一致） */
  --ink-50: #faf9f7;
  --ink-100: #f5f4f1;
  --ink-200: #e9e7e2;
  --ink-300: #d8d4cc;
  --ink-400: #b0aaa0;
  --ink-500: #8a847a;
  --ink-600: #6b655c;
  --ink-700: #4d4842;
  --ink-800: #332f2b;
  --ink-900: #1f1c19;
  --ink-950: #141210;

  /* 统一缓动与时长 */
  --ease-refined: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 380ms;

  /* 阴影：以极淡描边为主，几乎不用投影。
     大范围投影会让界面显得"浮"，与极简取向冲突；
     只有真正悬浮于页面之上的层（弹窗）才允许投影。 */
  --sh-hairline: 0 0 0 1px rgba(31, 28, 25, .06);
  --sh-hairline-strong: 0 0 0 1px rgba(31, 28, 25, .12);
  --sh-soft: 0 0 0 1px rgba(31, 28, 25, .06);
  --sh-lifted: 0 0 0 1px rgba(31, 28, 25, .12);
  --sh-floating: 0 0 0 1px rgba(31, 28, 25, .08), 0 16px 48px -24px rgba(31, 28, 25, .22);
  /* 深色按钮：纯色扁平，无渐变、无内高光。
     渐变与高光属于拟物残留，与极简取向冲突。 */
  --ink-btn: #1f1c19;
  --ink-btn-hover: #302b26;
  --sh-inkbtn: none;
  --sh-inkbtn-hover: none;

  /* 兼容旧变量名，避免遗漏引用处回退到冷灰 */
  --portal-bg: var(--ink-50);
  --portal-surface: #ffffff;
  --portal-surface-soft: var(--ink-50);
  --portal-border: var(--ink-200);
  --portal-border-strong: var(--ink-300);
  --portal-text: var(--ink-900);
  --portal-text-soft: var(--ink-700);
  --portal-text-faint: var(--ink-500);
  --portal-text-muted: var(--ink-500);
  --portal-accent: var(--ink-900);
  --portal-shadow: var(--sh-floating);
  --portal-shadow-soft: var(--sh-soft);
}

html.dark {
  --ink-50: #211e1c;
  --ink-100: #1c1a17;
  --ink-200: rgba(180, 170, 155, .10);
  --ink-300: rgba(180, 170, 155, .18);
  --ink-400: #6b655c;
  --ink-500: #8a857a;
  --ink-600: #a8a29a;
  --ink-700: #b8b2a8;
  --ink-800: #c8c2b8;
  --ink-900: #d4cfc5;
  --ink-950: #e8e3d9;

  --sh-hairline: 0 0 0 1px rgba(180, 170, 155, .10);
  --sh-hairline-strong: 0 0 0 1px rgba(180, 170, 155, .20);
  --sh-soft: 0 0 0 1px rgba(180, 170, 155, .10);
  --sh-lifted: 0 0 0 1px rgba(180, 170, 155, .20);
  --sh-floating: 0 0 0 1px rgba(180, 170, 155, .14), 0 16px 48px -24px rgba(0, 0, 0, .6);
  --sh-inkbtn: none;
  --sh-inkbtn-hover: none;

  /* 暗色下按钮反相：浅底深字，与 Claude/GPT 暗色一致 */
  --ink-btn: #e8e3d9;
  --ink-btn-hover: #ffffff;

  /* 重定义 portal_assistant.css 的暗色面板变量：原值偏褐（#1e1b18），
     暗底会放大色相导致卡片看起来"脏"。这里降低暖度，只保留极轻暖意。
     Tailwind 的 bg-card-dark 映射到这些变量，改一处即全站统一。 */
  --portal-dark-bg: #141210;
  --portal-dark-surface: #191614;
  --portal-dark-raised: #201d1a;
  --portal-dark-soft: #272320;

  --portal-bg: #141210;
  --portal-surface: #1c1a17;
  --portal-surface-soft: #211e1c;
}

/* ---------- P1 排版精修 ---------- */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 衬线标题：大字号必须收紧字距，否则松散显廉价 */
.font-serif,
.overview-title,
.notice-board-title {
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1;
  letter-spacing: -0.018em;
}

.font-serif.text-3xl,
.font-serif.text-4xl,
.font-serif.text-5xl,
.font-serif.text-6xl,
.overview-title,
.notice-board-title {
  letter-spacing: -0.026em;
  line-height: 1.06;
}

/* 数字统一等宽，避免刷新时跳动 */
.stat-value,
.overview-value,
.price,
.plan-price,
.plan-price-final,
.plan-price-original,
.commission-amount,
.pricing-metric-value,
[class*="tabular"],
td[class*="text-right"] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* 货币符号与单位降级：$ 与数字同大小是最常见的业余细节 */
.price-currency {
  font-size: .58em;
  vertical-align: .42em;
  margin-right: .04em;
  font-weight: 500;
  letter-spacing: 0;
}

.price-unit {
  font-size: .42em;
  vertical-align: .1em;
  margin-left: .28em;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* 全大写小标签：必须加字距，否则挤在一起 */
.uppercase,
.overview-label,
.stat-label {
  letter-spacing: .09em;
}

/* ---------- P0 阴影系统：border → box-shadow ---------- */

.hero-card,
.panel,
.stat-card,
.dashboard-card,
.notice-card,
.notice-item,
.table-wrapper,
.modal,
.notice-modal-paper,
.metric-card-wrapper,
.toast {
  border-color: transparent !important;
  box-shadow: var(--sh-soft);
  background-clip: padding-box;
}

.notice-item,
.data-row {
  border-color: transparent !important;
  box-shadow: var(--sh-hairline);
}

.modal,
.notice-modal-paper,
.notice-card {
  box-shadow: var(--sh-floating);
}

/* 表格内部分隔线弱化：靠明度差而非硬线切割 */
.table-simple th,
.table-simple td {
  border-bottom-color: var(--ink-200);
}

.table-simple th {
  background: var(--ink-50);
  color: var(--ink-500);
  letter-spacing: .04em;
}

.table-simple tbody tr {
  transition: background var(--dur-fast) var(--ease-refined);
}

.table-simple tbody tr:hover td {
  background: var(--ink-50);
}

/* ---------- P0 深色实体件：纯黑 → 暖深墨 + 顶部内高光 ---------- */

.btn,
.btn-primary,
.btn-send-code,
.btn-accent {
  border-color: transparent;
  background: var(--ink-btn);
  box-shadow: none;
  transition: background var(--dur-fast) var(--ease-refined),
              opacity var(--dur-fast) var(--ease-refined);
}

/* 交互反馈只用明度变化，不做位移与投影 */
.btn:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.btn-send-code:hover:not(:disabled),
.btn-accent:hover:not(:disabled) {
  background: var(--ink-btn-hover);
  transform: none;
}

.btn:active:not(:disabled),
.btn-primary:active:not(:disabled),
.btn-accent:active:not(:disabled) {
  opacity: .86;
  transform: none;
}

.btn-outline {
  background: #fff;
  color: var(--ink-900);
  border-color: transparent;
  box-shadow: var(--sh-hairline);
}

.btn-outline:hover:not(:disabled) {
  background: var(--ink-50);
  box-shadow: 0 0 0 1px rgba(31, 28, 25, .09), 0 4px 12px -6px rgba(31, 28, 25, .12);
}

html.dark .btn-outline {
  background: var(--portal-surface);
  color: var(--ink-900);
}

/* 暗色下深色实体按钮反相为浅底，文字必须同步转深。
   这里必须压过 Tailwind 的 .text-white 工具类（同特异性但加载更晚），
   故用 html.dark + 元素 + 类的三段选择器提高特异性。 */
html.dark .btn,
html.dark .btn-primary,
html.dark .btn-send-code,
html.dark .btn-accent,
html.dark button.bg-black,
html.dark a.bg-black,
html.dark button[class*="bg-gray-9"],
html.dark button.bg-black.text-white,
html.dark a.bg-black.text-white,
html.dark button.text-white[class*="bg-gray-9"] {
  color: var(--ink-950);
}

/* portal_assistant.css 里有 `html.dark .text-white { color: var(--portal-dark-text) }`，
   会把浅底按钮上的文字重新刷成浅色。深色实体按钮在暗色下是浅底，
   文字必须强制为深色，这里用 !important 收口。 */
html.dark button.bg-black,
html.dark a.bg-black,
html.dark button[class*="bg-gray-9"],
html.dark .btn,
html.dark .btn-primary,
html.dark .btn-send-code,
html.dark .btn-accent {
  color: #141210 !important;
}

/* 禁用态：暗色下按钮是浅底，文字必须用深色才可读。
   注意 --ink-400 在暗色主题里被反转成浅色，不能用于浅底上的文字，
   这里直接写死中等深灰。 */
html.dark button.bg-black:disabled,
html.dark button.bg-black.text-white:disabled,
html.dark .btn:disabled,
html.dark .btn-primary:disabled,
html.dark #submit-btn:disabled {
  color: #6b655c;
  opacity: 1;
}

html.dark .btn-outline {
  color: var(--ink-900);
}

/* Tailwind 存量类：bg-black 实体件同步升级 */
button.bg-black,
a.bg-black,
.bg-black[role="button"],
button[class*="bg-ink-9"],
button[class*="bg-gray-9"] {
  background-image: none;
  background-color: var(--ink-btn);
  box-shadow: none;
  transition: background-color var(--dur-fast) var(--ease-refined);
}

button.bg-black:hover,
a.bg-black:hover,
button[class*="bg-ink-9"]:hover,
button[class*="bg-gray-9"]:hover {
  background-color: var(--ink-btn-hover);
  transform: none;
}

/* ---------- P2 输入控件：焦点环走暖色，不用浏览器默认蓝 ---------- */

/* 只对"盒式"输入框加描边。
   登录/注册页用的是下划线式输入框（border-0 border-b + bg-transparent），
   给它们套 box-shadow 会凭空多出一圈方框，且白底会盖掉透明背景。
   因此用 :not() 精确排除下划线式与透明背景的控件。 */
input:not(.border-0):not(.bg-transparent),
textarea:not(.border-0):not(.bg-transparent),
select:not(.border-0):not(.bg-transparent),
.input-sm {
  border-color: transparent;
  box-shadow: var(--sh-hairline);
  background: #fff;
  transition: box-shadow var(--dur) var(--ease-refined);
}

html.dark input:not(.border-0):not(.bg-transparent),
html.dark textarea:not(.border-0):not(.bg-transparent),
html.dark select:not(.border-0):not(.bg-transparent) {
  background: var(--portal-surface);
  color: var(--ink-900);
}

input:not(.border-0):not(.bg-transparent):focus,
textarea:not(.border-0):not(.bg-transparent):focus,
select:not(.border-0):not(.bg-transparent):focus,
.input-sm:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--ink-700), 0 0 0 4px rgba(31, 28, 25, .07);
}

/* 下划线式输入框：只强化下边框，不加外框 */
input.border-0.border-b,
input.bg-transparent {
  box-shadow: none;
  background: transparent;
}

input.border-0.border-b:focus,
input.bg-transparent:focus {
  box-shadow: none;
  outline: none;
  border-bottom-color: var(--ink-900);
}

html.dark input.border-0.border-b,
html.dark input.bg-transparent {
  background: transparent;
  color: var(--ink-900);
}

:focus-visible {
  outline: 2px solid rgba(31, 28, 25, .45);
  outline-offset: 2px;
}

html.dark :focus-visible {
  outline-color: rgba(212, 207, 197, .5);
}

/* ---------- P2 统一缓动 ---------- */

a,
button,
.nav-link,
.key-action,
.billing-tab,
.plan-card,
.stat-card,
.dashboard-card {
  transition-timing-function: var(--ease-refined);
  transition-duration: var(--dur);
}

.stat-card,
.dashboard-card,
.plan-card,
.hero-card {
  transition-property: box-shadow;
}

/* hover 只加深描边，不做位移与浮起 —— 卡片是信息容器，不是可拖拽物件 */
.stat-card:hover,
.dashboard-card:hover {
  transform: none;
  box-shadow: var(--sh-hairline-strong);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }

  .stat-card:hover,
  .dashboard-card:hover {
    transform: none;
  }
}

/* ---------- 去除装饰性纹理 ----------
   噪点、网格点这类底纹属于"设计感"而非"高级感"，
   参照 Claude / GPT / Kimi：背景保持纯净，层次交给留白与明度。 */

.texture-bg,
.grain-overlay::before {
  background-image: none !important;
  background-color: transparent !important;
  opacity: 0 !important;
}

/* ---------- 状态色：中性优先 ----------
   极简界面里状态不靠彩色标识，靠文字与位置。
   仅保留最低限度的语义色，且大幅去饱和。 */

.commission-positive,
.status-ok {
  color: var(--ink-800);
  font-weight: 600;
}

.commission-negative {
  color: var(--ink-600);
}

.notice-dot:not(.muted) {
  background: var(--ink-900);
}

.commission-status-badge.is-cleared {
  color: var(--ink-700);
  background: var(--ink-100);
  border-color: transparent;
  box-shadow: none;
}

.commission-status-badge.is-review,
.commission-status-badge.is-blocked,
.commission-status-badge.is-withdraw {
  color: var(--ink-600);
  background: var(--ink-100);
  border-color: transparent;
  box-shadow: none;
}

/* ---------- P1 价格区收紧 ----------
   原实现每行 min-height 38px + padding 8px + 行间 1px 硬线，三行价格
   占去 114px 并把卡片撑高。这里压缩行高、去掉分隔线，改用标签弱化区分。
   保留双币种三列布局（美元 + 人民币），不做压行，否则窄屏会挤。 */

.marketplace-card-token-price-row {
  min-height: 0;
  padding: 5px 0;
}

.marketplace-card-token-price-row + .marketplace-card-token-price-row {
  border-top: 0;
}

.marketplace-card-token-price-label {
  color: var(--ink-500);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* 价格数字用等宽数字，避免不同卡片间数字宽度跳动 */
.marketplace-card-token-price-row .marketplace-price-usd,
.marketplace-card-token-price-row .marketplace-entry-cny-price {
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 620;
}

/* 人民币价格弱化为次要证据，美元为主 */
.marketplace-card-token-price-row .marketplace-entry-cny-price {
  color: var(--ink-500);
  font-weight: 560;
}

/* ---------- 纯黑与冷色兜底 ----------
   Tailwind CDN 把 black / white 当作顶层固定色，extend.colors 的覆盖
   时机不可靠（CDN 可能在 config 生效前就已生成规则）。这里在 CSS 层
   直接收口，确保纯黑正文一定被替换为暖墨色 —— 纯黑是廉价感的首要来源。 */

html:not(.dark) .text-black { color: var(--ink-900); }
html:not(.dark) .bg-black { background-color: var(--ink-900); }
html:not(.dark) .border-black { border-color: var(--ink-900); }
html:not(.dark) .ring-black { --tw-ring-color: var(--ink-900); }

/* slate 是另一处冷色残留，登录页 body 用的就是它 */
html:not(.dark) .text-slate-900 { color: var(--ink-900); }
html:not(.dark) .text-slate-800 { color: var(--ink-800); }
html:not(.dark) .text-slate-700 { color: var(--ink-700); }
html:not(.dark) .text-slate-600 { color: var(--ink-600); }
html:not(.dark) .text-slate-500 { color: var(--ink-500); }
html:not(.dark) .text-slate-400 { color: var(--ink-400); }

/* ---------- 登录/注册页：整页一体 + 视口正中央 ----------
   诉求：顶栏底栏保留内容但去掉分界（透明融入背景），表单在视口正中央。
   做法：
   1) 顶栏改为浮层（absolute）不占文档流，main 撑满视口高；
   2) 表单容器用 margin:auto 垂直居中——比 align-items:center 更安全，
      注册页等长内容超高时不会被顶部裁切；
   3) 顶栏/底栏背景透明、无边线无阴影无模糊，与页面浑然一体。 */

body.portal-auth-page > nav.glass-effect {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* 顶栏是浮层后，去掉 body 的 80px 顶部补偿，让 main 从视口顶开始 */
body.portal-auth-page {
  padding-top: 0 !important;
}

/* main 撑满整个视口且顶底 padding 严格对称——margin:auto 才能把表单
   压在视口正中央（!important 压过页面自带的不对称 padding） */
/* 选择器与 portal_assistant.css 的补偿规则
   `body.portal-auth-page > nav.sticky ~ main` 同构且更高特异性，
   否则 margin-top 归零会被其 !important 压回 */
body.portal-auth-page .portal-page-main,
body.portal-auth-page > nav.sticky ~ main.portal-page-main {
  min-height: 100vh !important;
  align-items: flex-start !important;
  /* 旧 fixed 顶栏补偿的 margin-top 归零，main 从视口顶开始 */
  margin-top: 0 !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/* margin:auto 在 flex 容器内吸收剩余空间实现居中，且溢出安全：
   注册页等超高内容不会被顶部裁切，自然从 padding 起排 */
body.portal-auth-page .portal-page-main > div {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* 品牌字标与表单的距离收紧，让整组内容更紧凑 */
.portal-auth-page .portal-page-main > div > div:first-child {
  margin-bottom: 2.25rem;
}

/* 顶栏/底栏融入背景：亮暗两套都透明，去掉一切分界元素 */
body.portal-auth-page > nav.glass-effect,
body.portal-auth-page > footer.fixed,
html.dark body.portal-auth-page > nav.sticky.glass-effect,
html.dark body.portal-auth-page > footer.fixed {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 顶栏下边线、底栏上分隔线（h-px 细线与 nav-border-line）一并隐去 */
.portal-auth-page nav .nav-border-line,
.portal-auth-page footer [class*="h-px"],
html.dark body.portal-auth-page > footer.fixed > div > .absolute {
  background: transparent !important;
}

/* ---------- 页面底色与滚动条 ---------- */

body.portal-body {
  background: var(--ink-50);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-300) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--ink-300);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--ink-400);
  background-clip: content-box;
}

::selection {
  background: rgba(31, 28, 25, .12);
}

/* ---------- 顶栏：玻璃层降低对比，避免硬边 ---------- */

.portal-header,
.glass-effect {
  background: rgba(255, 255, 255, .82) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(31, 28, 25, .05);
}

html.dark .portal-header,
html.dark .glass-effect {
  background: rgba(20, 18, 16, .80) !important;
  box-shadow: 0 1px 0 rgba(180, 170, 155, .09);
}

/* ---------- 暗色各区块颜色统一 ----------
   暗色下导航栏/底栏若用半透明 backdrop-filter 叠加，内容会透上来使其
   发灰发浊，与实色卡片在视觉上分裂成三层。统一改为与页面同色的实色底，
   去掉 ::before 横向渐变带与模糊，仅保留 1px 细分隔线作为层次。 */
html.dark body > nav.sticky.glass-effect,
html.dark body > footer.fixed,
html.dark .portal-header,
html.dark .glass-effect {
  background: var(--portal-dark-bg) !important;
  background-color: var(--portal-dark-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* 去掉导航/底栏的横向渐变带（色带元凶） */
html.dark body > nav.sticky.glass-effect::before,
html.dark body > footer.fixed::before {
  background: none !important;
  opacity: 0 !important;
}

/* 统一分隔线为极低对比的暖灰 */
html.dark body > nav.sticky.glass-effect {
  border-bottom: 1px solid rgba(180, 170, 155, .08) !important;
}

html.dark body > footer.fixed {
  border-top: 1px solid rgba(180, 170, 155, .08) !important;
}

html.dark .nav-border-line,
html.dark body > footer.fixed > div > .absolute {
  background: rgba(180, 170, 155, .08) !important;
  height: 1px !important;
}

/* ---------- P1 Marketplace 卡片：信息层级与密度 ----------
   原实现用 min-height:354px 硬撑卡片高度，导致模型名与价格区之间出现
   大块空白，看上去像"内容不够撑版面"。这里改为内容自适应，
   并重排字号与字重，让模型名成为唯一视觉主角。                    */

.marketplace-model-card {
  min-height: 0;
  border-color: transparent !important;
  border-radius: 18px;
  padding: 18px 20px 16px;
  box-shadow: var(--sh-soft);
  transition: box-shadow var(--dur) var(--ease-refined), transform var(--dur) var(--ease-refined);
}

/* 去掉卡片内的径向高光与渐变叠层，背景保持纯净 */
.marketplace-model-card::before {
  background: none;
}

/* hover 只加深描边 */
.marketplace-model-card:hover {
  transform: none;
  box-shadow: var(--sh-hairline-strong);
}

html.dark .marketplace-model-card {
  background: var(--portal-surface);
}

/* 供应商名弱化成极小字距标签，让位给模型名 */
.marketplace-provider-name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.provider-avatar {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}

.provider-avatar svg {
  width: 17px;
  height: 17px;
}

.marketplace-type-badge {
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--ink-400);
}

/* 模型名：卡片主角。模型 ID 本质是代码标识符，
   用等宽字体替代正文黑体，技术感更强、与描述文本区分更清晰。 */
.marketplace-model-title-row {
  margin-top: 14px;
}

.marketplace-model-name {
  font-family: "IBM Plex Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: clamp(15px, 0.95vw, 17px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink-900);
  overflow-wrap: anywhere;
}

html.dark .marketplace-model-name {
  color: var(--ink-900);
}

/* 分组名（如 CC-Kiro）保持衬线，与卡片内模型 ID 形成层级对比 */
.marketplace-group-name {
  font-family: "Playfair Display", "Noto Serif SC", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* 价格区：从三段独立行压成紧凑证据区，卡片高度显著下降 */
.marketplace-price-panel {
  margin-top: 12px;
}

.marketplace-card-token-price-row {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 12.5px;
}

.marketplace-card-token-price-row + .marketplace-card-token-price-row {
  border-top-color: var(--ink-200) !important;
}

.marketplace-card-token-price-label {
  font-size: 11.5px;
  color: var(--ink-500);
  letter-spacing: .012em;
}

.marketplace-card-token-price-row .marketplace-price-usd,
.marketplace-card-token-price-row .marketplace-entry-cny-price {
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 600;
  color: var(--ink-800);
}

/* 详情按钮原为冷蓝灰 slate-700，在暖中性体系里非常突兀。
   极简界面的链接不用彩色，靠字重与位置区分。 */
.marketplace-detail-button {
  margin-top: 14px;
  letter-spacing: .01em;
  color: var(--ink-700);
  transition: color var(--dur-fast) var(--ease-refined);
}

.marketplace-detail-button:hover {
  color: var(--ink-900);
}

/* 网格：卡片变矮后收紧列宽，同屏容纳更多模型 */
.marketplace-group-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 16px;
}

/* ---------- Logo 光学居中 ----------
   字标图片的墨迹边界是居中的（实测偏移 0.05%），但左侧 GP 连字笔画粗重、
   右侧 TEAM 笔画细，alpha 加权重心实测偏左 4.77%，所以几何居中看着偏左。
   按重心差的一半右移做光学补偿（全补会矫枉过正）。 */
.auth-gp-logo-hero,
.portal-shell-wordmark {
  transform: translateX(2.4%);
}

/* ---------- 空套餐占位：简约高级感居中 ----------
   原实现两套样式互相打架（billing 渐变卡片 + assistant 透明覆盖），
   plans.html 则完全无样式退化为左对齐纯文本。这里统一为居中的
   极简空状态：无重投影、无噪点，靠留白、细分隔与字距撑质感。 */

.plan-empty-state {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 300px;
  padding: 56px 32px;
  border: 0 !important;
  border-radius: 20px;
  background: var(--ink-50) !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px rgba(31, 28, 25, .05) !important;
}

.plan-empty-state.grain-overlay::before {
  display: none !important;
}

.plan-empty-state > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: none !important;
  margin: 0 auto;
}

.plan-empty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 16px;
  border: 0 !important;
  border-radius: 999px;
  background: var(--ink-900) !important;
  color: var(--ink-50) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.plan-empty-title {
  margin: 0;
  font-family: "Playfair Display", "Noto Serif SC", serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink-900);
}

html.dark .plan-empty-state {
  background: var(--portal-dark-surface) !important;
  box-shadow: inset 0 0 0 1px rgba(180, 170, 155, .09) !important;
}

html.dark .plan-empty-badge {
  background: var(--ink-50) !important;
  color: var(--ink-900) !important;
}

html.dark .plan-empty-title {
  color: var(--ink-900);
}

@media (max-width: 767px) {
  .plan-empty-state { min-height: 240px; padding: 40px 24px; border-radius: 16px; }
  .plan-empty-title { font-size: 24px; }
}

/* ---------- 空套餐占位结束 ---------- */

/* ---------- 暗色三项修复：棕带、虚线对比、卡片饱和度 ---------- */

/* 1) 虚线分隔：源码里硬编码 border-[#e5e5e5]，暗色下不跟随主题，
      在近黑底上变成高对比白线。这里按主题重设并降低对比。 */
html.dark [class*="border-dashed"],
html.dark .border-dashed {
  border-color: rgba(180, 170, 155, .12) !important;
}

html:not(.dark) [class*="border-dashed"],
html:not(.dark) .border-dashed {
  border-color: var(--ink-200) !important;
}

/* 2) 棕带：暗色下页面底、卡片、顶栏三层暖色叠加后在顶部堆出可见色带。
      统一三者的暖度基准，并去掉会放大暖色的渐变层。
      注意：页面内联 style 里有 `:root:not([data-portal-theme="light"]) body`，
      :not() 会计入特异性并压过 html.dark body，故这里必须用同构选择器。 */
html.dark body,
html.dark .bg-background-dark,
html.dark:not([data-portal-theme="light"]) body,
:root.dark:not([data-portal-theme="light"]) body {
  background: #141210 !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-portal-theme="light"]) body {
    background: #141210 !important;
  }
}

html.dark .bg-gradient-dark,
html.dark [class*="bg-gradient-dark"] {
  background-image: none !important;
  background-color: #191614 !important;
}

/* 3) 卡片褐色饱和度：暗底会放大色相，暖色必须比亮色更收敛。
      原 #1c1a17 偏褐，改为几乎中性的深灰，仅保留极轻暖意。
      注意 Tailwind 的 dark:bg-card-dark 编译为 `.dark .bg-card-dark`，
      必须带 .dark 前缀才够特异性。 */
html.dark .dashboard-card,
html.dark .bg-card-dark,
html.dark .panel,
html.dark .stat-card,
html.dark .hero-card,
html.dark .marketplace-model-card,
.dark .bg-card-dark {
  background-color: #191614 !important;
}

/* 存量卡片仍带 hover:-translate-y 位移，与"卡片不做浮起"的取向冲突 */
[class*="hover:-translate-y"]:hover {
  transform: none !important;
}

/* ---------- 暗色残留色收口 ----------
   暗色模式下原有三处冷色/荧光色与暖中性调冲突：
   人民币价格是荧光薄荷绿 #6ee7b7、详情按钮是冷 slate（暗底上几乎不可见）、
   价格标签明度不足。统一收进暖墨轴。                                  */

html.dark .marketplace-entry-cny-price,
html.dark .marketplace-detail-tier-chip .marketplace-entry-cny-price,
html.dark .marketplace-detail-tier-value .marketplace-entry-cny-price,
html.dark .marketplace-table-price-line .marketplace-entry-cny-price {
  color: var(--ink-500);
}

html.dark .marketplace-card-token-price-row .marketplace-price-usd {
  color: var(--ink-900);
}

html.dark .marketplace-card-token-price-label {
  color: var(--ink-600);
}

html.dark .marketplace-detail-button {
  color: var(--ink-800);
}

html.dark .marketplace-detail-button:hover {
  color: var(--ink-950);
}

/* ---------- Tailwind 灰阶工具类收口 ----------
   Tailwind CDN 把色板编译进运行时，theme.extend.colors 覆盖 gray/black
   的时机不可靠，实测 text-gray-500 仍解析为原生冷灰 rgb(107,114,128)。
   这里按全站实际用到的类逐个映射到暖墨轴。
   规则由 tests/gen_gray_overrides.mjs 生成，新增灰阶类后重跑即可。 */

html:not(.dark) .bg-gray-100 { background-color: var(--ink-100); }
html:not(.dark) .bg-gray-200 { background-color: var(--ink-200); }
html:not(.dark) .bg-gray-400 { background-color: var(--ink-400); }
html:not(.dark) .bg-gray-50 { background-color: var(--ink-50); }
html:not(.dark) .bg-gray-800 { background-color: var(--ink-800); }
html:not(.dark) .bg-gray-900 { background-color: var(--ink-900); }
html:not(.dark) .border-gray-100 { border-color: var(--ink-100); }
html:not(.dark) .border-gray-200 { border-color: var(--ink-200); }
html:not(.dark) .border-gray-300 { border-color: var(--ink-300); }
html:not(.dark) .border-gray-400 { border-color: var(--ink-400); }
html:not(.dark) .border-gray-500 { border-color: var(--ink-500); }
html:not(.dark) .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ink-100); }
html:not(.dark) .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ink-200); }
html:not(.dark) .divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ink-50); }
html:not(.dark) .from-gray-100 { --tw-gradient-from: var(--ink-100); }
html:not(.dark) .from-gray-800 { --tw-gradient-from: var(--ink-800); }
html:not(.dark) .placeholder-gray-300::placeholder { color: var(--ink-300); }
html:not(.dark) .placeholder-gray-400::placeholder { color: var(--ink-400); }
html:not(.dark) .text-gray-300 { color: var(--ink-300); }
html:not(.dark) .text-gray-400 { color: var(--ink-400); }
html:not(.dark) .text-gray-500 { color: var(--ink-500); }
html:not(.dark) .text-gray-600 { color: var(--ink-600); }
html:not(.dark) .text-gray-700 { color: var(--ink-700); }
html:not(.dark) .text-gray-800 { color: var(--ink-800); }
html:not(.dark) .text-gray-900 { color: var(--ink-900); }
html:not(.dark) .text-gray-950 { color: var(--ink-950); }
html:not(.dark) .text-slate-900 { color: var(--ink-900); }
html:not(.dark) .to-gray-50 { --tw-gradient-to: var(--ink-50); }

/* ---------- Plans 侧卡透明度统一 ----------
   轮播侧卡原用 opacity .94 表达纵深，暗底上半透明卡与实色中卡
   混色后呈现两种颜色（"左右块不统一"）。纵深只保留 scale 缩放，
   透明度一律为 1，颜色完全一致。 */
.plan-card.slot-side,
.plan-card.slot-side:hover {
  opacity: 1 !important;
}