/* lifeinjapan —— fx-widget.css（汇率小工具）
   由 ~/.workbuddy/skills/lifeinjapan-site-check/extract-css.py 从内联 <style> 抽取。
   改设计系统只改这里，不要改回各页面的内联样式。

   2026-10-13：pill 从**右上角**改到**右下角**。
   原因：v2 版式（2026-10-12）把语言切换放进了 sticky 站头（.site-head，z-index:60，高 64px）
   的右端，而 pill 原本是 `position:fixed;top:14px;right:14px;z-index:900` —— 正好落在站头
   的垂直区间内，且层级更高。实测（真实 Chrome 几何）：
     视口 1280 → pill 1089..1266 与 .lang-bar 972..1156 相交 2077px²（完全压住）
     视口 1440 → 两者只差 1px，叠加 pulse 动画的 scale(1.07) 后同样压住
   即**视口越窄遮得越狠**（pill 相对视口定位，语言切换相对 1080px 容器定位，两者不同步）。
   改到右下角后与站头无交集，也不再受容器宽度影响。
   ⚠️ 别再改回 `top` 定位 —— 只要语言切换还在站头右端，右上角就必然冲突。 */
.fx-pill{position:fixed;top:auto;right:18px;bottom:18px;z-index:900;background:#4a6fa5;border:1px solid #3d5e8f;border-radius:999px;padding:10px 18px;font-size:13px;font-weight:700;color:#fff;box-shadow:0 4px 14px rgba(74,111,165,.4),0 2px 4px rgba(0,0,0,.12);cursor:pointer;display:flex;align-items:center;gap:6px;font-family:inherit;line-height:1.4;transition:bottom .3s ease,box-shadow .15s,transform .15s;animation:fx-pulse 1.6s ease .8s 2}
.fx-pill:hover{box-shadow:0 6px 20px rgba(74,111,165,.5);transform:translateY(-1px)}
@keyframes fx-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){.fx-pill{animation:none}}
.fx-ico{flex-shrink:0}
.fx-label{flex-shrink:0;opacity:.95;border-right:1px solid rgba(255,255,255,.45);padding-right:8px}
.fx-title-ico{vertical-align:-3px;margin-right:6px}
.fx-ticker{transition:opacity .35s;white-space:nowrap}
.fx-ticker.fx-fade{opacity:0}
.fx-mask{position:fixed;inset:0;background:rgba(45,45,63,.35);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.fx-mask.fx-open{display:flex}
.fx-modal{background:#fff;border-radius:12px;padding:22px 24px;width:100%;max-width:340px;box-shadow:0 12px 40px rgba(0,0,0,.18);color:#2d2d3f;text-align:left}
.fx-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.fx-modal-head h2{font-size:16px;margin:0;color:#4a6fa5;border:none;padding:0}
.fx-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted);line-height:1;padding:2px 6px}
.fx-close:hover{color:#c44d4d}
.fx-modal label{display:block;font-size:12px;font-weight:700;color:#4a6fa5;margin:10px 0 4px}
.fx-modal input,.fx-modal select{width:100%;padding:10px 12px;border:1px solid #e8e4df;border-radius:6px;font-size:14px;font-family:inherit;background:#fafaf8;color:#2d2d3f;box-sizing:border-box}
.fx-modal input:focus,.fx-modal select:focus{outline:none;border-color:#4a6fa5}
.fx-result{margin-top:14px;padding:13px;background:#f5f2ed;border-radius:8px;font-size:16px;font-weight:700;color:#c44d4d;text-align:center;min-height:22px}
.fx-note{margin:10px 0 0;font-size:11px;color:var(--muted);text-align:center;line-height:1.6}
/* 窄屏：略微收小、更贴边。⚠️ top 必须显式写 auto ——
   旧版这里是 `.fx-pill{top:64px}` + `.fx-pill.fx-docked{top:10px}`（滚动后让位站头）。
   改成 bottom 定位后，只要还有任何一条 `top:<长度>` 生效，就会与 bottom 同时作用，
   把 pill 从 top 拉到底、**竖向撑满整个视口**（fixed + height:auto 的经典陷阱）。
   而 `.fx-docked` 恰好是滚动超过 120px 时由 JS 加的类 —— 也就是说只清 `.fx-pill` 不清
   `.fx-docked`，这个 bug 只在**滚动后**才出现，不滚动测不出来。 */
@media(max-width:640px){.fx-pill{top:auto;right:12px;bottom:14px;padding:9px 14px;font-size:12px}.fx-pill.fx-docked{top:auto}}