feat: enhance TOTP settings UI with improved layout and status indication

webapp/src/components/SettingsPage.tsx

@@ -281,8 +281,15 @@ export default function SettingsPage(props: SettingsPageProps) {
       </section>
 
       <section className="card settings-module">
-        <h3>{t('txt_totp')}</h3>
-        {totpLocked && <div className="status-ok">{t('txt_totp_is_enabled_for_this_account')}</div>}
+        <div className="settings-module-head">
+          <h3>{t('txt_totp')}</h3>
+          {totpLocked && (
+            <span className="totp-status-pill">
+              <ShieldCheck size={14} aria-hidden="true" />
+              {t('txt_enabled')}
+            </span>
+          )}
+        </div>
         <div className="totp-grid">
           <div className="totp-qr">
             <img src={qrDataUrl} alt="TOTP QR" />