Spaces:
Running
Running
| /* 个人账户 / 变现（契约 40A）——Warm Paper 令牌，无硬编码色，克制动效。 | |
| 账户卡 · token 用量看板 · Alipay 解锁区 · 免费缩水「Pro 解锁」占位卡。 | |
| 色彩全部走 theme.css 的 var(--*)，深浅色两套自动跟随；不引任何硬编码色。 */ | |
| /* ── 通用按钮（账户区自成一体，不依赖 mcp.css 的 field/btn 类）───── */ | |
| .account-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 8px 15px; | |
| border: 1px solid transparent; | |
| border-radius: var(--radius-control); | |
| background: var(--accent); | |
| color: var(--bg); | |
| font-family: inherit; | |
| font-size: 13px; | |
| font-weight: 600; | |
| line-height: 1.2; | |
| cursor: pointer; | |
| transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease); | |
| } | |
| .account-btn:hover:not(:disabled) { | |
| filter: brightness(1.05); | |
| } | |
| .account-btn:active:not(:disabled) { | |
| transform: translateY(1px); | |
| } | |
| .account-btn:disabled { | |
| opacity: 0.55; | |
| cursor: default; | |
| } | |
| .account-btn-ghost { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 8px 15px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: transparent; | |
| color: var(--text-secondary); | |
| font-family: inherit; | |
| font-size: 13px; | |
| font-weight: 500; | |
| line-height: 1.2; | |
| cursor: pointer; | |
| transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); | |
| } | |
| .account-btn-ghost:hover:not(:disabled) { | |
| border-color: var(--text-tertiary); | |
| color: var(--text); | |
| } | |
| .account-btn-ghost:disabled { | |
| opacity: 0.55; | |
| cursor: default; | |
| } | |
| /* 载入小转圈（Loader2 用）：克制、可被系统「减少动态效果」关掉。 */ | |
| .spin { | |
| animation: perch-spin 900ms linear infinite; | |
| } | |
| @keyframes perch-spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .spin { | |
| animation: none; | |
| } | |
| .account-btn, | |
| .account-btn-ghost, | |
| .token-bar-fill { | |
| transition: none; | |
| } | |
| } | |
| /* ── 账户卡 ─────────────────────────────────────────────────── */ | |
| .account-card { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-card); | |
| background: var(--bg-elevated); | |
| padding: 16px 18px; | |
| } | |
| .account-card-top { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 8px; | |
| } | |
| .account-tier { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 3px 12px; | |
| border-radius: var(--radius-chip); | |
| font-family: var(--font-serif); | |
| font-size: 15px; | |
| font-weight: 600; | |
| letter-spacing: 0.01em; | |
| } | |
| .account-tier.is-free { | |
| background: var(--bg-sunken); | |
| color: var(--text-secondary); | |
| } | |
| .account-tier.is-pro { | |
| background: var(--accent-soft); | |
| color: var(--accent); | |
| } | |
| .account-admin { | |
| padding: 2px 9px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-chip); | |
| font-size: 11px; | |
| color: var(--text-secondary); | |
| } | |
| .account-card-desc { | |
| margin: 0; | |
| color: var(--text); | |
| font-size: 13.5px; | |
| line-height: 1.6; | |
| } | |
| .account-card-meta { | |
| margin: 6px 0 0; | |
| color: var(--text-tertiary); | |
| font-size: 12px; | |
| } | |
| /* ── token 用量看板 ─────────────────────────────────────────── */ | |
| .token-board { | |
| margin-top: 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-card); | |
| background: var(--bg); | |
| padding: 16px 18px; | |
| } | |
| .token-board-head { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .token-board-title { | |
| font-family: var(--font-serif); | |
| font-size: 15px; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .token-board-total { | |
| font-family: var(--font-mono); | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| } | |
| .token-bar { | |
| margin: 12px 0 8px; | |
| height: 8px; | |
| border-radius: 999px; | |
| background: var(--bg-sunken); | |
| overflow: hidden; | |
| } | |
| .token-bar-fill { | |
| height: 100%; | |
| border-radius: 999px; | |
| background: var(--accent); | |
| transition: width var(--dur) var(--ease); | |
| } | |
| .token-board-caption { | |
| margin: 0; | |
| color: var(--text-tertiary); | |
| font-size: 11.5px; | |
| line-height: 1.55; | |
| } | |
| .token-board-caption strong { | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| } | |
| .token-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 10px; | |
| margin: 14px 0 0; | |
| } | |
| .token-cell { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-chip); | |
| background: var(--bg-elevated); | |
| padding: 9px 11px; | |
| } | |
| .token-cell dt { | |
| margin: 0; | |
| color: var(--text-tertiary); | |
| font-size: 11px; | |
| } | |
| .token-cell dd { | |
| margin: 3px 0 0; | |
| font-family: var(--font-mono); | |
| font-size: 15px; | |
| color: var(--text); | |
| } | |
| /* ── Alipay 解锁区 ──────────────────────────────────────────── */ | |
| .unlock-block { | |
| margin-top: 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-card); | |
| background: var(--bg-elevated); | |
| padding: 16px 18px; | |
| } | |
| .unlock-title { | |
| margin: 0 0 12px; | |
| font-family: var(--font-serif); | |
| font-size: 15px; | |
| font-weight: 600; | |
| } | |
| .unlock-row { | |
| display: flex; | |
| gap: 18px; | |
| align-items: flex-start; | |
| flex-wrap: wrap; | |
| } | |
| .unlock-qr { | |
| margin: 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .unlock-qr-img { | |
| width: 148px; | |
| height: 148px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: var(--bg); | |
| padding: 6px; | |
| } | |
| .unlock-qr-cap { | |
| color: var(--text-tertiary); | |
| font-size: 11px; | |
| } | |
| .unlock-form { | |
| flex: 1; | |
| min-width: 220px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .unlock-price { | |
| margin: 0; | |
| font-family: var(--font-serif); | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--accent); | |
| } | |
| .unlock-field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| } | |
| .unlock-label { | |
| color: var(--text-secondary); | |
| font-size: 12px; | |
| } | |
| .unlock-input { | |
| padding: 9px 12px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-control); | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--font-mono); | |
| font-size: 13px; | |
| letter-spacing: 0.04em; | |
| } | |
| .unlock-input:focus-visible { | |
| outline: 2px solid var(--accent); | |
| outline-offset: 1px; | |
| } | |
| .unlock-input:disabled { | |
| opacity: 0.6; | |
| cursor: default; | |
| } | |
| .unlock-actions { | |
| display: flex; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .unlock-honest { | |
| margin: 14px 0 0; | |
| padding: 11px 13px; | |
| border-left: 3px solid var(--warning); | |
| border-radius: var(--radius-chip); | |
| background: var(--bg-sunken); | |
| color: var(--text-secondary); | |
| font-size: 11.5px; | |
| line-height: 1.65; | |
| } | |
| .unlock-honest strong { | |
| color: var(--text); | |
| font-weight: 600; | |
| } | |
| /* ── 免费缩水「Pro 解锁」占位卡（AssistantPanel / 看板等复用）── */ | |
| .pro-lock { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 10px; | |
| margin: 8px; | |
| padding: 30px 24px; | |
| border: 1px dashed var(--border); | |
| border-radius: var(--radius-card); | |
| background: var(--bg-elevated); | |
| text-align: center; | |
| } | |
| .pro-lock-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 3px 11px; | |
| border-radius: var(--radius-chip); | |
| background: var(--accent-soft); | |
| color: var(--accent); | |
| font-size: 11.5px; | |
| font-weight: 600; | |
| } | |
| .pro-lock-title { | |
| margin: 0; | |
| font-family: var(--font-serif); | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .pro-lock-desc { | |
| margin: 0; | |
| max-width: 380px; | |
| color: var(--text-secondary); | |
| font-size: 13px; | |
| line-height: 1.65; | |
| } | |
| .pro-lock-hint { | |
| margin: 2px 0 0; | |
| max-width: 380px; | |
| color: var(--text-tertiary); | |
| font-size: 11px; | |
| line-height: 1.6; | |
| } | |
| /* ── 置灰的 Pro-only 子项（自定义专家 / 看板全量项）───────────── */ | |
| .is-pro-locked { | |
| opacity: 0.5; | |
| filter: grayscale(0.85); | |
| pointer-events: none; | |
| user-select: none; | |
| } | |
| .pro-gate-note { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| margin: 8px 0 0; | |
| padding: 8px 12px; | |
| border: 1px dashed var(--border); | |
| border-radius: var(--radius-chip); | |
| background: var(--bg-elevated); | |
| color: var(--text-secondary); | |
| font-size: 12px; | |
| } | |
| .pro-gate-note .account-btn { | |
| padding: 5px 11px; | |
| font-size: 12px; | |
| } | |