feat: add dedicated account settings page

webui/style.css

@@ -194,6 +194,10 @@ input,
   margin-top: 8px;
 }
 
+.status-card .button:first-of-type {
+  margin-top: 0;
+}
+
 .status-badge {
   display: inline-flex;
   padding: 6px 10px;
@@ -224,6 +228,10 @@ input,
   margin-bottom: 16px;
 }
 
+.settings-health-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .panel {
   margin-bottom: 16px;
 }
@@ -260,6 +268,78 @@ input,
   margin-top: 12px;
 }
 
+.settings-layout {
+  display: grid;
+  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.settings-layout .panel:last-child {
+  grid-column: 1 / -1;
+}
+
+.settings-page-shell .content {
+  max-width: 1280px;
+}
+
+.settings-hero {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.settings-account-list {
+  display: grid;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.settings-account-button {
+  width: 100%;
+  min-height: 48px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+  text-align: left;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: #101010;
+  color: var(--text-color);
+  padding: 10px 12px;
+  cursor: pointer;
+}
+
+.settings-account-button.active {
+  border-color: #0f6f67;
+  background: #092522;
+}
+
+.settings-account-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.settings-account-status {
+  color: var(--warn);
+  font-size: 0.78rem;
+}
+
+.settings-account-status.ok {
+  color: var(--ok);
+}
+
+.settings-meta-list {
+  display: grid;
+  gap: 8px;
+  margin-top: 16px;
+  color: var(--dim);
+}
+
 input {
   min-width: 160px;
   padding: 10px 13px;