Modernize admin UI and harden provider contracts

Adopt Web Awesome for consistent accessible controls while aligning production ASR, App Attest, and runtime dependency safeguards.

admin-web/src/styles.css

@@ -22,6 +22,18 @@
   --focus-ring: rgb(0 113 227 / 28%);
   --danger: #d70015;
   --success: #248a3d;
+  --wa-font-family-body:
+    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
+    "Helvetica Neue", "PingFang SC", system-ui, sans-serif;
+  --wa-font-family-heading: var(--wa-font-family-body);
+  --wa-color-brand-fill-loud: var(--primary);
+  --wa-color-brand-border-loud: var(--primary);
+  --wa-color-brand-on-loud: #fff;
+  --wa-color-focus: var(--primary);
+  --wa-form-control-border-radius: 12px;
+  --wa-panel-border-radius: 18px;
+  --wa-focus-ring-width: 3px;
+  --wa-focus-ring-offset: 2px;
 }
 
 * {
@@ -177,6 +189,10 @@ h2 {
   width: 100%;
 }
 
+wa-button.button--wide {
+  display: block;
+}
+
 .button--small {
   min-height: 34px;
   padding: 0 12px;
@@ -200,6 +216,12 @@ h2 {
   background: var(--hover-fill);
 }
 
+wa-button.icon-button::part(button),
+wa-button.logout-button::part(button) {
+  min-height: 44px;
+  padding: 0;
+}
+
 .icon-button svg,
 .logout-button svg {
   width: 21px;
@@ -246,17 +268,6 @@ h2 {
   margin-left: auto;
 }
 
-.auth-brand::after {
-  display: block;
-  width: min(390px, 80vw);
-  height: 200px;
-  margin-top: 40px;
-  border: 1px solid var(--border);
-  border-radius: 30px;
-  background: var(--surface-muted);
-  content: "";
-}
-
 .auth-brand p {
   margin-top: 24px;
   color: var(--muted);
@@ -277,6 +288,20 @@ h2 {
   gap: 18px;
 }
 
+wa-input {
+  width: 100%;
+}
+
+wa-input::part(form-control-label) {
+  color: var(--navy);
+  font-size: 0.88rem;
+  font-weight: 700;
+}
+
+wa-input::part(input) {
+  min-height: 44px;
+}
+
 label {
   display: grid;
   color: var(--navy);
@@ -329,6 +354,18 @@ input:disabled {
   text-align: center;
 }
 
+wa-input.totp-input {
+  font-size: inherit;
+  letter-spacing: normal;
+  text-align: initial;
+}
+
+wa-input.totp-input::part(input) {
+  font-size: 1.45rem;
+  letter-spacing: 0.4em;
+  text-align: center;
+}
+
 .form-error {
   min-height: 20px;
   margin: -4px 0 0;
@@ -481,6 +518,10 @@ input:disabled {
   background: var(--hover-fill);
 }
 
+wa-button.logout-button::part(button) {
+  padding: 0 10px;
+}
+
 .logout-button span {
   font-size: 0.76rem;
   font-weight: 650;
@@ -934,6 +975,13 @@ td strong {
   background: #fff;
 }
 
+wa-callout.state-card::part(message) {
+  display: grid;
+  text-align: center;
+  align-content: center;
+  justify-items: center;
+}
+
 .state-icon,
 .confirm-icon {
   display: grid;
@@ -957,6 +1005,13 @@ td strong {
   animation: spin 700ms linear infinite;
 }
 
+.state-spinner {
+  margin-bottom: 12px;
+  font-size: 28px;
+  --indicator-color: var(--primary);
+  --track-color: color-mix(in srgb, var(--primary) 18%, transparent);
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -1148,10 +1203,6 @@ td strong {
   right: 22px;
   bottom: 22px;
   max-width: min(390px, calc(100vw - 44px));
-  padding: 14px 18px;
-  color: #fff;
-  border-radius: 11px;
-  background: #344054;
   box-shadow: 0 15px 40px rgb(16 24 40 / 25%);
   opacity: 0;
   transform: translateY(10px);
@@ -1165,14 +1216,6 @@ td strong {
   transform: translateY(0);
 }
 
-.toast--success {
-  background: var(--success);
-}
-
-.toast--error {
-  background: var(--danger);
-}
-
 code {
   padding: 3px 6px;
   color: #364fc7;