/** * Shared Workspace user chrome (extracted from cost/v2.html). * Scope: :is(html.page-cost-v2, html.has-v2-user-chrome) * Non-v2 pages: add class has-v2-user-chrome on and link design-tokens.css first. */ @import url("/components/shared/user-menu.css"); :is(html.page-cost-v2, html.has-v2-user-chrome) { --v2-bg: var(--dt-page-bg); --v2-card: var(--dt-card-bg); --v2-text: var(--dt-text); --v2-muted: var(--text-secondary, var(--dt-text-muted)); --v2-border: var(--dt-border); --v2-primary: var(--dt-color-brand); --v2-primary-hover: var(--primary-hover, var(--dt-color-brand)); --v2-success: var(--dt-color-success); --v2-warning: var(--dt-color-warning); --v2-danger: var(--dt-color-danger); --v2-radius: var(--dt-radius-lg); --v2-shadow-sm: var(--dt-shadow-1); --v2-shadow-md: var(--dt-shadow-hover); --v2-shadow-lg: var(--shadow-modal, var(--dt-shadow-hover)); /* 浅紫 tint 卡面：仅由 token 混合，不新增 hex */ --v2-accent-surface: color-mix(in srgb, var(--dt-card-bg) 88%, var(--dt-color-brand-soft) 12%); } /* Toket shell：顶栏/账户区可见控件对齐 Login Purple（仅 shell 作用域） */ html.toket-app-shell:is(html.page-cost-v1, html.has-v2-user-chrome) { --v2-primary: var(--toket-brand, #635bff); --v2-primary-hover: var(--toket-brand-hover, #5a52f5); } /* 与 Token 计算器 / 指南页一致的全站顶栏；中间保留产品名条 */ :is(html.page-cost-v2, html.has-v2-user-chrome) header .nav-wrap { flex-wrap: wrap; row-gap: 8px; column-gap: 12px; align-items: center; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-nav-product { flex: 1 1 160px; min-width: 0; margin-right: auto; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-nav-product__title { font-size: 14px; font-weight: 600; color: var(--text-main, var(--v2-text)); letter-spacing: -0.01em; line-height: 1.25; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-nav-product__sub { font-size: 11px; font-weight: 500; color: var(--text-sub, var(--v2-muted)); margin-top: 3px; line-height: 1.4; letter-spacing: 0.01em; } :is(html.page-cost-v2, html.has-v2-user-chrome) header .nav-links { margin-left: auto !important; } :is(html.page-cost-v2, html.has-v2-user-chrome) header .v2-nav-cluster { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; margin-left: auto !important; min-width: 0; flex: 1 1 auto; } :is(html.page-cost-v2, html.has-v2-user-chrome) header .v2-nav-cluster .nav-links { margin-left: 0 !important; } :is(html.page-cost-v2, html.has-v2-user-chrome) header .nav-links a[aria-current="page"] { font-weight: 600; opacity: 1 !important; } @media (max-width: 768px) { :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-nav-product { max-width: min(100%, calc(100vw - 140px)); } :is(html.page-cost-v2, html.has-v2-user-chrome) .bar-user { margin-left: auto; } /* 与主 CTA 抢色：菜单为中性 surface + 次级字色，层级对齐顶栏 */ :is(html.page-cost-v2, html.has-v2-user-chrome) header .mobile-menu { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0; margin: 0; border-radius: var(--dt-radius-md); border: 1px solid var(--line-soft); background: color-mix(in srgb, var(--dt-card-bg) 78%, transparent); color: var(--dt-text-muted); font-size: 20px; line-height: 1; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } :is(html.page-cost-v2, html.has-v2-user-chrome) header .mobile-menu:hover { background: var(--card-hover); border-color: var(--dt-border); color: var(--dt-text); } :is(html.page-cost-v2, html.has-v2-user-chrome) header .mobile-menu:focus-visible { outline: none; box-shadow: var(--focus-ring); } } :is(html.page-cost-v2, html.has-v2-user-chrome) .bar-user { flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: flex-end; max-width: min(320px, 56vw); z-index: 60; } :is(html.page-cost-v2, html.has-v2-user-chrome) .bar-user[hidden] { display: none !important; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-user-menu { position: relative; display: inline-flex; align-items: center; gap: 8px; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-user-menu__upgrade-pill { flex-shrink: 0; font-size: 13px; font-weight: 600; line-height: 1; padding: 7px 12px; border-radius: 10px; text-decoration: none; color: color-mix(in srgb, var(--dt-color-brand) 92%, #fff 8%); background: color-mix(in srgb, var(--dt-color-brand) 22%, var(--v2-card) 78%); border: 1px solid color-mix(in srgb, var(--dt-color-brand) 38%, var(--v2-border)); transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-user-menu__upgrade-pill:hover { background: color-mix(in srgb, var(--dt-color-brand) 30%, var(--v2-card) 70%); color: #fff; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-user-menu__upgrade-pill[hidden] { display: none !important; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-user-menu__trigger { display: inline-flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; border-radius: 999px; border: none; background: color-mix(in srgb, var(--v2-card) 92%, var(--v2-muted) 8%); font: inherit; font-size: 12px; font-weight: 500; color: var(--v2-text); cursor: pointer; max-width: min(320px, 56vw); transition: background 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 0 0 1px color-mix(in srgb, var(--v2-border) 55%, transparent); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-user-menu__trigger:hover { background: color-mix(in srgb, var(--v2-card) 85%, var(--v2-primary) 10%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--v2-primary) 18%, var(--v2-border)); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-user-menu__avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; letter-spacing: -0.02em; color: color-mix(in srgb, var(--dt-color-brand) 88%, var(--v2-text) 12%); background: color-mix(in srgb, var(--dt-color-brand) 14%, var(--v2-card) 86%); border: none; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-user-menu__email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; color: color-mix(in srgb, var(--v2-text) 88%, var(--v2-muted) 12%); text-align: left; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-user-menu__caret { flex-shrink: 0; font-size: 10px; color: var(--v2-muted); margin-left: 2px; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-workspace-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(280px, calc(100vw - 24px)); padding: 0; border-radius: 16px; border: none; background: color-mix(in srgb, var(--v2-card) 82%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow-modal), 0 0 0 1px color-mix(in srgb, var(--v2-border) 45%, transparent); z-index: 10050; text-align: left; overflow: hidden; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-workspace-panel[hidden] { display: none !important; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-accounts { padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 4px; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-current { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 4px; border-radius: 10px; pointer-events: none; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-av { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; letter-spacing: -0.02em; color: color-mix(in srgb, var(--dt-color-brand) 88%, var(--v2-text) 12%); background: color-mix(in srgb, var(--dt-color-brand) 16%, var(--v2-card) 84%); background-size: cover; background-position: center; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-email { font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--v2-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-name { font-size: 16px; font-weight: 600; line-height: 1.45; color: color-mix(in srgb, var(--v2-text) 92%, var(--v2-muted) 8%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-check { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: color-mix(in srgb, var(--dt-color-brand) 78%, var(--v2-muted) 22%); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-add { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 10px 8px; border: none; border-radius: 10px; background: transparent; font: inherit; font-size: 14px; line-height: 1.6; font-weight: 500; color: var(--v2-text); cursor: pointer; text-align: left; transition: background 0.12s ease, color 0.12s ease; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-add:hover { background: color-mix(in srgb, var(--v2-text) 7%, transparent); color: color-mix(in srgb, var(--v2-text) 100%, #fff 4%); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-add-icon { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; line-height: 1; color: var(--v2-text); background: color-mix(in srgb, var(--v2-muted) 10%, transparent); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-divider { height: 1px; margin: 4px 12px; background: color-mix(in srgb, var(--v2-border) 70%, transparent); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-nav { padding: 4px 6px 8px; display: flex; flex-direction: column; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-item { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 10px 10px; border: none; border-radius: 10px; background: transparent; font: inherit; font-size: 14px; line-height: 1.6; font-weight: 500; color: var(--v2-text); cursor: pointer; text-align: left; text-decoration: none; box-sizing: border-box; transition: background 0.12s ease, color 0.12s ease; } :is(html.page-cost-v2, html.has-v2-user-chrome) a.v2-um-item { color: var(--v2-text); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-item:hover { background: color-mix(in srgb, var(--v2-text) 8%, transparent); color: color-mix(in srgb, var(--v2-text) 100%, #fff 6%); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-item__ic { flex-shrink: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: color-mix(in srgb, var(--v2-text) 78%, var(--v2-muted) 22%); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-item__ic svg { width: 18px; height: 18px; display: block; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-item[hidden] { display: none !important; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-um-add[hidden] { display: none !important; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal { position: fixed; inset: 0; z-index: 10080; display: flex; align-items: center; justify-content: center; padding: 24px 16px; box-sizing: border-box; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal[hidden] { display: none !important; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, #000 45%, transparent); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__card { position: relative; width: min(400px, 100%); border-radius: 16px; background: color-mix(in srgb, var(--v2-card) 96%, var(--v2-muted) 4%); box-shadow: var(--shadow-modal), 0 0 0 1px color-mix(in srgb, var(--v2-border) 50%, transparent); padding: 32px 24px 28px; box-sizing: border-box; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__title { margin: 0 0 20px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--v2-text); text-align: center; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__avatar-wrap { position: relative; width: 80px; height: 80px; margin: 0 auto 22px; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__avatar { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; color: color-mix(in srgb, var(--dt-color-brand) 88%, var(--v2-text) 12%); background: color-mix(in srgb, var(--dt-color-brand) 16%, var(--v2-card) 84%); background-size: cover; background-position: center; box-shadow: 0 0 0 1px color-mix(in srgb, var(--v2-border) 55%, transparent); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__cam { position: absolute; right: 0; bottom: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; background: color-mix(in srgb, var(--v2-card) 88%, var(--v2-muted) 12%); border: 1px solid color-mix(in srgb, var(--v2-border) 65%, transparent); box-shadow: 0 2px 8px color-mix(in srgb, #000 18%, transparent); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__cam svg { width: 14px; height: 14px; display: block; color: var(--v2-text); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__field { margin-bottom: 14px; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__label { display: block; font-size: 12px; font-weight: 600; color: var(--v2-muted); margin-bottom: 6px; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__input { width: 100%; box-sizing: border-box; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--v2-border) 85%, transparent); background: color-mix(in srgb, var(--v2-card) 92%, var(--v2-muted) 8%); font: inherit; font-size: 14px; color: var(--v2-text); outline: none; transition: border-color 0.12s ease, box-shadow 0.12s ease; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__input:focus { border-color: color-mix(in srgb, var(--dt-color-brand) 55%, var(--v2-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dt-color-brand) 18%, transparent); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__hint { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--v2-muted); text-align: center; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 22px; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__btn { min-width: 88px; height: 40px; padding: 0 16px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__btn--ghost { border: 1px solid color-mix(in srgb, var(--v2-border) 80%, transparent); background: transparent; color: var(--v2-text); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__btn--ghost:hover { background: color-mix(in srgb, var(--v2-text) 6%, transparent); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__btn--primary { border: 1px solid color-mix(in srgb, var(--dt-color-brand) 42%, var(--v2-border)); background: color-mix(in srgb, var(--dt-color-brand) 24%, var(--v2-card) 76%); color: color-mix(in srgb, var(--dt-color-brand) 92%, #fff 8%); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal__btn--primary:hover { background: color-mix(in srgb, var(--dt-color-brand) 32%, var(--v2-card) 68%); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-user-menu .v2-i18n-en, :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-workspace-panel .v2-i18n-en, :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-profile-modal .v2-i18n-en { display: none; } html[lang="en"].page-cost-v2 .v2-user-menu .v2-i18n-zh, html[lang="en"].page-cost-v2 .v2-workspace-panel .v2-i18n-zh, html[lang="en"].page-cost-v2 .v2-profile-modal .v2-i18n-zh, html[lang="en"].has-v2-user-chrome .v2-user-menu .v2-i18n-zh, html[lang="en"].has-v2-user-chrome .v2-workspace-panel .v2-i18n-zh, html[lang="en"].has-v2-user-chrome .v2-profile-modal .v2-i18n-zh { display: none; } html[lang="en"].page-cost-v2 .v2-user-menu .v2-i18n-en, html[lang="en"].page-cost-v2 .v2-workspace-panel .v2-i18n-en, html[lang="en"].page-cost-v2 .v2-profile-modal .v2-i18n-en, html[lang="en"].has-v2-user-chrome .v2-user-menu .v2-i18n-en, html[lang="en"].has-v2-user-chrome .v2-workspace-panel .v2-i18n-en, html[lang="en"].has-v2-user-chrome .v2-profile-modal .v2-i18n-en { display: inline; } /* V2 轻量登录：条带 + 弹窗 + 历史侧栏 */ :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-auth-strip { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; align-items: center; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-auth-pill { font-size: 12px; color: var(--v2-muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-history-panel { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-history-panel[hidden] { display: none !important; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-history-panel__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.52); backdrop-filter: none; -webkit-backdrop-filter: none; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-history-panel__card { position: relative; z-index: 1; width: min(520px, 100%); max-height: min(88vh, 640px); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--v2-card); border: 1px solid var(--v2-border); border-radius: 16px; padding: 22px 22px 18px; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--v2-muted) 40%, transparent) transparent; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-history-panel--drawer { align-items: stretch; justify-content: flex-end; padding: 0; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-history-panel--drawer .v2-history-panel__card { width: min(380px, 92vw); max-height: none; height: 100%; margin: 0; border-radius: 16px 0 0 16px; padding: 20px 18px 24px; animation: v2DrawerIn 0.24s ease-out; } @keyframes v2DrawerIn { from { transform: translateX(12px); opacity: 0.85; } to { transform: translateX(0); opacity: 1; } } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-history-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 10px; border-radius: 10px; border: none; background: transparent; width: 100%; text-align: left; cursor: pointer; transition: background 0.12s ease; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-history-row:hover { background: rgba(15, 23, 42, 0.05); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-history-row__icon { font-size: 16px; line-height: 1.2; flex-shrink: 0; margin-top: 1px; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-history-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-history-row__title { font-size: 13px; font-weight: 600; color: var(--v2-text); line-height: 1.4; word-break: break-word; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-history-row__time { font-size: 12px; color: var(--v2-muted); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-auth-modal__x { position: absolute; top: 10px; right: 12px; border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--v2-muted); border-radius: 8px; padding: 4px 6px; transition: color 0.15s ease, background 0.15s ease; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-auth-modal__x:hover { color: var(--v2-text); background: color-mix(in srgb, var(--v2-muted) 14%, transparent); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-auth-modal__title { font-size: 18px; font-weight: 700; margin: 0 0 10px; color: var(--v2-text); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-pay-modal__card::-webkit-scrollbar, :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-history-panel__card::-webkit-scrollbar { width: 5px; height: 5px; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-pay-modal__card::-webkit-scrollbar-track, :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-history-panel__card::-webkit-scrollbar-track { background: transparent; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-pay-modal__card::-webkit-scrollbar-thumb, :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-history-panel__card::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.18); border-radius: 999px; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-pay-modal__card::-webkit-scrollbar-thumb:hover, :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-history-panel__card::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.32); } :is(html[data-theme="dark"].page-cost-v2, html.dark.page-cost-v2, html[data-theme="dark"].has-v2-user-chrome, html.dark.has-v2-user-chrome) .v2-pay-modal__card::-webkit-scrollbar-thumb, :is(html[data-theme="dark"].page-cost-v2, html.dark.page-cost-v2, html[data-theme="dark"].has-v2-user-chrome, html.dark.has-v2-user-chrome) .v2-history-panel__card::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); } :is(html[data-theme="dark"].page-cost-v2, html.dark.page-cost-v2, html[data-theme="dark"].has-v2-user-chrome, html.dark.has-v2-user-chrome) .v2-pay-modal__card::-webkit-scrollbar-thumb:hover, :is(html[data-theme="dark"].page-cost-v2, html.dark.page-cost-v2, html[data-theme="dark"].has-v2-user-chrome, html.dark.has-v2-user-chrome) .v2-history-panel__card::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-history-body { margin-top: 8px; font-size: 13px; color: var(--v2-text); display: flex; flex-direction: column; gap: 2px; } /* 顶栏主导航双语（与 v2 页一致） */ :is(html.page-cost-v2, html.has-v2-user-chrome) header .nav-links .v2-i18n-en, :is(html.page-cost-v2, html.has-v2-user-chrome) header .mobile-drawer .v2-i18n-en { display: none; } html[lang="en"].page-cost-v2 header .nav-links .v2-i18n-zh, html[lang="en"].page-cost-v2 header .mobile-drawer .v2-i18n-zh, html[lang="en"].has-v2-user-chrome header .nav-links .v2-i18n-zh, html[lang="en"].has-v2-user-chrome header .mobile-drawer .v2-i18n-zh { display: none; } html[lang="en"].page-cost-v2 header .nav-links .v2-i18n-en, html[lang="en"].page-cost-v2 header .mobile-drawer .v2-i18n-en, html[lang="en"].has-v2-user-chrome header .nav-links .v2-i18n-en, html[lang="en"].has-v2-user-chrome header .mobile-drawer .v2-i18n-en { display: inline; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-bar-balance { display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, #6366f1 35%, var(--v2-border)); background: linear-gradient(135deg, color-mix(in srgb, #4f7cff 12%, var(--v2-card)) 0%, color-mix(in srgb, #7c5cff 10%, var(--v2-card)) 100%); color: var(--v2-text); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 10px color-mix(in srgb, #4f7cff 12%, transparent); transition: transform 0.15s ease, box-shadow 0.15s ease; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-bar-balance:hover { transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, #4f7cff 18%, transparent); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-wallet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-wallet-list__item { border: 1px solid var(--v2-border); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--v2-card) 94%, var(--v2-primary) 6%); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-wallet-row__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; color: var(--v2-text); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-wallet-row__meta { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--v2-muted); } :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-wallet-empty { margin: 0; font-size: 14px; color: var(--v2-muted); text-align: center; padding: 24px 8px; } @media (max-width: 768px) { :is(html.page-cost-v2, html.has-v2-user-chrome) .v2-bar-balance { display: none; } } .v2-um-credits-line { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--v2-accent, #a78bfa); } .v2-user-center-summary { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); } .v2-user-center-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; } .v2-user-center-dl dt { margin: 0; color: rgba(255, 255, 255, 0.5); } .v2-user-center-dl dd { margin: 0; text-align: right; color: rgba(255, 255, 255, 0.92); word-break: break-all; }