Standardize global empty-state UI component

web/css/components/app-empty-state.css

@@ -0,0 +1,44 @@
+@layer components {
+  .app-empty-state {
+    border: 1px dashed var(--app-empty-border-color);
+    border-radius: var(--app-border-radius);
+    background: var(--app-empty-bg);
+    color: var(--app-empty-text);
+    padding: calc(var(--app-spacing) * 0.875) var(--app-spacing);
+    display: grid;
+    gap: calc(var(--app-spacing) * 0.35);
+    text-align: center;
+  }
+
+  .app-empty-state[data-size="compact"] {
+    padding: calc(var(--app-spacing) * 0.625) calc(var(--app-spacing) * 0.75);
+    gap: calc(var(--app-spacing) * 0.25);
+  }
+
+  .app-empty-state[data-align="left"] {
+    text-align: left;
+  }
+
+  .app-empty-state-message {
+    margin: 0;
+    color: var(--app-empty-text);
+    font-size: 0.95rem;
+    line-height: 1.4;
+  }
+
+  .app-empty-state-hint {
+    margin: 0;
+    color: var(--app-empty-hint);
+    font-size: 0.85rem;
+    line-height: 1.3;
+  }
+
+  .app-empty-state-action {
+    justify-self: center;
+    margin-top: calc(var(--app-spacing) * 0.15);
+  }
+
+  .app-empty-state[data-align="left"] .app-empty-state-action {
+    justify-self: start;
+  }
+}