/* ============================================================
 * 母带间 · 交互层（2026-10-22 加）
 *
 * 目的：鼠标放上去要「亮起来、抬一下、有一道光扫过」，跟 A 站首屏那颗紫按钮一个手感，
 *       但用的是母带间自己的薄荷绿，比 A 站更收着一点（这边是工具，不是落地页）。
 *
 * 三条约定：
 *   1. 只动 transform / filter / box-shadow / 伪元素扫光 —— 不改任何布局属性，
 *      所以接上去不会让哪一页错位。
 *   2. 本文件在各自页面 <style> 之后加载，同权重时本文件赢；
 *      页面里更强的状态（比如对比页的 .is-filled / .is-drop）用更高的权重写，
 *      所以这里凡是可能打架的地方只用 box-shadow，不抢 border/background。
 *   3. 五页各有一条 `@media (prefers-reduced-motion:reduce){*{transition-duration:1ms!important}}`，
 *      它会把悬停过渡一起冻成瞬变。文件末尾把「交互反馈」单独放回来 ——
 *      悬停反馈是用户自己触发的，不是自动播放动画，冻结它只会让人觉得按钮坏了。
 * ============================================================ */

:root {
  --ui-ease: var(--ease-out, cubic-bezier(.22, 1, .36, 1));
  --ui-t: .2s;
}

/* ---------------- 按钮 ----------------
 * 抬 2px + 描边亮 + 内发光 + 一道白光从左边扫过去（::after，纯 transform，不重排）。
 */
.btn {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s var(--ui-ease), color .18s var(--ui-ease),
    background-color .2s var(--ui-ease), border-color .2s var(--ui-ease),
    box-shadow .26s var(--ui-ease), filter .2s var(--ui-ease);
}
.btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .22) 50%, transparent 64%);
  transform: translateX(-130%);
  transition: transform .62s var(--ui-ease);
}
.btn:hover::after,
.btn:focus-visible::after { transform: translateX(130%); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: .08s; }
.btn[disabled],
.btn:disabled { cursor: not-allowed; }
.btn[disabled]:hover,
.btn:disabled:hover { transform: none; filter: none; box-shadow: none; }
.btn[disabled]:hover::after,
.btn:disabled:hover::after { transform: translateX(-130%); }

.btn--ghost:hover {
  color: #E7FFF8;
  border-color: rgba(91, 232, 185, .58);
  background-color: rgba(91, 232, 185, .09);
  box-shadow: 0 12px 26px -20px rgba(91, 232, 185, .95), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.btn--ghost:active { background-color: rgba(91, 232, 185, .14); }

.btn--danger:hover {
  box-shadow: 0 12px 26px -20px rgba(255, 127, 127, .8);
}

/* 主按钮（登录页「进入」这类）：不抢页面自己的 background 变化，只加一层呼吸光晕 */
.btn--go {
  animation: uiBreathe 3.6s var(--ui-ease) infinite;
}
@keyframes uiBreathe {
  0%, 100% { box-shadow: 0 8px 22px -17px rgba(91, 232, 185, .75); }
  50% { box-shadow: 0 12px 30px -13px rgba(91, 232, 185, 1); }
}
.btn--go:hover { filter: brightness(1.05); }
.btn--go:active { filter: brightness(.98); }
.btn--accent:hover { filter: brightness(1.06); }

/* ---------------- 顶栏导航 ----------------
 * 悬停长出一个薄荷色胶囊 + 抬 1px。只改 hover 态的形状，不动基础 padding。
 * admin.html 的导航是 <button>，所以这两个选择器一起写。
 */
.nav a,
.nav button {
  transition: color .18s var(--ui-ease), background-color .2s var(--ui-ease),
    box-shadow .2s var(--ui-ease), transform .2s var(--ui-ease);
}
.nav a:hover,
.nav button:hover {
  color: #DFFFF6;
  transform: translateY(-1px);
  border-radius: 999px;
  background-color: rgba(91, 232, 185, .08);
  box-shadow: inset 0 0 0 1px rgba(91, 232, 185, .22);
}
.nav a[aria-current],
.nav button[aria-current] {
  box-shadow: inset 0 0 0 1px rgba(91, 232, 185, .26);
}

/* ---------------- 账号胶囊（account.js 运行时注入，权重必须更高才盖得住） ---------------- */
.acctslot .acct {
  transition: transform .2s var(--ui-ease), color .18s var(--ui-ease),
    border-color .2s var(--ui-ease), background-color .2s var(--ui-ease),
    box-shadow .24s var(--ui-ease);
}
.acctslot .acct:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -18px rgba(91, 232, 185, .95);
}

/* ---------------- 分析页投递区 / 对比页槽位 ----------------
 * 这两个地方本身已经有 .is-drop / .is-filled 这些状态色，所以这里**只加阴影**：
 * 悬停时内壁浮起一层薄荷色的光，拖文件进来时页面自己的边框色照常接管。
 */
.drop {
  transition: border-color .25s var(--ui-ease), box-shadow .35s var(--ui-ease),
    background-color .25s var(--ui-ease);
}
.drop:hover {
  border-color: rgba(91, 232, 185, .45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 0 90px -34px rgba(91, 232, 185, .75),
    0 24px 50px -40px rgba(91, 232, 185, .9);
}
.drop:hover .drop__cta { color: #8CF6D6; border-color: #8CF6D6; }

.cmp__slot {
  transition: box-shadow .3s var(--ui-ease), transform .25s var(--ui-ease);
}
.cmp__slot:hover {
  box-shadow:
    inset 0 0 70px -34px rgba(91, 232, 185, .7),
    0 20px 44px -38px rgba(91, 232, 185, .9);
}

/* ---------------- 工作间（studio.html）----------------
 * 那边自己已经有一套 hover（mcard 抬起、tbtn 变色），这里只补它没有的两种：
 * 卡片的辉光、走带按钮的提亮。不碰 transform / background，免得覆盖它自己的状态机。
 */
.mcard:hover,
.mcard:focus-visible {
  box-shadow: 0 20px 44px -30px rgba(91, 232, 185, .85);
}
.tbtn:hover { filter: brightness(1.12); }
.tbtn[disabled]:hover { filter: none; }

/* ---------------- 键盘焦点：统一成薄荷色环 ---------------- */
.btn:focus-visible,
.nav a:focus-visible,
.nav button:focus-visible,
.acctslot .acct:focus-visible {
  outline: 2px solid rgba(91, 232, 185, .55);
  outline-offset: 2px;
}

/* ---------------- 减少动效：只把过渡缩短，**不关**悬停反馈 ----------------
 * 各页有一条 `*{transition-duration:1ms!important}`，等于把所有悬停过渡冻成瞬变。
 * 这里只给交互元素放回 160ms —— 悬停反馈是用户自己触发、幅度 1~2px 的位移和变色，
 * 不属于前庭刺激那种"自动播放的大位移"。自动播放的呼吸光（.btn--go）也保留：
 * 2026-10-22 主人明确要"有动态"，而他的机器**当天下午之前**系统动画是关的（Chromium 因此报
 * reduce；当天 18:22 已按他要求打开，现在报 no-preference，见交接文档）。
 * 这条规则两种情形都不吃亏 —— 别再改成"reduce 就把动效全关"。
 */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .nav a,
  .nav button,
  .acctslot .acct,
  .drop,
  .cmp__slot,
  .mcard { transition-duration: .16s !important; }
  .btn::after { transition-duration: .4s !important; }
}