/* 全站共享视觉基础；业务页只负责自身布局，避免跨页选择器覆盖表单状态。 */
:root {
  --background: #101310;
  --surface: #161b15;
  --surface-raised: #20271d;
  --surface-hover: #293324;
  --border: #ffffff14;
  --text: #f2f6ec;
  --muted: #a5b09d;
  --accent: #d5eb9e;
  --accent-hover: #e3f3bb;
  --radius: 16px;
  --ui-panel-radius: 24px;
  --ui-control-radius: 12px;
  --ui-panel-border: #ffffff14;
  --ui-panel-shadow: 0 18px 48px #05090438;
  background: var(--background);
  color-scheme: dark;
}
html, body { background-color: var(--background); }
body { color: var(--text); }
button, a, summary { touch-action: manipulation; }
:where(button, a, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
:where(button, input, select, textarea) { accent-color: var(--accent); }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }
:where(.muted, .detail-note) { color: var(--muted); }
:where(.site-header, .workspace-topbar) {
  border-color: var(--border);
  background: #101310ed;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.site-header .brand-mark { border-radius: 10px; }
.site-header .desktop-nav {
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #ffffff03;
}
.site-header .desktop-nav > a,
.site-header .popular-tools-trigger { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; }
.site-header .desktop-nav > a.nav-selected { background: #d5eb9e16; color: var(--accent); }
.site-header .header-actions { min-width: 0; align-items: center; }
.site-header .header-login { flex-shrink: 0; min-width: 44px; min-height: 44px; border-radius: 12px; line-height: 1.4; }
.site-header .slim-language-control { flex: 0 0 auto; align-items: center; min-height: 44px; }
.site-header .slim-language-control select { min-height: 44px; }
.site-header :is(.public-credits, .credit-chip):not([hidden]) { justify-content: center; min-height: 44px; line-height: 1.4; }
.public-credits, .credit-chip { font-variant-numeric: tabular-nums; }
.popular-tools-links, .dropdown-menu {
  border-color: #d5eb9e24;
  border-radius: 16px;
  background: #1a2118;
  box-shadow: 0 16px 44px #05090466;
}
.button {
  min-width: 0;
  min-height: 44px;
  border-radius: var(--ui-control-radius);
  font-weight: 600;
  line-height: 1.4;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.button-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #17200f;
  box-shadow: 0 4px 18px #d5eb9e14;
}
.button-primary:hover:not(:disabled) { background: var(--accent-hover); box-shadow: 0 4px 22px #d5eb9e26; }
.button-secondary, .button-ghost { border-color: #ffffff1c; background: #ffffff04; color: #dbe5d3; }
.button-secondary:hover:not(:disabled), .button-ghost:hover:not(:disabled) { border-color: #d5eb9e40; background: #d5eb9e0a; }
.button:disabled, .header-login:disabled { cursor: not-allowed; box-shadow: none; }
.input, textarea.input {
  min-height: 48px;
  border-color: #ffffff24;
  border-radius: var(--ui-control-radius);
  background: #0f140e;
  color: var(--text);
}
.input::placeholder { color: #839079; }
.input:focus { border-color: #d5eb9e80; }
.field-label { color: #cbd5c3; font-size: 13px; font-weight: 500; }
.slim-select-trigger { border-color: #ffffff24; border-radius: 12px; background: #11170f; }
.slim-select-popup { border-radius: 16px; background: #1a2217; box-shadow: 0 16px 44px #05090466; }
.slim-select-option { border-radius: 9px; }
.modal-backdrop .panel {
  border-color: #ffffff1f;
  border-radius: var(--ui-panel-radius);
  background: #161c14;
  box-shadow: 0 28px 80px #03070299;
}
.modal-backdrop .panel-heading { border-color: var(--border); }
.modal-backdrop .panel-heading h2 { font-weight: 650; letter-spacing: -.025em; }
dialog.credit-dialog, dialog.phone-transfer-dialog {
  border-color: #d5eb9e26;
  border-radius: var(--ui-panel-radius);
  background: #161c14;
  color: var(--text);
}
.credit-dialog-footer { background: #161c14; }
.credit-dialog-plan { border-radius: 14px; background: #ffffff03; }
.credit-dialog-plan.is-selected { border-color: var(--accent); background: #d5eb9e0a; }
.credit-dialog .credit-dialog-buy { border-radius: 999px; font: inherit; font-weight: 650; }
dialog.credit-dialog { padding: 0; scrollbar-width: thin; scrollbar-color: #536446 transparent; overscroll-behavior: contain; }
.credit-dialog-head { position: sticky; top: 0; z-index: 1; align-items: center; padding: 24px 24px 16px; background: #161c14; }
.credit-dialog-head h2 { margin: 6px 0 0; font-size: 26px; }
.credit-dialog-eyebrow { color: var(--accent); }
.credit-dialog-close { width: 44px; height: 44px; border-radius: 12px; color: #bac7b0; }
.credit-dialog-close:hover:not(:disabled) { border-color: #d5eb9e55; background: #d5eb9e0b; }
.credit-dialog-summary { margin: 0 24px 20px; color: #b3bfa9; }
.credit-dialog-plans { padding: 0 24px; }
.credit-dialog-plan { min-width: 0; gap: 12px; padding: 16px; }
.credit-dialog-plan input { appearance: none; width: 19px; height: 19px; border: 1px solid #637255; border-radius: 50%; background: #10170d; }
.credit-dialog-plan input:checked { border: 5px solid var(--accent); }
.credit-dialog-plan:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.credit-dialog-price { flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.credit-dialog-plan-info small { color: #a5b297; }
.credit-dialog-status { margin: 16px 24px 0; padding: 12px 14px; border: 1px solid #ffffff12; border-radius: 12px; background: #ffffff03; }
.credit-dialog-status.is-error { border-color: #ffb6a82b; background: #ffb6a807; }
.credit-dialog-help { align-items: center; gap: 12px; margin: 12px 24px 0; }
.credit-dialog-retry { min-height: 44px; padding: 10px 12px; border: 1px solid #d5eb9e33; border-radius: 12px; background: #d5eb9e08; color: var(--accent); text-decoration: none; }
.credit-dialog-help a { display: inline-flex; align-items: center; min-height: 44px; }
.credit-dialog-footer { bottom: 0; margin-top: 16px; padding: 16px 24px max(24px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid #ffffff12; }
.credit-dialog-footer p { color: #a4b197; font-size: 11px; line-height: 1.6; }
.credit-dialog-close, .phone-transfer-close { display: grid; place-items: center; min-width: 40px; min-height: 40px; line-height: 1; }
.phone-transfer-entry { min-height: 40px; border-radius: 10px; }
.phone-transfer-actions button { border-radius: 12px; }
.toast { border: 1px solid #d5eb9e2b; border-radius: 14px; background: #202a1b; color: #edf5e4; }
.toast { align-items: center; gap: 12px; padding: 10px 12px 10px 16px; line-height: 1.6; }
.toast .icon-button { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; margin: 0; padding: 8px; border-radius: 10px; color: #bac7b0; }
.slim-language-prompt { border-color: #d5eb9e24; border-radius: 20px; background: #161c14; }
.slim-language-prompt button { min-height: 44px; border-radius: 12px; padding: 9px 14px; font-weight: 550; }
.slim-language-prompt .slim-language-close { min-width: 44px; height: 44px; padding: 0; }
.slim-navigation-error { border-color: #d5eb9e33; border-radius: 16px; background: #1b2416; box-shadow: var(--ui-panel-shadow); }
.slim-navigation-error button { min-height: 44px; border-radius: 10px; }
.site-footer { border-color: var(--border); }
.site-footer .footer-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.site-footer .footer-top > * { min-width: 0; }
.site-footer .footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 24px clamp(16px, 3vw, 40px); min-width: 0; margin-right: 0; }
.site-footer .footer-links > div { min-width: 0; align-content: start; gap: 4px; }
.site-footer .footer-links strong { margin-bottom: 8px; }
.site-footer .footer-links a { display: flex; align-items: center; min-width: 0; min-height: 44px; line-height: 1.6; overflow-wrap: anywhere; }
.site-footer .footer-bottom { border-color: var(--border); color: #8e9b84; }
.site-footer :is(p, small) { color: #a0ad96; line-height: 1.7; }
.site-footer a:hover { color: var(--accent); }
.mobile-bottom-nav { background: #111710f2; border-top-color: #d5eb9e1a; }
.mobile-bottom-nav a[aria-current="page"] { border-radius: 12px; background: #d5eb9e15; }
.mobile-transfer-page { background: var(--background); color: var(--text); }
.mobile-transfer-page .transfer-main {
  width: min(34rem, calc(100% - 2rem));
  margin-block: .75rem 1.5rem;
  padding: 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--ui-panel-radius);
  background: #161c14;
  box-shadow: var(--ui-panel-shadow);
}
.mobile-transfer-page .transfer-main h1 { font-weight: 650; letter-spacing: -.035em; }
.mobile-transfer-page .transfer-button { border-radius: 14px; background: #20271c; }
.mobile-transfer-page .transfer-button-primary { border-radius: 999px; background: var(--accent); color: #17200e; }
.mobile-transfer-page .transfer-action-bar { background: #161c14f5; }
@media (max-width: 760px) {
  .site-footer .footer-top { grid-template-columns: minmax(0, 1fr); }
  .site-footer .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header .brand { min-width: 0; }
  .site-header .header-actions { flex-shrink: 0; }
  /* 手机只保留一个账户入口：已登录用积分按钮，未登录用登录按钮。 */
  .site-header .header-login[data-mode="account"],
  .site-header .credit-chip:not([hidden]) ~ .header-login,
  .site-header .public-credits:not([hidden]) ~ .header-login,
  .site-header #accountLink { display: none !important; }
  .site-header .public-credits:not([hidden]),
  .site-header .credit-chip:not([hidden]) {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    max-width: none;
    padding: 7px 10px;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.4;
  }
  .site-header :is(.credit-chip, .public-credits) svg { flex-shrink: 0; }
  .site-header :is(.credit-chip, .public-credits)[data-credit-amount]:not([hidden]) { gap: 0; font-size: 0; }
  .site-header :is(.credit-chip, .public-credits)[data-credit-amount] > svg { display: none; }
  .site-header :is(.credit-chip, .public-credits)[data-credit-amount] > span { font-size: 0; }
  .site-header :is(.credit-chip, .public-credits)[data-credit-amount]::before {
    content: '';
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .site-header :is(.credit-chip, .public-credits)[data-credit-amount]::after { content: attr(data-credit-amount); font-size: 12px; line-height: 1.4; }
  .modal-backdrop .panel { border-radius: 24px; }
  dialog.credit-dialog { border-radius: 24px 24px 0 0; }
  .credit-dialog-head { padding: 20px 18px 14px; }
  .credit-dialog-summary { margin-inline: 18px; }
  .credit-dialog-plans { padding-inline: 18px; }
  .credit-dialog-status, .credit-dialog-help { margin-inline: 18px; }
  .credit-dialog-plan { padding: 12px; gap: 10px; }
  .credit-dialog-plan-info strong { font-size: 14px; }
  .credit-dialog-plan-info small { font-size: 11px; }
  .credit-dialog-price { font-size: 19px; }
  .credit-dialog-footer { padding-inline: 18px; padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)); }
  .credit-dialog-close, .phone-transfer-close { min-width: 44px; min-height: 44px; }
  .mobile-transfer-page .transfer-main { padding: 1.25rem; }
  .mobile-transfer-page .transfer-pickers { gap: .5rem; }
  .mobile-transfer-page .transfer-pickers .transfer-button { padding-inline: .5rem; font-size: .85rem; }
}
@media (max-height: 520px) {
  .credit-dialog-footer { position: static; }
}
@media (max-width: 360px) {
  .site-footer .footer-links { grid-template-columns: minmax(0, 1fr); }
  .site-header .header-actions { gap: 6px; }
  .site-header .public-credits:not([hidden]),
  .site-header .credit-chip:not([hidden]) { max-width: none; padding-inline: 8px; font-size: 11px; }
  .site-header :is(.credit-chip, .public-credits)[data-credit-amount]:not([hidden]) { font-size: 0; }
  .site-header :is(.credit-chip, .public-credits)[data-credit-amount]::after { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .header-login, .popular-tools-trigger { transition: none; }
}

.creation-row .creation-refund { display: block; margin-top: 4px; }

/* 首页与工具页的任务预览，沿用历史记录的媒体面板。 */
.creation-preview { width: min(800px, calc(100% - 24px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid #3b4730; border-radius: 22px; background: #141914; color: var(--text); box-shadow: 0 24px 80px #03070299; overscroll-behavior: contain; }
.creation-preview[open] { display: flex; flex-direction: column; overflow: auto; }
.creation-preview::backdrop { background: #050904cc; backdrop-filter: blur(4px); }
.creation-preview [hidden] { display: none !important; }
body:has(.creation-preview[open]) { overflow: hidden; }
.creation-preview-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 24px; }
.creation-preview-heading h2 { min-width: 0; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.creation-preview-close { display: grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #37412f; border-radius: 12px; background: #1c2319; color: var(--muted); cursor: pointer; }
.creation-preview-close:hover { border-color: #d5eb9e55; color: var(--text); }
.creation-preview-stage { display: grid; flex: 1 1 auto; min-height: 180px; background: #080d07; }
.creation-preview-stage > * { grid-area: 1 / 1; }
.creation-preview video { display: block; width: 100%; height: auto; min-height: 0; max-height: calc(100dvh - 220px); aspect-ratio: auto; background: #080d07; object-fit: contain; }
.creation-preview-feedback { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; min-height: 220px; padding: 28px 22px; background: #10170ee8; text-align: center; }
.creation-preview-feedback p { max-width: 40ch; margin: 0; color: #b8c4ae; font-size: 14px; line-height: 1.7; }
.creation-preview-feedback [role="alert"] { color: #f3c3b3; }
.creation-preview-retry { min-height: 44px; }
.creation-preview-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid #33402a; background: #182015; }
.creation-preview-actions .phone-transfer-entry { margin: 0; }
.creation-preview-actions .button { min-height: 46px; padding: 11px 18px; border-radius: 12px; font-size: 13px; }
.creation-preview :is(button, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.creation-preview-close:focus-visible { outline-offset: -3px; }
@media (max-width: 760px) {
  .creation-preview { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 18px; }
  .creation-preview-heading { padding-left: 18px; }
  .creation-preview video { max-height: calc(100dvh - 215px); }
  .creation-preview-actions { flex-wrap: wrap; padding: 14px 16px max(14px, env(safe-area-inset-bottom)); }
  .creation-preview-actions .button { flex: 1 1 160px; min-height: 48px; }
}
@media (max-height: 480px) {
  .creation-preview-stage, .creation-preview-feedback { min-height: 120px; }
}