/**
 * 固定浅色外观：html[data-theme="light"] 由 layout 内联脚本写入。
 * 工作台语义色供 critical.css / globals 引用；与登录页 auth-shell 对齐。
 */

:root,
html[data-theme="light"] {
  color-scheme: light;
  --app-accent: #ff2dbe;
  --app-link-fg: #d00098;
  --app-link-hover-fg: #b80084;
  --app-auth-link-hover-fg: #b80084;
  --app-auth-secondary-fg: #263238;
  --app-legal-fg: #223038;
  --app-legal-fg-soft: #263238;
  --app-legal-heading-fg: #223038;
  --app-bg: #f2f4f4;
  --app-fg: #223038;
  --app-fg-soft: #263238;
  --app-fg-muted: #5a6a72;
  --app-fg-subtle: #5a6a72;
  --app-surface: rgba(255, 255, 255, 0.92);
  --app-surface-2: #ffffff;
  --app-surface-3: #ffffff;
  --app-surface-4: #f8f9f9;
  --app-border-subtle: rgba(138, 152, 160, 0.18);
  --app-border: rgba(138, 152, 160, 0.28);
  --app-border-strong: rgba(138, 152, 160, 0.38);
  --app-border-input: #78878d;
  --app-overlay: rgba(34, 48, 56, 0.35);
  --app-shadow: rgba(76, 108, 124, 0.22);
  --app-scrollbar: rgba(120, 135, 141, 0.35);
  --app-scrollbar-hover: rgba(120, 135, 141, 0.55);
  --app-input-scheme: light;
  --app-input-bg: #ffffff;
  --app-placeholder: #5a6a72;
  --app-disabled-bg: rgba(138, 152, 160, 0.12);
  --app-disabled-fg: #78878d;
  --app-on-accent: #101114;
  --app-media-bg: #000000;
  --app-media-fg: #ffffff;
  --app-media-overlay: rgba(0, 0, 0, 0.58);
  --app-selection-bg: rgba(255, 45, 190, 0.2);
  --app-selection-fg: #223038;
  --app-skeleton: rgba(138, 152, 160, 0.18);
  /*
   * 封面骨架 / 失败兜底（LazyCoverMedia）：
   * --app-skeleton 在白色卡片上几乎看不出对比，衍生封面 404 时会被误认为白屏，
   * 这里给骨架层单独一档更明显的灰，并用高光做 shimmer 扫光。
   */
  --app-skeleton-strong: rgba(138, 152, 160, 0.34);
  --app-skeleton-shine: rgba(255, 255, 255, 0.66);
  --app-focus-ring: #f500b5;
  --app-success-fg: #166534;
  --app-success-bg: #f0fdf4;
  --app-success-border: #bbf7d0;
  --app-warning-fg: #92400e;
  --app-warning-bg: #fffbeb;
  --app-warning-border: #fde68a;
  --app-error-fg: #b91c1c;
  --app-error-bg: #fef2f2;
  --app-error-border: #fecaca;
  --app-info-fg: #1d4ed8;
  --app-info-bg: #eff6ff;
  --app-info-border: #bfdbfe;
  --brand-accent-muted-bg: #fff0f9;
  --brand-accent-muted-bg-hover: #ffe5f5;
  --brand-accent-muted-border: rgba(255, 45, 190, 0.28);
  --background: var(--app-bg);
  --foreground: var(--app-fg);
  --surface: var(--app-surface);
  --border: var(--app-border);
}

body.app-body {
  background: var(--app-bg);
  color: var(--app-fg);
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="tel"],
textarea,
select {
  color-scheme: var(--app-input-scheme);
}

::-webkit-scrollbar-thumb {
  background: var(--app-scrollbar);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--app-scrollbar-hover);
}

.auth-modal-overlay {
  background: rgba(34, 48, 56, 0.42);
}

.auth-modal-overlay--landing {
  background: rgba(34, 48, 56, 0.22);
}

.settings-readonly,
.settings-btn-secondary:not(:disabled) {
  color: var(--app-fg-soft);
}

.settings-brand-mark-dual {
  position: relative;
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
}

.settings-brand-mark-dual img {
  position: absolute;
  inset: 0;
}

.settings-brand-mark-on-dark {
  display: none;
}

.themed-brand-mark-dual {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.themed-brand-mark-dual img {
  position: absolute;
  inset: 0;
}

.themed-brand-mark-on-light {
  display: block;
}

.themed-brand-mark-on-dark {
  display: none;
}

.billing-modal-title {
  color: var(--app-fg);
}

.billing-modal-subtitle,
.billing-modal-section-label {
  color: var(--app-fg-muted);
}

.billing-modal-enterprise-button {
  border: 0;
  background: var(--app-accent);
  color: var(--app-on-accent);
}

.billing-modal-enterprise-button:hover {
  background: var(--app-accent);
}

.billing-modal-panel .text-white {
  color: var(--app-fg);
}

.billing-modal-panel .text-white\/40,
.billing-modal-panel .text-white\/45,
.billing-modal-panel .text-white\/50,
.billing-modal-panel .text-white\/55 {
  color: var(--app-fg-muted);
}

.billing-modal-panel .text-white\/60,
.billing-modal-panel .text-white\/65 {
  color: var(--app-fg-subtle);
}

.billing-modal-panel .text-white\/80,
.billing-modal-panel .text-white\/85 {
  color: var(--app-fg-soft);
}

.billing-modal-panel .text-\[\#FF2DBE\] {
  color: var(--app-link-fg);
}

.billing-modal-panel .text-amber-200,
.billing-modal-panel .text-amber-200\/80 {
  color: var(--app-warning-fg);
}

.billing-modal-panel .pricing-plan-card.border-white\/\[0\.08\] {
  border-color: var(--app-border);
  background-color: var(--app-surface);
}

.billing-modal-panel .pricing-plan-card.border-\[\#FF2DBE\]\/40 {
  background-color: var(--brand-accent-muted-bg);
}

.billing-modal-panel .pricing-plan-card.border-amber-400\/25,
.billing-modal-panel .border-amber-400\/40 {
  border-color: var(--app-warning-border);
}

.billing-modal-panel .pricing-plan-card.border-amber-400\/25,
.billing-modal-panel .bg-amber-400\/10 {
  background-color: var(--app-warning-bg);
}

.billing-modal-panel .pricing-plan-badge--featured {
  color: var(--app-on-accent);
}

/* 入门版「限购一次」：实心高对比，避免浅黄底 + 浅字在浅色弹窗里看不清 */
.billing-modal-panel .pricing-plan-badge--starter-limit {
  border: 1px solid #d97706;
  background: #fbbf24;
  color: #451a03;
  box-shadow: 0 1px 0 rgba(69, 26, 3, 0.12);
}

.billing-modal-panel .pricing-plan-badge--starter-limit-used {
  border: 1px solid var(--app-border);
  background: var(--app-surface-2);
  color: var(--app-fg-muted);
}

.pricing-plan-badge--starter-limit {
  border: 1px solid #d97706;
  background: #fbbf24;
  color: #451a03;
  box-shadow: 0 1px 0 rgba(69, 26, 3, 0.12);
}

.pricing-plan-badge--starter-limit-used {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
}

.billing-modal-panel .pricing-plan-cta .bg-white {
  background-color: var(--app-fg);
}

.billing-modal-panel .pricing-plan-cta .text-black {
  color: var(--app-bg);
}

.billing-modal-panel .pricing-plan-cta button:disabled {
  background-color: var(--app-disabled-bg);
  color: var(--app-disabled-fg);
}

.billing-topup > section,
.billing-credit-rates,
.billing-credit-rates .rounded-xl {
  border-color: var(--app-border);
  background-color: var(--app-surface);
}

.billing-credit-rates tr {
  border-color: var(--app-border);
}

.billing-credit-rates code {
  background-color: var(--app-surface-3);
}

.billing-topup .border-white\/20 {
  border-color: var(--app-border-input);
}

.billing-topup .hover\:border-white\/40:hover {
  border-color: var(--app-focus-ring);
}

.billing-modal-panel button:focus-visible,
.billing-modal-panel input:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 2px;
}

/* ── 社区、评论、分享与发布 ── */
.community-subtitle,
.community-result-count,
.community-card-meta,
.community-card-desc,
.community-detail-meta,
.community-share-panel-hint,
.community-share-caption-count,
.community-publish-copy-count,
.community-comment-char-count,
.community-comment-time,
.community-empty-hint,
.community-loading,
.community-loading-page,
.community-empty,
.community-filter-label,
.community-toolbar-hint,
.community-comment-cancel,
.community-comment-action {
  color: var(--app-fg-muted);
}

.community-toolbar {
  border-color: var(--app-border);
  background: linear-gradient(
    180deg,
    var(--app-surface-2) 0%,
    var(--app-surface-4) 100%
  );
  box-shadow: 0 1px 0 var(--app-border-subtle) inset;
}

.community-toolbar-toggle,
.community-filter-chip,
.community-action-btn,
.community-icon-btn,
.community-btn-ghost {
  border-color: var(--app-border-input);
  background: var(--app-surface-2);
  color: var(--app-fg-soft);
}

.community-toolbar-toggle:hover,
.community-filter-chip:hover {
  border-color: var(--app-focus-ring);
  background: var(--app-surface-4);
  color: var(--app-fg);
}

.community-toolbar-toggle.is-expanded,
.community-filter-chip.is-active {
  border-color: var(--app-focus-ring);
  background: var(--brand-accent-muted-bg);
  color: var(--app-link-fg);
}

.community-toolbar-toggle-badge,
.community-section-count {
  background: var(--brand-accent-muted-bg);
  color: var(--app-link-fg);
}

.community-search,
.community-comment-compose-box {
  border-color: var(--app-border-input);
  background: var(--app-input-bg);
}

.community-search:focus-within,
.community-comment-compose-box:focus-within {
  border-color: var(--app-focus-ring);
  box-shadow: 0 0 0 1px var(--app-focus-ring);
}

.community-search-icon,
.community-search-input::placeholder,
.community-comment-input::placeholder {
  color: var(--app-placeholder);
}

.community-search-input,
.community-comment-input,
.community-share-caption-input,
.community-modal-publish textarea.community-publish-copy {
  background: var(--app-input-bg);
  color: var(--app-fg-soft);
}

.community-search-clear {
  background: var(--app-surface-4);
  color: var(--app-fg-muted);
}

.community-search-clear:hover,
.community-comment-cancel:hover {
  background: var(--app-surface-4);
  color: var(--app-fg);
}

.community-filter-chip.is-active {
  box-shadow: 0 0 0 1px var(--brand-accent-muted-border);
}

.community-toolbar-meta,
.community-comment-compose-footer {
  border-color: var(--app-border);
}

.community-toolbar-reset,
.community-card-action.is-active,
.community-action-btn.is-active,
.community-detail-preset-link,
.community-share-copy-link,
.community-comment-toggle-replies,
.community-accent-icon {
  color: var(--app-link-fg);
}

.community-toolbar-reset {
  border-color: var(--app-border-input);
  background: var(--app-surface-2);
}

.community-toolbar-reset:hover,
.community-comment-action:hover,
.community-comment-toggle-replies:hover,
.community-share-channel-btn:hover {
  border-color: var(--app-focus-ring);
  background: var(--brand-accent-muted-bg);
  color: var(--app-link-hover-fg);
}

.community-card-media,
.community-detail-media {
  background: var(--app-media-bg);
}

/* 所有媒体源都失败时的中性兜底：浅灰渐变，避免卡片变成纯白空块 */
.lazy-cover-media-placeholder {
  background:
    linear-gradient(
      150deg,
      var(--app-skeleton-strong) 0%,
      var(--app-skeleton) 100%
    );
}

.community-card-img,
.community-detail-img,
.community-detail-video {
  filter: none;
}

.community-card-product {
  background: var(--app-media-overlay);
  color: var(--app-media-fg);
}

.community-banner-error {
  border-color: var(--app-error-border);
  background: var(--app-error-bg);
  color: var(--app-error-fg);
}

.community-btn-primary {
  border-color: var(--app-focus-ring);
  background: var(--brand-accent-muted-bg);
  color: var(--app-link-fg);
}

.community-detail-preset-link:hover,
.community-share-copy-link:hover,
.community-comment-toggle-replies:hover {
  color: var(--app-link-hover-fg);
}

.community-action-btn-danger,
.community-comment-action-muted,
.community-field-error {
  color: var(--app-error-fg);
}

.community-comment-action-muted:hover {
  background: var(--app-error-bg);
  color: var(--app-error-fg);
}

.community-share-backdrop,
.community-modal-backdrop {
  background: var(--app-overlay);
}

.community-share-panel,
.community-modal {
  border-color: var(--app-border-input);
  background: var(--app-surface-2);
  box-shadow: 0 12px 40px var(--app-shadow);
}

.community-share-panel-title,
.community-section-title,
.community-comment-author {
  color: var(--app-fg);
}

.community-share-caption-input,
.community-modal-publish textarea.community-publish-copy {
  border-color: var(--app-border-input);
}

.community-share-caption-input:focus,
.community-modal-publish textarea.community-publish-copy:focus {
  border-color: var(--app-focus-ring);
  box-shadow: 0 0 0 1px var(--app-focus-ring);
}

.community-share-channel-btn {
  border-color: var(--app-border-input);
  background: var(--app-surface-4);
  color: var(--app-fg-soft);
}

.community-share-toast {
  border-color: var(--app-border-input);
  background: var(--app-surface-2);
  color: var(--app-fg-soft);
  box-shadow: 0 8px 24px var(--app-shadow);
}

.community-comments {
  border-color: var(--app-border);
  background: linear-gradient(
    180deg,
    var(--app-surface) 0%,
    var(--app-surface-2) 100%
  );
}

.community-section-count {
  border-color: var(--brand-accent-muted-border);
}

.community-comment-compose-footer {
  background: var(--app-surface-4);
}

.community-comment-submit {
  background: linear-gradient(135deg, #ff2dbe 0%, #d946ef 100%);
  color: var(--app-on-accent);
}

.community-comment-submit:disabled {
  background: var(--app-disabled-bg);
  color: var(--app-disabled-fg);
}

.community-comment-item-reply .community-comment-bubble {
  border-color: var(--app-border-strong);
  background: var(--app-surface-4);
}

.community-comment-body,
.community-modal-success {
  color: var(--app-fg-soft);
}

.community-modal .community-input {
  border-color: var(--app-border-input);
  background: var(--app-input-bg);
  color: var(--app-fg-soft);
}

.user-avatar-img {
  border-color: var(--app-border-input);
}

html[data-theme="light"] .user-avatar-fallback {
  color: var(--community-avatar-light-fg);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .user-avatar-fallback {
    color: var(--community-avatar-light-fg);
  }
}

.community-focusable:focus-visible,
.community-shell button:focus-visible,
.community-shell a:focus-visible,
.community-shell input:focus-visible,
.community-shell textarea:focus-visible,
.community-modal-backdrop button:focus-visible,
.community-modal-backdrop a:focus-visible,
.community-modal-backdrop input:focus-visible,
.community-modal-backdrop textarea:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 2px;
}

/* ── 独立错误页、客服、真人认证与全局反馈 ── */
.global-error-button:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 3px;
}

.customer-service-modal-backdrop,
.avatar-crop-modal-backdrop {
  background: var(--app-overlay);
}

.avatar-crop-modal-panel {
  border-color: var(--app-border);
  background: var(--app-surface);
  color: var(--app-fg);
}

.avatar-crop-modal-kicker {
  color: var(--app-link-fg);
}

.avatar-crop-modal-title {
  color: var(--app-fg);
}

.avatar-crop-modal-close {
  border-color: var(--app-border-input);
  background: var(--app-surface-2);
  color: var(--app-fg-muted);
}

.avatar-crop-modal-close:hover:not(:disabled) {
  border-color: var(--app-focus-ring);
  color: var(--app-fg);
}

.avatar-crop-modal-close:focus-visible,
.avatar-crop-zoom-btn:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 2px;
}

.avatar-crop-hint {
  color: var(--app-fg-muted);
}

.avatar-crop-zoom-btn:hover:not(:disabled) {
  border-color: var(--app-focus-ring);
  color: var(--app-fg);
}

.customer-service-modal-panel {
  border-color: var(--app-border);
  background: var(--app-surface);
  color: var(--app-fg);
}

.customer-service-modal-header,
.customer-service-modal-footer {
  border-color: var(--app-border);
}

.customer-service-modal-kicker {
  color: var(--app-link-fg);
}

.customer-service-modal-title {
  color: var(--app-fg);
}

.customer-service-modal-close {
  border: 1px solid var(--app-border-input);
  background: var(--app-surface-2);
  color: var(--app-fg-muted);
}

.customer-service-modal-close:hover {
  border-color: var(--app-focus-ring) !important;
  color: var(--app-fg);
}

.customer-service-modal-close:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 2px;
}

.customer-service-modal-body .text-white,
.settings-support-content .text-white {
  color: var(--app-fg);
}

.customer-service-modal-body .text-\[\#888\],
.customer-service-modal-body .text-\[\#666\],
.customer-service-modal-body .text-\[\#555\],
.settings-support-content .text-\[\#888\],
.settings-support-content .text-\[\#666\],
.settings-support-content .text-\[\#555\] {
  color: var(--app-fg-muted);
}

.customer-service-modal-body .bg-white .text-\[\#666\],
.settings-support-content .bg-white .text-\[\#666\] {
  color: #666;
}

.customer-service-modal-body .border-\[\#333\],
.settings-support-content .border-\[\#333\] {
  border-color: var(--app-border-input);
}

.customer-service-modal-body .bg-\[\#1a1a1a\],
.settings-support-content .bg-\[\#1a1a1a\] {
  background-color: var(--app-surface-2);
}

.liveness-config-warning {
  border-color: var(--app-warning-border) !important;
  background: var(--app-warning-bg);
  color: var(--app-warning-fg);
}

.liveness-status-loading,
.liveness-status-description,
.liveness-status-meta {
  color: var(--app-fg-muted);
}

.liveness-status-card {
  border-color: var(--app-border) !important;
  background: var(--app-surface-2);
}

.liveness-status-card-ready {
  border-color: var(--brand-accent-muted-border) !important;
}

.liveness-status-title {
  color: var(--app-fg);
}

.liveness-status-icon-ready,
.liveness-status-icon-accent {
  color: var(--app-link-fg);
}

.liveness-status-icon-warning {
  color: var(--app-warning-fg);
}

.liveness-status-action {
  border: 1px solid var(--app-border-input);
  background: var(--app-surface);
  color: var(--app-fg-soft);
}

.liveness-status-action:hover:not(:disabled) {
  border-color: var(--app-focus-ring) !important;
  color: var(--app-fg);
}

.liveness-status-action:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 2px;
}

.liveness-picker-row {
  border: 1px solid var(--app-border-input) !important;
  background: var(--app-surface);
  color: var(--app-fg-soft);
}

button.liveness-picker-row:hover:not(:disabled) {
  border-color: var(--app-focus-ring) !important;
  color: var(--app-fg);
}

button.liveness-picker-row:focus-visible,
.liveness-picker-option:focus-visible,
.preset-create-action:focus-visible {
  outline: 2px solid var(--app-focus-ring);
  outline-offset: 2px;
}

.liveness-picker-value {
  color: var(--app-fg);
}

.liveness-picker-label,
.liveness-picker-placeholder,
.liveness-picker-chevron {
  color: var(--app-fg-muted);
}

.liveness-picker-dropdown,
.liveness-auth-popover {
  border-color: var(--app-border-input) !important;
  background: var(--app-surface);
  color: var(--app-fg-soft);
}

.liveness-picker-option {
  color: var(--app-fg-soft);
}

.liveness-picker-option:hover {
  background: var(--brand-accent-muted-bg);
  color: var(--app-fg);
}

.liveness-picker-option-selected,
.liveness-picker-option-selected:hover {
  color: var(--app-link-fg);
}

.liveness-auth-popover {
  box-shadow: 0 25px 50px -12px var(--app-shadow);
}

.liveness-auth-popover-action {
  background: var(--app-surface-2);
}

.preset-create-card,
.preset-create-icon {
  border-color: var(--app-border-input) !important;
}

.preset-create-card {
  background: var(--app-surface);
}

.preset-create-icon {
  background: var(--app-surface-2);
  color: var(--app-fg-muted);
}

.preset-create-copy,
.preset-grid-empty,
.preset-grid-empty-hint {
  color: var(--app-fg-muted);
}

.preset-grid-empty-title {
  color: var(--app-fg-soft);
}

.preset-create-action {
  border: 1px solid var(--app-border-input) !important;
  background: var(--app-surface-2);
  color: var(--app-fg-soft);
}

.preset-create-action:hover:not(:disabled) {
  border-color: var(--app-focus-ring) !important;
  color: var(--app-fg);
}

html[data-theme="light"] .studio-sidebar .ratio-btn-active {
  color: var(--app-on-accent);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .studio-sidebar .ratio-btn-active {
    color: var(--app-on-accent);
  }
}