路由页动效与细节一批

基调是简单快速：hover 颜色 0.15s 过渡（全局规则，只过渡颜色不碰布局）、
对话框入场淡入加 6px 上移、tab 下划线改成共享的一条并在切换时滑动、tab
内容 out-in 淡切、配置折叠箭头居右随展开旋转 90 度、订阅下拉 0.12s 出入场。
不引 animate.css：这些效果各自十几行 CSS，引库只多不少。

配置展开和拨开链式代理时，若详情底部长出窗口则平滑滚进视野；tab 切换
不触发，来回切时页面跟着跳只会晕。二次确认对话框点遮罩可关闭，内边距
挪进内层，否则点在 dialog 自己的 padding 上也会被当成遮罩。新增入站的
表单不做遮罩关闭：误点会丢掉填了一半的内容。对话框标题改为「新增路由」
「编辑路由」。select 换自绘箭头，原生箭头贴边且位置调不了。

web/styles/tokens.css

@@ -150,6 +150,38 @@ kbd,
   outline-offset: 2px;
 }
 
+/* 交互控件的颜色过渡。只过渡颜色类属性，不碰布局；时长以「感知得到但不等待」为准 */
+button,
+input,
+select {
+  transition:
+    color 0.15s ease,
+    background-color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+/* 对话框入场：快速淡入加一点上移。关闭不做动画，动效只留给打开的那一下 */
+dialog[open] {
+  animation: dialog-in 0.15s ease;
+}
+
+dialog[open]::backdrop {
+  animation: backdrop-in 0.15s ease;
+}
+
+@keyframes dialog-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+
+@keyframes backdrop-in {
+  from {
+    opacity: 0;
+  }
+}
+
 ::selection {
   background: var(--c-accent-soft);
   color: var(--c-accent-text);