fix(vip): preserve cards and align level icons

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

assets/css/frontend/credits.css

@@ -363,18 +363,20 @@
 
 .aksrt-vip-level-icon {
 	display: inline-block;
-	width: 1.4em;
-	height: 1.4em;
+	width: auto;
+	height: 1.1em;
+	max-width: 6em;
 	object-fit: contain;
-	vertical-align: middle;
+	vertical-align: -.15em;
 }
 
 .aksrt-vip-badge__icon {
 	display: inline-block;
-	width: 1.35em;
-	height: 1.35em;
+	width: auto;
+	height: 1.1em;
+	max-width: 6em;
 	object-fit: contain;
-	vertical-align: middle;
+	vertical-align: -.15em;
 }
 
 .aksrt-vip-badge i {

assets/css/frontend/vip-modal.css

@@ -160,9 +160,9 @@
 }
 
 .pay-vip-info {
-  padding: 0;
-  border-radius: 0;
-  background: transparent;
+  padding: 12px;
+  border-radius: 10px;
+  background: var(--surface-2, rgba(0, 0, 0, 0.04));
 }
 
 .pay-vip-info.level-1 {
@@ -219,10 +219,10 @@
 .vip-product {
   position: relative;
   padding: 12px 8px;
-  border-radius: 0;
-  border: 0;
-  background: transparent;
-  transition: none;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: var(--main-bg-color, #fff);
+  transition: border-color 0.15s, box-shadow 0.15s;
 }
 
 .aksrt-vip-product-label input:checked + .vip-product {