Refine client delete animation and local rule button styling

src/web/components/ClientOverviewPage.jsx

@@ -426,6 +426,7 @@ function LocalRulesPanel({
                   />
                   <span className="client-local-rule-status" role="status">{statusLabel}</span>
                   <button
+                    className="client-local-rule-delete"
                     type="button"
                     aria-label={`Удалить правило ${index + 1}`}
                     onClick={() => onRemove(index)}

src/web/styles.css

@@ -967,7 +967,7 @@ p {
   bottom: 0;
   left: 12px;
   z-index: 100;
-  background: linear-gradient(90deg, oklch(0.68 0.15 28 / 0.3), oklch(0.68 0.15 28 / 0.12) 48%, transparent);
+  background: transparent;
   opacity: 0;
   pointer-events: none;
   transform: scaleX(0);
@@ -979,11 +979,11 @@ p {
   position: absolute;
   left: 0;
   right: 0;
-  top: calc(var(--client-delete-strike-y) - 2px);
-  height: 4px;
+  top: calc(var(--client-delete-strike-y) - 1px);
+  height: 2px;
   background: oklch(0.68 0.15 28);
-  clip-path: polygon(0 8%, 100% 50%, 0 92%);
-  filter: drop-shadow(0 0 2px oklch(0.68 0.15 28 / 0.5));
+  clip-path: polygon(0 24%, 100% 50%, 0 76%);
+  filter: drop-shadow(0 0 3px oklch(0.68 0.15 28 / 0.38));
 }
 
 .client-deletable-row.is-removing > .client-delete-strike {
@@ -1205,7 +1205,7 @@ p {
   text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 22%, transparent);
 }
 
-.client-local-rule > button:last-child {
+.client-local-rule-delete {
   width: 28px;
   height: 32px;
   padding: 0;
@@ -1217,7 +1217,7 @@ p {
   transition: color 180ms ease, filter 260ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.client-local-rule > button:last-child:hover {
+.client-local-rule-delete:hover {
   color: oklch(0.68 0.15 28);
   filter: drop-shadow(0 0 7px oklch(0.68 0.15 28 / 0.42));
   transform: rotate(8deg) scale(1.1);
@@ -1225,7 +1225,7 @@ p {
 
 .client-local-rule-enabled:focus-visible,
 .client-rule-type-trigger:focus-visible,
-.client-local-rule > button:last-child:focus-visible,
+.client-local-rule-delete:focus-visible,
 .client-local-rule-add:focus-visible,
 .client-local-rules-save:focus-visible,
 .client-local-rules-actions button:focus-visible {
@@ -2996,7 +2996,7 @@ p {
     grid-row: 1;
   }
 
-  .client-local-rule > button:last-child {
+  .client-local-rule-delete {
     grid-column: 3;
     grid-row: 1;
   }
@@ -3080,7 +3080,7 @@ p {
   .client-rule-type-list,
   .client-rule-type-list button,
   .client-local-rule input,
-  .client-local-rule > button:last-child,
+  .client-local-rule-delete,
   .client-local-rule-add,
   .client-local-rule-add-slot > span,
   .client-local-rules-save,