feat: implement session timeout feature with customizable actions and update UI components

webapp/src/styles/management.css

@@ -425,8 +425,57 @@
   @apply mb-2;
 }
 
+.settings-modules-grid {
+  @apply grid gap-3;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.settings-module {
+  @apply min-w-0;
+}
+
+.settings-module h3 {
+  @apply mb-4 mt-0 text-base font-extrabold;
+  color: var(--text);
+}
+
+.settings-module-placeholder {
+  @apply flex min-h-[150px] flex-col items-center justify-center gap-3 text-base font-extrabold;
+  color: var(--muted);
+}
+
+.settings-module-placeholder svg {
+  color: var(--primary-strong);
+}
+
+.settings-module .field:last-child,
+.session-timeout-fields .field {
+  @apply mb-0;
+}
+
+.session-timeout-fields {
+  @apply grid gap-3;
+}
+
+.sensitive-actions-grid {
+  @apply grid gap-3;
+}
+
+.sensitive-action {
+  @apply rounded-lg border p-3.5;
+  border-color: var(--line-soft);
+  background: color-mix(in srgb, var(--surface) 74%, transparent);
+}
+
+.sensitive-action h4 {
+  @apply mb-1 mt-0 text-base font-extrabold;
+  color: var(--text);
+}
+
 .recovery-code-card {
-  @apply mb-0 mt-2.5;
+  @apply mb-0 mt-2.5 rounded-lg border p-3;
+  border-color: var(--line-soft);
+  background: color-mix(in srgb, var(--surface) 84%, transparent);
 }
 
 .recovery-code-value {

webapp/src/styles/overlays.css

@@ -9,7 +9,7 @@
 
 .dialog-card {
   @apply rounded-[20px] border bg-white p-5 text-center;
-  width: min(460px, 100%);
+  width: min(5000px, 100%);
   border: 1px solid var(--line);
   box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
   transform-origin: 50% 30%;

webapp/src/styles/responsive.css

@@ -462,6 +462,11 @@
     gap: 10px;
   }
 
+  .settings-modules-grid,
+  .password-settings-grid {
+    grid-template-columns: 1fr;
+  }
+
   .import-export-panel .actions .btn,
   .settings-subcard .actions .btn,
   .section-head .actions .btn {