/* ============================================================
   聚寶盆 · 设计系统（MiMo 设计语言 × 场景转场 × 动效纪律）
   画布：暖米白 #fcfaf8 · 文字：纯黑 · 强调：暖橙 #FB8147
   展示字体：Georgia italic · 正文字体：MiSans/PingFang SC
   动效：仅 transform/opacity/clip-path/filter · UI≤300ms ·
        入场 ease-out cubic-bezier(.16,1,.3,1) · 全量减弱动画降级
   ============================================================ */
:root{
  --bg:#fcfaf8; --bg-card:#faf7f3; --bg-section:#f0ebe5; --surface-hover:#f7f3ef;
  --tx:#000; --tx2:#666; --tx3:#999;
  --line:#f0ebe5; --line2:#e8e8e8;
  --acc:#FB8147; --acc-hover:#9E4F0A; --warn:#fda83a; --acc-bg:#fff6ed;
  --ok:#00b578; --err:#f56c6c; --warnbg:#fdf6ec;
  --disp:Georgia,"Times New Roman",serif;
  --sans:"MiSans","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-reveal:cubic-bezier(.77,0,.175,1);
  --sh-btn:0 4px 12px rgba(0,0,0,.2);
  --sh-md:0 12px 40px rgba(0,0,0,.06);
  --r-sm:6px; --r-md:8px; --r-lg:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:14px;line-height:1.7;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
::selection{background:var(--acc);color:#fff}

/* ---------- 顶栏导航 ---------- */
.fx-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 28px;border-bottom:1px solid var(--line);
  background:rgba(252,250,248,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.fx-brand{font-weight:800;letter-spacing:-.5px;font-size:17px;text-decoration:none;display:flex;align-items:baseline;gap:8px}
.fx-brand i{font-style:italic;font-family:var(--disp);font-weight:400;color:var(--acc);font-size:14px;letter-spacing:.02em}
.fx-nav-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.fx-nav-links a{text-decoration:none;color:var(--tx2);font-size:13.5px;padding:7px 13px;border-radius:999px;transition:color .2s ease,background .2s ease;display:inline-block}
.fx-nav-links a.on{color:var(--tx);font-weight:600;background:var(--bg-section)}
.fx-nav-right{display:flex;align-items:center;gap:10px}
.fx-user{font-size:12.5px;color:var(--tx2);font-family:var(--mono)}
@media(max-width:640px){.fx-nav{padding:12px 16px}.fx-user{display:none}}

/* ---------- Hero 与流体背景 ---------- */
.fx-hero{position:relative;padding:64px 0 34px;overflow:hidden}
.fx-fluid{position:absolute;inset:-40%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse at 22% 32%, rgba(255,177,138,.42), transparent 52%),
    radial-gradient(ellipse at 76% 66%, rgba(247,139,76,.30), transparent 55%),
    radial-gradient(ellipse at 52% 46%, rgba(217,119,87,.18), transparent 60%);
  filter:blur(60px)}
.fx-eyebrow{font-family:var(--disp);font-style:italic;font-size:13px;color:var(--acc);letter-spacing:.14em}
.fx-title{font-size:44px;font-weight:600;line-height:1.22;margin:8px 0 6px;letter-spacing:-.5px}
.fx-title .ch{display:inline-block;white-space:pre}
.fx-sub{color:var(--tx2);font-size:14px;max-width:560px}
@media(max-width:640px){.fx-hero{padding:44px 0 24px}.fx-title{font-size:31px}}

/* ---------- 卡片 / 按钮 / 表单 / 提示 ---------- */
.fx-card{background:var(--bg-card);border:1px solid var(--line);border-radius:10px;padding:22px;margin:18px 0}
.fx-card.white{background:#fff;border-color:var(--line2)}
.fx-card.hover{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.fx-ct{font-weight:600;font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.fx-ct::before{content:"";width:4px;height:15px;background:var(--tx);border-radius:2px;display:inline-block}
.fx-btn{display:inline-block;background:#000;color:#fff;border:none;border-radius:var(--r-sm);
  padding:11px 26px;font-size:14px;font-family:var(--sans);cursor:pointer;text-decoration:none;
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease}
.fx-btn:active{transform:translateY(0) scale(.99)}
.fx-btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--line2)}
.fx-btn.danger{background:var(--err)}
.fx-btn.full{width:100%;margin-top:16px}
.fx-label{display:block;font-size:12.5px;color:#86909c;margin:12px 0 6px}
.fx-input{width:100%;background:#fff;border:1px solid var(--line2);border-radius:var(--r-sm);
  padding:11px 13px;font-size:14px;font-family:var(--sans);outline:none;transition:border-color .2s ease,color .2s ease}
.fx-input:focus{border-color:#000}
.fx-input[readonly]{color:var(--tx2);background:var(--surface-hover)}
.fx-notice{background:var(--warnbg);border-radius:var(--r-md);padding:12px 16px;font-size:13.5px;margin:16px 0;border-left:3px solid var(--warn)}
.fx-notice.ok{border-left-color:var(--ok)}
.fx-notice.err{border-left-color:var(--err)}
.fx-row{display:flex;align-items:center;gap:18px;padding:12px 6px;border-bottom:1px solid var(--line);font-size:13.5px}
.fx-row:last-child{border-bottom:none}
.fx-idx{font-family:var(--disp);font-style:italic;color:var(--tx2);font-size:14px;min-width:24px}
.fx-k{color:var(--tx2);min-width:86px}
.fx-v{font-weight:500;word-break:break-all}
.fx-mark{font-family:var(--mono);font-size:12.5px;background:var(--bg-card);padding:2px 7px;border-radius:4px}
.fx-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px;flex:none}
.fx-hb{font-size:12.5px;color:var(--tx2);display:flex;align-items:center}

/* ---------- 统计卡 ---------- */
.fx-stats{display:flex;gap:12px;flex-wrap:wrap}
.fx-stats .fx-card{flex:1;min-width:150px;margin:0;padding:16px 18px}
.fx-stat-n{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.fx-stat-l{font-size:12.5px;color:var(--tx2);margin-top:2px}

/* ---------- 模块入口 ---------- */
.fx-mods{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
@media(max-width:640px){.fx-mods{grid-template-columns:1fr}}
.fx-mod{display:block;text-decoration:none;background:var(--bg-card);border:1px solid var(--line);
  border-radius:12px;padding:22px;position:relative;overflow:hidden;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.fx-mod .no{font-family:var(--disp);font-style:italic;font-size:13px;color:var(--acc)}
.fx-mod h3{font-size:17px;font-weight:600;margin:6px 0 4px}
.fx-mod p{font-size:13px;color:var(--tx2)}
.fx-mod .go{position:absolute;right:18px;top:20px;color:var(--tx3);font-size:15px;transition:transform .2s ease,color .2s ease}
.fx-mod.hot{background:linear-gradient(160deg,#fff 0%,var(--acc-bg) 100%)}

/* ---------- 页脚 ---------- */
.fx-footer{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--tx3);
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fx-footer .en{font-family:var(--disp);font-style:italic}

/* ---------- 悬停反馈（仅精确指针设备） ---------- */
@media (hover:hover) and (pointer:fine){
  .fx-btn:hover{background:#1a1a1a;transform:translateY(-1px);box-shadow:var(--sh-btn)}
  .fx-btn.danger:hover{background:#e04747}
  .fx-btn.ghost:hover{background:var(--surface-hover);transform:translateY(-1px);box-shadow:none}
  .fx-card.hover:hover{transform:translateY(-1px);box-shadow:var(--sh-md);border-color:#e5ddd2}
  .fx-mod:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:#f3d9c8}
  .fx-mod:hover .go{transform:translateX(3px);color:var(--acc)}
  .fx-nav-links a:hover{color:var(--acc)}
}

/* ============================================================
   场景转场与入场动效（全部包裹 no-preference；仅 GPU 属性）
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  /* 页面揭幕：clip-path 自下而上揭示（区块级入场，500-600ms 属场景级合理时长） */
  .fx-page{animation:fxPageIn .55s var(--ease-reveal) both}
  @keyframes fxPageIn{from{opacity:0;clip-path:inset(0 0 12% 0);transform:translateY(10px)}
                      to{opacity:1;clip-path:inset(0 0 0 0);transform:translateY(0)}}

  /* Hero 逐字揭示 */
  .fx-split .ch{opacity:0;transform:translateY(26px);animation:fxChar .6s var(--ease) forwards;animation-delay:calc(var(--i)*50ms)}
  @keyframes fxChar{to{opacity:1;transform:translateY(0)}}

  /* 交错入场 */
  .fx-stagger>*{opacity:0;transform:translateY(18px);animation:fxRise .5s var(--ease) both}
  .fx-stagger>*:nth-child(1){animation-delay:40ms}
  .fx-stagger>*:nth-child(2){animation-delay:110ms}
  .fx-stagger>*:nth-child(3){animation-delay:180ms}
  .fx-stagger>*:nth-child(4){animation-delay:250ms}
  .fx-stagger>*:nth-child(5){animation-delay:320ms}
  .fx-stagger>*:nth-child(n+6){animation-delay:380ms}
  @keyframes fxRise{to{opacity:1;transform:translateY(0)}}

  /* 滚动揭示（IO 添加 .in） */
  .fx-reveal{opacity:0;transform:translateY(34px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .fx-reveal.in{opacity:1;transform:translateY(0)}

  /* 流体背景呼吸（12s，暖橙调色板，禁多色彩虹） */
  .fx-fluid{animation:fxBreathe 12s ease-in-out infinite}
  @keyframes fxBreathe{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(3%,-2%,0) scale(1.06)}
  }

  /* 页面离场：模糊淡出（快，180ms，非对称：出场快于入场） */
  html.fx-leave body{opacity:0;filter:blur(6px);transition:opacity .18s ease,filter .18s ease}

  /* 自定义光标环（桌面精确指针）：尺寸变化走 transform 缩放（GPU），不动布局属性 */
  .fx-cur{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;transform:translate(-50%,-50%);opacity:0}
  .fx-cur-in{display:block;width:34px;height:34px;border-radius:50%;border:1.5px solid #fff;
    mix-blend-mode:difference;transform:scale(1);transition:transform .2s ease}
  .fx-cur-in.big{transform:scale(1.55)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}