施工(HEL-140): 手机端P4系统管理五页——账号资料/修改密码/会员状态/系统设置/会员管理

Co-authored-by: multica-agent <github@multica.ai>

app/frontend/m/css/features.css

@@ -3174,3 +3174,196 @@
   border-top: 1px solid var(--border);
   transform: translateY(calc(-1 * var(--m-keyboard-inset, 0px)));
 }
+
+/* ===== 系统管理（P4）：账号资料 / 修改密码 / 会员状态 / 系统设置 / 会员管理 ===== */
+
+/* 只读键值行 */
+.m-card--kv { padding: 0; overflow: hidden; }
+.m-kv-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  height: 44px;
+  padding: 0 14px;
+}
+.m-kv-row + .m-kv-row { border-top: 1px solid var(--border-subtle); }
+.m-kv-label { font-size: var(--font-size-label); color: var(--text-secondary); flex: 0 0 auto; }
+.m-kv-value {
+  font-size: var(--font-size-body);
+  font-weight: 500;
+  color: var(--text-primary);
+  text-align: right;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-variant-numeric: tabular-nums;
+}
+.m-kv-value--danger { color: var(--market-up); }
+.m-kv-value--muted { color: var(--text-tertiary); font-weight: 400; }
+.m-kv-note {
+  padding: 6px 14px 14px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+  line-height: 1.5;
+}
+
+/* 身份徽标 */
+.m-id-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+.m-id-badge--admin { background: var(--warning-soft); color: var(--warning); }
+.m-id-badge--member { background: var(--action-soft); color: var(--action); }
+.m-id-badge--user { background: var(--surface-muted); color: var(--text-secondary); }
+.m-id-badge--suspended { background: var(--market-up-soft); color: var(--market-up); }
+
+/* 卡外底部说明 */
+.m-footnote {
+  margin: 10px 14px 16px;
+  font-size: var(--font-size-aux);
+  color: var(--text-tertiary);
+  line-height: 1.5;
+}
+
+/* 表单 label 右侧规则小字 */
+.m-field-hint {
+  font-size: var(--font-size-aux);
+  color: var(--text-tertiary);
+  font-weight: 400;
+  margin-left: 6px;
+}
+
+/* 会员状态 hero 卡 */
+.m-membership-hero {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 16px;
+}
+.m-membership-hero-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.m-membership-hero-status { font-size: 12px; color: var(--text-secondary); }
+.m-membership-hero-status--down { color: var(--market-down); }
+.m-membership-hero-status--up { color: var(--market-up); }
+.m-membership-hero-status--muted { color: var(--text-tertiary); }
+.m-membership-hero-title {
+  font-size: var(--font-size-metric);
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1.2;
+}
+.m-membership-hero-sub {
+  font-size: var(--font-size-label);
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+/* 系统设置：刷新卡 */
+.m-admin-view {
+  margin: 10px 14px 0;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+.m-refresh-desc {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 14px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+.m-refresh-desc svg { flex: 0 0 auto; color: var(--text-tertiary); margin-top: 1px; }
+.m-refresh-result {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 10px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+.m-refresh-result svg { flex: 0 0 auto; }
+.m-refresh-result--ok { color: var(--market-down); }
+.m-refresh-result--busy { color: var(--warning); }
+
+/* 会员管理 */
+.m-members-summary {
+  margin: 10px 14px 2px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+.m-member-list { padding: 0 12px; }
+.m-member-row {
+  appearance: none;
+  border: none;
+  background: transparent;
+  border-bottom: 1px solid var(--border);
+  padding: 10px 0;
+  min-height: 64px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.m-member-row:active { background: var(--surface-hover); }
+.m-member-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+.m-member-row-title {
+  font-size: var(--font-size-body);
+  font-weight: 500;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.m-member-me { font-size: var(--font-size-aux); color: var(--text-tertiary); font-weight: 400; }
+.m-member-row-summary {
+  font-size: 12px;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.m-member-side {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+.m-member-used { font-size: var(--font-size-aux); color: var(--text-tertiary); }
+.m-member-row-chevron { flex: 0 0 auto; color: var(--text-tertiary); display: inline-flex; }
+
+/* 会员操作抽屉 */
+.m-member-drawer-summary {
+  margin: 0 0 14px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+.m-member-drawer-field { margin-bottom: 14px; }
+.m-member-drawer-label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: var(--font-size-label);
+  color: var(--text-secondary);
+}
+.m-member-drawer-hint {
+  margin: -6px 0 12px;
+  font-size: var(--font-size-aux);
+  color: var(--text-tertiary);
+}