/* 创作顶栏、算力中心与教程共享的 Claude 视觉层；业务动作和数值沿用原通道。 */
:root {
  --ui-paper:#faf8f5; --ui-surface:#fffdf9; --ui-tint:#f5e6dc; --ui-sand:#eee8df;
  --ui-border:#e5ded4; --ui-ink:#292724; --ui-muted:#6b625b;
  --ui-accent:#a64e32; --ui-action:#b45b3f; --ui-hover:#96472f;
  --ui-success:#6b8f71; --ui-warning:#d4a853; --ui-error:#c75b5b;
  --ui-shadow:rgba(193,165,140,.14);
  --ui-font:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --ui-display:Georgia,"Noto Serif SC","Songti SC",SimSun,serif;
}
html[data-theme="dark"] {
  --ui-paper:#252320; --ui-surface:#2e2b27; --ui-tint:#47332a; --ui-sand:#38322c;
  --ui-border:#51483f; --ui-ink:#f2ede5; --ui-muted:#c3b8ab;
  --ui-accent:#e5a68b; --ui-action:#b45b3f; --ui-hover:#c4653a;
  --ui-shadow:rgba(16,14,12,.25);
}
body:not(.admin-mode) #workspaceTopbar { background:var(--ui-paper); border-color:var(--ui-border); color:var(--ui-ink); }
body:not(.admin-mode) #workspaceTopbar .logo .mark { background:var(--ui-action); color:#fff; border-radius:10px; box-shadow:none; }
body #workspaceTopbar #workspaceActions :is(.home-btn,.balance-pill,.theme-switch) {
  box-sizing:border-box; min-height:40px; border:1px solid var(--ui-border); border-radius:12px;
  background:var(--ui-surface); color:var(--ui-muted); box-shadow:none; font-family:var(--ui-font);
  transition:background .2s ease-out,border-color .2s ease-out,color .2s ease-out;
}
body #workspaceTopbar #workspaceActions .home-btn { gap:8px; padding:8px 14px; font-size:13px; font-weight:500; }
body #workspaceTopbar #workspaceActions .home-btn:hover { background:var(--ui-tint); border-color:#cdb6a2; color:var(--ui-accent); transform:none; }
body #workspaceTopbar #workspaceActions :is(.hb-ic,.workspace-control-icon) { display:inline-flex; align-items:center; color:var(--ui-accent); filter:none; }
body #workspaceTopbar #workspaceActions>:is(.home-btn,.theme-switch) svg { width:16px; height:16px; flex:none; }
body #workspaceTopbar #workspaceActions .theme-switch { padding:4px; gap:4px; background:var(--ui-sand); }
body #workspaceTopbar #workspaceActions .theme-switch button { display:flex; align-items:center; gap:6px; height:30px; padding:0 10px; border-radius:8px; color:var(--ui-muted); font-size:12px; }
body #workspaceTopbar #workspaceActions .theme-switch button[aria-pressed="true"] { background:var(--ui-surface); color:var(--ui-accent); box-shadow:0 1px 4px var(--ui-shadow); }
body #workspaceTopbar #workspaceActions .theme-switch button:hover { color:var(--ui-accent); }
body #workspaceTopbar #workspaceActions .balance-pill { gap:8px; padding:6px 12px 6px 8px; }
body #workspaceTopbar #workspaceActions .balance-pill:is(:hover,.active) { background:var(--ui-tint); border-color:var(--ui-accent); transform:none; }
body #workspaceTopbar #workspaceActions .balance-pill .bp-icon { background:var(--ui-tint); color:var(--ui-accent); border-radius:8px; }
body #workspaceTopbar #workspaceActions .balance-pill .bp-value { background:none; color:var(--ui-ink); -webkit-text-fill-color:var(--ui-ink); font-weight:600; }
body #workspaceTopbar #workspaceActions .balance-pill :is(.lbl,.bp-action) { color:var(--ui-muted); }
body #workspaceTopbar #workspaceActions .balance-pill .bp-action { border-left-color:var(--ui-border); color:var(--ui-accent); font-weight:500; }
body:not(.admin-mode) #workspaceTopbar #topTools :is(.tt-cat,.tt-canvas) { color:var(--ui-muted); }
body:not(.admin-mode) #workspaceTopbar #topTools :is(.tt-cat,.tt-canvas):hover { background:var(--ui-sand); color:var(--ui-accent); }
body:not(.admin-mode) #workspaceTopbar #topTools :is(.tt-cat,.tt-canvas).active { background:var(--ui-tint); border-color:var(--ui-border); color:var(--ui-accent); box-shadow:none; }
body #workspaceTopbar #workspaceActions>:is(.home-btn,.balance-pill):focus-visible,
body #workspaceTopbar #workspaceActions .theme-switch button:focus-visible { outline:2px solid var(--ui-accent); outline-offset:3px; }
#acct #acctMenu>.workspace-help-mobile { display:none; }

/* 后台沿用相同账户控件；创作版本切换和帮助仍由原入口提供。 */
body.admin-mode #workspaceTopbar #workspaceActions>a.home-btn { display:flex; }

/* 算力中心是工作台内独立视图，也需要完整的暖色变量。 */
body:not(.admin-mode):has(#rechargeView.show) {
  --bg:var(--ui-paper); --bg-soft:var(--ui-surface); --glass:var(--ui-sand); --glass-2:var(--ui-tint);
  --glass-bd:var(--ui-border); --ink:var(--ui-ink); --ink-soft:var(--ui-muted); --ink-dim:var(--ui-muted);
  --c3:var(--ui-accent); font-family:var(--ui-font); background:var(--ui-paper);
}
#rechargeView { background:var(--ui-paper); color:var(--ui-ink); padding:40px max(24px,calc((100% - 1200px)/2)) 48px; font-family:var(--ui-font); }
#rechargeView .rv-head h1 { font-family:var(--ui-display); font-size:32px; font-weight:500; letter-spacing:.01em; line-height:1.4; }
#rechargeView .rv-head p { color:var(--ui-muted); font-size:14px; margin:12px 0 32px; line-height:1.8; }
#rechargeView .rv-back { padding:8px 14px; border-color:var(--ui-border); background:var(--ui-surface); color:var(--ui-muted); font-weight:500; }
#rechargeView .rv-back:hover { color:var(--ui-accent); background:var(--ui-tint); border-color:var(--ui-border); transform:none; }
#rechargeView .rv-grid { gap:24px; }
#rechargeView .card { border:1px solid var(--ui-border); border-radius:16px; padding:24px; background:var(--ui-surface); box-shadow:none; }
#rechargeView .bal-card { background:var(--ui-tint); }
#rechargeView .bal-card .bl { color:var(--ui-muted); font-size:13px; }
#rechargeView .bal-card .bv { font-family:var(--ui-display); font-size:52px; font-weight:500; letter-spacing:-.02em; line-height:1.25; color:var(--ui-ink); }
#rechargeView .bal-card .bv small { font-family:var(--ui-font); font-size:15px; font-weight:400; color:var(--ui-muted); }
#rechargeView .health { height:4px; background:color-mix(in srgb,var(--ui-ink) 10%,transparent); margin:16px 0 12px; }
#rechargeView .bal-card .bh { color:var(--ui-muted); font-size:12px; line-height:1.6; }
#rechargeView .stat { border-color:color-mix(in srgb,var(--ui-border) 80%,var(--ui-accent)); }
#rechargeView .stat .sv { font-size:24px; font-weight:500; color:var(--ui-ink); }
#rechargeView .stat .sl { color:var(--ui-muted); font-size:12px; }
#rechargeView :is(.wallet-section-title,.wallet-invite h2,.wallet-support h2) { color:var(--ui-ink); font-size:20px; font-weight:500; line-height:1.5; }
#rechargeView :is(.wallet-section-desc,.wallet-invite p,.wallet-support p) { color:var(--ui-muted); font-size:13px; line-height:1.8; }
#rechargeView :is(.wallet-invite-kicker,.wallet-support-kicker) { color:var(--ui-accent); font-size:11px; font-weight:500; letter-spacing:.08em; }
#rechargeView .wallet-invite-steps { gap:16px; margin:24px 0; }
#rechargeView .wallet-invite-steps li>span { background:var(--ui-tint); color:var(--ui-accent); border:0; }
#rechargeView .wallet-invite-steps strong { color:var(--ui-ink); font-size:13px; font-weight:500; }
#rechargeView .amount-grid { gap:20px 16px; margin:32px 0 24px; }
#rechargeView .amount-grid .amt { min-width:0; padding:24px 12px 20px; border:1px solid var(--ui-border); border-radius:12px; background:var(--ui-paper); box-shadow:none; transition:background .2s ease-out,border-color .2s ease-out; }
#rechargeView .amount-grid .amt:hover { background:var(--ui-sand); border-color:var(--ui-accent); transform:none; }
#rechargeView .amount-grid .amt.active { background:var(--ui-tint); border-color:var(--ui-accent); box-shadow:inset 0 0 0 1px var(--ui-accent); }
#rechargeView .amount-grid .av { color:var(--ui-ink); font-family:var(--ui-display); font-size:30px; font-weight:500; line-height:1.4; }
#rechargeView .amount-grid .ag { color:var(--ui-ink); font-size:12px; font-weight:500; line-height:1.7; }
#rechargeView .amount-grid :is(.ah,.ad) { color:var(--ui-muted); font-size:12px; font-weight:400; line-height:1.7; }
#rechargeView .amount-grid .gift { padding:3px 8px; background:var(--ui-surface); color:var(--ui-accent); border:1px solid var(--ui-border); font-size:10px; font-weight:500; }
#rechargeView .amount-grid .hot-tag { background:#e8d2ac; color:#6c4c24; font-weight:500; font-size:10px; }
#rechargeView .amount-grid .value-tag { background:#e7efe4; color:#55715b; }
#rechargeView .wallet-pay-summary { color:var(--ui-muted); border-color:var(--ui-border); padding-top:20px; margin-bottom:20px; }
#rechargeView #payAmt { color:var(--ui-ink); font-size:24px; font-weight:500; font-family:var(--ui-display); }
#rechargeView :is(.btn,.ltab,.payment-success-record) { min-height:44px; border-radius:12px; font-family:var(--ui-font); font-weight:500; box-shadow:none; transition:background .2s ease-out,color .2s ease-out,border-color .2s ease-out; }
#rechargeView .btn-primary { background:var(--ui-action); border-color:var(--ui-action); color:#fff; }
#rechargeView .btn-primary:hover { background:var(--ui-hover); border-color:var(--ui-hover); transform:none; }
#rechargeView :is(.btn-ghost,.ltab) { background:var(--ui-paper); color:var(--ui-muted); border-color:var(--ui-border); }
#rechargeView :is(.btn-ghost,.ltab):hover { background:var(--ui-tint); color:var(--ui-accent); }
#rechargeView .ltab.active { background:var(--ui-tint); color:var(--ui-accent); border-color:var(--ui-accent); }
#rechargeView .wallet-support { background:var(--ui-sand); margin-top:24px; margin-bottom:24px; }
#rechargeView .wallet-support-wechat { background:var(--ui-surface); color:var(--ui-ink); border-color:var(--ui-border); }
#rechargeView .ledger { margin-top:24px; }
#rechargeView :is(th,td) { border-color:var(--ui-border); color:var(--ui-muted); font-size:13px; }
#rechargeView th { color:var(--ui-ink); font-weight:500; }
#rechargeView .st-ok { color:var(--ui-success); }
#rechargeView .payment-success-notice { background:var(--ui-sand); border-color:var(--ui-success); }
#rechargeView :is(button,a,[tabindex="0"]):focus-visible { outline:2px solid var(--ui-accent); outline-offset:3px; }

/* 教程菜单、全部功能导览及带做卡片沿用同一视觉语言。 */
#guideRoot .guide-shade { background:rgba(41,39,36,.48); }
#guideRoot .guide-card { background:var(--ui-paper); color:var(--ui-ink); border-color:var(--ui-border); border-radius:16px; box-shadow:0 16px 56px var(--ui-shadow); font-family:var(--ui-font); --guide-padding:24px; }
#guideRoot .guide-card.guide-centered:not(.guide-tour-overview) { width:440px; max-width:calc(100vw - 32px); }
#guideRoot .guide-card h2 { color:var(--ui-ink); font-family:var(--ui-display); font-size:26px; font-weight:500; line-height:1.5; letter-spacing:.01em; margin:8px 0 16px; }
#guideRoot .guide-card h3 { color:var(--ui-muted); font-size:12px; font-weight:500; margin:24px 0 12px; }
#guideRoot .guide-card p { color:var(--ui-muted); font-size:13px; line-height:1.8; }
#guideRoot .guide-eyebrow { color:var(--ui-accent); font-weight:500; font-size:11px; letter-spacing:.08em; }
#guideRoot .guide-menu { gap:8px; }
#guideRoot .btn { min-height:44px; padding:10px 16px; border-radius:12px; font-size:13px; font-weight:500; box-shadow:none; font-family:var(--ui-font); }
#guideRoot .btn-primary { background:var(--ui-action); border-color:var(--ui-action); color:#fff; }
#guideRoot .btn-primary:hover { background:var(--ui-hover); border-color:var(--ui-hover); transform:none; }
#guideRoot .btn-ghost { background:var(--ui-surface); border-color:var(--ui-border); color:var(--ui-ink); }
#guideRoot .btn-ghost:hover { background:var(--ui-tint); border-color:var(--ui-border); color:var(--ui-accent); transform:none; }
#guideRoot .guide-menu .btn { justify-content:space-between; }
#guideRoot .guide-menu .btn::after { content:''; flex:none; width:16px; height:16px; margin-left:auto; background:currentColor; --guide-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask:var(--guide-arrow) center/contain no-repeat; -webkit-mask:var(--guide-arrow) center/contain no-repeat; }
#guideRoot .guide-actions { background:var(--ui-surface); border-color:var(--ui-border); padding:16px 24px; }
#guideRoot :is(.guide-fine,.guide-hint,.guide-cost-note,.guide-feature-hint) { color:var(--ui-muted); }
#guideRoot :is(.guide-quick-actions,.guide-feature-flow span,.guide-feature-card-icon) { background:var(--ui-tint); color:var(--ui-accent); }
#guideRoot :is(.guide-feature-card,.guide-feature-search,.guide-feature-chip,.guide-quick-action) { border-color:var(--ui-border); background:var(--ui-surface); color:var(--ui-ink); }
#guideRoot :is(.guide-feature-search input,.guide-feature-card-title) { color:var(--ui-ink); }
#guideRoot .guide-feature-search input::placeholder { color:var(--ui-muted); }
#guideRoot .guide-feature-support { background:var(--ui-tint); border-color:var(--ui-border); }
#guideRoot .guide-progress { background:var(--ui-sand); }
#guideRoot .guide-progress span { background:var(--ui-accent); }
#guideRoot .guide-ring { border-color:var(--ui-accent); box-shadow:0 0 0 3px var(--ui-tint); }
#guideRoot .guide-status,#guideWelcome { background:var(--ui-surface); border-color:var(--ui-border); color:var(--ui-ink); box-shadow:0 4px 24px var(--ui-shadow); }
#guideRoot :is(button,input):focus-visible { outline:2px solid var(--ui-accent); outline-offset:3px; }

/* 确认充值的现有弹窗承接算力中心样式，支付宝品牌标识保持原样。 */
#payModal .pay-modal { background:var(--ui-paper); color:var(--ui-ink); border-color:var(--ui-border); border-radius:16px; box-shadow:0 16px 56px var(--ui-shadow); font-family:var(--ui-font); }
#payModal h3 { font-family:var(--ui-display); color:var(--ui-ink); font-size:26px; font-weight:500; }
#payModal :is(.pm-sub,.pm-section-t,.pm-close) { color:var(--ui-muted); }
#payModal .pm-row { border-color:var(--ui-border); }
#payModal .pm-method { background:var(--ui-surface); border-color:var(--ui-border); color:var(--ui-ink); }
#payModal .pm-method.active { background:var(--ui-tint); border-color:var(--ui-accent); box-shadow:none; }
#payModal :is(.pm-arrive,.pm-pay,.gift) { color:var(--ui-accent); }
#payModal .btn-primary { background:var(--ui-action); border-color:var(--ui-action); color:#fff; box-shadow:none; border-radius:12px; }
#payModal .btn-primary:hover { background:var(--ui-hover); border-color:var(--ui-hover); transform:none; }
#payModal .modal-close { background:var(--ui-surface); color:var(--ui-muted); border-color:var(--ui-border); }

@media(max-width:768px) {
  #acct #acctMenu>.workspace-help-mobile { display:flex; }
  body #workspaceTopbar #workspaceActions .theme-switch { min-width:0; }
  body #workspaceTopbar #workspaceActions .theme-switch button { padding:0 8px; gap:0; font-size:11px; }
  body #workspaceTopbar #workspaceActions .theme-switch svg { display:none; }
  body #workspaceTopbar #workspaceActions .balance-pill { padding:6px 8px; min-height:36px; gap:4px; }
  #rechargeView { padding:24px 16px 32px; }
  #rechargeView .rv-head h1 { font-size:28px; }
  #rechargeView .rv-head p { font-size:13px; margin-bottom:24px; }
  #rechargeView .card { padding:20px; }
  #rechargeView .rv-grid { gap:16px; }
  #rechargeView .bal-card .bv { font-size:44px; }
  #rechargeView .amount-grid { gap:20px 12px; margin-top:28px; }
  #rechargeView .amount-grid .amt { padding:24px 8px 16px; }
  #rechargeView .amount-grid .av { font-size:26px; }
  #rechargeView .amount-grid :is(.ag,.ah,.ad) { font-size:11px; }
  #guideRoot .guide-card h2 { font-size:22px; }
  #guideRoot .guide-card { --guide-padding:20px; }
  #guideRoot .guide-actions { padding:12px 20px max(12px,env(safe-area-inset-bottom)); }
}
@media(prefers-reduced-motion:reduce) {
  #workspaceTopbar #workspaceActions *,#rechargeView *,#guideRoot *,#payModal * { transition:none!important; animation:none!important; }
}