/* ==========================================================================
   顶栏的「使用教程」外链 + 暗色主题遗漏修复（2026-09-06）
   ========================================================================== */

/* -- 顶栏右侧的使用教程（原来在左侧菜单里，现在挪出来直接跳文档站）-- */
.pangu-topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--pangu-border);
  border-radius: var(--pangu-radius-sm);
  padding: 0 var(--pangu-space-3);
  color: var(--pangu-text-2);
  background: transparent;
  font-size: var(--pangu-fs-xs);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.pangu-topbar-link:hover {
  color: var(--pangu-brand);
  border-color: var(--pangu-brand);
  background: var(--pangu-brand-soft);
}

.pangu-topbar-link .material-symbols-outlined { font-size: 17px; }

/* 窄一点的桌面收成纯图标，别把顶栏挤爆 */
@media (max-width: 1024px) {
  .pangu-topbar-link { padding: 0; width: 34px; justify-content: center; }
  .pangu-topbar-link > span:not(.material-symbols-outlined) { display: none; }
}

/* ==========================================================================
   暗色：几处 hover / 常态还留着亮色底的地方
   --------------------------------------------------------------------------
   查法见 GPT-合并文档：在暗色下把每个元素真的 hover 一遍，
   量 hover 后的背景和文字对比度，< 2.5 就是看不见。
   ========================================================================== */

/* 数据概览 + 公告中心的公告行：hover 变 #f7f8fa 白底，字还是浅色（对比度 1.02）*/
html.portal-theme-dark .console-ann-tl-item:hover,
html[data-theme="dark"] .console-ann-tl-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* API 密钥行内的 禁用/编辑/删除：暗色下常态就是白底白字（对比度 1.0）*/
html.portal-theme-dark .console-key-actions button:not(.pangu-btn),
html[data-theme="dark"] .console-key-actions button:not(.pangu-btn) {
  border-color: var(--pangu-border);
  color: var(--pangu-text-2);
  background: rgba(255, 255, 255, 0.04);
}

html.portal-theme-dark .console-key-actions button:not(.pangu-btn):hover,
html[data-theme="dark"] .console-key-actions button:not(.pangu-btn):hover {
  color: var(--pangu-brand);
  border-color: color-mix(in srgb, var(--pangu-brand) 45%, transparent);
  background: rgba(255, 255, 255, 0.09);
}

html.portal-theme-dark .console-key-actions button.danger:hover,
html[data-theme="dark"] .console-key-actions button.danger:hover {
  color: var(--pangu-danger-ink);
  border-color: color-mix(in srgb, var(--pangu-danger) 45%, transparent);
  background: color-mix(in srgb, var(--pangu-danger) 16%, transparent);
}

/* 创建密钥弹窗里的分组选择器（只改颜色，结构一个字没动）*/
html.portal-theme-dark .console-key-create-group-trigger,
html[data-theme="dark"] .console-key-create-group-trigger {
  border-color: var(--pangu-border);
  color: var(--pangu-text);
  background: rgba(255, 255, 255, 0.04);
}

html.portal-theme-dark .console-key-create-group-trigger:hover:not(:disabled),
html[data-theme="dark"] .console-key-create-group-trigger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--pangu-brand) 45%, transparent);
  background: rgba(255, 255, 255, 0.08);
}

/* 顶栏下拉菜单里的危险项（退出登录）*/
html.portal-theme-dark .toolbar-menu-button.danger:hover,
html[data-theme="dark"] .toolbar-menu-button.danger:hover {
  color: var(--pangu-danger-ink);
  background: color-mix(in srgb, var(--pangu-danger) 16%, transparent);
}

/* 会员订阅套餐的「热门推荐」卡：写死了 #faf8ff 浅紫底，暗色下是两张白卡 */
html.portal-theme-dark .console-purchase .console-subscription-tier.is-popular,
html[data-theme="dark"] .console-purchase .console-subscription-tier.is-popular {
  border-color: #a78bfa;
  background: rgba(139, 92, 246, 0.12);
}

/* 创建密钥按钮的禁用态：亮色是 #e2e8f0，暗色下是一块亮灰 */
html.portal-theme-dark #createKeyButton:disabled,
html[data-theme="dark"] #createKeyButton:disabled {
  color: var(--pangu-text-3, #94a3b8);
  background: rgba(255, 255, 255, 0.08);
}

/* 「热门推荐」订阅卡的边框和阴影（背景在上面已经给了）*/
html.portal-theme-dark .console-subscription-tier.is-popular,
html[data-theme="dark"] .console-subscription-tier.is-popular {
  border: 2px solid #a78bfa;
  box-shadow: none;
}