Update VPN proxy client behavior

src/web/styles/features/subscription.css

@@ -1,6 +1,6 @@
 .client-icon-tooltip {
-  width: 16px;
-  height: 16px;
+  width: 32px;
+  height: 32px;
   display: grid;
   place-items: center;
 }
@@ -23,8 +23,8 @@
 
 .client-subscription-refresh,
 .client-subscription-delete {
-  width: 16px;
-  height: 16px;
+  width: 32px;
+  height: 32px;
   display: grid;
   place-items: center;
   padding: 0;
@@ -247,9 +247,37 @@
 }
 
 .client-subscription-heading {
-  display: flex;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 64px minmax(0, 1fr) 64px;
   align-items: center;
-  gap: 8px;
+}
+
+.client-subscription-status {
+  grid-column: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  color: var(--client-accent);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.client-subscription-status i {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+  box-shadow: 0 0 8px currentColor;
+}
+
+.client-subscription-actions {
+  grid-column: 3;
+  display: flex;
+  justify-content: flex-end;
 }
 
 .client-subscription-domain-button {
@@ -264,6 +292,11 @@
   cursor: pointer;
 }
 
+.client-subscription-domain-button .client-subscription-label {
+  display: block;
+  margin-bottom: 3px;
+}
+
 .client-subscription-summary {
   min-width: 0;
   max-width: 100%;
@@ -272,11 +305,11 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: 5px;
   padding: 0 2px;
   color: var(--client-muted);
   text-align: center;
-  cursor: pointer;
+  cursor: default;
   overflow: visible;
 }
 
@@ -288,19 +321,21 @@
 }
 
 .client-subscription-label {
-  font-size: 12px;
+  color: var(--client-muted);
+  font-size: 9px;
+  font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.1em;
 }
 
 .client-subscription-domain-button strong {
   display: block;
   overflow: hidden;
   color: var(--client-text);
-  font-size: 28px;
-  font-weight: 600;
-  letter-spacing: -0.055em;
-  opacity: 0.88;
+  font-size: 30px;
+  font-weight: 650;
+  letter-spacing: -0.05em;
+  opacity: 0.96;
   text-shadow: 0 0 20px color-mix(in oklch, var(--client-accent) 24%, transparent);
   transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1), text-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1), transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
   text-overflow: ellipsis;
@@ -314,24 +349,32 @@
 }
 
 .client-usage {
-  width: min(100%, 250px);
+  width: min(100%, 280px);
+  min-height: 76px;
   display: grid;
-  gap: 7px;
-  margin: -10px auto 0;
+  align-content: start;
+  gap: 9px;
+  margin: -6px auto 0;
   color: var(--client-muted);
   text-align: center;
 }
 
-.client-usage > span {
+.client-usage-summary {
+  display: grid;
+  gap: 3px;
+}
+
+.client-usage-summary > span,
+.client-usage-details > span {
   font-size: 9px;
   font-weight: 700;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
 }
 
-.client-usage > strong {
+.client-usage-summary > strong {
   color: var(--client-text);
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 600;
   transition: color 700ms ease, filter 700ms ease, text-shadow 700ms ease;
 }
@@ -340,7 +383,7 @@
   animation: client-usage-glow 1100ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.client-usage.is-updated > strong {
+.client-usage.is-updated .client-usage-summary > strong {
   color: var(--client-accent);
   filter: brightness(1.25);
   text-shadow: 0 0 8px var(--client-accent), 0 0 22px color-mix(in oklch, var(--client-accent) 70%, transparent);
@@ -358,7 +401,7 @@
   30% { box-shadow: 0 0 6px var(--client-accent), 0 0 20px var(--client-accent); filter: brightness(1.45); }
 }
 
-.client-usage > strong small {
+.client-usage-summary > strong small {
   color: var(--client-muted);
   font-size: 10px;
   font-weight: 500;
@@ -379,13 +422,33 @@
 }
 
 .client-usage-details {
-  display: flex;
+  min-height: 24px;
+  display: grid;
+  grid-template-columns: auto auto;
   justify-content: center;
-  gap: 12px;
+  align-items: baseline;
+  column-gap: 6px;
   font-size: 9px;
   white-space: nowrap;
 }
 
+.client-usage-details > span {
+  grid-column: 1 / -1;
+  font-size: 8px;
+  opacity: 0.72;
+}
+
+.client-usage-details > strong {
+  color: var(--client-text);
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.client-usage-details > small {
+  color: var(--client-muted);
+  font-size: 9px;
+}
+
 .client-inline-error.is-subscription {
   top: calc(100% + 2px);
 }
@@ -419,3 +482,9 @@
     transform: translateY(-2px);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .client-usage-summary > strong {
+    transition: none;
+  }
+}