refactor(frontend): hoist .danger-icon to utils.css and use it everywhere

InboundFormModal (margin-left 6px) and OutboundFormModal (margin-left
8px) each carried their own .danger-icon, and FinalMaskForm wrote the
same color/cursor/marginLeft trio inline five times. Unify on a single
.danger-icon in utils.css with margin-left: 8px — matching the more
generous OutboundFormModal value — and:
- Drop the per-file .danger-icon copies from InboundFormModal.css and
  OutboundFormModal.css.
- Replace the five inline style props in FinalMaskForm.tsx with
  className="danger-icon".

The visible change is a 2px wider gap to the right of the delete icons
on InboundFormModal's protocol/peer dividers.

frontend/src/components/FinalMaskForm.tsx

@@ -138,7 +138,7 @@ export default function FinalMaskForm({ stream, protocol, onChange }: FinalMaskF
               <Divider style={{ margin: 0 }}>
                 TCP Mask {mIdx + 1}
                 <DeleteOutlined
-                  style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
+                  className="danger-icon"
                   onClick={() => {
                     stream.delTcpMask(mIdx);
                     notify();
@@ -238,7 +238,7 @@ export default function FinalMaskForm({ stream, protocol, onChange }: FinalMaskF
               <Divider style={{ margin: 0 }}>
                 UDP Mask {mIdx + 1}
                 <DeleteOutlined
-                  style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
+                  className="danger-icon"
                   onClick={() => {
                     stream.delUdpMask(mIdx);
                     notify();
@@ -403,7 +403,7 @@ function HeaderCustomGroups({
               <Divider style={{ margin: 0 }}>
                 {groupKey === 'clients' ? 'Clients' : 'Servers'} Group {gi + 1}
                 <DeleteOutlined
-                  style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
+                  className="danger-icon"
                   onClick={() => {
                     (settings[groupKey] as ItemRow[][]).splice(gi, 1);
                     onChange();
@@ -445,7 +445,7 @@ function UdpHeaderCustom({ mask, onChange }: { mask: MaskRow; onChange: () => vo
               <Divider style={{ margin: 0 }}>
                 {groupKey === 'client' ? 'Client' : 'Server'} {ci + 1}
                 <DeleteOutlined
-                  style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
+                  className="danger-icon"
                   onClick={() => {
                     (settings[groupKey] as ItemRow[]).splice(ci, 1);
                     onChange();
@@ -493,7 +493,7 @@ function NoiseItems({ mask, onChange }: { mask: MaskRow; onChange: () => void })
           <Divider style={{ margin: 0 }}>
             Noise {ni + 1}
             <DeleteOutlined
-              style={{ color: 'var(--ant-color-error)', cursor: 'pointer', marginLeft: 8 }}
+              className="danger-icon"
               onClick={() => {
                 (settings.noise as ItemRow[]).splice(ni, 1);
                 onChange();

frontend/src/pages/inbounds/InboundFormModal.css

@@ -1,9 +1,3 @@
-.danger-icon {
-  margin-left: 6px;
-  cursor: pointer;
-  color: var(--ant-color-error);
-}
-
 .vless-auth-state {
   display: block;
   margin-top: 6px;

frontend/src/pages/xray/OutboundFormModal.css

@@ -1,9 +1,3 @@
-.danger-icon {
-  cursor: pointer;
-  color: var(--ant-color-error);
-  margin-left: 8px;
-}
-
 .item-heading {
   display: flex;
   align-items: center;

frontend/src/styles/utils.css

@@ -21,3 +21,9 @@
   cursor: pointer;
   color: var(--ant-color-primary);
 }
+
+.danger-icon {
+  margin-left: 8px;
+  cursor: pointer;
+  color: var(--ant-color-error);
+}