/* 2.49.0 交互效果（fx.js）。全部写在 html.fx 下：后台开关关掉后这里的规则一条都不生效，页面回到原样。 */

/* ---------- 1. 鼠标指上去 ---------- */
html.fx .btn{transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .2s,filter .2s,border-color .2s,color .2s,background .2s}
html.fx .btn:not(:disabled):not(.fx-loading):hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(212,168,75,.3),inset 0 0 0 1px rgba(246,220,151,.32);filter:brightness(1.05)}
html.fx .btn.ghost:not(:disabled):not(.fx-loading):hover,html.fx .btn.link:not(:disabled):hover{border-color:var(--gold,#e9c46a);color:var(--gold2,#f6dc97);box-shadow:0 8px 22px rgba(0,0,0,.32),0 0 0 3px rgba(233,196,106,.08);filter:none}
html.fx .btn.danger:not(:disabled):hover{box-shadow:0 10px 24px rgba(255,107,120,.25)}
html.fx .btn:not(:disabled):active,html.fx .tabbar a:active,html.fx .tabs button:active,html.fx .quick a:active{transform:translateY(0) scale(.97)}
html.fx .card{transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
html.fx .card:hover{border-color:rgba(233,196,106,.45);box-shadow:0 14px 34px rgba(0,0,0,.35),0 0 0 1px rgba(233,196,106,.12)}
html.fx .card.click:hover,html.fx .cards .card:hover,html.fx a.card:hover{transform:translateY(-3px)}
html.fx .card.click:active,html.fx a.card:active{transform:translateY(-1px) scale(.99)}
html.fx .main tbody tr td{transition:background .15s}
html.fx .main tbody tr:hover td{background:rgba(233,196,106,.06)}
html.fx .main tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--gold,#e9c46a)}
html.fx .main tbody tr td.actions>*,html.fx .main tbody tr td .actions>*{transition:opacity .15s}
@media (hover:hover){
  html.fx .main tbody tr td.actions>.btn,html.fx .main tbody tr td.actions>.btn.link{opacity:.55}
  html.fx .main tbody tr:hover td.actions>.btn,html.fx .main tbody tr:focus-within td.actions>.btn{opacity:1}
}
html.fx .side a{transition:background .18s,color .18s,transform .2s cubic-bezier(.2,.8,.2,1)}
html.fx .side a:hover{transform:translateX(4px)}
html.fx .side a.active::before,html.fx .side a.on::before{animation:fx-grow .3s cubic-bezier(.2,.8,.2,1)}
@keyframes fx-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
html.fx .tabs button{transition:color .18s,background .18s,transform .15s}
html.fx .tabs button:hover{color:var(--gold2,#f6dc97)}
html.fx .quick a{transition:transform .2s,border-color .2s,box-shadow .2s}
html.fx .quick a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.3)}
html.fx .field input,html.fx .field select,html.fx .field textarea,html.fx .inp{transition:border-color .18s,box-shadow .18s}
html.fx .field input:focus,html.fx .field select:focus,html.fx .field textarea:focus,html.fx .inp:focus{border-color:var(--gold,#e9c46a);box-shadow:0 0 0 3px rgba(233,196,106,.16);outline:none}
html.fx .badge[data-fx-tip],html.fx .badge{cursor:default}
html.fx a,html.fx button,html.fx .click,html.fx [role=button]{-webkit-tap-highlight-color:transparent}

/* 可复制内容旁的复制图标 */
.fx-cp{position:fixed;z-index:400;height:24px;min-width:24px;padding:0 5px;border-radius:7px;border:1px solid var(--line2,#24426a);background:#0f2440;color:var(--gold,#e9c46a);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font:600 11.5px/1 inherit;box-shadow:0 6px 16px rgba(0,0,0,.35);animation:fx-in .14s ease-out}
.fx-cp svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fx-cp:hover{border-color:var(--gold,#e9c46a)}
.fx-cp.done{color:var(--ok,#45e0a0);padding:0 8px}

/* ---------- 2. 提示说明 ---------- */
.fx-tip{position:fixed;z-index:420;max-width:280px;background:#11253f;border:1px solid var(--line2,#24426a);color:var(--text,#e8edf4);font-size:12.5px;line-height:1.55;font-weight:500;padding:8px 11px;border-radius:9px;box-shadow:0 12px 30px rgba(0,0,0,.45);pointer-events:none;white-space:normal;word-break:break-word;text-align:left;animation:fx-in .14s ease-out}
.fx-tip::after{content:"";position:absolute;left:var(--ax,50%);bottom:-5px;width:9px;height:9px;background:#11253f;border-right:1px solid var(--line2,#24426a);border-bottom:1px solid var(--line2,#24426a);transform:translateX(-50%) rotate(45deg)}
.fx-tip.below::after{bottom:auto;top:-5px;transform:translateX(-50%) rotate(225deg)}
@keyframes fx-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.fx-q{display:none}
html.fx .fx-q{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:6px;vertical-align:1px;border-radius:50%;border:1px solid var(--line2,#2a4a73);background:none;color:var(--muted,#8da2bd);font:800 10.5px/1 Manrope,-apple-system,"Segoe UI",sans-serif;cursor:help;padding:0;transition:color .15s,border-color .15s}
html.fx .fx-q:hover{color:var(--gold2,#f6dc97);border-color:var(--gold,#e9c46a)}
.fx-sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:430}
.fx-sheet{position:fixed;left:0;right:0;bottom:0;z-index:431;background:#0e2139;border-top:1px solid var(--line2,#24426a);border-radius:18px 18px 0 0;padding:12px 20px calc(18px + env(safe-area-inset-bottom,0px));animation:fx-up .26s cubic-bezier(.2,.8,.2,1)}
.fx-sheet .fx-grab{width:40px;height:4px;border-radius:2px;background:var(--line2,#24426a);margin:0 auto 14px}
.fx-sheet p{margin:0 0 16px;color:var(--text,#e8edf4);font-size:14.5px;line-height:1.65}
.fx-sheet .btn{width:100%;justify-content:center}
@keyframes fx-up{from{transform:translateY(100%)}to{transform:none}}

/* ---------- 3. 点下去：波纹、已复制 ---------- */
.fx-clip{overflow:hidden}
.fx-rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.32);transform:scale(0);animation:fx-rip .55s ease-out forwards}
.btn.ghost .fx-rip,.btn.link .fx-rip,.tabbar .fx-rip,.tabs .fx-rip,.quick .fx-rip,.card .fx-rip,.seg .fx-rip,.x-seg .fx-rip{background:rgba(233,196,106,.24)}
@keyframes fx-rip{to{transform:scale(1);opacity:0}}
html.fx .btn.fx-done{color:transparent!important}
html.fx .btn.fx-done::after{content:attr(data-fx-done);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ok,#45e0a0);font-weight:700}
html.fx .btn:not(.ghost):not(.link).fx-done::after{color:var(--gold-ink,#1a1306)}

/* ---------- 4. 等待中：处理中、骨架占位 ---------- */
html.fx .btn.fx-loading{pointer-events:none;color:transparent!important}
html.fx .btn.fx-loading>*{visibility:hidden}
html.fx .btn.fx-loading::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid rgba(26,19,6,.3);border-top-color:var(--gold-ink,#1a1306);animation:fx-sp .7s linear infinite}
html.fx .btn.ghost.fx-loading::after,html.fx .btn.link.fx-loading::after{border-color:rgba(233,196,106,.25);border-top-color:var(--gold,#e9c46a)}
@keyframes fx-sp{to{transform:rotate(360deg)}}
html.fx table.fx-skel tbody{display:none}
.fx-skel-box{display:grid;gap:12px;padding:16px 12px}
.fx-skel-box i{display:block;height:13px;border-radius:7px;background:linear-gradient(90deg,#12284a 0%,#1d3d68 40%,#12284a 80%);background-size:200% 100%;animation:fx-sh 1.2s linear infinite}
.fx-skel-box i:nth-child(1){width:72%}.fx-skel-box i:nth-child(2){width:94%}.fx-skel-box i:nth-child(3){width:58%}.fx-skel-box i:nth-child(4){width:84%}
@keyframes fx-sh{to{background-position:-200% 0}}

/* ---------- 5. 出结果：提示条、填写提示 ---------- */
html.fx .main>.alert.ok{display:none}
.fx-toasts{position:fixed;right:18px;top:calc(18px + env(safe-area-inset-top,0px));z-index:440;display:grid;gap:10px;width:min(360px,calc(100vw - 32px))}
.fx-toast{display:flex;gap:10px;align-items:flex-start;background:#0f223b;border:1px solid var(--line2,#24426a);border-left:3px solid var(--ok,#45e0a0);border-radius:12px;padding:12px 14px;box-shadow:0 14px 34px rgba(0,0,0,.45);color:var(--text,#e8edf4);font-size:13.5px;font-weight:600;cursor:pointer;animation:fx-tin .32s cubic-bezier(.2,.8,.2,1)}
.fx-toast.bad{border-left-color:var(--bad,#ff6b78)}
.fx-toast svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--ok,#45e0a0);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.fx-toast.bad svg{stroke:var(--bad,#ff6b78)}
.fx-toast.out{animation:fx-tout .25s ease-in forwards}
@keyframes fx-tin{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes fx-tout{to{opacity:0;transform:translateX(30px)}}
html.fx input.fx-good{border-color:rgba(69,224,160,.6)!important}
html.fx input.fx-bad{border-color:rgba(255,107,120,.75)!important}
.fx-hint{display:none}
html.fx .fx-hint{display:block;font-size:12px;margin-top:5px;line-height:1.45}
html.fx .fx-hint.bad{color:var(--bad,#ff6b78)}html.fx .fx-hint.good{color:var(--ok,#45e0a0)}

/* ---------- 6. 手机 ---------- */
html.fx .tabbar{position:relative}
html.fx .tabbar a{position:relative;transition:color .2s}
html.fx .tabbar a.on svg{animation:fx-pop .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes fx-pop{0%{transform:scale(.8)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.fx-dot{display:none}
html.fx .tabbar .fx-dot{display:block;position:absolute;bottom:3px;width:6px;height:6px;border-radius:50%;background:var(--gold,#e9c46a);box-shadow:0 0 8px var(--gold,#e9c46a);transition:left .3s cubic-bezier(.2,.8,.2,1),opacity .2s;pointer-events:none}
@media (hover:none){
  html.fx .card:hover,html.fx .quick a:hover,html.fx .btn:not(:disabled):hover{transform:none}
  html.fx .card.click:active,html.fx a.card:active,html.fx .main tbody tr:active td{background:rgba(233,196,106,.07)}
  html.fx .main tbody tr:hover td:first-child{box-shadow:none}
}
@media (max-width:760px){
  .fx-toasts{left:16px;right:16px;width:auto;top:calc(12px + env(safe-area-inset-top,0px))}
  @keyframes fx-tin{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
  @keyframes fx-tout{to{opacity:0;transform:translateY(-24px)}}
}

@media (prefers-reduced-motion:reduce){
  html.fx *,html.fx *::before,html.fx *::after,.fx-tip,.fx-toast,.fx-sheet,.fx-cp,.fx-skel-box i{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.fx .btn.fx-loading::after{animation-duration:.7s!important;animation-iteration-count:infinite!important}
}