输入聚焦线

浮动标签的判据是 :placeholder-shown：placeholder 设为一个空格，输入框为空时标签停在第 4 行位置，有值或聚焦时用 :not(:placeholder-shown) / :focus 上浮——这是不依赖 JS 的经典方案（placeholder 空格不能省）。

底线是两层叠加：input 自带的 1px 静态灰 border 之上，彩色渐变线伪元素 scaleX(0→1) 从中心展开；只动 transform，展开收合全程合成器路径。

标签上浮用 translateY(-20px) scale(0.72) 组合且 transform-origin:left top，缩小后与输入文字顶部对齐；颜色分两档：有值灰、聚焦强调色。

label 包裹 input 使点击标签也能聚焦输入框；所有动效状态由 CSS 伪类驱动，零 JS 依赖；:has() 方案作为等价增强一并列出，便于在复杂 DOM 结构（input 与 label 不相邻）时使用。

caret-color 同步强调色，聚焦时输入光标与底线同色，细节统一。

reduced-motion：上浮与展线过渡压到 0.01ms，状态仍正确切换（标签位置、线条有无不受影响）。