Unify Harbor error handling across server and client

src/web/styles.css

@@ -876,6 +876,7 @@ p {
 }
 
 .client-power-section {
+  position: relative;
   display: grid;
   justify-items: center;
   gap: 18px;
@@ -1896,17 +1897,53 @@ p {
   margin-top: 7px;
 }
 
-.client-error {
+.client-inline-error {
   position: absolute;
-  bottom: 0;
   left: 50%;
-  width: min(420px, 90vw);
+  z-index: 3;
+  width: min(360px, 90vw);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
   color: oklch(0.62 0.2 28);
   font: 600 11px/1.5 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
   text-align: center;
   transform: translateX(-50%);
 }
 
+.client-inline-error.is-connection {
+  top: calc(100% + 12px);
+}
+
+.client-inline-error.is-subscription {
+  top: calc(100% + 2px);
+}
+
+.client-inline-error small {
+  color: var(--client-muted);
+  font-size: 9px;
+  white-space: nowrap;
+}
+
+.client-inline-error button {
+  padding: 4px 7px;
+  border: 0;
+  border-radius: 6px;
+  background: color-mix(in oklch, var(--client-control) 72%, transparent);
+  color: var(--client-text);
+  font-size: 9px;
+  font-weight: 700;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.client-inline-error button:focus-visible {
+  outline: 2px solid oklch(0.68 0.15 28);
+  outline-offset: 2px;
+}
+
 .client-copy-button {
   position: relative;
   width: 86px;
@@ -2009,6 +2046,19 @@ p {
     padding: 20px 6px;
   }
 
+  .client-power-section {
+    padding-bottom: 40px;
+  }
+
+  .client-inline-error.is-connection {
+    top: auto;
+    bottom: 0;
+  }
+
+  .client-form-content {
+    gap: 48px;
+  }
+
   .harbor-brand {
     transform: translate(-50%, calc(-50% - 28vh)) scale(2.15);
   }