snapshot: preserve account security and profile UI cleanup

backend/workflows/static/workflows/css/account.css

@@ -291,13 +291,46 @@ body {
   word-break: break-word;
 }
 
-.account-action-grid {
+.account-security-overview {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
   margin-bottom: 18px;
 }
 
+.account-security-item {
+  padding: 16px 18px;
+  border-radius: 18px;
+  border: 1px solid #dbe5f2;
+  background:
+    radial-gradient(circle at top right, rgba(30, 64, 175, 0.06), transparent 26%),
+    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(246,250,255,0.9));
+}
+
+.account-security-item span {
+  display: block;
+  margin-bottom: 6px;
+  color: #6b7a90;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.account-security-item strong {
+  display: block;
+  color: #132238;
+  font-size: 20px;
+  line-height: 1.2;
+}
+
+.account-security-item p {
+  margin: 8px 0 0;
+  color: #617389;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
 .account-totp-card {
   margin-bottom: 18px;
   padding: 18px;
@@ -326,56 +359,77 @@ body {
   margin-top: 14px;
 }
 
-.account-action-card {
-  display: grid;
-  gap: 6px;
-  padding: 16px 18px;
+.account-qr-card,
+.account-recovery-card {
+  margin-top: 14px;
+  padding: 16px;
   border-radius: 18px;
   border: 1px solid #dbe5f2;
-  background:
-    radial-gradient(circle at top right, rgba(30, 64, 175, 0.08), transparent 28%),
-    #f9fbff;
-  color: inherit;
-  text-decoration: none;
-  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  background: rgba(255, 255, 255, 0.82);
 }
 
-.account-action-card:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 10px 24px rgba(28, 45, 79, 0.08);
+.account-qr-card svg {
+  display: block;
+  width: min(220px, 100%);
+  height: auto;
+  margin: 0 auto;
 }
 
-.account-action-card strong {
-  color: #132238;
-  font-size: 15px;
+.account-secret-panel {
+  margin-top: 14px;
+  padding-top: 14px;
+  border-top: 1px solid #dbe5f2;
 }
 
-.account-action-card span {
-  color: #617389;
-  font-size: 13px;
-  line-height: 1.5;
-}
-
-.account-action-card-muted {
-  cursor: default;
-}
-
-.account-action-card-muted:hover {
-  transform: none;
-  box-shadow: none;
-}
-
-.account-actions {
+.account-secret-head {
   display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.account-secret-head span {
+  display: block;
+  margin-bottom: 4px;
+  color: #6b7a90;
+  font-size: 12px;
+}
+
+.account-secret-head strong {
+  color: #132238;
+  font-size: 14px;
+}
+
+.account-secret-toggle {
+  min-width: 48px;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.account-secret-body {
+  margin-top: 12px;
+}
+
+.account-secret-body.is-hidden {
+  display: none;
+}
+
+.account-recovery-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
 }
 
-.account-actions .btn {
-  width: auto;
-}
-
-.account-actions form {
-  margin: 0;
+.account-recovery-code {
+  padding: 12px 14px;
+  border-radius: 14px;
+  border: 1px dashed #c8d7ea;
+  background: #f7faff;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: #17345e;
 }
 
 .account-inline-view.is-hidden,
@@ -491,23 +545,16 @@ body {
   }
 
   .account-detail-grid,
-  .account-action-grid,
-  .account-form-grid {
+  .account-security-overview,
+  .account-form-grid,
+  .account-recovery-grid {
     grid-template-columns: 1fr;
   }
 
-  .account-actions {
-    flex-direction: column;
-  }
-
   .account-inline-actions {
     flex-direction: column;
   }
 
-  .account-actions .btn {
-    width: 100%;
-  }
-
   .account-panel-head {
     flex-direction: column;
   }

backend/workflows/static/workflows/css/app_chrome.css

@@ -275,6 +275,7 @@
   display: grid;
   gap: 4px;
   z-index: 40;
+  overflow: hidden;
 }
 
 .app-user-panel-head {
@@ -299,7 +300,10 @@
 
 .app-user-panel a,
 .app-user-panel button {
+  display: flex;
+  align-items: center;
   width: 100%;
+  min-height: 42px;
   border: 0;
   border-radius: 12px;
   background: transparent;
@@ -322,6 +326,13 @@
   color: var(--app-brand-blue);
 }
 
+.app-user-panel a:focus-visible,
+.app-user-panel button:focus-visible,
+.app-user-trigger:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 0, 120, 0.10);
+}
+
 .app-user-panel form {
   margin: 0;
 }