/* ==========================================================================
   global.css —— Phase 1 视觉地基 / Visual foundation
   --------------------------------------------------------------------------
   设计目标 / Design intent
     · clothoff 暗色基调（#0a0a0a 背景 + 橙色 #f97316 主 CTA）
     · 干净、不喧宾夺主：删掉旧版的紫色 orb / pulse-glow / glass blur
     · 兼容 Phase 1 之前的模板 class 名（.glass / .btn-primary / .gradient-text /
       .card-hover / .pulse-glow / .page-orb / .page-grid），把它们重映射到 clothoff
       色板，避免 Phase 2 之前页面"白屏 / 找不到样式"
   --------------------------------------------------------------------------
   颜色变量来自 input.css :root（统一在那里定义），这里只消费不重复定义。
   Color tokens are defined in input.css :root — consume only, do not redeclare.
   ========================================================================== */


/* ==========================================================================
   1. Document base reset
   ========================================================================== */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  background: var(--fx-bg);
  color: var(--fx-text);
  font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont,
               'Segoe UI', 'Noto Sans SC', system-ui, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  position: relative;
}

/* 选中文本配色 / Text selection */
::selection {
  background: var(--fx-accent);
  color: #000;
}


/* ==========================================================================
   2. Scrollbar — 极窄 + 暗色，跟 clothoff 一致
   ========================================================================== */
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: var(--fx-bg); }
::-webkit-scrollbar-thumb   { background: #2a2a2a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #2a2a2a var(--fx-bg); }


/* ==========================================================================
   3. 旧 class 名兼容层 / Legacy class shim
   --------------------------------------------------------------------------
   Phase 1 不动 home_i18n / login_i18n / dashboard_i18n 等模板内容
   （边界规则）。这些模板还在引用 .glass / .btn-primary / .gradient-text 等
   旧 class，所以这里把它们重映射到 clothoff 色板，让"换皮"在 Phase 2 重写
   模板之前就先生效。
   --------------------------------------------------------------------------
   Phase 1 explicitly does NOT rewrite home / login / dashboard templates.
   They still reference legacy class names (.glass, .btn-primary, …).
   We re-map those names to the clothoff palette so visuals shift orange/dark
   _before_ Phase 2 touches the templates themselves.
   ========================================================================== */

/* —— glass / 半透明卡片：去掉花俏 blur，留一层暗色卡 —— */
.glass {
  background: rgba(17, 17, 17, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--fx-border);
}

/* —— gradient-text：原先 indigo→purple→pink，改 clothoff 橙系 —— */
.gradient-text {
  background: linear-gradient(135deg, #f97316 0%, #ff8a3d 50%, #f97316 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* —— btn-primary：原先 indigo→purple，改 clothoff 橙 —— */
.btn-primary {
  background: var(--fx-accent);
  color: #fff;
  transition: background var(--fx-hover-duration) var(--fx-hover-curve),
              transform   var(--fx-hover-duration) var(--fx-hover-curve);
}
.btn-primary:hover {
  background: var(--fx-accent-hover);
  transform: translateY(-1px);
}

/* —— card：暗卡 + 橙边 hover —— */
.card {
  background: var(--fx-bg-card);
  border: 1px solid var(--fx-border);
  transition: border-color var(--fx-hover-duration) var(--fx-hover-curve),
              transform    var(--fx-hover-duration) var(--fx-hover-curve);
}
.card:hover {
  border-color: rgba(249, 115, 22, 0.35);
  transform: translateY(-2px);
}

/* —— card-hover：保留 className，悬浮抬一下、阴影改成纯黑 —— */
.card-hover {
  transition: transform var(--fx-hover-duration) var(--fx-hover-curve),
              box-shadow var(--fx-hover-duration) var(--fx-hover-curve);
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* —— glow / pulse-glow：clothoff 风格不强调发光，做个低调 ring —— */
.glow,
.pulse-glow {
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.25);
  animation: none; /* 关掉旧版 pulseGlow 动画 */
}

/* —— page-orb / page-grid：clothoff 不用浮动 orb 装饰
       保留 selector 但隐藏它们，避免要去改 7+ 个模板的 DOM —— */
.page-orb,
.page-grid { display: none !important; }

/* —— 旧版渐变背景 body 残留：被 #0a0a0a body 接管，无需额外处理 —— */


/* ==========================================================================
   4. 通用 utility / Common utilities
   ========================================================================== */

/* 文本溢出省略 */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 响应式隐藏 */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* 表单焦点环：橙色 */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--fx-accent) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}


/* ==========================================================================
   5. Modal / drawer / sheet 动画
   --------------------------------------------------------------------------
   缓动用 input.css :root 里的 --fx-sheet-curve（Vaul cubic-bezier(.32,.72,0,1)）
   和 --fx-hover-curve（cubic-bezier(.23,1,.32,1)），跟 clothoff 实测对齐。
   ========================================================================== */

/* Backdrop 淡入 */
.modal-backdrop { animation: fxBackdropFadeIn 300ms var(--fx-hover-curve); }

@keyframes fxBackdropFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 内容从底部上滑（spec §2.5 sheet 曲线） */
.modal-slide-up {
  animation: fxSlideUp var(--fx-sheet-duration) var(--fx-sheet-curve);
}

@keyframes fxSlideUp {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 关闭动画 */
.modal-slide-down {
  animation: fxSlideDown 300ms var(--fx-hover-curve) forwards;
}

@keyframes fxSlideDown {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(32px); }
}

/* Modal 必须保持 fixed 定位居中 */
[id$="Modal"] { position: fixed !important; }


/* ==========================================================================
   6. 加载 / Skeleton
   ========================================================================== */
.skeleton {
  background: linear-gradient(90deg, #1a1a1a 25%, #252525 50%, #1a1a1a 75%);
  background-size: 200% 100%;
  animation: fxSkeleton 1.5s linear infinite;
}

@keyframes fxSkeleton {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(249, 115, 22, 0.18);
  border-top-color: var(--fx-accent);
  border-radius: 50%;
  animation: fxSpin 1s linear infinite;
}

@keyframes fxSpin {
  to { transform: rotate(360deg); }
}


/* ==========================================================================
   7. RTL 微调（ar 语种）
   ========================================================================== */
html[lang="ar"] body { direction: rtl; }


/* ==========================================================================
   8. Phase 0 — clothoff 1:1 Canonical Design Tokens
   --------------------------------------------------------------------------
   仅追加，不覆盖。所有 --clothoff-* 与 --fx-* 并存，单页 worker 按需选用。
   完整文档：docs/clothoff-design-system.md
   抓取脚本：docs/_raw/extract-design-tokens.js
   原始数据：docs/_raw/clothoff-design-tokens-raw.json (2026-05-11)
   ========================================================================== */
:root {
  /* —— Brand orange（实测 lab(72.7,31.9,97.9) → #ff9800 / Material 橙）—— */
  --clothoff-orange-500:   #ff9800;
  --clothoff-orange-600:   #fb8c00;
  --clothoff-orange-400:   #ffa726;

  /* —— Surface tier (实测来源见 design-system.md §1.2) —— */
  --clothoff-bg:           #000000;
  --clothoff-surface-1:    #18181b;   /* lab(8.3, 0.6, -2.2) → bg-card */
  --clothoff-surface-2:    #27272a;   /* lab(15.7, 0.6, -2.2) → button bg */
  --clothoff-surface-overlay: rgba(24, 24, 27, 0.5);
  --clothoff-overlay-side:    rgba(0, 0, 0, 0.4);
  --clothoff-overlay-bottom:  rgba(0, 0, 0, 0);

  /* —— Text tier —— */
  --clothoff-text:         #ffffff;
  --clothoff-text-soft:    #c1c1c1;   /* text-neutral-300 */
  --clothoff-text-muted:   #6a6a6a;   /* text-neutral-500 / placeholder */
  --clothoff-text-dim:     rgba(255, 255, 255, 0.5);

  /* —— Border —— */
  --clothoff-border:        #27272a;
  --clothoff-border-soft:   rgba(255, 255, 255, 0.06);
  --clothoff-border-strong: rgba(255, 255, 255, 0.12);

  /* —— Semantic（取自 toastify 默认）—— */
  --clothoff-success: #07bc0c;
  --clothoff-warning: #f1c40f;
  --clothoff-danger:  #e74c3c;
  --clothoff-info:    #3498db;

  /* —— Radius scale（实测主流值）—— */
  --clothoff-radius-sm:   4px;
  --clothoff-radius-md:   8px;
  --clothoff-radius-lg:   12px;     /* rounded-xl, gen 卡片 */
  --clothoff-radius-xl:   16px;     /* rounded-2xl, buy 卡片 */
  --clothoff-radius-2xl:  24px;     /* drawer 顶角 */
  --clothoff-radius-full: 9999px;   /* pill / 头像 */

  /* —— Shadow scale（clothoff 几乎不用阴影，保留兜底）—— */
  --clothoff-shadow-none:  none;
  --clothoff-shadow-card:  0 0 0 1px rgba(255, 255, 255, 0.05);
  --clothoff-shadow-pop:   0 12px 32px rgba(0, 0, 0, 0.6);
  --clothoff-shadow-toast: 0px 4px 12px rgba(0, 0, 0, 0.1);

  /* —— Easing & duration（实测命中数）—— */
  --clothoff-ease-default:  ease;                              /* 97 命中 */
  --clothoff-ease-material: cubic-bezier(0.4, 0, 0.2, 1);      /* 9 命中 */
  --clothoff-ease-sheet:    cubic-bezier(0.32, 0.72, 0, 1);    /* Vaul */
  --clothoff-ease-quint:    cubic-bezier(0.23, 1, 0.32, 1);
  --clothoff-ease-swing:    ease-in-out;

  --clothoff-duration-fast:  100ms;
  --clothoff-duration-hover: 200ms;
  --clothoff-duration-card:  300ms;
  --clothoff-duration-sheet: 500ms;
  --clothoff-duration-swing: 3000ms;

  /* —— Container（实测 max-w-7xl + px-10）—— */
  --clothoff-container-max: 1280px;
  --clothoff-container-px:  40px;
  --clothoff-header-h:      64px;
}


/* ==========================================================================
   9. 2026-05-13 视觉升级 / Visual upgrade
   --------------------------------------------------------------------------
   · Material Symbols 字体类（替换全站 emoji）
   · Motion tokens (--motion-duration-* / --motion-ease-*)
   · 卡片 / CTA hover-active 微反馈（scale 1.01 / 0.99）
   · BEFORE 占位 wiggle 摇晃（4 层应用）
   · 底部 nav active tab 心跳脉冲 + 橙色 glow
   · 主菜单角标徽章（红点 / 数字角标）
   · prefers-reduced-motion 全局兜底
   --------------------------------------------------------------------------
   设计灵感来自 clothoff (cheatsheet 2026-05-13)：scaleLoop / conicSpin / Material
   easing。fotoxreseller 抄结构不抄品牌色（仍用我们 --fx-accent 橙）。
   ========================================================================== */

/* ---------- 9.1 Material Symbols 字体类 / Material Symbols icon class ----- */

/* 2026-05-13 自托管 Material Symbols Outlined / Self-hosted woff2
   Why: Brave Android（含部分隐私强化浏览器）拦截 Google Fonts woff2，
        ligature 加载失败时，关键字（"diamond" / "image" / "movie" ...）
        会以文本形式渲染。本地化字体绕过 CDN 拦截。
   Variant: opsz 24 / wght 400 / FILL 0 / GRAD 0（与原 CDN 配置一致）。
   font-display: block —— 加载前 invisible，避免 fallback 短暂显示
   ligature 关键字文本（比 swap 更安全）。 */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url('/static/fonts/material-symbols-outlined.woff2') format('woff2');
    font-display: block;
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    user-select: none;
}
.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1;
}

/* ---------- 9.2 Motion tokens / 全站缓动 + 时长基线 --------------------
   W1 (2026-05-13) 扩展：新增 modal/pill/out 三档缓动，覆盖 clothoff & undress
   两套抄站 cheatsheet 里识别出的 5 类典型曲线（standard / vaul / modal pop /
   pill spring / linear-out）。W2-W5 新动画统一引用这些 token，禁止再自己写
   cubic-bezier 数字。 */
:root {
    --motion-duration-fast:    0.15s;
    --motion-duration-normal:  0.2s;
    --motion-duration-slow:    0.5s;
    --motion-ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);  /* Material 标准 */
    --motion-ease-vaul:        cubic-bezier(0.32, 0.72, 0, 1); /* Vaul drawer */
    --motion-ease-modal:       cubic-bezier(0.34, 1.15, 0.4, 1); /* modal pop spring */
    --motion-ease-pill:        cubic-bezier(0.22, 1, 0.36, 1);   /* pill / chip ease */
    --motion-ease-out:         cubic-bezier(0, 0, 0.58, 1);      /* linear-out */
}

/* ---------- 9.3 通用卡片 / CTA hover-active 微反馈 ---------------------
   Why: clothoff 全站点击块都用 hover:scale-101 + active:scale-99 + duration-200
   作为"按下去"的物理感反馈。我们直接套到现有 .fx-* class 上。
   未存在的 class 选择器静默忽略，安全副作用。 */
.fx-payment-card,
.fx-pkg-card,
.fx-cat-card,
.fx-tooldrawer-card,
.fx-swipe-card,
.fx-tab-pill,
.fx-tld-cta,
.fx-tooldrawer-submit,
.fx-quick-action-btn,
.fx-balance-cap-btn,
button.fx-btn-primary,
button.fx-btn-secondary,
.clothoff-cta,
.rch-pkg-card,
.rch-pay-card {
    transition: transform var(--motion-duration-normal) var(--motion-ease-standard),
                background-color var(--motion-duration-fast) ease,
                border-color var(--motion-duration-fast) ease,
                box-shadow var(--motion-duration-normal) var(--motion-ease-standard);
    will-change: transform;
}
.fx-payment-card:hover,
.fx-pkg-card:hover,
.fx-cat-card:hover,
.fx-tooldrawer-card:hover,
.fx-swipe-card:hover,
.fx-tld-cta:hover,
.fx-tooldrawer-submit:hover:not(:disabled),
.fx-balance-cap-btn:hover,
button.fx-btn-primary:hover,
button.fx-btn-secondary:hover,
.clothoff-cta:hover,
.rch-pkg-card:hover,
.rch-pay-card:hover {
    transform: scale(1.01);
}
.fx-payment-card:active,
.fx-pkg-card:active,
.fx-cat-card:active,
.fx-tooldrawer-card:active,
.fx-swipe-card:active,
.fx-tld-cta:active,
.fx-tooldrawer-submit:active:not(:disabled),
.fx-balance-cap-btn:active,
button.fx-btn-primary:active,
button.fx-btn-secondary:active,
.clothoff-cta:active,
.rch-pkg-card:active,
.rch-pay-card:active {
    transform: scale(0.99);
}

/* ---------- 9.4 BEFORE 占位 wiggle / 持续左右摇摆动画 ------------------
   Why: tooldrawer / swipe / category 大图占位区原图（"Before"）默认静止，
   用户容易忽略它能上传。clothoff 用的是持续左右摇摆（±4°，1.2s 一周期）
   而非偶发抖动，更稳定地吸引注意。Material Symbols filter 也同理。 */
@keyframes fx-before-wiggle {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(4deg); }
}
.fx-cat-card__compare,
.fx-tooldrawer-card .fx-td-before,
.fx-swipe-card .fx-card-before,
.fx-tld-empty-hero__hint-img,
.fx-tld-empty-hero__hint-placeholder {
    animation: fx-before-wiggle 1.2s ease-in-out infinite;
    transform-origin: center;
}
.fx-cat-card:hover .fx-cat-card__compare,
.fx-tooldrawer-card:hover .fx-td-before,
.fx-swipe-card:hover .fx-card-before {
    animation-play-state: paused;
}

/* ---------- 9.4.1 Picker step effect cards 入场动画 ---------------------
   Why: 切换分类时 30 张 effect cards 同时炸出来视觉撕裂。clothoff 风格用
   stagger fade-in（每张延迟 30ms，封顶 600ms），上滑+缩放+渐显，
   配合 inline animation-delay 实现波浪状错峰入场。 */
@keyframes fx-card-enter {
    0%   { opacity: 0; transform: translateY(16px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fx-tooldrawer-card {
    animation: fx-card-enter 0.35s cubic-bezier(.4, 0, .2, 1) backwards;
}
@media (prefers-reduced-motion: reduce) {
    .fx-tooldrawer-card { animation: none; }
}

/* ---------- 9.5 选中态 nav tab 心跳 + 彩光 / Heartbeat + glow ----------
   Why: clothoff 实测的 scaleLoop（1 → 1.05 → 1）每 1.5s 心跳 + drop-shadow
   叠加底色 glow。我们把它套到底栏 active tab 的 svg/Material Symbols 上。 */
@keyframes fx-scale-loop {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
@keyframes fx-conic-spin {
    to { transform: rotate(360deg); }
}
.fx-bottom-nav .fx-tab[data-active="true"] svg,
.fx-bottom-nav .fx-tab[data-active="true"] .material-symbols-outlined {
    animation: fx-scale-loop 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 8px var(--fx-accent, #f97316));
}
.fx-bottom-nav .fx-tab[data-active="true"] span {
    font-weight: 700;
    text-shadow: 0 0 6px rgba(249, 115, 22, 0.5);
}
/* 顶级 fx-tabbar 选中态弱化版（不过 hyper） */
.fx-tabbar-btn[data-active="true"] {
    filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.4));
}
.fx-tabbar-btn[data-active="true"] svg,
.fx-tabbar-btn[data-active="true"] .material-symbols-outlined {
    animation: fx-scale-loop 2s ease-in-out infinite;
}

/* ---------- 9.6 主菜单角标徽章 / Side-panel menu badges ---------------
   Why: 签到 / 通知 / 邀请 三个菜单项预留"红点 / 数字角标"插槽。当前
   data-fx-badge 都为 hidden，等后端接口接入 fxUpdateMenuBadges 才显示。 */
.fx-menu-badge,
.fx-sp-row__badge {
    display: inline-block;
    min-width: 8px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--fx-accent, #f97316);
    box-shadow: 0 0 6px rgba(249, 115, 22, 0.6);
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 4px;
}
.fx-menu-badge[data-fx-badge-count],
.fx-sp-row__badge[data-fx-badge-count] {
    width: auto;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    padding: 0 5px;
    line-height: 16px;
    font-size: 10px;
    font-weight: 700;
    color: #000;
    text-align: center;
}
.fx-menu-badge[data-fx-badge-count]::after,
.fx-sp-row__badge[data-fx-badge-count]::after {
    content: attr(data-fx-badge-count);
}
.fx-menu-badge[hidden],
.fx-sp-row__badge[hidden] {
    display: none;
}

/* ---------- 9.6.1 W4+ 防 scroll chain — drawer 滑到边界不传给背景 ----
   Why: iOS Safari 上一个嵌套滚动容器（drawer body / records list / album list）
   滑到顶/底之后，剩余 momentum 会顺着 scroll chain 冒泡到 <body>，把背景的
   AI 主页一起拖动，体验非常崩。overscroll-behavior: contain 在滚到边界时
   立刻吃掉冒泡，不影响容器内部正常滚动。touch-action: pan-y 是双保险，
   告诉浏览器这块只接受垂直手势，避免横向滑动误触发外层 swipe。
   未存在的 selector 静默忽略，安全副作用。 */
.fx-side-drawer-body,
.fx-side-drawer .fx-side-panel-body,
.fx-tooldrawer-body,
.fx-records-list,
.fx-album-drawer .fx-album-body,
.clothoff-sd__panel,           /* 主菜单 drawer 实际滚动容器 (overflow-y:auto) */
.clothoff-sd__stack,            /* 主菜单 drawer 堆叠容器 — 保险兜底 */
[data-fx-drawer] [class*="panel"], /* 任何 panel 类的兜底，避免漏 selector */
[data-fx-drawer-body],
[data-vaul-drawer] [class*="overflow"] {
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

/* ---------- 9.7 prefers-reduced-motion 兜底 / 无障碍合规 ---------------
   Why: 所有装饰性循环动画（wiggle / scaleLoop / conicSpin / shimmer）必须
   在用户系统设置里开启 "减少动态效果" 时关闭，避免眩晕。
   保留过渡（hover/active scale）因为它们是反馈不是装饰。 */
@media (prefers-reduced-motion: reduce) {
    .fx-cat-card__compare,
    .fx-tooldrawer-card .fx-td-before,
    .fx-swipe-card .fx-card-before,
    .fx-tld-empty-hero__hint-img,
    .fx-tld-empty-hero__hint-placeholder,
    .fx-bottom-nav .fx-tab[data-active="true"] svg,
    .fx-bottom-nav .fx-tab[data-active="true"] .material-symbols-outlined,
    .fx-tabbar-btn[data-active="true"] svg,
    .fx-tabbar-btn[data-active="true"] .material-symbols-outlined {
        animation: none !important;
    }
    /* skeleton 已经在装饰循环范畴内 */
    .skeleton { animation: none !important; }
}


/* ==========================================================================
   10. W1 unified animation foundation / 统一动画基础设施 (2026-05-13)
   --------------------------------------------------------------------------
   纯 keyframes 仓库 + reduced-motion 兜底 — 不挂任何选择器，等 W2-W5 worker
   通过 inline style.animation 或 element.classList 主动消费。命名 prefix
   `fx-anim-*` 用于 reduced-motion 兜底的属性选择器统一关闭。
   配套 JS：static/js/fx-anim-feedback.js 暴露 window.fxAnim.* 14 个 API。
   ========================================================================== */

/* Tier 3 — 行为反馈 / behavioral feedback */
@keyframes fx-anim-balance-bump {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); color: var(--fx-accent-gold, #FFD700); }
}
@keyframes fx-anim-balance-flash-red {
    0%, 100% { color: inherit; }
    50%      { color: #ef4444; }
}

/* Tier 2 — 元素出场 / element entrance */
@keyframes fx-anim-pop {
    0%   { opacity: 0; transform: scale(0.6); }
    60%  { opacity: 1; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes fx-anim-toast-slide-in {
    0%   { opacity: 0; transform: translateX(100%); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes fx-anim-toast-slide-out {
    0%   { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(100%); }
}

/* Tier 4 — 装饰 / decorative */
@keyframes fx-anim-claim-shine {
    0%   { transform: rotate(0) scale(1);          filter: brightness(1); }
    50%  { transform: rotate(180deg) scale(1.3);   filter: brightness(1.5) drop-shadow(0 0 20px gold); }
    100% { transform: rotate(360deg) scale(1);     filter: brightness(1); }
}
@keyframes fx-anim-coin-fly {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: var(--coin-fly-end, translate(200px, -300px)) scale(0.5); }
}
@keyframes fx-anim-checkmark-draw {
    0%   { stroke-dashoffset: 50; }
    100% { stroke-dashoffset: 0; }
}
@keyframes fx-anim-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Reduced-motion 兜底：[class^="fx-anim-"] / [class*=" fx-anim-"] 属性选择器
   统一关闭。fxAnim.* JS API 内部也独立检查 prefers-reduced-motion / localStorage
   开关，双保险（CSS class 触发的动画 + JS 注入的动画都会被关闭）。 */
@media (prefers-reduced-motion: reduce) {
    [class^="fx-anim-"], [class*=" fx-anim-"] {
        animation: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   10. Guest "Sign In" 按钮（2026-05-14 undress-style guest mode）
   --------------------------------------------------------------------------
   单按钮替代原 "登录 + 注册" 两个链接。点击 [data-fx-login-trigger] 由
   fx-login-modal.html 注入的全局 listener 捕获，弹 inline login modal。
   未 JS 时 <a href="/login"> 兼任 SSR fallback。
   ========================================================================== */
.fx-signin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom right, #FF9000, #FF7A00, #FF281A);
    color: #fff;
    padding: 8px 18px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(255, 122, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.fx-signin-btn:hover {
    transform: scale(1.02);
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.4);
}
.fx-signin-btn:active { transform: scale(0.98); }
.fx-signin-btn:focus-visible {
    outline: 2px solid #FF9000;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .fx-signin-btn { transition: none; }
    .fx-signin-btn:hover, .fx-signin-btn:active { transform: none; }
}


/* ==========================================================================
   END global.css
   ========================================================================== */