support custom userdata

src/styles.css

@@ -276,6 +276,30 @@ button {
   overflow: hidden;
 }
 
+.page-tabs {
+  display: flex;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.page-tab {
+  padding: 10px 14px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.58);
+  color: var(--muted);
+  cursor: pointer;
+  transition:
+    background 160ms ease,
+    color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.page-tab.active {
+  color: var(--text);
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 240, 255, 0.92));
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
+}
+
 .section-tabs,
 .content-section,
 .state-panel {
@@ -299,6 +323,137 @@ button {
   font-size: 0.86rem;
 }
 
+.config-form-card,
+.config-card {
+  border-radius: 18px;
+  padding: 14px;
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: var(--panel-strong);
+}
+
+.config-form-header h3,
+.config-title-row h4 {
+  margin: 0;
+  font-size: 0.98rem;
+}
+
+.config-form-header p,
+.config-id,
+.config-meta-row p {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 0.86rem;
+}
+
+.config-form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 14px;
+}
+
+.field-group {
+  display: grid;
+  gap: 6px;
+}
+
+.field-group span,
+.config-label {
+  color: var(--muted);
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.field-group input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid rgba(148, 163, 184, 0.24);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.94);
+  color: var(--text);
+  outline: none;
+}
+
+.field-group input:focus {
+  border-color: rgba(47, 111, 237, 0.42);
+  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12);
+}
+
+.field-span {
+  grid-column: 1 / -1;
+}
+
+.config-form-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+
+.primary-button,
+.danger-button {
+  padding: 9px 14px;
+  border-radius: 12px;
+  font-size: 0.84rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.primary-button {
+  background: linear-gradient(135deg, #10213f 0%, #213f75 100%);
+  color: #fff;
+}
+
+.danger-button {
+  border: 1px solid rgba(239, 68, 68, 0.18);
+  background: rgba(254, 242, 242, 0.96);
+  color: #b42318;
+}
+
+.primary-button:disabled,
+.danger-button:disabled {
+  cursor: default;
+  opacity: 0.72;
+}
+
+.config-card-header,
+.config-title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.config-card-lead {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  min-width: 0;
+}
+
+.config-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  font-size: 0.8rem;
+}
+
+.config-meta {
+  display: grid;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.config-meta-row {
+  display: grid;
+  gap: 4px;
+}
+
+.config-meta-row p {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .sort-bar {
   display: flex;
   justify-content: flex-end;
@@ -695,6 +850,14 @@ button {
 }
 
 @media (max-width: 720px) {
+  .config-form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .field-span {
+    grid-column: auto;
+  }
+
   .sort-bar {
     justify-content: stretch;
   }