diff --git a/client/src/App.css b/client/src/App.css
index 672bd1a..d36174f 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -918,7 +918,7 @@ html.scheme-dark .themed-select-option.is-selected {
.profile-passkey-item {
display: flex;
- align-items: center;
+ align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
@@ -927,6 +927,91 @@ html.scheme-dark .themed-select-option.is-selected {
border: 1px solid rgba(148, 163, 184, 0.12);
}
+.profile-passkey-main {
+ flex: 1;
+ min-width: 0;
+}
+
+.profile-passkey-label {
+ display: block;
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--app-text);
+ margin-bottom: 2px;
+}
+
+.profile-passkey-rename {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-top: 10px;
+}
+
+.profile-passkey-rename .input-text {
+ flex: 1 1 160px;
+ min-width: 0;
+ padding: 10px 12px;
+ font-size: 14px;
+}
+
+.profile-add-passkey {
+ margin-top: 16px;
+}
+
+.profile-add-passkey .input-group label {
+ display: block;
+ text-align: left;
+ font-size: 13.5px;
+ color: var(--app-text-muted);
+ margin-bottom: 6px;
+ font-weight: 500;
+}
+
+.profile-security-list {
+ list-style: none;
+ margin: 0 0 12px;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.profile-security-item {
+ display: flex;
+ align-items: flex-start;
+ gap: 10px;
+ font-size: 14px;
+ line-height: 1.4;
+}
+
+.profile-security-item--ok {
+ color: #4ade80;
+}
+
+.profile-security-item--warn {
+ color: #fbbf24;
+}
+
+.profile-recovery-hint {
+ margin-bottom: 0;
+ font-size: 12px;
+}
+
+.profile-device-status {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 12px;
+ font-size: 13px;
+}
+
+.account-danger-zone__hint {
+ margin: 0 0 16px;
+ font-size: 13px;
+ color: var(--app-text-muted);
+ line-height: 1.5;
+}
+
.profile-passkey-id {
display: block;
font-family: ui-monospace, monospace;
diff --git a/client/src/components/AccountDangerZone.tsx b/client/src/components/AccountDangerZone.tsx
index eeea281..19b415e 100644
--- a/client/src/components/AccountDangerZone.tsx
+++ b/client/src/components/AccountDangerZone.tsx
@@ -46,6 +46,7 @@ export default function AccountDangerZone({ className = '' }: AccountDangerZoneP
{t('settings.danger_zone_desc')}
+ {t('settings.delete_backup_hint')}