编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PETU+ 管理后台 · 交互原型</title>
<style>
  :root {
    --primary: #FF6B35;
    --primary-2: #FF8E53;
    --primary-light: #FFF1EB;
    --secondary: #FFD166;
    --accent: #06D6A0;
    --info: #4D96FF;
    --warning: #F59E0B;
    --danger: #EF4444;
    --bg: #F4F6FA;
    --card: #FFFFFF;
    --text: #1A1A1A;
    --text-2: #6B7280;
    --text-3: #9CA3AF;
    --line: #E5E7EB;
    --line-2: #F1F3F5;
    --sidebar-bg: #1F2937;
    --sidebar-text: #D1D5DB;
    --sidebar-text-active: #FFFFFF;
    --sidebar-hover: #374151;
    --gradient-1: linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%);
    --gradient-2: linear-gradient(135deg, #4D96FF 0%, #6BB0FF 100%);
    --gradient-3: linear-gradient(135deg, #06D6A0 0%, #4DE0B8 100%);
    --gradient-4: linear-gradient(135deg, #A78BFA 0%, #C4B5FD 100%);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.08);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  html, body { height: 100%; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }
  /* 整体布局 */
  .app-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 56px 1fr;
    height: 100vh;
  }
  /* 顶部栏 */
  .topbar {
    grid-column: 2;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 16px;
    box-shadow: var(--shadow-sm);
    z-index: 50;
  }
  .topbar .crumb {
    display: flex; align-items: center; gap: 8px; font-size: 14px;
    color: var(--text-2);
  }
  .topbar .crumb .sep { color: var(--text-3); }
  .topbar .crumb .current { color: var(--text); font-weight: 600; }
  .topbar .spacer { flex: 1; }
  .topbar .search {
    background: var(--bg);
    border-radius: 18px;
    padding: 7px 14px;
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--text-3);
    min-width: 280px;
  }
  .topbar .user-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px 4px 4px;
    background: var(--bg);
    border-radius: 20px;
    cursor: pointer;
  }
  .topbar .user-chip .ava {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--gradient-1);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 13px;
  }
  .topbar .user-chip .name { font-size: 13px; font-weight: 500; }
  .topbar .icon-btn {
    width: 36px; height: 36px; border-radius: 8px;
    background: transparent; display: flex; align-items: center; justify-content: center;
    color: var(--text-2); cursor: pointer; position: relative;
  }
  .topbar .icon-btn:hover { background: var(--bg); color: var(--text); }
  .topbar .icon-btn .dot {
    position: absolute; top: 6px; right: 6px;
    width: 8px; height: 8px; background: var(--danger); border-radius: 50%;
    border: 2px solid #fff;
  }
  /* 侧边栏 */
  .sidebar {
    grid-column: 1;
    grid-row: 1 / 3;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex; flex-direction: column;
    overflow-y: auto;
  }
  .sidebar::-webkit-scrollbar { width: 0; }
  .sidebar .logo {
    height: 56px;
    display: flex; align-items: center; gap: 8px;
    padding: 0 20px;
    color: #fff; font-size: 18px; font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
  }
  .sidebar .logo .dot {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--gradient-1);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
  }
  .sidebar .nav-group { padding: 12px 0; }
  .sidebar .nav-title {
    padding: 8px 20px 4px;
    font-size: 11px; color: rgba(255,255,255,0.4);
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .sidebar .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 20px;
    color: var(--sidebar-text);
    cursor: pointer;
    font-size: 13px;
    border-left: 3px solid transparent;
    transition: all 0.15s;
  }
  .sidebar .nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
  .sidebar .nav-item.active {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-active);
    border-left-color: var(--primary);
  }
  .sidebar .nav-item .ic { font-size: 16px; width: 18px; }
  .sidebar .nav-item .badge {
    margin-left: auto;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
  }
  /* 主内容区 */
  .main {
    grid-column: 2;
    overflow-y: auto;
    padding: 20px 24px;
  }
  /* 屏幕容器 */
  .screens { position: relative; min-height: 100%; }
  .screen {
    display: none;
    animation: fadeIn 0.2s;
  }
  .screen.active { display: block; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
  /* 通用 */
  .page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
  }
  .page-header h1 { font-size: 22px; font-weight: 700; }
  .page-header .sub { color: var(--text-2); font-size: 13px; margin-top: 4px; }
  .page-header .actions { display: flex; gap: 8px; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; font-size: 13px;
    border: 1px solid var(--line); background: #fff; color: var(--text);
    cursor: pointer; font-family: inherit;
    transition: all 0.15s;
  }
  .btn:hover { border-color: var(--primary); color: var(--primary); }
  .btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
  .btn-primary:hover { background: var(--primary-2); color: #fff; border-color: var(--primary-2); }
  .btn-danger { color: var(--danger); border-color: #FEE2E2; }
  .btn-danger:hover { background: var(--danger); color: #fff; }
  .btn-sm { padding: 5px 10px; font-size: 12px; }
  .btn-text { background: transparent; border: 0; color: var(--primary); padding: 4px 8px; }
  .btn-text:hover { background: var(--primary-light); }
  /* 卡片 */
  .card {
    background: var(--card);
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
  }
  .card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
  }
  .card-header h3 { font-size: 15px; font-weight: 600; }
  /* 统计卡片 */
  .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
  /* 通用栅格 */
  .grid { display: grid; gap: 16px; margin-bottom: 16px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-5 { grid-template-columns: repeat(5, 1fr); }
  .stat-card {
    background: #fff; border-radius: 12px; padding: 16px;
    box-shadow: var(--shadow-sm);
    position: relative; overflow: hidden;
  }
  .stat-card .label { color: var(--text-2); font-size: 12px; display: flex; align-items: center; gap: 6px; }
  .stat-card .value { font-size: 26px; font-weight: 700; margin: 8px 0 4px; }
  .stat-card .delta { font-size: 12px; color: var(--text-2); }
  .stat-card .delta.up { color: var(--accent); }
  .stat-card .delta.down { color: var(--danger); }
  .stat-card .ico {
    position: absolute; top: 14px; right: 14px;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--primary-light); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
  }
  .stat-card.blue .ico { background: #E8F0FE; color: var(--info); }
  .stat-card.green .ico { background: #E6FAF1; color: var(--accent); }
  .stat-card.purple .ico { background: #F3E8FF; #7C3AED; color: #7C3AED; }
  /* 表格 */
  .table-wrap {
    background: #fff; border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }
  .table-toolbar {
    padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--line);
  }
  .table-toolbar .search {
    background: var(--bg); border-radius: 8px; padding: 7px 12px;
    display: flex; align-items: center; gap: 6px;
    min-width: 240px; font-size: 13px; color: var(--text-3);
    border: 1px solid transparent;
  }
  .table-toolbar .search:focus-within { background: #fff; border-color: var(--primary); color: var(--text); }
  .table-toolbar .search input {
    flex: 1; border: 0; background: transparent; outline: none; font-size: 13px; font-family: inherit;
  }
  .table-toolbar .spacer { flex: 1; }
  .table-toolbar .filter {
    background: var(--bg); border-radius: 8px; padding: 7px 12px;
    font-size: 13px; color: var(--text-2); cursor: pointer;
    display: flex; align-items: center; gap: 4px;
  }
  .table-toolbar .filter:hover { background: var(--primary-light); color: var(--primary); }
  table { width: 100%; border-collapse: collapse; }
  thead th {
    text-align: left; padding: 12px 16px; font-size: 12px;
    color: var(--text-2); font-weight: 500;
    background: #FAFBFC; border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  tbody td {
    padding: 14px 16px; font-size: 13px;
    border-bottom: 1px solid var(--line-2);
    vertical-align: middle;
  }
  tbody tr:hover { background: #FAFBFC; }
  tbody tr:last-child td { border-bottom: 0; }
  .table-pager {
    padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; color: var(--text-2);
  }
  /* 标签 */
  .tag {
    display: inline-flex; align-items: center; padding: 2px 8px;
    font-size: 11px; border-radius: 4px;
    background: var(--primary-light); color: var(--primary);
  }
  .tag.green { background: #E6FAF1; color: #06A87E; }
  .tag.blue { background: #E8F0FE; color: #1A73E8; }
  .tag.yellow { background: #FFF7E0; color: #B8860B; }
  .tag.red { background: #FEE2E2; color: #EF4444; }
  .tag.gray { background: var(--bg); color: var(--text-2); }
  .tag.purple { background: #F3E8FF; color: #7C3AED; }
  /* 头像 */
  .avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--gradient-1);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 13px;
    flex-shrink: 0;
    background-size: cover; background-position: center;
  }
  .avatar.sm { width: 28px; height: 28px; font-size: 11px; }
  .avatar.lg { width: 48px; height: 48px; font-size: 16px; }
  .avatar.xl { width: 64px; height: 64px; font-size: 22px; }
  /* 进度条 */
  .progress {
    height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden;
  }
  .progress .bar {
    height: 100%; background: var(--primary); border-radius: 3px;
  }
  /* 复选框 */
  .checkbox {
    width: 16px; height: 16px; border-radius: 4px;
    border: 1.5px solid var(--line);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .checkbox.on { background: var(--primary); border-color: var(--primary); color: #fff; }
  /* 状态点 */
  .status-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-right: 4px; background: var(--text-3);
  }
  .status-dot.green { background: var(--accent); }
  .status-dot.yellow { background: var(--warning); }
  .status-dot.red { background: var(--danger); }
  .status-dot.blue { background: var(--info); }
  /* 描述 */
  .desc-block { font-size: 13px; line-height: 1.7; color: var(--text-2); }
  /* 详情布局 */
  .detail-grid { display: grid; grid-template-columns: 1fr 280px; gap: 16px; }
  .info-list { font-size: 13px; }
  .info-list .row {
    display: flex; padding: 12px 0;
    border-bottom: 1px solid var(--line-2);
  }
  .info-list .row:last-child { border-bottom: 0; }
  .info-list .lbl { color: var(--text-2); width: 100px; }
  .info-list .val { flex: 1; color: var(--text); }
  /* 图表占位 */
  .chart-box { height: 240px; padding: 16px 0; }
  .chart-bars { display: flex; align-items: flex-end; gap: 12px; height: 200px; padding: 0 8px; }
  .chart-bar {
    flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; justify-content: flex-end;
  }
  .chart-bar .bar-fill {
    width: 100%; min-height: 4px; background: var(--gradient-1);
    border-radius: 4px 4px 0 0;
  }
  .chart-bar .lbl { font-size: 11px; color: var(--text-3); }
  /* 时间线 */
  .timeline { padding-left: 20px; border-left: 2px solid var(--line-2); }
  .timeline-item { position: relative; padding-bottom: 16px; }
  .timeline-item::before {
    content: ""; position: absolute; left: -26px; top: 6px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--primary); border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--primary-light);
  }
  .timeline-item .t { font-size: 12px; color: var(--text-3); margin-bottom: 4px; }
  .timeline-item .c { font-size: 13px; line-height: 1.5; }
  /* 标签栏 */
  .tab-bar {
    background: #fff; border-radius: 12px; padding: 4px;
    display: inline-flex; gap: 2px; box-shadow: var(--shadow-sm);
  }
  .tab-bar .tab {
    padding: 6px 14px; border-radius: 8px;
    font-size: 13px; color: var(--text-2); cursor: pointer;
  }
  .tab-bar .tab.active { background: var(--primary); color: #fff; }
  /* 弹层 */
  .modal-mask {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: none; align-items: center; justify-content: center;
    z-index: 1000;
  }
  .modal-mask.show { display: flex; }
  .modal {
    background: #fff; border-radius: 16px; width: 480px;
    max-height: 80vh; overflow-y: auto;
    box-shadow: var(--shadow-lg);
  }
  .modal .head {
    padding: 16px 20px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
  }
  .modal .head h3 { font-size: 16px; }
  .modal .head .x { color: var(--text-3); cursor: pointer; font-size: 18px; }
  .modal .body { padding: 20px; }
  .modal .foot {
    padding: 12px 20px; border-top: 1px solid var(--line);
    display: flex; justify-content: flex-end; gap: 8px;
  }
  /* 表单 */
  .form-row { margin-bottom: 16px; }
  .form-row .lbl { font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
  .form-row .ipt {
    width: 100%; padding: 9px 12px; border: 1px solid var(--line);
    border-radius: 8px; font-size: 13px; font-family: inherit;
    outline: none; background: #fff;
  }
  .form-row .ipt:focus { border-color: var(--primary); }
  .form-row textarea.ipt { resize: vertical; min-height: 80px; }
  /* Toast */
  .toast {
    position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.85); color: #fff; padding: 10px 18px;
    border-radius: 20px; font-size: 13px; z-index: 2000;
    display: none;
  }
  .toast.show { display: block; animation: fadeIn 0.2s; }
  /* 辅助 */
  .row { display: flex; align-items: center; gap: 8px; }
  .col { display: flex; flex-direction: column; }
  .between { justify-content: space-between; }
  .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
  .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
  .text-xs { font-size: 11px; } .text-sm { font-size: 12px; } .text-base { font-size: 13px; }
  .text-lg { font-size: 15px; } .text-xl { font-size: 18px; }
  .text-mute { color: var(--text-2); } .text-3 { color: var(--text-3); }
  .text-primary { color: var(--primary); }
  .bold { font-weight: 600; } .bold-7 { font-weight: 700; }
  .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
  /* 双列布局 */
  .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  /* 工作台待办 */
  .todo-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--line-2);
    font-size: 13px;
  }
  .todo-item:last-child { border-bottom: 0; }
  .todo-item .ico {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
  }
  .todo-item .label { flex: 1; }
  .todo-item .num { color: var(--text-2); font-size: 12px; }
  /* 漏斗图 */
  .funnel { padding: 10px 0; }
  .funnel-row {
    display: flex; align-items: center; gap: 10px; padding: 6px 0;
  }
  .funnel-row .lbl { width: 80px; font-size: 12px; color: var(--text-2); }
  .funnel-row .bar {
    flex: 1; height: 24px; border-radius: 4px 12px 12px 4px;
    background: var(--gradient-1);
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0 10px; color: #fff; font-size: 11px; font-weight: 600;
  }
  /* 隐藏 */
  .hidden { display: none; }

/* 登录页 */
body.is-login { overflow: hidden; }
body.is-login .sidebar, body.is-login .topbar, body.is-login .main { display: none !important; }
.login-page {
  position: fixed; inset: 0; z-index: 1000;
  background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 50%, #FFB088 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.login-bg { position: absolute; inset: 0; pointer-events: none; }
.login-deco { position: absolute; border-radius: 50%; opacity: 0.15; background: #fff; }
.login-deco-1 { width: 400px; height: 400px; top: -100px; left: -100px; }
.login-deco-2 { width: 300px; height: 300px; bottom: -50px; right: 100px; }
.login-deco-3 { width: 200px; height: 200px; top: 40%; right: -50px; }
.login-container {
  display: flex; width: 980px; max-width: 92vw; min-height: 600px;
  background: #fff; border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,0.3); overflow: hidden;
  position: relative; z-index: 1;
}
.login-left {
  flex: 1; background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%);
  padding: 50px 40px; color: #fff; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.login-left::before {
  content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: rgba(255,255,255,0.1); top: -80px; right: -80px;
}
.login-left::after {
  content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,0.08); bottom: -50px; left: -50px;
}
.login-brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.login-logo { font-size: 40px; }
.login-brand-name { font-size: 28px; font-weight: 700; }
.login-title { font-size: 30px; font-weight: 700; margin-top: 80px; position: relative; z-index: 1; }
.login-subtitle { font-size: 15px; opacity: 0.9; margin-top: 12px; position: relative; z-index: 1; }
.login-features { display: flex; flex-direction: column; gap: 16px; margin-top: 50px; position: relative; z-index: 1; }
.login-feat { display: flex; align-items: center; gap: 14px; }
.login-feat .ico {
  width: 44px; height: 44px; background: rgba(255,255,255,0.2); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.login-feat .bold { font-size: 15px; }
.login-feat .text-xs { opacity: 0.85; }
.login-right { flex: 1; padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; background: #fff; }
.login-form-card { width: 100%; max-width: 360px; margin: 0 auto; }
.login-form-title { font-size: 26px; font-weight: 700; color: #1F2937; }
.login-form-sub { font-size: 14px; color: #6B7280; margin-top: 8px; }
.login-right .form-row { display: block; }
.login-right .form-row .lbl { display: block; font-size: 13px; color: #374151; margin-bottom: 6px; font-weight: 500; }
.ipt-wrap {
  display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px;
  background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 10px; transition: all 0.2s;
}
.ipt-wrap:focus-within { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.ipt-wrap svg { color: #9CA3AF; flex-shrink: 0; }
.ipt-wrap .ipt { background: transparent; border: 0; outline: none; flex: 1; font-size: 14px; height: 100%; padding: 0; font-family: inherit; }
.ipt-wrap .ipt::placeholder { color: #9CA3AF; }
</style>
</head>
<body>
<div class="app-layout">
  <!-- 侧边栏 -->
  <aside class="sidebar">
    <div class="logo">
      <div class="dot">🐾</div>
      <span>PETU+</span>
      <span style="font-size:11px;color:rgba(255,255,255,0.5);margin-left:auto">管理后台</span>
    </div>
    <div class="nav-group">
      <div class="nav-title">概览</div>
      <div class="nav-item active" data-screen="dashboard">
        <span class="ic">📊</span>工作台
      </div>
      <div class="nav-item" data-screen="stats">
        <span class="ic">📈</span>数据统计
      </div>
    </div>
    <div class="nav-group">
      <div class="nav-title">业务</div>
      <div class="nav-item" data-screen="users">
        <span class="ic">👤</span>用户管理
        <span class="badge">12</span>
      </div>
      <div class="nav-item" data-screen="practitioners">
        <span class="ic">👨‍⚕️</span>从业者
      </div>
      <div class="nav-item" data-screen="pets">
        <span class="ic">🐱</span>宠物管理
      </div>
      <div class="nav-item" data-screen="merchants">
        <span class="ic">🏪</span>商家管理
        <span class="badge">5</span>
      </div>
      <div class="nav-item" data-screen="services">
        <span class="ic">🛠️</span>服务管理
      </div>
      <div class="nav-item" data-screen="exotic">
        <span class="ic">🐹</span>异宠医疗
      </div>

      <div class="nav-item" data-screen="registrations">
        <span class="ic">📅</span>挂号管理
      </div>
      <div class="nav-item" data-screen="pet-breeds">
        <span class="ic">🧬</span>宠物品种
      </div>
      <div class="nav-item" data-screen="vaccines">
        <span class="ic">💉</span>疫苗记录
      </div>
      <div class="nav-item" data-screen="service-subcategories">
        <span class="ic">📂</span>服务细分
      </div>
      <div class="nav-item" data-screen="acceptance-types">
        <span class="ic">🐾</span>可接诊类型
      </div>
      <div class="nav-item" data-screen="coupon-tags">
        <span class="ic">🏷️</span>优惠标签
      </div>
      <div class="nav-item" data-screen="exotic-categories">
        <span class="ic">🗂️</span>异宠分类
      </div>
    </div>
    <div class="nav-group">
      <div class="nav-title">提醒</div>
      <div class="nav-item" data-screen="feeding-reminders">
        <span class="ic">🍽️</span>喂食提醒
      </div>
      <div class="nav-item" data-screen="vaccine-reminders">
        <span class="ic">💊</span>疫苗提醒
      </div>
      <div class="nav-item" data-screen="reminder-records">
        <span class="ic">📨</span>提醒记录
      </div>
    <div class="nav-group">
      <div class="nav-title">订单</div>
      <div class="nav-item" data-screen="orders">
        <span class="ic">📋</span>服务订单
      </div>
      <div class="nav-item" data-screen="refunds">
        <span class="ic">↩️</span>退款处理
        <span class="badge">3</span>
      </div>
      <div class="nav-item" data-screen="medical">
        <span class="ic">🛡️</span>医保管理
      </div>
    </div>
    <div class="nav-group">
      <div class="nav-title">内容</div>
      <div class="nav-item" data-screen="posts">
        <span class="ic">📷</span>动态管理
      </div>
      <div class="nav-item" data-screen="circles">
        <span class="ic">💬</span>圈子管理
      </div>
      <div class="nav-item" data-screen="reviews">
        <span class="ic">⭐</span>评价管理
      </div>
      <div class="nav-item" data-screen="jobs">
        <span class="ic">💼</span>招聘管理
      </div>
      <div class="nav-item" data-screen="homepage">
        <span class="ic">🏠</span>首页管理
      </div>

      <div class="nav-item" data-screen="circle-categories">
        <span class="ic">🗃️</span>圈子分类
      </div>
      <div class="nav-item" data-screen="topics">
        <span class="ic">#️⃣</span>话题管理
      </div>
      <div class="nav-item" data-screen="review-audit">
        <span class="ic">🔍</span>评价审核
        <span class="badge">8</span>
      </div>
      <div class="nav-item" data-screen="review-replies">
        <span class="ic">💬</span>评价回复
      </div>
      <div class="nav-item" data-screen="companies">
        <span class="ic">🏢</span>企业信息
      </div>
      <div class="nav-item" data-screen="banners">
        <span class="ic">🖼️</span>Banner管理
      </div>
      <div class="nav-item" data-screen="announcements">
        <span class="ic">📢</span>公告管理
      </div>
      <div class="nav-item" data-screen="quick-entries">
        <span class="ic">⚡</span>快捷入口
      </div>
      <div class="nav-item" data-screen="recommend-services">
        <span class="ic">🌟</span>推荐服务
      </div>
      <div class="nav-item" data-screen="recommend-posts">
        <span class="ic">🔥</span>热门动态
      </div>
    </div>
    <div class="nav-group">
      <div class="nav-title">系统</div>
      <div class="nav-item" data-screen="push">
        <span class="ic">🔔</span>消息推送
      </div>

      <div class="nav-item" data-screen="reminder-rules">
        <span class="ic">⏰</span>提醒规则
      </div>
      <div class="nav-item" data-screen="accounts">
        <span class="ic">🪪</span>账号管理
        <span class="badge">2</span>
      </div>
      <div class="nav-item" data-screen="roles">
        <span class="ic">🔐</span>角色权限
      </div>
      <div class="nav-item" data-screen="logs">
        <span class="ic">📜</span>操作日志
      </div>
      <div class="nav-item" data-screen="settings">
        <span class="ic">⚙️</span>系统设置
      </div>

      <div class="nav-item" data-screen="languages">
        <span class="ic">🌐</span>多语言
      </div>
      <div class="nav-item" data-screen="faqs">
        <span class="ic">❓</span>帮助与FAQ
      </div>
      <div class="nav-item" data-screen="about">
        <span class="ic">ℹ️</span>关于我们
      </div>
    </div>
  </aside>

  <!-- 顶部栏 -->
  <header class="topbar">
    <div class="crumb">
      <span data-breadcrumb>工作台</span>
    </div>
    <div class="spacer"></div>
    <div class="search">
      <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
      <input placeholder="搜索用户、订单、商家..." style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit" />
    </div>
    <div class="icon-btn">
      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
    </div>
    <div class="icon-btn">
      <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0"/></svg>
      <span class="dot"></span>
    </div>
    <div class="user-chip">
      <div class="ava">超</div>
      <div>
        <div class="name">超级管理员</div>
        <div class="text-xs text-3" style="font-size:10px">admin@petu.com</div>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="main">
    <div class="screens" id="screens">

      <!-- 工作台 -->
      <div class="screen active" data-screen="dashboard">
        <div class="page-header">
          <div>
            <h1>工作台</h1>
            <div class="sub">2026年8月25日 · 欢迎回来，超管</div>
          </div>
          <div class="actions">
            <button class="btn">📥 导出报表</button>
            <button class="btn btn-primary">🔄 刷新数据</button>
          </div>
        </div>

        <div class="stat-grid">
          <div class="stat-card">
            <div class="label">👥 注册用户总数</div>
            <div class="value">28,562</div>
            <div class="delta up">↑ 12.5% 较上周</div>
            <div class="ico">👤</div>
          </div>
          <div class="stat-card blue">
            <div class="label">📅 今日活跃</div>
            <div class="value">6,842</div>
            <div class="delta up">↑ 8.3% 较昨日</div>
            <div class="ico">📅</div>
          </div>
          <div class="stat-card green">
            <div class="label">💰 今日收入</div>
            <div class="value">¥ 38,426</div>
            <div class="delta up">↑ 23.1% 较昨日</div>
            <div class="ico">💰</div>
          </div>
          <div class="stat-card purple">
            <div class="label">📋 服务订单</div>
            <div class="value">1,286</div>
            <div class="delta down">↓ 2.4% 较昨日</div>
            <div class="ico">📋</div>
          </div>
        </div>

        <div class="row-2">
          <div class="card">
            <div class="card-header">
              <h3>📈 近 7 天订单趋势</h3>
              <div class="row gap-6">
                <span class="tag gray">订单数</span>
                <span class="tag">金额</span>
              </div>
            </div>
            <div class="chart-box">
              <div class="chart-bars">
                <div class="chart-bar"><div class="bar-fill" style="height:60%"></div><span class="lbl">8/19</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:75%"></div><span class="lbl">8/20</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:55%"></div><span class="lbl">8/21</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:85%"></div><span class="lbl">8/22</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:90%"></div><span class="lbl">8/23</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:70%"></div><span class="lbl">8/24</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:100%;background:var(--gradient-2)"></div><span class="lbl">8/25</span></div>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header">
              <h3>🔥 待办事项</h3>
              <span class="tag red">5 项紧急</span>
            </div>
            <div>
              <div class="todo-item">
                <div class="ico" style="background:#FFF1EB;color:var(--primary)">🏪</div>
                <div class="label">待审核商家入驻</div>
                <span class="num">5</span>
                <span class="tag red">紧急</span>
              </div>
              <div class="todo-item">
                <div class="ico" style="background:#FEE2E2;color:var(--danger)">↩️</div>
                <div class="label">待处理退款申请</div>
                <span class="num">3</span>
                <span class="tag red">紧急</span>
              </div>
              <div class="todo-item">
                <div class="ico" style="background:#FFF7E0;color:#B8860B">⭐</div>
                <div class="label">差评处理</div>
                <span class="num">7</span>
                <span class="tag yellow">关注</span>
              </div>
              <div class="todo-item">
                <div class="ico" style="background:#E8F0FE;color:#1A73E8">📷</div>
                <div class="label">待审核动态</div>
                <span class="num">12</span>
                <span class="tag blue">常规</span>
              </div>
              <div class="todo-item">
                <div class="ico" style="background:#E6FAF1;color:#06A87E">👨‍⚕️</div>
                <div class="label">从业者资质审核</div>
                <span class="num">2</span>
                <span class="tag blue">常规</span>
              </div>
            </div>
          </div>
        </div>

        <div class="row-2 mt-16">
          <div class="card">
            <div class="card-header">
              <h3>🏪 商家入驻趋势</h3>
              <span class="text-sm text-mute">近 30 天</span>
            </div>
            <div class="funnel">
              <div class="funnel-row">
                <span class="lbl">提交申请</span>
                <div class="bar" style="width:100%">328</div>
              </div>
              <div class="funnel-row">
                <span class="lbl">已初审</span>
                <div class="bar" style="width:80%">256</div>
              </div>
              <div class="funnel-row">
                <span class="lbl">已复审</span>
                <div class="bar" style="width:62%">198</div>
              </div>
              <div class="funnel-row">
                <span class="lbl">已入驻</span>
                <div class="bar" style="width:48%;background:var(--gradient-3)">158</div>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header">
              <h3>🌟 热门服务 TOP5</h3>
              <span class="text-sm text-mute">本月</span>
            </div>
            <div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)">
                <span class="text-sm" style="width:20px;color:var(--primary);font-weight:700">1</span>
                <span class="bold text-base" style="flex:1">基础体检</span>
                <span class="text-sm text-mute">¥99 · 已售 1.2k</span>
              </div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)">
                <span class="text-sm" style="width:20px;color:#FF8E53;font-weight:700">2</span>
                <span class="bold text-base" style="flex:1">洗澡美容</span>
                <span class="text-sm text-mute">¥188 · 已售 856</span>
              </div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)">
                <span class="text-sm" style="width:20px;color:#FFD166;font-weight:700">3</span>
                <span class="bold text-base" style="flex:1">狂犬疫苗</span>
                <span class="text-sm text-mute">¥120 · 已售 642</span>
              </div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)">
                <span class="text-sm" style="width:20px;color:var(--text-3);font-weight:700">4</span>
                <span class="bold text-base" style="flex:1">猫三联</span>
                <span class="text-sm text-mute">¥150 · 已售 528</span>
              </div>
              <div class="row" style="padding:8px 0">
                <span class="text-sm" style="width:20px;color:var(--text-3);font-weight:700">5</span>
                <span class="bold text-base" style="flex:1">超声波洁牙</span>
                <span class="text-sm text-mute">¥380 · 已售 218</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 用户管理 -->
      <div class="screen" data-screen="users">
        <div class="page-header">
          <div>
            <h1>用户管理</h1>
            <div class="sub">管理所有宠物主人注册账号</div>
          </div>
          <div class="actions">
            <button class="btn">📥 导出</button>
            <button class="btn btn-primary">+ 新增用户</button>
          </div>
        </div>
        <div class="table-wrap">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索用户昵称 / 手机号 / ID" />
            </div>
            <div class="filter">注册时间 ▾</div>
            <div class="filter">活跃度 ▾</div>
            <div class="filter">宠物数量 ▾</div>
            <div class="spacer"></div>
            <span class="text-sm text-mute">共 28,562 条</span>
          </div>
          <table>
            <thead>
              <tr>
                <th style="width:30px"><div class="checkbox"></div></th>
                <th>用户</th>
                <th>ID / 手机</th>
                <th>宠物数</th>
                <th>订单数</th>
                <th>注册时间</th>
                <th>最后活跃</th>
                <th>状态</th>
                <th style="width:160px">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><div class="checkbox on">✓</div></td>
                <td>
                  <div class="row">
                    <div class="avatar" style="background:linear-gradient(135deg,#FF6B35,#FFB088)">萌</div>
                    <div class="col"><span class="bold">@萌主小米</span><span class="text-xs text-3">VIP 用户</span></div>
                  </div>
                </td>
                <td>U10086<br><span class="text-xs text-3">138****8888</span></td>
                <td><span class="bold">3</span></td>
                <td>12</td>
                <td>2024-03-15</td>
                <td>2 小时前</td>
                <td><span class="status-dot green"></span>正常</td>
                <td>
                  <button class="btn-text" onclick="go('user-detail')">查看</button>
                  <button class="btn-text">禁用</button>
                </td>
              </tr>
              <tr>
                <td><div class="checkbox"></div></td>
                <td>
                  <div class="row">
                    <div class="avatar" style="background:linear-gradient(135deg,#4D96FF,#6BB0FF)">阿</div>
                    <div class="col"><span class="bold">@阿柴不会飞</span><span class="text-xs text-3">普通用户</span></div>
                  </div>
                </td>
                <td>U10087<br><span class="text-xs text-3">139****6666</span></td>
                <td>1</td>
                <td>8</td>
                <td>2024-05-20</td>
                <td>昨天</td>
                <td><span class="status-dot green"></span>正常</td>
                <td>
                  <button class="btn-text" onclick="go('user-detail')">查看</button>
                  <button class="btn-text">禁用</button>
                </td>
              </tr>
              <tr>
                <td><div class="checkbox"></div></td>
                <td>
                  <div class="row">
                    <div class="avatar" style="background:linear-gradient(135deg,#A78BFA,#C4B5FD)">柴</div>
                    <div class="col"><span class="bold">@柴犬团子</span><span class="text-xs text-3">认证用户</span></div>
                  </div>
                </td>
                <td>U10088<br><span class="text-xs text-3">137****5555</span></td>
                <td>2</td>
                <td>15</td>
                <td>2024-08-12</td>
                <td>1 周前</td>
                <td><span class="status-dot yellow"></span>待激活</td>
                <td>
                  <button class="btn-text" onclick="go('user-detail')">查看</button>
                  <button class="btn-text">激活</button>
                </td>
              </tr>
              <tr>
                <td><div class="checkbox"></div></td>
                <td>
                  <div class="row">
                    <div class="avatar" style="background:linear-gradient(135deg,#06D6A0,#4DE0B8)">兔</div>
                    <div class="col"><span class="bold">@毛茸茸的雪球</span><span class="text-xs text-3">异宠用户</span></div>
                  </div>
                </td>
                <td>U10089<br><span class="text-xs text-3">136****3333</span></td>
                <td>1</td>
                <td>3</td>
                <td>2025-01-08</td>
                <td>3 天前</td>
                <td><span class="status-dot green"></span>正常</td>
                <td>
                  <button class="btn-text" onclick="go('user-detail')">查看</button>
                  <button class="btn-text">禁用</button>
                </td>
              </tr>
              <tr>
                <td><div class="checkbox"></div></td>
                <td>
                  <div class="row">
                    <div class="avatar" style="background:linear-gradient(135deg,#EF4444,#F87171)">违</div>
                    <div class="col"><span class="bold">@违规用户_22</span><span class="text-xs text-3">已封禁</span></div>
                  </div>
                </td>
                <td>U10090<br><span class="text-xs text-3">188****9999</span></td>
                <td>0</td>
                <td>2</td>
                <td>2024-12-01</td>
                <td>15 天前</td>
                <td><span class="status-dot red"></span>封禁</td>
                <td>
                  <button class="btn-text" onclick="go('user-detail')">查看</button>
                  <button class="btn-text" style="color:var(--accent)">解封</button>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="table-pager">
            <span>已选 1 项 · 共 28,562 条</span>
            <div class="row gap-6">
              <button class="btn btn-sm">‹ 上一页</button>
              <span style="padding:0 8px">1 / 1143</span>
              <button class="btn btn-sm">下一页 ›</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 用户详情 -->
      <div class="screen" data-screen="user-detail">
        <div class="page-header">
          <div>
            <h1>用户详情</h1>
            <div class="sub"><a onclick="go('users')" style="color:var(--primary);cursor:pointer">← 返回用户列表</a></div>
          </div>
          <div class="actions">
            <button class="btn">💬 发消息</button>
            <button class="btn btn-danger">封禁账号</button>
          </div>
        </div>
        <div class="detail-grid">
          <div class="col gap-12">
            <div class="card">
              <div class="row" style="gap:16px">
                <div class="avatar xl" style="background:linear-gradient(135deg,#FF6B35,#FFB088)">萌</div>
                <div class="col" style="flex:1">
                  <div class="row" style="gap:8px"><span class="bold text-xl">@萌主小米</span><span class="tag">VIP</span><span class="tag green">已认证</span></div>
                  <div class="text-sm text-mute mt-4">U10086 · 注册于 2024-03-15</div>
                  <div class="row gap-12 mt-8 text-sm">
                    <span>📱 138****8888</span>
                    <span>📧 mimi@petu.com</span>
                    <span>📍 北京·朝阳</span>
                  </div>
                </div>
                <div class="col" style="text-align:right;gap:4px">
                  <div class="text-sm text-mute">累计消费</div>
                  <div class="text-lg bold" style="color:var(--primary)">¥ 4,286</div>
                </div>
              </div>
            </div>
            <div class="card">
              <div class="tab-bar" style="margin-bottom:14px">
                <div class="tab active">基本信息</div>
                <div class="tab">宠物 (3)</div>
                <div class="tab">订单 (12)</div>
                <div class="tab">动态 (28)</div>
                <div class="tab">疫苗记录</div>
                <div class="tab">操作日志</div>
              </div>
              <div class="info-list">
                <div class="row"><span class="lbl">用户 ID</span><span class="val">U10086</span></div>
                <div class="row"><span class="lbl">昵称</span><span class="val">萌主小米</span></div>
                <div class="row"><span class="lbl">手机号</span><span class="val">138****8888 (已绑定)</span></div>
                <div class="row"><span class="lbl">邮箱</span><span class="val">mimi@petu.com</span></div>
                <div class="row"><span class="lbl">地区</span><span class="val">北京·朝阳区</span></div>
                <div class="row"><span class="lbl">注册时间</span><span class="val">2024-03-15 14:32:18</span></div>
                <div class="row"><span class="lbl">最后登录</span><span class="val">2 小时前 · 微信授权</span></div>
                <div class="row"><span class="lbl">认证状态</span><span class="val"><span class="tag green">✓ 已实名认证</span></span></div>
                <div class="row"><span class="lbl">账户状态</span><span class="val"><span class="tag">正常</span></span></div>
                <div class="row"><span class="lbl">个人简介</span><span class="val">家有橘猫团团🐱、柯基豆豆🐕、荷兰兔雪球🐰</span></div>
              </div>
            </div>
          </div>
          <div class="col gap-12">
            <div class="card">
              <h3 class="text-base bold mb-8">📊 账户数据</h3>
              <div class="info-list">
                <div class="row"><span class="lbl">宠物数</span><span class="val bold">3</span></div>
                <div class="row"><span class="lbl">订单数</span><span class="val bold">12</span></div>
                <div class="row"><span class="lbl">动态数</span><span class="val bold">28</span></div>
                <div class="row"><span class="lbl">粉丝数</span><span class="val bold">1,286</span></div>
                <div class="row"><span class="lbl">获赞数</span><span class="val bold">3,842</span></div>
                <div class="row"><span class="lbl">累计消费</span><span class="val bold" style="color:var(--primary)">¥ 4,286</span></div>
              </div>
            </div>
            <div class="card">
              <h3 class="text-base bold mb-8">⏱ 行为时间线</h3>
              <div class="timeline">
                <div class="timeline-item">
                  <div class="t">2 小时前</div>
                  <div class="c">发布了动态 <a class="text-primary">周末带毛孩子去了新开的宠物公园</a></div>
                </div>
                <div class="timeline-item">
                  <div class="t">昨天 14:30</div>
                  <div class="c">完成基础体检服务（¥99）</div>
                </div>
                <div class="timeline-item">
                  <div class="t">3 天前</div>
                  <div class="c">新增宠物 <b>雪球</b>（荷兰垂耳兔）</div>
                </div>
                <div class="timeline-item">
                  <div class="t">2024-03-15</div>
                  <div class="c">注册 PETU+ 账号</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 从业者 -->
      <div class="screen" data-screen="practitioners">
        <div class="page-header">
          <div><h1>从业者管理</h1><div class="sub">宠物医生、美容师、寄养等从业者</div></div>
          <div class="actions">
            <button class="btn">📥 导出</button>
            <button class="btn btn-primary">+ 邀请入驻</button>
          </div>
        </div>
        <div class="table-wrap">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索姓名 / 职业 / 医院" />
            </div>
            <div class="filter">职业类型 ▾</div>
            <div class="filter">评分 ▾</div>
            <div class="filter">认证状态 ▾</div>
            <div class="spacer"></div>
            <span class="text-sm text-mute">共 1,286 位</span>
          </div>
          <table>
            <thead>
              <tr>
                <th>从业者</th>
                <th>职业 / 职称</th>
                <th>所属医院</th>
                <th>从业年限</th>
                <th>评分</th>
                <th>服务单数</th>
                <th>本月收入</th>
                <th>认证状态</th>
                <th style="width:160px">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div class="row">
                    <div class="avatar" style="background:linear-gradient(135deg,#4D96FF,#6BB0FF)">王</div>
                    <div class="col"><span class="bold">王医生</span><span class="text-xs text-3">异宠诊疗专家</span></div>
                  </div>
                </td>
                <td>宠物医生 · 主任医师</td>
                <td>爱诺宠物医院</td>
                <td>12 年</td>
                <td><span class="stars">★★★★★</span> 5.0</td>
                <td><span class="bold">328</span></td>
                <td><span class="bold" style="color:var(--primary)">¥ 18,420</span></td>
                <td><span class="tag green">已认证</span></td>
                <td><button class="btn-text" onclick="go('practitioner-detail')">查看</button><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td>
                  <div class="row">
                    <div class="avatar" style="background:linear-gradient(135deg,#06D6A0,#4DE0B8)">李</div>
                    <div class="col"><span class="bold">李医生</span><span class="text-xs text-3">爬宠类专家</span></div>
                  </div>
                </td>
                <td>宠物医生 · 副主任</td>
                <td>望京异宠专科</td>
                <td>8 年</td>
                <td><span class="stars">★★★★★</span> 4.9</td>
                <td><span class="bold">256</span></td>
                <td><span class="bold" style="color:var(--primary)">¥ 15,680</span></td>
                <td><span class="tag green">已认证</span></td>
                <td><button class="btn-text" onclick="go('practitioner-detail')">查看</button><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td>
                  <div class="row">
                    <div class="avatar" style="background:linear-gradient(135deg,#FF8E53,#FFD166)">小</div>
                    <div class="col"><span class="bold">小李美容师</span><span class="text-xs text-3">C 级证书</span></div>
                  </div>
                </td>
                <td>宠物美容师</td>
                <td>萌宠造型工作室</td>
                <td>5 年</td>
                <td><span class="stars">★★★★★</span> 4.8</td>
                <td><span class="bold">186</span></td>
                <td><span class="bold" style="color:var(--primary)">¥ 12,840</span></td>
                <td><span class="tag green">已认证</span></td>
                <td><button class="btn-text" onclick="go('practitioner-detail')">查看</button><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td>
                  <div class="row">
                    <div class="avatar" style="background:linear-gradient(135deg,#A78BFA,#C4B5FD)">张</div>
                    <div class="col"><span class="bold">张医生</span><span class="text-xs text-3">鸟类诊疗</span></div>
                  </div>
                </td>
                <td>宠物医生 · 主治</td>
                <td>爱诺异宠诊疗中心</td>
                <td>6 年</td>
                <td><span class="stars">★★★★☆</span> 4.6</td>
                <td><span class="bold">142</span></td>
                <td><span class="bold" style="color:var(--primary)">¥ 9,260</span></td>
                <td><span class="tag yellow">审核中</span></td>
                <td><button class="btn-text" onclick="go('practitioner-detail')">查看</button><button class="btn-text" style="color:var(--accent)">通过</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 从业者详情 -->
      <div class="screen" data-screen="practitioner-detail">
        <div class="page-header">
          <div>
            <h1>从业者详情</h1>
            <div class="sub"><a onclick="go('practitioners')" style="color:var(--primary);cursor:pointer">← 返回列表</a></div>
          </div>
          <div class="actions">
            <button class="btn">📨 私信</button>
            <button class="btn">编辑资料</button>
            <button class="btn btn-primary">通过认证</button>
          </div>
        </div>
        <div class="detail-grid">
          <div class="col gap-12">
            <div class="card">
              <div class="row" style="gap:16px">
                <div class="avatar xl" style="background:linear-gradient(135deg,#4D96FF,#6BB0FF)">王</div>
                <div class="col" style="flex:1">
                  <div class="row" style="gap:8px"><span class="bold text-xl">王医生</span><span class="tag purple">主任医师</span><span class="tag green">已认证</span></div>
                  <div class="text-sm text-mute mt-4">P20123 · 异宠诊疗专家</div>
                  <div class="row gap-12 mt-8 text-sm">
                    <span>📱 138****1234</span>
                    <span>📧 wang@petu.com</span>
                  </div>
                </div>
                <div class="col" style="text-align:right;gap:4px">
                  <div class="text-sm text-mute">综合评分</div>
                  <div class="text-lg bold" style="color:var(--primary)">5.0 ⭐</div>
                </div>
              </div>
            </div>
            <div class="card">
              <div class="tab-bar" style="margin-bottom:14px">
                <div class="tab active">基本信息</div>
                <div class="tab">资质证书</div>
                <div class="tab">服务记录</div>
                <div class="tab">作品展示</div>
                <div class="tab">收入统计</div>
              </div>
              <div class="info-list">
                <div class="row"><span class="lbl">姓名</span><span class="val">王医生</span></div>
                <div class="row"><span class="lbl">职称</span><span class="val">主任医师</span></div>
                <div class="row"><span class="lbl">所属医院</span><span class="val">爱诺宠物医院</span></div>
                <div class="row"><span class="lbl">从业年限</span><span class="val">12 年</span></div>
                <div class="row"><span class="lbl">专业方向</span><span class="val">异宠诊疗（兔/仓鼠/鹦鹉）</span></div>
                <div class="row"><span class="lbl">接诊种类</span><span class="val">兔类、啮齿类、鸟类</span></div>
                <div class="row"><span class="lbl">证书</span><span class="val">执业兽医师资格证、异宠诊疗专科证</span></div>
                <div class="row"><span class="lbl">入驻时间</span><span class="val">2023-08-12</span></div>
              </div>
            </div>
            <div class="card">
              <h3 class="text-base bold mb-8">📜 资质证书</h3>
              <div class="row-2">
                <div style="aspect-ratio:4/3;background:linear-gradient(135deg,#4D96FF,#6BB0FF);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:600">执业兽医师资格证</div>
                <div style="aspect-ratio:4/3;background:linear-gradient(135deg,#06D6A0,#4DE0B8);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:600">异宠诊疗专科证</div>
              </div>
            </div>
          </div>
          <div class="col gap-12">
            <div class="card">
              <h3 class="text-base bold mb-8">📈 本月数据</h3>
              <div class="info-list">
                <div class="row"><span class="lbl">服务单数</span><span class="val bold">42</span></div>
                <div class="row"><span class="lbl">好评率</span><span class="val bold" style="color:var(--accent)">99.2%</span></div>
                <div class="row"><span class="lbl">本月收入</span><span class="val bold" style="color:var(--primary)">¥ 18,420</span></div>
                <div class="row"><span class="lbl">累计评价</span><span class="val bold">286</span></div>
                <div class="row"><span class="lbl">完成订单</span><span class="val bold">328</span></div>
              </div>
            </div>
            <div class="card">
              <h3 class="text-base bold mb-8">💼 作品展示</h3>
              <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
                <div style="aspect-ratio:1;background:linear-gradient(135deg,#FFD166,#FF8E53);border-radius:8px"></div>
                <div style="aspect-ratio:1;background:linear-gradient(135deg,#FF8E53,#FF6B35);border-radius:8px"></div>
                <div style="aspect-ratio:1;background:linear-gradient(135deg,#06D6A0,#4DE0B8);border-radius:8px"></div>
                <div style="aspect-ratio:1;background:linear-gradient(135deg,#A78BFA,#C4B5FD);border-radius:8px"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 宠物管理 -->
      <div class="screen" data-screen="pets">
        <div class="page-header">
          <div><h1>宠物管理</h1><div class="sub">所有用户添加的宠物档案</div></div>
          <div class="actions">
            <button class="btn">📊 宠物统计</button>
            <button class="btn btn-primary">+ 品种管理</button>
          </div>
        </div>
        <div class="stat-grid">
          <div class="stat-card">
            <div class="label">🐱 宠物总数</div>
            <div class="value">52,486</div>
            <div class="delta up">↑ 8.6% 较上月</div>
            <div class="ico">🐱</div>
          </div>
          <div class="stat-card blue">
            <div class="label">🐕 狗狗</div>
            <div class="value">28,562</div>
            <div class="text-sm text-mute">54.4%</div>
            <div class="ico">🐕</div>
          </div>
          <div class="stat-card green">
            <div class="label">🐈 猫咪</div>
            <div class="value">18,642</div>
            <div class="text-sm text-mute">35.5%</div>
            <div class="ico">🐈</div>
          </div>
          <div class="stat-card purple">
            <div class="label">🐹 异宠</div>
            <div class="value">5,282</div>
            <div class="text-sm text-mute">10.1%</div>
            <div class="ico">🐹</div>
          </div>
        </div>
        <div class="table-wrap mt-16">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索宠物名 / 主人 / 品种" />
            </div>
            <div class="filter">种类 ▾</div>
            <div class="filter">品种 ▾</div>
            <div class="filter">疫苗状态 ▾</div>
            <div class="spacer"></div>
            <span class="text-sm text-mute">共 52,486 只</span>
          </div>
          <table>
            <thead>
              <tr><th>宠物</th><th>种类/品种</th><th>性别/年龄</th><th>主人</th><th>体重</th><th>疫苗</th><th>添加时间</th><th style="width:120px">操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><div class="row"><div class="avatar" style="background:linear-gradient(135deg,#FF8E53,#FFD166)">🐱</div><div class="col"><span class="bold">团团</span><span class="text-xs text-3">P20001</span></div></div></td>
                <td>橘猫 · 中华田园猫</td>
                <td>♂ · 2岁4个月</td>
                <td>@萌主小米</td>
                <td>4.8 kg</td>
                <td><span class="tag green">已接种</span></td>
                <td>2024-04-15</td>
                <td><button class="btn-text">查看</button><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td><div class="row"><div class="avatar" style="background:linear-gradient(135deg,#FFD166,#FFB088)">🐕</div><div class="col"><span class="bold">豆豆</span><span class="text-xs text-3">P20002</span></div></div></td>
                <td>柯基 · 威尔士柯基</td>
                <td>♂ · 3岁1个月</td>
                <td>@萌主小米</td>
                <td>11.2 kg</td>
                <td><span class="tag yellow">即将到期</span></td>
                <td>2024-06-08</td>
                <td><button class="btn-text">查看</button><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td><div class="row"><div class="avatar" style="background:linear-gradient(135deg,#E6FAF1,#A7F3D0)">🐰</div><div class="col"><span class="bold">雪球</span><span class="text-xs text-3">P20003</span></div></div></td>
                <td>兔 · 荷兰垂耳兔</td>
                <td>♀ · 1岁</td>
                <td>@萌主小米</td>
                <td>1.8 kg</td>
                <td><span class="tag green">已接种</span></td>
                <td>2025-01-08</td>
                <td><button class="btn-text">查看</button><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td><div class="row"><div class="avatar" style="background:linear-gradient(135deg,#A78BFA,#C4B5FD)">🐈</div><div class="col"><span class="bold">布丁</span><span class="text-xs text-3">P20004</span></div></div></td>
                <td>英短 · 英国短毛猫</td>
                <td>♀ · 1岁6个月</td>
                <td>@阿柴不会飞</td>
                <td>3.6 kg</td>
                <td><span class="tag green">已接种</span></td>
                <td>2024-09-12</td>
                <td><button class="btn-text">查看</button><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td><div class="row"><div class="avatar" style="background:linear-gradient(135deg,#4D96FF,#6BB0FF)">🦜</div><div class="col"><span class="bold">小绿</span><span class="text-xs text-3">P20005</span></div></div></td>
                <td>鸟 · 玄凤鹦鹉</td>
                <td>♂ · 8个月</td>
                <td>@毛茸茸的雪球</td>
                <td>85 g</td>
                <td><span class="tag gray">无需</span></td>
                <td>2025-06-20</td>
                <td><button class="btn-text">查看</button><button class="btn-text">编辑</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 商家管理 -->
      <div class="screen" data-screen="merchants">
        <div class="page-header">
          <div><h1>商家管理</h1><div class="sub">医院、美容店、宠物店等入驻商家</div></div>
          <div class="actions">
            <button class="btn">📥 导出</button>
            <button class="btn btn-primary" onclick="go('merchant-audit')">+ 商家审核 (5)</button>
          </div>
        </div>
        <div class="table-wrap">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索商家名" />
            </div>
            <div class="filter">类型 ▾</div>
            <div class="filter">评分 ▾</div>
            <div class="filter">状态 ▾</div>
            <div class="spacer"></div>
            <span class="text-sm text-mute">共 526 家</span>
          </div>
          <table>
            <thead>
              <tr><th>商家</th><th>类型</th><th>评分</th><th>订单数</th><th>联系人</th><th>入驻时间</th><th>状态</th><th style="width:160px">操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div class="row">
                    <div style="width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#4D96FF,#6BB0FF);display:flex;align-items:center;justify-content:center;color:#fff">🏥</div>
                    <div class="col"><span class="bold">爱诺宠物医院 · 朝阳店</span><span class="text-xs text-3">朝阳区建国路 88 号</span></div>
                  </div>
                </td>
                <td><span class="tag blue">医院</span></td>
                <td><span class="stars">★★★★★</span> 4.9</td>
                <td>1,286</td>
                <td>李经理<br><span class="text-xs text-3">138****0001</span></td>
                <td>2023-08-12</td>
                <td><span class="status-dot green"></span>营业中</td>
                <td><button class="btn-text" onclick="go('merchant-detail')">查看</button><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td>
                  <div class="row">
                    <div style="width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#FF8E53,#FFD166);display:flex;align-items:center;justify-content:center;color:#fff">✂️</div>
                    <div class="col"><span class="bold">萌宠造型工作室</span><span class="text-xs text-3">朝阳区 SOHO</span></div>
                  </div>
                </td>
                <td><span class="tag yellow">美容</span></td>
                <td><span class="stars">★★★★★</span> 4.8</td>
                <td>856</td>
                <td>王经理<br><span class="text-xs text-3">138****0002</span></td>
                <td>2023-12-20</td>
                <td><span class="status-dot green"></span>营业中</td>
                <td><button class="btn-text" onclick="go('merchant-detail')">查看</button><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td>
                  <div class="row">
                    <div style="width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#06D6A0,#4DE0B8);display:flex;align-items:center;justify-content:center;color:#fff">🐹</div>
                    <div class="col"><span class="bold">异宠专科诊所 · 望京</span><span class="text-xs text-3">朝阳区望京</span></div>
                  </div>
                </td>
                <td><span class="tag green">异宠</span></td>
                <td><span class="stars">★★★★★</span> 4.9</td>
                <td>612</td>
                <td>张主任<br><span class="text-xs text-3">138****0003</span></td>
                <td>2024-03-15</td>
                <td><span class="status-dot green"></span>营业中</td>
                <td><button class="btn-text" onclick="go('merchant-detail')">查看</button><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td>
                  <div class="row">
                    <div style="width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#A78BFA,#C4B5FD);display:flex;align-items:center;justify-content:center;color:#fff">🛍️</div>
                    <div class="col"><span class="bold">PETU 宠物综合店</span><span class="text-xs text-3">海淀区中关村</span></div>
                  </div>
                </td>
                <td><span class="tag purple">宠物店</span></td>
                <td><span class="stars">★★★★☆</span> 4.6</td>
                <td>528</td>
                <td>陈经理<br><span class="text-xs text-3">138****0004</span></td>
                <td>2024-06-08</td>
                <td><span class="status-dot green"></span>营业中</td>
                <td><button class="btn-text" onclick="go('merchant-detail')">查看</button><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td>
                  <div class="row">
                    <div style="width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#EF4444,#F87171);display:flex;align-items:center;justify-content:center;color:#fff">🏥</div>
                    <div class="col"><span class="bold">康宁宠物诊所</span><span class="text-xs text-3">丰台区方庄</span></div>
                  </div>
                </td>
                <td><span class="tag blue">医院</span></td>
                <td><span class="stars">★★★★☆</span> 4.5</td>
                <td>328</td>
                <td>刘主任<br><span class="text-xs text-3">138****0005</span></td>
                <td>2025-02-15</td>
                <td><span class="status-dot yellow"></span>待审核</td>
                <td><button class="btn-text">审核</button><button class="btn-text">编辑</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 商家详情 -->
      <div class="screen" data-screen="merchant-detail">
        <div class="page-header">
          <div>
            <h1>商家详情</h1>
            <div class="sub"><a onclick="go('merchants')" style="color:var(--primary);cursor:pointer">← 返回列表</a></div>
          </div>
          <div class="actions">
            <button class="btn">下架</button>
            <button class="btn">编辑</button>
            <button class="btn btn-primary">更多操作 ▾</button>
          </div>
        </div>
        <div class="detail-grid">
          <div class="col gap-12">
            <div class="card">
              <div class="row" style="gap:16px">
                <div style="width:80px;height:80px;border-radius:14px;background:linear-gradient(135deg,#4D96FF,#6BB0FF);display:flex;align-items:center;justify-content:center;color:#fff;font-size:36px">🏥</div>
                <div class="col" style="flex:1">
                  <div class="row" style="gap:8px"><span class="bold text-xl">爱诺宠物医院 · 朝阳店</span><span class="tag blue">医院</span><span class="tag green">营业中</span></div>
                  <div class="text-sm text-mute mt-4">M20123 · 入驻 2023-08-12</div>
                  <div class="row gap-12 mt-8 text-sm">
                    <span>⭐ 4.9 · 2,341 评价</span>
                    <span>📋 1,286 订单</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="card">
              <div class="tab-bar" style="margin-bottom:14px">
                <div class="tab active">基本信息</div>
                <div class="tab">服务项目 (8)</div>
                <div class="tab">评价管理</div>
                <div class="tab">订单记录</div>
                <div class="tab">资质材料</div>
              </div>
              <div class="info-list">
                <div class="row"><span class="lbl">商家 ID</span><span class="val">M20123</span></div>
                <div class="row"><span class="lbl">商家名称</span><span class="val">爱诺宠物医院 · 朝阳店</span></div>
                <div class="row"><span class="lbl">类型</span><span class="val">宠物医院</span></div>
                <div class="row"><span class="lbl">联系电话</span><span class="val">010-8888**** / 138****0001</span></div>
                <div class="row"><span class="lbl">地址</span><span class="val">北京市朝阳区建国路 88 号 SOHO 1 层</span></div>
                <div class="row"><span class="lbl">营业时间</span><span class="val">全天 24 小时</span></div>
                <div class="row"><span class="lbl">服务标签</span><span class="val">24h急诊 · 异宠 · 医保定点</span></div>
                <div class="row"><span class="lbl">接诊宠物</span><span class="val">狗狗 38 · 猫咪 42 · 异宠 18</span></div>
                <div class="row"><span class="lbl">专攻科室</span><span class="val">猫科 · 犬科 · 异宠科 · 口腔科 · 骨科 · 内科</span></div>
                <div class="row"><span class="lbl">营业执照</span><span class="val"><span class="tag green">✓ 已审核</span></span></div>
              </div>
            </div>
            <div class="card">
              <h3 class="text-base bold mb-8">🛠️ 服务项目 (8)</h3>
              <table style="width:100%">
                <thead><tr><th>服务名</th><th>价格</th><th>时长</th><th>销量</th><th>状态</th></tr></thead>
                <tbody>
                  <tr><td>基础体检</td><td><span class="bold" style="color:var(--primary)">¥99</span></td><td>30 分钟</td><td>1.2k</td><td><span class="tag green">在售</span></td></tr>
                  <tr><td>狂犬疫苗</td><td><span class="bold" style="color:var(--primary)">¥120</span></td><td>15 分钟</td><td>856</td><td><span class="tag green">在售</span></td></tr>
                  <tr><td>猫三联</td><td><span class="bold" style="color:var(--primary)">¥150</span></td><td>15 分钟</td><td>642</td><td><span class="tag green">在售</span></td></tr>
                  <tr><td>超声波洁牙</td><td><span class="bold" style="color:var(--primary)">¥380</span></td><td>60 分钟</td><td>218</td><td><span class="tag green">在售</span></td></tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="col gap-12">
            <div class="card">
              <h3 class="text-base bold mb-8">📈 本月数据</h3>
              <div class="info-list">
                <div class="row"><span class="lbl">订单数</span><span class="val bold">186</span></div>
                <div class="row"><span class="lbl">GMV</span><span class="val bold" style="color:var(--primary)">¥ 28,562</span></div>
                <div class="row"><span class="lbl">评分</span><span class="val bold" style="color:var(--accent)">4.9 ⭐</span></div>
                <div class="row"><span class="lbl">评价数</span><span class="val bold">2,341</span></div>
                <div class="row"><span class="lbl">投诉数</span><span class="val bold">0</span></div>
              </div>
            </div>
            <div class="card">
              <h3 class="text-base bold mb-8">⏱ 状态变更</h3>
              <div class="timeline">
                <div class="timeline-item"><div class="t">2026-08-25 14:30</div><div class="c">用户 @萌主小米 完成基础体检</div></div>
                <div class="timeline-item"><div class="t">2026-08-24 10:12</div><div class="c">新增服务项目：超声波洁牙</div></div>
                <div class="timeline-item"><div class="t">2026-08-20 09:00</div><div class="c">通过年度资质复审</div></div>
                <div class="timeline-item"><div class="t">2023-08-12 16:42</div><div class="c">入驻 PETU+ 平台</div></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 商家审核 -->
      <div class="screen" data-screen="merchant-audit">
        <div class="page-header">
          <div>
            <h1>商家入驻审核</h1>
            <div class="sub">待审核申请 5 个</div>
          </div>
          <div class="actions">
            <button class="btn">📥 导出</button>
            <button class="btn">批量操作 ▾</button>
          </div>
        </div>
        <div class="table-wrap">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索申请商家" />
            </div>
            <div class="filter">类型 ▾</div>
            <div class="filter">状态 ▾</div>
            <div class="filter">提交时间 ▾</div>
            <div class="spacer"></div>
            <span class="text-sm text-mute">5 个待审</span>
          </div>
          <table>
            <thead>
              <tr><th>申请商家</th><th>类型</th><th>联系人</th><th>申请材料</th><th>提交时间</th><th>状态</th><th style="width:200px">操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div class="row">
                    <div style="width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#EF4444,#F87171);display:flex;align-items:center;justify-content:center;color:#fff">🏥</div>
                    <div class="col"><span class="bold">康宁宠物诊所</span><span class="text-xs text-3">丰台区方庄</span></div>
                  </div>
                </td>
                <td><span class="tag blue">医院</span></td>
                <td>刘主任<br><span class="text-xs text-3">138****0005</span></td>
                <td>
                  <div class="row" style="gap:4px;flex-wrap:wrap">
                    <span class="tag gray">📄 营业执照</span>
                    <span class="tag gray">📄 兽医证</span>
                    <span class="tag gray">📷 门店照</span>
                  </div>
                </td>
                <td>2026-08-24</td>
                <td><span class="tag yellow">待审核</span></td>
                <td><button class="btn-text" style="color:var(--accent)">通过</button><button class="btn-text" style="color:var(--danger)">驳回</button><button class="btn-text">详情</button></td>
              </tr>
              <tr>
                <td>
                  <div class="row">
                    <div style="width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#FF8E53,#FFD166);display:flex;align-items:center;justify-content:center;color:#fff">✂️</div>
                    <div class="col"><span class="bold">悦宠美容沙龙</span><span class="text-xs text-3">朝阳区望京 SOHO</span></div>
                  </div>
                </td>
                <td><span class="tag yellow">美容</span></td>
                <td>赵经理<br><span class="text-xs text-3">138****0006</span></td>
                <td>
                  <div class="row" style="gap:4px;flex-wrap:wrap">
                    <span class="tag gray">📄 营业执照</span>
                    <span class="tag gray">📄 美容师证</span>
                    <span class="tag gray">📷 门店照</span>
                  </div>
                </td>
                <td>2026-08-23</td>
                <td><span class="tag yellow">待审核</span></td>
                <td><button class="btn-text" style="color:var(--accent)">通过</button><button class="btn-text" style="color:var(--danger)">驳回</button><button class="btn-text">详情</button></td>
              </tr>
              <tr>
                <td>
                  <div class="row">
                    <div style="width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#06D6A0,#4DE0B8);display:flex;align-items:center;justify-content:center;color:#fff">🦎</div>
                    <div class="col"><span class="bold">奇趣异宠馆</span><span class="text-xs text-3">海淀区五道口</span></div>
                  </div>
                </td>
                <td><span class="tag green">异宠</span></td>
                <td>孙老板<br><span class="text-xs text-3">138****0007</span></td>
                <td>
                  <div class="row" style="gap:4px;flex-wrap:wrap">
                    <span class="tag gray">📄 营业执照</span>
                    <span class="tag gray">📄 经营许可</span>
                  </div>
                </td>
                <td>2026-08-22</td>
                <td><span class="tag yellow">待审核</span></td>
                <td><button class="btn-text" style="color:var(--accent)">通过</button><button class="btn-text" style="color:var(--danger)">驳回</button><button class="btn-text">详情</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 服务管理 -->
      <div class="screen" data-screen="services">
        <div class="page-header">
          <div><h1>服务管理</h1><div class="sub">服务分类、项目、科室等配置</div></div>
          <div class="actions">
            <button class="btn">分类排序</button>
            <button class="btn btn-primary">+ 新建服务</button>
          </div>
        </div>
        <div class="row-2">
          <div class="card">
            <div class="card-header"><h3>📁 服务分类</h3><span class="text-sm text-mute">4 大类</span></div>
            <div>
              <div class="row" style="padding:10px 0;border-bottom:1px solid var(--line-2)">
                <span class="text-xl">🏥</span>
                <div class="col" style="flex:1"><span class="bold">医院</span><span class="text-xs text-3">8 个子分类 · 32 个服务</span></div>
                <button class="btn-text" onclick="openModal()">编辑</button>
              </div>
              <div class="row" style="padding:10px 0;border-bottom:1px solid var(--line-2)">
                <span class="text-xl">✂️</span>
                <div class="col" style="flex:1"><span class="bold">美容</span><span class="text-xs text-3">5 个子分类 · 18 个服务</span></div>
                <button class="btn-text" onclick="openModal()">编辑</button>
              </div>
              <div class="row" style="padding:10px 0;border-bottom:1px solid var(--line-2)">
                <span class="text-xl">🛍️</span>
                <div class="col" style="flex:1"><span class="bold">宠物店</span><span class="text-xs text-3">6 个子分类 · 24 个服务</span></div>
                <button class="btn-text" onclick="openModal()">编辑</button>
              </div>
              <div class="row" style="padding:10px 0">
                <span class="text-xl">💼</span>
                <div class="col" style="flex:1"><span class="bold">求职</span><span class="text-xs text-3">0 个子分类 · 12 个职位</span></div>
                <button class="btn-text" onclick="openModal()">编辑</button>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><h3>🩺 专攻科室</h3><span class="text-sm text-mute">6 个</span></div>
            <div class="row" style="gap:6px;flex-wrap:wrap">
              <span class="tag blue">🐱 猫科 (12)</span>
              <span class="tag blue">🐕 犬科 (15)</span>
              <span class="tag green">🐹 异宠科 (6)</span>
              <span class="tag yellow">🦷 口腔科 (4)</span>
              <span class="tag purple">🦴 骨科 (3)</span>
              <span class="tag">🫀 内科 (5)</span>
            </div>
            <div class="mt-12 text-sm text-mute">用于医院详情页的专攻科室展示</div>
          </div>
        </div>
        <div class="table-wrap mt-16">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索服务项目" />
            </div>
            <div class="filter">分类 ▾</div>
            <div class="filter">状态 ▾</div>
            <div class="spacer"></div>
            <span class="text-sm text-mute">共 86 个项目</span>
          </div>
          <table>
            <thead>
              <tr><th>服务名称</th><th>所属分类</th><th>价格</th><th>时长</th><th>销量</th><th>状态</th><th style="width:140px">操作</th></tr>
            </thead>
            <tbody>
              <tr><td>基础体检</td><td>医院 / 体检</td><td><span class="bold" style="color:var(--primary)">¥99</span></td><td>30 分钟</td><td>1,286</td><td><span class="tag green">在售</span></td><td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td></tr>
              <tr><td>狂犬疫苗</td><td>医院 / 疫苗</td><td><span class="bold" style="color:var(--primary)">¥120</span></td><td>15 分钟</td><td>856</td><td><span class="tag green">在售</span></td><td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td></tr>
              <tr><td>猫三联</td><td>医院 / 疫苗</td><td><span class="bold" style="color:var(--primary)">¥150</span></td><td>15 分钟</td><td>642</td><td><span class="tag green">在售</span></td><td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td></tr>
              <tr><td>洗澡美容</td><td>美容 / 综合</td><td><span class="bold" style="color:var(--primary)">¥188</span></td><td>90 分钟</td><td>528</td><td><span class="tag green">在售</span></td><td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td></tr>
              <tr><td>超声波洁牙</td><td>医院 / 口腔</td><td><span class="bold" style="color:var(--primary)">¥380</span></td><td>60 分钟</td><td>218</td><td><span class="tag green">在售</span></td><td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td></tr>
              <tr><td>异宠诊疗</td><td>医院 / 异宠</td><td><span class="bold" style="color:var(--primary)">¥200+</span></td><td>45 分钟</td><td>156</td><td><span class="tag green">在售</span></td><td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 异宠医疗 -->
      <div class="screen" data-screen="exotic">
        <div class="page-header">
          <div><h1>异宠医疗管理</h1><div class="sub">异宠专科医院、医生、分类</div></div>
          <div class="actions">
            <button class="btn">📊 数据统计</button>
            <button class="btn btn-primary">+ 新增医院</button>
          </div>
        </div>
        <div class="stat-grid">
          <div class="stat-card">
            <div class="label">🏥 异宠医院</div>
            <div class="value">86</div>
            <div class="text-sm text-mute">已覆盖 12 类异宠</div>
            <div class="ico">🏥</div>
          </div>
          <div class="stat-card blue">
            <div class="label">👨‍⚕️ 异宠医生</div>
            <div class="value">152</div>
            <div class="text-sm text-mute">活跃 128 位</div>
            <div class="ico">👨‍⚕️</div>
          </div>
          <div class="stat-card green">
            <div class="label">📊 累计诊疗</div>
            <div class="value">28,486</div>
            <div class="text-sm text-mute">本月 1,286</div>
            <div class="ico">📊</div>
          </div>
          <div class="stat-card purple">
            <div class="label">💬 用户评价</div>
            <div class="value">4.9</div>
            <div class="text-sm text-mute">⭐ 综合评分</div>
            <div class="ico">💬</div>
          </div>
        </div>
        <div class="row-2 mt-16">
          <div class="card">
            <h3 class="text-base bold mb-8">🏥 异宠医院</h3>
            <table>
              <thead><tr><th>名称</th><th>区域</th><th>接诊种类</th><th>评分</th><th>操作</th></tr></thead>
              <tbody>
                <tr><td>异宠专科诊所 · 望京</td><td>朝阳望京</td><td>兔/仓鼠/龟</td><td>4.9 ⭐</td><td><button class="btn-text">编辑</button></td></tr>
                <tr><td>爱诺异宠诊疗中心</td><td>海淀中关村</td><td>守宫/蛇/龟</td><td>4.8 ⭐</td><td><button class="btn-text">编辑</button></td></tr>
                <tr><td>奇趣异宠医院</td><td>朝阳三里屯</td><td>鸟/兔/龟</td><td>4.7 ⭐</td><td><button class="btn-text">编辑</button></td></tr>
              </tbody>
            </table>
          </div>
          <div class="card">
            <h3 class="text-base bold mb-8">👨‍⚕️ 异宠医生</h3>
            <table>
              <thead><tr><th>姓名</th><th>职称</th><th>所属医院</th><th>接诊种类</th><th>操作</th></tr></thead>
              <tbody>
                <tr><td>王医生</td><td>主任医师</td><td>爱诺宠物医院</td><td>兔/仓鼠/鹦鹉</td><td><button class="btn-text">编辑</button></td></tr>
                <tr><td>李医生</td><td>副主任</td><td>望京异宠专科</td><td>龟/蜥/守宫</td><td><button class="btn-text">编辑</button></td></tr>
                <tr><td>张医生</td><td>主治医师</td><td>爱诺异宠中心</td><td>鹦鹉/文鸟/玄凤</td><td><button class="btn-text">编辑</button></td></tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="card mt-16">
          <h3 class="text-base bold mb-8">📂 异宠分类</h3>
          <div class="row" style="gap:8px;flex-wrap:wrap">
            <span class="tag blue">🐰 兔类 (24)</span>
            <span class="tag yellow">🐹 啮齿类 (32)</span>
            <span class="tag green">🦜 鸟类 (28)</span>
            <span class="tag purple">🦎 爬行类 (18)</span>
            <span class="tag">🐠 水族类 (12)</span>
            <span class="tag gray">+ 添加分类</span>
          </div>
        </div>
      </div>

      <!-- 订单管理 -->
      <div class="screen" data-screen="orders">
        <div class="page-header">
          <div><h1>服务订单</h1><div class="sub">所有服务预约订单</div></div>
          <div class="actions">
            <button class="btn">📥 导出</button>
            <button class="btn">批量操作 ▾</button>
          </div>
        </div>
        <div class="stat-grid">
          <div class="stat-card">
            <div class="label">📋 今日订单</div>
            <div class="value">1,286</div>
            <div class="delta up">↑ 8.3%</div>
            <div class="ico">📋</div>
          </div>
          <div class="stat-card yellow">
            <div class="label">⏳ 待确认</div>
            <div class="value">86</div>
            <div class="text-sm text-mute">需 24h 内处理</div>
            <div class="ico">⏳</div>
          </div>
          <div class="stat-card blue">
            <div class="label">🔄 进行中</div>
            <div class="value">156</div>
            <div class="text-sm text-mute">服务中</div>
            <div class="ico">🔄</div>
          </div>
          <div class="stat-card green">
            <div class="label">✅ 已完成</div>
            <div class="value">28,486</div>
            <div class="text-sm text-mute">本月 1,042</div>
            <div class="ico">✅</div>
          </div>
        </div>
        <div class="table-wrap mt-16">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索订单号 / 用户 / 商家" />
            </div>
            <div class="filter">状态 ▾</div>
            <div class="filter">时间 ▾</div>
            <div class="filter">商家 ▾</div>
            <div class="spacer"></div>
            <span class="text-sm text-mute">共 29,772 单</span>
          </div>
          <table>
            <thead>
              <tr><th>订单号</th><th>服务</th><th>用户</th><th>商家</th><th>金额</th><th>预约时间</th><th>状态</th><th style="width:140px">操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td class="text-sm">20260820001</td>
                <td><div class="bold">基础体检</div><div class="text-xs text-3">团团</div></td>
                <td><div class="row"><div class="avatar sm" style="background:linear-gradient(135deg,#FF6B35,#FFB088)">萌</div><span>萌主小米</span></div></td>
                <td>爱诺宠物医院</td>
                <td><span class="bold" style="color:var(--primary)">¥99</span></td>
                <td>2026-08-15 14:30</td>
                <td><span class="tag green">已完成</span></td>
                <td><button class="btn-text" onclick="go('order-detail')">详情</button></td>
              </tr>
              <tr>
                <td class="text-sm">20260825001</td>
                <td><div class="bold">洗澡美容</div><div class="text-xs text-3">豆豆</div></td>
                <td><div class="row"><div class="avatar sm" style="background:linear-gradient(135deg,#FF6B35,#FFB088)">萌</div><span>萌主小米</span></div></td>
                <td>萌宠造型工作室</td>
                <td><span class="bold" style="color:var(--primary)">¥188</span></td>
                <td>2026-08-22 10:00</td>
                <td><span class="tag blue">进行中</span></td>
                <td><button class="btn-text" onclick="go('order-detail')">详情</button></td>
              </tr>
              <tr>
                <td class="text-sm">20260825002</td>
                <td><div class="bold">猫三联</div><div class="text-xs text-3">布丁</div></td>
                <td><div class="row"><div class="avatar sm" style="background:linear-gradient(135deg,#4D96FF,#6BB0FF)">阿</div><span>阿柴不会飞</span></div></td>
                <td>爱诺宠物医院</td>
                <td><span class="bold" style="color:var(--primary)">¥150</span></td>
                <td>2026-08-25 09:30</td>
                <td><span class="tag yellow">待确认</span></td>
                <td><button class="btn-text" onclick="go('order-detail')">详情</button></td>
              </tr>
              <tr>
                <td class="text-sm">20260824003</td>
                <td><div class="bold">狂犬疫苗</div><div class="text-xs text-3">豆豆</div></td>
                <td><div class="row"><div class="avatar sm" style="background:linear-gradient(135deg,#FF6B35,#FFB088)">萌</div><span>萌主小米</span></div></td>
                <td>爱诺宠物医院</td>
                <td><span class="bold" style="color:var(--primary)">¥120</span></td>
                <td>2026-08-28 14:00</td>
                <td><span class="tag yellow">待确认</span></td>
                <td><button class="btn-text" onclick="go('order-detail')">详情</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 订单详情 -->
      <div class="screen" data-screen="order-detail">
        <div class="page-header">
          <div>
            <h1>订单详情</h1>
            <div class="sub"><a onclick="go('orders')" style="color:var(--primary);cursor:pointer">← 返回列表</a></div>
          </div>
          <div class="actions">
            <button class="btn">📞 联系用户</button>
            <button class="btn">📞 联系商家</button>
            <button class="btn">修改状态</button>
            <button class="btn btn-primary">完成订单</button>
          </div>
        </div>
        <div class="detail-grid">
          <div class="col gap-12">
            <div class="card">
              <div class="row between mb-12">
                <div>
                  <div class="row" style="gap:8px"><span class="bold text-lg">订单号 #20260820001</span><span class="tag green">已完成</span></div>
                  <div class="text-sm text-mute mt-4">创建于 2026-08-14 16:42 · 支付于 14:45</div>
                </div>
                <div class="text-right">
                  <div class="text-xs text-mute">实付金额</div>
                  <div class="text-xl bold" style="color:var(--primary)">¥ 99.00</div>
                </div>
              </div>
              <div class="info-list">
                <div class="row"><span class="lbl">服务项目</span><span class="val">基础体检</span></div>
                <div class="row"><span class="lbl">服务描述</span><span class="val">血常规 + 粪检 + 皮肤检查</span></div>
                <div class="row"><span class="lbl">预约时间</span><span class="val">2026-08-15 14:30</span></div>
                <div class="row"><span class="lbl">服务时长</span><span class="val">30 分钟</span></div>
                <div class="row"><span class="lbl">商品原价</span><span class="val">¥ 168.00</span></div>
                <div class="row"><span class="lbl">优惠金额</span><span class="val" style="color:var(--accent)">-¥ 69.00</span></div>
                <div class="row"><span class="lbl">实付金额</span><span class="val bold" style="color:var(--primary)">¥ 99.00</span></div>
                <div class="row"><span class="lbl">支付方式</span><span class="val">微信支付</span></div>
                <div class="row"><span class="lbl">支付时间</span><span class="val">2026-08-14 14:45:18</span></div>
              </div>
            </div>
            <div class="card">
              <h3 class="text-base bold mb-8">⏱ 状态变更时间线</h3>
              <div class="timeline">
                <div class="timeline-item"><div class="t">2026-08-15 15:18</div><div class="c">订单完成 - 用户确认服务</div></div>
                <div class="timeline-item"><div class="t">2026-08-15 15:00</div><div class="c">服务完成</div></div>
                <div class="timeline-item"><div class="t">2026-08-15 14:30</div><div class="c">开始服务</div></div>
                <div class="timeline-item"><div class="t">2026-08-14 14:50</div><div class="c">商家确认预约</div></div>
                <div class="timeline-item"><div class="t">2026-08-14 14:45</div><div class="c">用户支付 ¥99</div></div>
                <div class="timeline-item"><div class="t">2026-08-14 14:42</div><div class="c">用户创建订单</div></div>
              </div>
            </div>
          </div>
          <div class="col gap-12">
            <div class="card">
              <h3 class="text-base bold mb-8">👤 用户信息</h3>
              <div class="row" style="gap:10px;padding:8px 0">
                <div class="avatar" style="background:linear-gradient(135deg,#FF6B35,#FFB088)">萌</div>
                <div class="col" style="flex:1">
                  <div class="bold">@萌主小米</div>
                  <div class="text-xs text-3">U10086 · 138****8888</div>
                </div>
                <button class="btn-text">详情</button>
              </div>
            </div>
            <div class="card">
              <h3 class="text-base bold mb-8">🐱 服务宠物</h3>
              <div class="row" style="gap:10px;padding:8px 0">
                <div class="avatar" style="background:linear-gradient(135deg,#FF8E53,#FFD166)">🐱</div>
                <div class="col" style="flex:1">
                  <div class="bold">团团</div>
                  <div class="text-xs text-3">橘猫 · ♂ · 2岁4个月</div>
                </div>
                <button class="btn-text">详情</button>
              </div>
            </div>
            <div class="card">
              <h3 class="text-base bold mb-8">🏪 商家信息</h3>
              <div class="row" style="gap:10px;padding:8px 0">
                <div style="width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#4D96FF,#6BB0FF);display:flex;align-items:center;justify-content:center;color:#fff">🏥</div>
                <div class="col" style="flex:1">
                  <div class="bold">爱诺宠物医院</div>
                  <div class="text-xs text-3">朝阳店 · ⭐ 4.9</div>
                </div>
                <button class="btn-text">详情</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 退款处理 -->
      <div class="screen" data-screen="refunds">
        <div class="page-header">
          <div><h1>退款处理</h1><div class="sub">3 个待处理</div></div>
          <div class="actions">
            <button class="btn">📥 导出</button>
          </div>
        </div>
        <div class="table-wrap">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索退款单" />
            </div>
            <div class="filter">状态 ▾</div>
            <div class="filter">时间 ▾</div>
            <div class="spacer"></div>
            <span class="text-sm text-mute">共 86 条</span>
          </div>
          <table>
            <thead>
              <tr><th>退款单号</th><th>原订单</th><th>用户</th><th>退款金额</th><th>退款理由</th><th>申请时间</th><th>状态</th><th style="width:180px">操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td class="text-sm">R20260825001</td>
                <td>20260820005<br><span class="text-xs text-3">基础体检</span></td>
                <td>@萌主小米</td>
                <td><span class="bold" style="color:var(--danger)">¥ 99.00</span></td>
                <td><span class="truncate" style="max-width:160px">医生临时取消，体验不好</span></td>
                <td>2026-08-25 10:23</td>
                <td><span class="tag yellow">待审核</span></td>
                <td><button class="btn-text" style="color:var(--accent)">同意</button><button class="btn-text" style="color:var(--danger)">拒绝</button><button class="btn-text">详情</button></td>
              </tr>
              <tr>
                <td class="text-sm">R20260824002</td>
                <td>20260818003<br><span class="text-xs text-3">洗澡美容</span></td>
                <td>@阿柴不会飞</td>
                <td><span class="bold" style="color:var(--danger)">¥ 188.00</span></td>
                <td><span class="truncate" style="max-width:160px">重复预约，希望取消</span></td>
                <td>2026-08-24 16:42</td>
                <td><span class="tag yellow">待审核</span></td>
                <td><button class="btn-text" style="color:var(--accent)">同意</button><button class="btn-text" style="color:var(--danger)">拒绝</button><button class="btn-text">详情</button></td>
              </tr>
              <tr>
                <td class="text-sm">R20260824003</td>
                <td>20260810002<br><span class="text-xs text-3">猫三联</span></td>
                <td>@毛茸茸的雪球</td>
                <td><span class="bold" style="color:var(--danger)">¥ 150.00</span></td>
                <td><span class="truncate" style="max-width:160px">宠物过敏反应，协商退款</span></td>
                <td>2026-08-24 09:15</td>
                <td><span class="tag yellow">待审核</span></td>
                <td><button class="btn-text" style="color:var(--accent)">同意</button><button class="btn-text" style="color:var(--danger)">拒绝</button><button class="btn-text">详情</button></td>
              </tr>
              <tr>
                <td class="text-sm">R20260822001</td>
                <td>20260815002<br><span class="text-xs text-3">狂犬疫苗</span></td>
                <td>@柴犬团子</td>
                <td><span class="bold" style="color:var(--danger)">¥ 120.00</span></td>
                <td><span class="truncate" style="max-width:160px">系统问题</span></td>
                <td>2026-08-22 14:08</td>
                <td><span class="tag green">已退款</span></td>
                <td><button class="btn-text">详情</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 医保管理 -->
      <div class="screen" data-screen="medical">
        <div class="page-header">
          <div><h1>医保管理</h1><div class="sub">宠物医保产品、参保用户、理赔记录</div></div>
          <div class="actions">
            <button class="btn">📊 数据统计</button>
            <button class="btn btn-primary">+ 新建产品</button>
          </div>
        </div>
        <div class="stat-grid">
          <div class="stat-card">
            <div class="label">🛡️ 参保用户</div>
            <div class="value">12,486</div>
            <div class="delta up">↑ 18.2% 较上月</div>
            <div class="ico">🛡️</div>
          </div>
          <div class="stat-card blue">
            <div class="label">📋 理赔次数</div>
            <div class="value">328</div>
            <div class="text-sm text-mute">本月 42 笔</div>
            <div class="ico">📋</div>
          </div>
          <div class="stat-card green">
            <div class="label">💰 理赔总额</div>
            <div class="value">¥ 86,420</div>
            <div class="text-sm text-mute">本月 ¥12,840</div>
            <div class="ico">💰</div>
          </div>
          <div class="stat-card purple">
            <div class="label">📊 理赔率</div>
            <div class="value">2.6%</div>
            <div class="text-sm text-mute">行业优秀水平</div>
            <div class="ico">📊</div>
          </div>
        </div>
        <div class="row-2 mt-16">
          <div class="card">
            <h3 class="text-base bold mb-8">🛡️ 医保产品</h3>
            <table>
              <thead><tr><th>产品名</th><th>价格</th><th>保障范围</th><th>报销</th><th>参保数</th></tr></thead>
              <tbody>
                <tr><td>全民爱宠保障计划</td><td>¥19.9/月</td><td>意外+疾病+手术</td><td>最高 80%</td><td>8,256</td></tr>
                <tr><td>爱宠无忧计划</td><td>¥39.9/月</td><td>意外+疾病</td><td>最高 60%</td><td>3,128</td></tr>
                <tr><td>爱宠安心计划</td><td>¥9.9/月</td><td>意外</td><td>最高 30%</td><td>1,102</td></tr>
              </tbody>
            </table>
          </div>
          <div class="card">
            <h3 class="text-base bold mb-8">📋 待处理理赔</h3>
            <div>
              <div class="row" style="padding:10px 0;border-bottom:1px solid var(--line-2)">
                <div class="col" style="flex:1">
                  <div class="bold">R20260825001</div>
                  <div class="text-xs text-3">@萌主小米 · 团团</div>
                  <div class="text-sm text-mute">意外医疗 · ¥420</div>
                </div>
                <span class="tag yellow">待审</span>
                <button class="btn-text">处理</button>
              </div>
              <div class="row" style="padding:10px 0;border-bottom:1px solid var(--line-2)">
                <div class="col" style="flex:1">
                  <div class="bold">R20260824005</div>
                  <div class="text-xs text-3">@阿柴不会飞 · 豆豆</div>
                  <div class="text-sm text-mute">疾病医疗 · ¥1,280</div>
                </div>
                <span class="tag yellow">待审</span>
                <button class="btn-text">处理</button>
              </div>
              <div class="row" style="padding:10px 0">
                <div class="col" style="flex:1">
                  <div class="bold">R20260824006</div>
                  <div class="text-xs text-3">@毛茸茸的雪球 · 雪球</div>
                  <div class="text-sm text-mute">手术保障 · ¥2,400</div>
                </div>
                <span class="tag yellow">待审</span>
                <button class="btn-text">处理</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 动态管理 -->
      <div class="screen" data-screen="posts">
        <div class="page-header">
          <div><h1>动态管理</h1><div class="sub">所有用户发布的动态内容</div></div>
          <div class="actions">
            <button class="btn">📥 导出</button>
          </div>
        </div>
        <div class="table-wrap">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索内容 / 用户" />
            </div>
            <div class="filter">状态 ▾</div>
            <div class="filter">时间 ▾</div>
            <div class="filter">话题 ▾</div>
            <div class="spacer"></div>
            <span class="text-sm text-mute">共 12,486 条</span>
          </div>
          <table>
            <thead>
              <tr><th>内容</th><th>作者</th><th>话题</th><th>互动</th><th>发布时间</th><th>状态</th><th style="width:160px">操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><div class="bold truncate" style="max-width:280px">周末带毛孩子去了新开的宠物公园 🐕🌿 阳光正好...</div><div class="row" style="margin-top:4px;gap:2px"><div style="width:24px;height:24px;border-radius:4px;background:linear-gradient(135deg,#FFB088,#FFD166)"></div><div style="width:24px;height:24px;border-radius:4px;background:linear-gradient(135deg,#4D96FF,#6BB0FF)"></div><div style="width:24px;height:24px;border-radius:4px;background:linear-gradient(135deg,#06D6A0,#A78BFA)"></div></div></td>
                <td><div class="row"><div class="avatar sm" style="background:linear-gradient(135deg,#FF6B35,#FFB088)">萌</div><span>萌主小米</span></div></td>
                <td><span class="tag">#柴犬日常</span></td>
                <td>❤️ 328<br>💬 42</td>
                <td>2 小时前</td>
                <td><span class="tag green">已发布</span></td>
                <td><button class="btn-text">置顶</button><button class="btn-text" style="color:var(--danger)">删除</button></td>
              </tr>
              <tr>
                <td><div class="bold truncate" style="max-width:280px">我家小兔兔第一次洗澡超配合！🎉</div></td>
                <td><div class="row"><div class="avatar sm" style="background:linear-gradient(135deg,#A78BFA,#C4B5FD)">雪</div><span>毛茸茸的雪球</span></div></td>
                <td><span class="tag">#异宠日常</span></td>
                <td>❤️ 186<br>💬 24</td>
                <td>昨天</td>
                <td><span class="tag green">已发布</span></td>
                <td><button class="btn-text">置顶</button><button class="btn-text" style="color:var(--danger)">删除</button></td>
              </tr>
              <tr>
                <td><div class="bold truncate" style="max-width:280px">求推荐适合柴犬的狗粮，目前在吃皇家，但是泪痕有点重</div></td>
                <td><div class="row"><div class="avatar sm" style="background:linear-gradient(135deg,#4D96FF,#6BB0FF)">阿</div><span>阿柴不会飞</span></div></td>
                <td><span class="tag">#柴犬日常</span></td>
                <td>❤️ 56<br>💬 42</td>
                <td>1 周前</td>
                <td><span class="tag yellow">待审核</span></td>
                <td><button class="btn-text" style="color:var(--accent)">通过</button><button class="btn-text" style="color:var(--danger)">拒绝</button></td>
              </tr>
              <tr>
                <td><div class="bold truncate" style="max-width:280px">违规广告内容，含联系方式...</div></td>
                <td><div class="row"><div class="avatar sm" style="background:linear-gradient(135deg,#EF4444,#F87171)">违</div><span>违规用户_22</span></div></td>
                <td>-</td>
                <td>❤️ 0<br>💬 0</td>
                <td>3 天前</td>
                <td><span class="tag red">已屏蔽</span></td>
                <td><button class="btn-text" style="color:var(--accent)">恢复</button><button class="btn-text" style="color:var(--danger)">删除</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 圈子管理 -->
      <div class="screen" data-screen="circles">
        <div class="page-header">
          <div><h1>圈子管理</h1><div class="sub">宠物兴趣圈子</div></div>
          <div class="actions">
            <button class="btn">分类管理</button>
            <button class="btn btn-primary">+ 新建圈子</button>
          </div>
        </div>
        <div class="row-2">
          <div class="card">
            <h3 class="text-base bold mb-8">📂 圈子分类</h3>
            <div class="row" style="gap:6px;flex-wrap:wrap">
              <span class="tag blue">🐕 狗狗 (28)</span>
              <span class="tag yellow">🐈 猫猫 (24)</span>
              <span class="tag green">🐹 异宠 (12)</span>
              <span class="tag purple">🦜 其他 (8)</span>
              <span class="tag gray">+ 添加</span>
            </div>
            <div class="mt-12">
              <div class="text-sm text-mute mb-8">异宠细分：</div>
              <div class="row" style="gap:6px;flex-wrap:wrap">
                <span class="tag">兔类</span>
                <span class="tag">啮齿类</span>
                <span class="tag">鸟类</span>
                <span class="tag">爬行类</span>
                <span class="tag">水族类</span>
              </div>
            </div>
          </div>
          <div class="card">
            <h3 class="text-base bold mb-8">🏆 热门圈子</h3>
            <div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)"><span class="text-sm" style="flex:1;font-weight:600">柴犬日常</span><span class="text-xs text-3">1.2万成员</span></div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)"><span class="text-sm" style="flex:1;font-weight:600">猫咪研究室</span><span class="text-xs text-3">8.6k成员</span></div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)"><span class="text-sm" style="flex:1;font-weight:600">异宠大家庭</span><span class="text-xs text-3">3.4k成员</span></div>
              <div class="row" style="padding:8px 0"><span class="text-sm" style="flex:1;font-weight:600">鹦鹉学语训练营</span><span class="text-xs text-3">1.8k成员</span></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 评价管理 -->
      <div class="screen" data-screen="reviews">
        <div class="page-header">
          <div><h1>评价管理</h1><div class="sub">用户对商家/服务的评价</div></div>
          <div class="actions">
            <button class="btn">📊 评价统计</button>
            <button class="btn btn-primary">筛选违规</button>
          </div>
        </div>
        <div class="stat-grid">
          <div class="stat-card">
            <div class="label">⭐ 总评价数</div>
            <div class="value">8,486</div>
            <div class="text-sm text-mute">本月 1,286</div>
            <div class="ico">⭐</div>
          </div>
          <div class="stat-card blue">
            <div class="label">📊 平均评分</div>
            <div class="value">4.7</div>
            <div class="text-sm text-mute">⭐⭐⭐⭐</div>
            <div class="ico">📊</div>
          </div>
          <div class="stat-card red">
            <div class="label">⚠️ 差评率</div>
            <div class="value">2.1%</div>
            <div class="text-sm text-mute">需关注</div>
            <div class="ico">⚠️</div>
          </div>
          <div class="stat-card green">
            <div class="label">💬 待回复</div>
            <div class="value">28</div>
            <div class="text-sm text-mute">商家未回复</div>
            <div class="ico">💬</div>
          </div>
        </div>
        <div class="table-wrap mt-16">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索评价内容" />
            </div>
            <div class="filter">评分 ▾</div>
            <div class="filter">商家 ▾</div>
                        <div class="spacer"></div>
            <span class="text-sm text-mute">共 8,486 条</span>
          </div>
          <table>
            <thead>
              <tr><th>用户</th><th>商家</th><th>评分</th><th>内容</th><th>标签</th><th>时间</th><th>状态</th><th style="width:160px">操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><div class="row"><div class="avatar sm" style="background:linear-gradient(135deg,#FF6B35,#FFB088)">萌</div><span>萌主小米</span></div></td>
                <td>爱诺宠物医院</td>
                <td><span class="stars">★★★★★</span> 5.0</td>
                <td><div class="truncate" style="max-width:240px">医生很专业，环境也很干净，团团这次体检很顺利~</div></td>
                <td><span class="tag">医生专业</span> <span class="tag">环境整洁</span></td>
                <td>2026-08-15</td>
                <td><span class="tag green">已回复</span></td>
                <td><button class="btn-text">查看</button><button class="btn-text" style="color:var(--danger)">删除</button></td>
              </tr>
              <tr>
                <td><div class="row"><div class="avatar sm" style="background:linear-gradient(135deg,#4D96FF,#6BB0FF)">阿</div><span>阿柴不会飞</span></div></td>
                <td>萌宠造型工作室</td>
                <td><span class="stars">★★★★★</span> 5.0</td>
                <td><div class="truncate" style="max-width:240px">造型师手艺好，豆豆超满意！</div></td>
                <td><span class="tag">服务热情</span></td>
                <td>2026-08-14</td>
                <td><span class="tag yellow">待回复</span></td>
                <td><button class="btn-text">查看</button><button class="btn-text">提醒回复</button></td>
              </tr>
              <tr>
                <td><div class="row"><div class="avatar sm" style="background:linear-gradient(135deg,#A78BFA,#C4B5FD)">雪</div><span>毛茸茸的雪球</span></div></td>
                <td>爱诺宠物医院</td>
                <td><span class="stars">★★☆☆☆</span> 2.0</td>
                <td><div class="truncate" style="max-width:240px">等了一个多小时，体验很差，强烈不推荐</div></td>
                <td><span class="tag red">等待时间长</span></td>
                <td>2026-08-13</td>
                <td><span class="tag red">差评</span></td>
                <td><button class="btn-text">查看</button><button class="btn-text" style="color:var(--danger)">删除</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 招聘管理 -->
      <div class="screen" data-screen="jobs">
        <div class="page-header">
          <div><h1>招聘管理</h1><div class="sub">职位发布与投递管理</div></div>
          <div class="actions">
            <button class="btn">📥 导出</button>
          </div>
        </div>
        <div class="table-wrap">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索职位" />
            </div>
            <div class="filter">状态 ▾</div>
            <div class="filter">薪资 ▾</div>
            <div class="spacer"></div>
            <span class="text-sm text-mute">共 86 个职位</span>
          </div>
          <table>
            <thead>
              <tr><th>职位</th><th>薪资</th><th>企业</th><th>地点</th><th>浏览/投递</th><th>发布时间</th><th>状态</th><th style="width:140px">操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><div class="bold">高级宠物美容师</div></td>
                <td><span class="bold" style="color:var(--primary)">¥8K-12K</span></td>
                <td>萌宠造型工作室</td>
                <td>北京·朝阳</td>
                <td>1,283 / 38</td>
                <td>2026-08-20</td>
                <td><span class="tag green">招聘中</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td>
              </tr>
              <tr>
                <td><div class="bold">宠物医生助理</div></td>
                <td><span class="bold" style="color:var(--primary)">¥5K-8K</span></td>
                <td>爱诺宠物医院</td>
                <td>北京·朝阳</td>
                <td>856 / 22</td>
                <td>2026-08-15</td>
                <td><span class="tag green">招聘中</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td>
              </tr>
              <tr>
                <td><div class="bold">异宠专科医生</div></td>
                <td><span class="bold" style="color:var(--primary)">¥15K-25K</span></td>
                <td>异宠专科诊所</td>
                <td>北京·望京</td>
                <td>428 / 12</td>
                <td>2026-08-10</td>
                <td><span class="tag yellow">待审核</span></td>
                <td><button class="btn-text" style="color:var(--accent)">通过</button><button class="btn-text" style="color:var(--danger)">驳回</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 首页管理 -->
      <div class="screen" data-screen="homepage">
        <div class="page-header">
          <div><h1>首页管理</h1><div class="sub">Banner、公告、快捷入口、推荐配置</div></div>
          <div class="actions">
            <button class="btn">预览</button>
            <button class="btn btn-primary">保存配置</button>
          </div>
        </div>
        <div class="row-2">
          <div class="card">
            <div class="card-header"><h3>🎠 轮播图管理</h3><button class="btn-text">+ 新增</button></div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
              <div style="aspect-ratio:16/9;background:linear-gradient(135deg,#FF6B35,#FF8E53);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600">🐾 医保 Banner</div>
              <div style="aspect-ratio:16/9;background:linear-gradient(135deg,#06D6A0,#4DE0B8);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600">🐹 异宠医疗</div>
              <div style="aspect-ratio:16/9;background:linear-gradient(135deg,#A78BFA,#C4B5FD);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600">💼 招聘季</div>
              <div style="aspect-ratio:16/9;background:linear-gradient(135deg,#FFD166,#FF8E53);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600">+ 添加</div>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><h3>📢 公告管理</h3><button class="btn-text">+ 发布</button></div>
            <div>
              <div class="row" style="padding:10px 0;border-bottom:1px solid var(--line-2)">
                <div class="col" style="flex:1"><span class="bold">8月医保优惠活动</span><span class="text-xs text-3">2026-08-15</span></div>
                <span class="tag green">已发布</span>
                <button class="btn-text">编辑</button>
              </div>
              <div class="row" style="padding:10px 0;border-bottom:1px solid var(--line-2)">
                <div class="col" style="flex:1"><span class="bold">系统升级公告</span><span class="text-xs text-3">2026-08-10</span></div>
                <span class="tag gray">已下架</span>
                <button class="btn-text">编辑</button>
              </div>
              <div class="row" style="padding:10px 0">
                <div class="col" style="flex:1"><span class="bold">新手宠物主福利</span><span class="text-xs text-3">2026-08-05</span></div>
                <span class="tag green">已发布</span>
                <button class="btn-text">编辑</button>
              </div>
            </div>
          </div>
        </div>
        <div class="row-2 mt-16">
          <div class="card">
            <h3 class="text-base bold mb-8">⚡ 快捷入口配置</h3>
            <p class="text-sm text-mute mb-12">首页 4 个快捷功能入口</p>
            <div class="row" style="gap:8px">
              <span class="tag blue">🐱 宠物档案</span>
              <span class="tag yellow">🔍 找服务</span>
              <span class="tag green">💉 疫苗</span>
              <span class="tag purple">⋯ 更多</span>
            </div>
          </div>
          <div class="card">
            <h3 class="text-base bold mb-8">🏆 推荐服务配置</h3>
            <p class="text-sm text-mute mb-12">首页推荐的服务（拖拽调整顺序）</p>
            <div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)">
                <span>1.</span><span class="bold" style="flex:1">爱诺宠物医院</span><span class="text-xs text-3">权重 100</span>
              </div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)">
                <span>2.</span><span class="bold" style="flex:1">萌宠造型工作室</span><span class="text-xs text-3">权重 90</span>
              </div>
              <div class="row" style="padding:8px 0">
                <span>3.</span><span class="bold" style="flex:1">异宠专科诊所</span><span class="text-xs text-3">权重 80</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 消息推送 -->
      <div class="screen" data-screen="push">
        <div class="page-header">
          <div><h1>消息推送</h1><div class="sub">向APP用户推送系统消息</div></div>
          <div class="actions">
            <button class="btn">推送记录</button>
            <button class="btn btn-primary" onclick="openModal()">+ 新建推送</button>
          </div>
        </div>
        <div class="stat-grid">
          <div class="stat-card">
            <div class="label">📨 今日推送</div>
            <div class="value">3</div>
            <div class="text-sm text-mute">送达 12,486</div>
            <div class="ico">📨</div>
          </div>
          <div class="stat-card blue">
            <div class="label">👁 触达率</div>
            <div class="value">86.2%</div>
            <div class="text-sm text-mute">10,762 用户</div>
            <div class="ico">👁</div>
          </div>
          <div class="stat-card green">
            <div class="label">👆 点击率</div>
            <div class="value">12.8%</div>
            <div class="text-sm text-mute">1,378 次点击</div>
            <div class="ico">👆</div>
          </div>
          <div class="stat-card purple">
            <div class="label">📊 本月</div>
            <div class="value">28</div>
            <div class="text-sm text-mute">总推送数</div>
            <div class="ico">📊</div>
          </div>
        </div>
        <div class="table-wrap mt-16">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索推送" />
            </div>
            <div class="filter">类型 ▾</div>
            <div class="filter">状态 ▾</div>
            <div class="spacer"></div>
            <span class="text-sm text-mute">共 86 条</span>
          </div>
          <table>
            <thead>
              <tr><th>推送标题</th><th>类型</th><th>目标用户</th><th>送达/点击</th><th>推送时间</th><th>状态</th><th style="width:120px">操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><div class="bold">💉 豆豆的狂犬疫苗即将到期</div></td>
                <td><span class="tag yellow">服务提醒</span></td>
                <td>1 人</td>
                <td>1 / 1<br><span class="text-xs text-mute">100%</span></td>
                <td>1 小时前</td>
                <td><span class="tag green">已发送</span></td>
                <td><button class="btn-text">详情</button></td>
              </tr>
              <tr>
                <td><div class="bold">🎉 8月医保优惠活动开启</div></td>
                <td><span class="tag blue">活动通知</span></td>
                <td>全部用户</td>
                <td>12,486 / 1,378<br><span class="text-xs text-mute">11%</span></td>
                <td>今天 09:00</td>
                <td><span class="tag green">已发送</span></td>
                <td><button class="btn-text">详情</button></td>
              </tr>
              <tr>
                <td><div class="bold">🔔 预约确认 - 团团基础体检</div></td>
                <td><span class="tag">订单通知</span></td>
                <td>1 人</td>
                <td>1 / 1<br><span class="text-xs text-mute">100%</span></td>
                <td>昨天 14:30</td>
                <td><span class="tag green">已发送</span></td>
                <td><button class="btn-text">详情</button></td>
              </tr>
              <tr>
                <td><div class="bold">📢 系统维护通知</div></td>
                <td><span class="tag gray">系统</span></td>
                <td>全部用户</td>
                <td>- / -<br><span class="text-xs text-mute">待发送</span></td>
                <td>2026-08-26 02:00</td>
                <td><span class="tag yellow">定时中</span></td>
                <td><button class="btn-text">详情</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 角色权限 -->
      <div class="screen" data-screen="roles">
        <div class="page-header">
          <div><h1>角色权限</h1><div class="sub">系统角色与权限配置</div></div>
          <div class="actions">
            <button class="btn">权限说明</button>
            <button class="btn btn-primary">+ 新建角色</button>
          </div>
        </div>
        <div class="table-wrap">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索角色" />
            </div>
            <div class="spacer"></div>
            <span class="text-sm text-mute">共 4 个角色</span>
          </div>
          <table>
            <thead>
              <tr><th>角色</th><th>描述</th><th>账号数</th><th>权限范围</th><th>创建时间</th><th style="width:160px">操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><div class="row"><span style="font-size:18px">👑</span><span class="bold">超级管理员</span></div></td>
                <td>系统最高权限</td>
                <td>2</td>
                <td><span class="tag red">全部权限</span></td>
                <td>2023-01-01</td>
                <td><button class="btn-text">权限设置</button><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td><div class="row"><span style="font-size:18px">📊</span><span class="bold">运营</span></div></td>
                <td>日常运营、内容审核、活动管理</td>
                <td>5</td>
                <td><span class="tag">用户/内容/活动</span></td>
                <td>2023-03-15</td>
                <td><button class="btn-text">权限设置</button><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td><div class="row"><span style="font-size:18px">✅</span><span class="bold">审核</span></div></td>
                <td>商家/内容/用户审核</td>
                <td>3</td>
                <td><span class="tag blue">审核相关</span></td>
                <td>2023-06-20</td>
                <td><button class="btn-text">权限设置</button><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td><div class="row"><span style="font-size:18px">💬</span><span class="bold">客服</span></div></td>
                <td>用户咨询、退款处理、投诉</td>
                <td>8</td>
                <td><span class="tag green">客服/订单</span></td>
                <td>2023-08-10</td>
                <td><button class="btn-text">权限设置</button><button class="btn-text">编辑</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 操作日志 -->
      <div class="screen" data-screen="logs">
        <div class="page-header">
          <div><h1>操作日志</h1><div class="sub">管理员关键操作记录</div></div>
          <div class="actions">
            <button class="btn">📥 导出</button>
          </div>
        </div>
        <div class="table-wrap">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索操作" />
            </div>
            <div class="filter">操作人 ▾</div>
            <div class="filter">类型 ▾</div>
            <div class="filter">时间 ▾</div>
            <div class="spacer"></div>
            <span class="text-sm text-mute">共 8,286 条</span>
          </div>
          <table>
            <thead>
              <tr><th>操作人</th><th>操作类型</th><th>对象</th><th>详情</th><th>IP 地址</th><th>时间</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><div class="row"><div class="avatar sm" style="background:linear-gradient(135deg,#FF6B35,#FFB088)">超</div><span>超级管理员</span></div></td>
                <td><span class="tag green">审核通过</span></td>
                <td>商家 M20124</td>
                <td>审核通过「康宁宠物诊所」入驻申请</td>
                <td class="text-sm text-3">192.168.1.100</td>
                <td>2026-08-25 14:32:18</td>
              </tr>
              <tr>
                <td><div class="row"><div class="avatar sm" style="background:linear-gradient(135deg,#4D96FF,#6BB0FF)">运</div><span>运营-小王</span></div></td>
                <td><span class="tag blue">编辑</span></td>
                <td>服务 S20123</td>
                <td>修改服务项目「基础体检」价格 ¥168 → ¥99</td>
                <td class="text-sm text-3">192.168.1.105</td>
                <td>2026-08-25 11:20:45</td>
              </tr>
              <tr>
                <td><div class="row"><div class="avatar sm" style="background:linear-gradient(135deg,#06D6A0,#4DE0B8)">审</div><span>审核-小李</span></div></td>
                <td><span class="tag red">删除</span></td>
                <td>动态 P20089</td>
                <td>删除违规动态「违规广告内容...」</td>
                <td class="text-sm text-3">192.168.1.108</td>
                <td>2026-08-25 09:15:32</td>
              </tr>
              <tr>
                <td><div class="row"><div class="avatar sm" style="background:linear-gradient(135deg,#FF6B35,#FFB088)">超</div><span>超级管理员</span></div></td>
                <td><span class="tag yellow">推送</span></td>
                <td>推送 #86</td>
                <td>发送系统推送「系统维护通知」（全部用户）</td>
                <td class="text-sm text-3">192.168.1.100</td>
                <td>2026-08-24 18:42:18</td>
              </tr>
              <tr>
                <td><div class="row"><div class="avatar sm" style="background:linear-gradient(135deg,#A78BFA,#C4B5FD)">客</div><span>客服-小张</span></div></td>
                <td><span class="tag">处理退款</span></td>
                <td>退款单 R20260822001</td>
                <td>同意退款申请，金额 ¥120.00</td>
                <td class="text-sm text-3">192.168.1.112</td>
                <td>2026-08-24 16:08:12</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 系统设置 -->
      <div class="screen" data-screen="settings">
        <div class="page-header">
          <div><h1>系统设置</h1><div class="sub">基础配置、字典、协议等</div></div>
          <div class="actions">
            <button class="btn">恢复默认</button>
            <button class="btn btn-primary">保存</button>
          </div>
        </div>
        <div class="card">
          <h3 class="text-base bold mb-12">📱 基础配置</h3>
          <div class="form-row"><div class="lbl">APP 名称</div><input class="ipt" value="PETU+ 宠物服务社区" /></div>
          <div class="form-row"><div class="lbl">APP Logo</div><div class="row" style="gap:10px"><div style="width:48px;height:48px;border-radius:8px;background:var(--gradient-1);display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px">🐾</div><button class="btn">上传</button></div></div>
          <div class="form-row"><div class="lbl">版本号</div><input class="ipt" value="v1.2.0" /></div>
          <div class="form-row"><div class="lbl">客服电话</div><input class="ipt" value="400-888-****" /></div>
          <div class="form-row"><div class="lbl">客服邮箱</div><input class="ipt" value="support@petu.com" /></div>
          <div class="form-row"><div class="lbl">版权信息</div><input class="ipt" value="© 2026 PETU+ All Rights Reserved" /></div>
        </div>
        <div class="row-2 mt-16">
          <div class="card">
            <h3 class="text-base bold mb-8">📚 数据字典</h3>
            <div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)"><span style="flex:1">宠物品种 (86)</span><button class="btn-text">管理</button></div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)"><span style="flex:1">服务类型 (24)</span><button class="btn-text">管理</button></div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)"><span style="flex:1">科室类型 (8)</span><button class="btn-text">管理</button></div>
              <div class="row" style="padding:8px 0"><span style="flex:1">证书类型 (12)</span><button class="btn-text">管理</button></div>
            </div>
          </div>
          <div class="card">
            <h3 class="text-base bold mb-8">📄 协议与帮助</h3>
            <div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)"><span style="flex:1">用户协议</span><button class="btn-text">编辑</button></div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)"><span style="flex:1">隐私政策</span><button class="btn-text">编辑</button></div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)"><span style="flex:1">儿童隐私保护</span><button class="btn-text">编辑</button></div>
              <div class="row" style="padding:8px 0"><span style="flex:1">帮助与 FAQ</span><button class="btn-text">管理</button></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 数据统计 -->
      <div class="screen" data-screen="stats">
        <div class="page-header">
          <div><h1>数据统计</h1><div class="sub">各维度数据报表与导出</div></div>
          <div class="actions">
            <div class="filter">时间范围 ▾</div>
            <button class="btn btn-primary">📥 导出报告</button>
          </div>
        </div>
        <div class="row-2">
          <div class="card">
            <h3 class="text-base bold mb-8">📈 用户增长趋势 (30天)</h3>
            <div class="chart-box">
              <div class="chart-bars">
                <div class="chart-bar"><div class="bar-fill" style="height:50%"></div><span class="lbl">7/27</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:65%"></div><span class="lbl">7/29</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:60%"></div><span class="lbl">7/31</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:80%"></div><span class="lbl">8/2</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:70%"></div><span class="lbl">8/4</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:85%"></div><span class="lbl">8/6</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:90%"></div><span class="lbl">8/8</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:75%"></div><span class="lbl">8/10</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:100%"></div><span class="lbl">8/25</span></div>
              </div>
            </div>
          </div>
          <div class="card">
            <h3 class="text-base bold mb-8">💰 订单金额趋势</h3>
            <div class="chart-box">
              <div class="chart-bars">
                <div class="chart-bar"><div class="bar-fill" style="height:45%;background:var(--gradient-3)"></div><span class="lbl">7/27</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:60%;background:var(--gradient-3)"></div><span class="lbl">7/29</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:55%;background:var(--gradient-3)"></div><span class="lbl">7/31</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:75%;background:var(--gradient-3)"></div><span class="lbl">8/2</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:65%;background:var(--gradient-3)"></div><span class="lbl">8/4</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:80%;background:var(--gradient-3)"></div><span class="lbl">8/6</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:88%;background:var(--gradient-3)"></div><span class="lbl">8/8</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:72%;background:var(--gradient-3)"></div><span class="lbl">8/10</span></div>
                <div class="chart-bar"><div class="bar-fill" style="height:95%;background:var(--gradient-3)"></div><span class="lbl">8/25</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="row-2 mt-16">
          <div class="card">
            <h3 class="text-base bold mb-8">👥 用户角色分布</h3>
            <div class="funnel">
              <div class="funnel-row"><span class="lbl">宠物主人</span><div class="bar" style="width:100%">27,280</div></div>
              <div class="funnel-row"><span class="lbl">从业者</span><div class="bar" style="width:6%;background:var(--gradient-3)">1,282</div></div>
            </div>
          </div>
          <div class="card">
            <h3 class="text-base bold mb-8">🌍 地域分布 TOP5</h3>
            <div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)"><span style="flex:1">北京</span><span class="bold">8,562</span><span class="text-xs text-3">30.0%</span></div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)"><span style="flex:1">上海</span><span class="bold">6,128</span><span class="text-xs text-3">21.4%</span></div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)"><span style="flex:1">广州</span><span class="bold">4,286</span><span class="text-xs text-3">15.0%</span></div>
              <div class="row" style="padding:8px 0;border-bottom:1px solid var(--line-2)"><span style="flex:1">深圳</span><span class="bold">3,842</span><span class="text-xs text-3">13.4%</span></div>
              <div class="row" style="padding:8px 0"><span style="flex:1">杭州</span><span class="bold">2,486</span><span class="text-xs text-3">8.7%</span></div>
            </div>
          </div>
        </div>

      <div class="screen" data-screen="user-audit" style="background:red !important;min-height:500px;color:white">
        <h1>USER AUDIT TEST</h1>
        <div class="page-header">
          <div>
            <h1>用户审核</h1>
            <div class="sub">待审核新注册用户 12 个</div>
          </div>
          <div class="actions"><button class="btn">📥 导出</button><button class="btn btn-primary">批量通过</button></div>
        </div>
          <div>
            <h1>用户审核</h1>
            <div class="sub">待审核新注册用户 12 个</div>
          </div>
          <div class="actions"><button class="btn">📥 导出</button><button class="btn btn-primary">批量通过</button></div>
        </div>
<div class="grid grid-4">
<div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">👥</div>
            <div class="info">
              <div class="lbl">待审核用户</div>
              <div class="val">12</div>
              <div class="delta">↑ 较昨日 4</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">✓</div>
            <div class="info">
              <div class="lbl">今日通过</div>
              <div class="val">28</div>
              <div class="delta">通过率 92%</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">✗</div>
            <div class="info">
              <div class="lbl">今日驳回</div>
              <div class="val">3</div>
              <div class="delta">驳回率 8%</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">⏱</div>
            <div class="info">
              <div class="lbl">平均处理时长</div>
              <div class="val">2.3小时</div>
              <div class="delta">↓ 较昨日 0.5h</div>
            </div>
          </div>
        </div>
        <div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索用户昵称/手机号" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">用户类型 ▾</button>
            <button class="filter">注册时间 ▾</button>
            <button class="filter">状态 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 12 个待审</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>用户</th><th>手机/邮箱</th><th>类型</th><th>实名信息</th><th>注册时间</th><th>申请材料</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><div class="row gap-8"><div class="ava" style="background:var(--gradient-2)">林</div><div><div class="bold">@林晓萌</div><div class="text-xs text-3">普通用户</div></div></div></td>
                <td>138****2233</td>
                <td><span class="tag">宠物主人</span></td>
                <td>✓ 已实名 · 身份证通过</td>
                <td class="text-xs">2 小时前</td>
                <td><button class="btn-text">查看资料</button></td>
                <td><button class="btn-text" style="color:var(--success)">通过</button> <button class="btn-text" style="color:var(--danger)">驳回</button></td>
              </tr>
              <tr>
                <td><div class="row gap-8"><div class="ava" style="background:var(--gradient-3)">陈</div><div><div class="bold">@陈医生</div><div class="text-xs text-3">从业者</div></div></div></td>
                <td>139****5566</td>
                <td><span class="tag blue">从业者</span></td>
                <td>✓ 兽医资格证 · 待复核</td>
                <td class="text-xs">3 小时前</td>
                <td><button class="btn-text">查看证书</button></td>
                <td><button class="btn-text" style="color:var(--success)">通过</button> <button class="btn-text" style="color:var(--danger)">驳回</button></td>
              </tr>
              <tr>
                <td><div class="row gap-8"><div class="ava" style="background:var(--gradient-4)">吴</div><div><div class="bold">@吴家有猫</div><div class="text-xs text-3">普通用户</div></div></div></td>
                <td>137****8899</td>
                <td><span class="tag">宠物主人</span></td>
                <td>未实名</td>
                <td class="text-xs">5 小时前</td>
                <td><button class="btn-text">查看资料</button></td>
                <td><button class="btn-text" style="color:var(--success)">通过</button> <button class="btn-text" style="color:var(--danger)">驳回</button></td>
              </tr>
              <tr>
                <td><div class="row gap-8"><div class="ava" style="background:var(--gradient-1)">王</div><div><div class="bold">@王宠物店</div><div class="text-xs text-3">商家</div></div></div></td>
                <td>186****1122</td>
                <td><span class="tag purple">商家</span></td>
                <td>✓ 营业执照 · 兽药许可</td>
                <td class="text-xs">昨天 16:42</td>
                <td><button class="btn-text">查看材料</button></td>
                <td><button class="btn-text" style="color:var(--success)">通过</button> <button class="btn-text" style="color:var(--danger)">驳回</button></td>
              </tr>
              <tr>
                <td><div class="row gap-8"><div class="ava" style="background:var(--gradient-2)">赵</div><div><div class="bold">@赵小宠</div><div class="text-xs text-3">普通用户</div></div></div></td>
                <td>188****7766</td>
                <td><span class="tag">宠物主人</span></td>
                <td>✓ 已实名</td>
                <td class="text-xs">昨天 14:08</td>
                <td><button class="btn-text">查看资料</button></td>
                <td><button class="btn-text" style="color:var(--success)">通过</button> <button class="btn-text" style="color:var(--danger)">驳回</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="user-bans">
        <div class="page-header">
          <div>
            <h1>用户封禁管理</h1>
            <div class="sub">违规用户封禁/解封记录</div>
          </div>
          <div class="actions"><button class="btn">📥 导出记录</button></div>
        </div>
<div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索用户/手机号" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">封禁状态 ▾</button>
            <button class="filter">违规类型 ▾</button>
            <button class="filter">时间 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">封禁中 2 / 历史 86</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>用户</th><th>手机号</th><th>违规类型</th><th>违规原因</th><th>封禁时长</th><th>操作人</th><th>封禁时间</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><div class="row gap-8"><div class="ava" style="background:var(--danger);color:#fff">违</div><div><div class="bold">@违规用户_22</div><div class="text-xs text-3">U10090</div></div></div></td>
                <td>188****9999</td>
                <td><span class="tag red">广告营销</span></td>
                <td class="text-sm">发布违规广告内容，含联系方式</td>
                <td>30 天</td>
                <td>超级管理员</td>
                <td class="text-xs">2026-08-25 14:32</td>
                <td><span class="tag red">封禁中</span></td>
                <td><button class="btn-text" style="color:var(--success)">解封</button> <button class="btn-text">详情</button></td>
              </tr>
              <tr>
                <td><div class="row gap-8"><div class="ava" style="background:var(--danger);color:#fff">骂</div><div><div class="bold">@骂人用户_08</div><div class="text-xs text-3">U10108</div></div></div></td>
                <td>186****3333</td>
                <td><span class="tag red">人身攻击</span></td>
                <td class="text-sm">多次在动态评论中辱骂他人</td>
                <td>7 天</td>
                <td>运营-小王</td>
                <td class="text-xs">2026-08-24 10:18</td>
                <td><span class="tag red">封禁中</span></td>
                <td><button class="btn-text" style="color:var(--success)">解封</button> <button class="btn-text">详情</button></td>
              </tr>
              <tr>
                <td><div class="row gap-8"><div class="ava" style="background:var(--gradient-1)">@</div><div><div class="bold">@虚假评价_45</div><div class="text-xs text-3">U10145</div></div></div></td>
                <td>139****0000</td>
                <td><span class="tag yellow">虚假评价</span></td>
                <td class="text-sm">商家投诉，疑似同行恶意差评</td>
                <td>永久</td>
                <td>审核-小李</td>
                <td class="text-xs">2026-08-20 09:42</td>
                <td><span class="tag">已解封</span></td>
                <td><button class="btn-text">详情</button></td>
              </tr>
              <tr>
                <td><div class="row gap-8"><div class="ava" style="background:var(--gradient-3)">@</div><div><div class="bold">@账号_66</div><div class="text-xs text-3">U10066</div></div></div></td>
                <td>132****5566</td>
                <td><span class="tag">刷单</span></td>
                <td class="text-sm">系统检测异常下单行为</td>
                <td>3 天</td>
                <td>系统自动</td>
                <td class="text-xs">2026-08-15 22:08</td>
                <td><span class="tag green">已解封</span></td>
                <td><button class="btn-text">详情</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="pet-breeds">
        <div class="page-header">
          <div>
            <h1>宠物品种管理</h1>
            <div class="sub">管理宠物品种和异宠细分类</div>
          </div>
          <div class="actions"><button class="btn">📥 导出</button><button class="btn btn-primary">+ 新增品种</button></div>
        </div>
<div class="grid grid-3">
          <div class="card">
            <div class="card-header"><h3>🐶 狗狗品种 <span class="tag gray" style="margin-left:8px">86 个</span></h3><button class="btn-text">+ 新增</button></div>
            <div class="text-sm text-2" style="margin-bottom:8px">常见品种管理</div>
            <div class="row gap-6" style="flex-wrap:wrap">
              <span class="tag">金毛 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag">柯基 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag">柴犬 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag">哈士奇 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag">拉布拉多 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag">边牧 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag">泰迪 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag">比熊 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag gray">+ 添加</span>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><h3>🐱 猫咪品种 <span class="tag gray" style="margin-left:8px">68 个</span></h3><button class="btn-text">+ 新增</button></div>
            <div class="text-sm text-2" style="margin-bottom:8px">常见品种管理</div>
            <div class="row gap-6" style="flex-wrap:wrap">
              <span class="tag">英短 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag">美短 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag">布偶 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag">暹罗 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag">橘猫 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag">蓝猫 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag">缅因 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag">加菲 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag gray">+ 添加</span>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><h3>🐹 异宠大类 <span class="tag gray" style="margin-left:8px">5 大类</span></h3><button class="btn-text">+ 新增</button></div>
            <div class="text-sm text-2" style="margin-bottom:8px">细分类（见异宠分类页）</div>
            <div class="row gap-6" style="flex-wrap:wrap">
              <span class="tag green">兔类 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag green">啮齿类 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag green">鸟类 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag green">爬行类 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag green">水族类 <button style="background:transparent;border:0;color:var(--text-3);cursor:pointer">×</button></span>
              <span class="tag gray">+ 添加</span>
            </div>
          </div>
        </div>
        <div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索品种" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">大类 ▾</button>
            <button class="filter">状态 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 159 个品种</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>品种名称</th><th>大类</th><th>英文名</th><th>使用宠物数</th><th>创建时间</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr><td class="bold">金毛寻回犬</td><td><span class="tag blue">犬</span></td><td class="text-3">Golden Retriever</td><td>2,486</td><td class="text-xs">2024-01-15</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td class="bold">英国短毛猫</td><td><span class="tag purple">猫</span></td><td class="text-3">British Shorthair</td><td>3,128</td><td class="text-xs">2024-01-15</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td class="bold">荷兰垂耳兔</td><td><span class="tag green">异宠/兔类</span></td><td class="text-3">Holland Lop</td><td>528</td><td class="text-xs">2024-03-20</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td class="bold">玄凤鹦鹉</td><td><span class="tag green">异宠/鸟类</span></td><td class="text-3">Cockatiel</td><td>342</td><td class="text-xs">2024-05-08</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td class="bold">玉米蛇</td><td><span class="tag green">异宠/爬行</span></td><td class="text-3">Corn Snake</td><td>86</td><td class="text-xs">2024-08-12</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td class="bold">银龙鱼</td><td><span class="tag green">异宠/水族</span></td><td class="text-3">Silver Arowana</td><td>52</td><td class="text-xs">2025-02-18</td><td><span class="tag">已废弃</span></td><td><button class="btn-text">编辑</button><button class="btn-text">启用</button></td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="vaccines">
        <div class="page-header">
          <div>
            <h1>疫苗记录管理</h1>
            <div class="sub">所有宠物的疫苗接种记录</div>
          </div>
          <div class="actions"><button class="btn">📥 导出</button><button class="btn btn-primary">+ 录入记录</button></div>
        </div>
<div class="grid grid-4">
<div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">💉</div>
            <div class="info">
              <div class="lbl">总接种数</div>
              <div class="val">128,460</div>
              <div class="delta">↑ 12% 较上月</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">✓</div>
            <div class="info">
              <div class="lbl">已完成</div>
              <div class="val">108,242</div>
              <div class="delta">84.3%</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">⏰</div>
            <div class="info">
              <div class="lbl">即将到期</div>
              <div class="val">8,486</div>
              <div class="delta">未来 30 天</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">⚠</div>
            <div class="info">
              <div class="lbl">已过期</div>
              <div class="val">1,256</div>
              <div class="delta">需提醒</div>
            </div>
          </div>
        </div>
        <div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索宠物/主人" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">疫苗类型 ▾</button>
            <button class="filter">状态 ▾</button>
            <button class="filter">接种时间 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 128,460 条</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>宠物</th><th>主人</th><th>疫苗名称</th><th>接种日期</th><th>下次接种</th><th>接种医院</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><div class="row gap-8"><div class="ava" style="background:var(--gradient-1);width:32px;height:32px;font-size:14px">团</div><div><div class="bold">团团</div><div class="text-xs text-3">橘猫</div></div></div></td>
                <td>@萌主小米</td>
                <td>猫三联（第二针）</td>
                <td>2026-08-15</td>
                <td>2027-08-15</td>
                <td>爱诺宠物医院</td>
                <td><span class="tag green">已完成</span></td>
                <td><button class="btn-text">查看证书</button></td>
              </tr>
              <tr>
                <td><div class="row gap-8"><div class="ava" style="background:var(--gradient-2);width:32px;height:32px;font-size:14px">豆</div><div><div class="bold">豆豆</div><div class="text-xs text-3">柯基</div></div></div></td>
                <td>@萌主小米</td>
                <td>狂犬疫苗</td>
                <td>2024-06-08</td>
                <td>2026-06-08</td>
                <td>爱诺宠物医院</td>
                <td><span class="tag red">已过期</span></td>
                <td><button class="btn-text" style="color:var(--primary)">提醒主人</button></td>
              </tr>
              <tr>
                <td><div class="row gap-8"><div class="ava" style="background:var(--gradient-3);width:32px;height:32px;font-size:14px">布</div><div><div class="bold">布丁</div><div class="text-xs text-3">英短</div></div></div></td>
                <td>@阿柴不会飞</td>
                <td>猫三联（第一针）</td>
                <td>2026-08-20</td>
                <td>2026-09-20</td>
                <td>望京异宠专科</td>
                <td><span class="tag yellow">即将到期</span></td>
                <td><button class="btn-text">查看</button></td>
              </tr>
              <tr>
                <td><div class="row gap-8"><div class="ava" style="background:var(--gradient-4);width:32px;height:32px;font-size:14px">雪</div><div><div class="bold">雪球</div><div class="text-xs text-3">荷兰兔</div></div></div></td>
                <td>@毛茸茸的雪球</td>
                <td>兔出血症疫苗</td>
                <td>2025-01-08</td>
                <td>2026-01-08</td>
                <td>爱诺异宠诊疗中心</td>
                <td><span class="tag red">已过期</span></td>
                <td><button class="btn-text" style="color:var(--primary)">提醒主人</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="service-subcategories">
        <div class="page-header">
          <div>
            <h1>服务细分类管理</h1>
            <div class="sub">医院/美容/宠物店内服务的细分类别</div>
          </div>
          <div class="actions"><button class="btn">排序管理</button><button class="btn btn-primary">+ 新增细分类</button></div>
        </div>
<div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索细分类" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">所属大类 ▾</button>
            <button class="filter">状态 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 32 个细分类</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>细分类名称</th><th>所属大类</th><th>图标</th><th>关联服务数</th><th>排序</th><th>创建时间</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr><td class="bold">疫苗接种</td><td><span class="tag blue">医院</span></td><td>💉</td><td>6</td><td>1</td><td class="text-xs">2024-01-10</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td class="bold">基础体检</td><td><span class="tag blue">医院</span></td><td>🩺</td><td>8</td><td>2</td><td class="text-xs">2024-01-10</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td class="bold">驱虫</td><td><span class="tag blue">医院</span></td><td>💊</td><td>4</td><td>3</td><td class="text-xs">2024-01-10</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td class="bold">外科</td><td><span class="tag blue">医院</span></td><td>🩹</td><td>12</td><td>4</td><td class="text-xs">2024-01-10</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td class="bold">骨科</td><td><span class="tag blue">医院</span></td><td>🦴</td><td>8</td><td>5</td><td class="text-xs">2024-01-10</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td class="bold">内科</td><td><span class="tag blue">医院</span></td><td>🫀</td><td>10</td><td>6</td><td class="text-xs">2024-01-10</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td class="bold">眼科</td><td><span class="tag blue">医院</span></td><td>👁</td><td>6</td><td>7</td><td class="text-xs">2024-01-10</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td class="bold">口腔护理</td><td><span class="tag blue">医院</span></td><td>🦷</td><td>5</td><td>8</td><td class="text-xs">2024-01-10</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td class="bold">洗澡</td><td><span class="tag">美容</span></td><td>🛁</td><td>4</td><td>1</td><td class="text-xs">2024-01-10</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td class="bold">造型</td><td><span class="tag">美容</span></td><td>✂️</td><td>6</td><td>2</td><td class="text-xs">2024-01-10</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="acceptance-types">
        <div class="page-header">
          <div>
            <h1>可接诊宠物管理</h1>
            <div class="sub">医院可接诊宠物类型和接诊数量配置</div>
          </div>
          <div class="actions"></div>
        </div>
<div class="card">
          <div class="card-header"><h3>🏥 医院接诊配置</h3><button class="btn btn-primary" style="padding:6px 14px;font-size:13px">+ 新增配置</button></div>
          <table class="t">
            <thead>
              <tr><th>医院</th><th>可接诊类型</th><th>日最大接诊数</th><th>当前预约数</th><th>预约率</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><div class="row gap-8"><div class="ico" style="background:var(--gradient-1);color:#fff;width:32px;height:32px">🏥</div><div><div class="bold">爱诺宠物医院</div><div class="text-xs text-3">朝阳店</div></div></div></td>
                <td><span class="tag">犬</span> <span class="tag">猫</span> <span class="tag green">异宠</span></td>
                <td>50 / 日</td>
                <td>38</td>
                <td><div class="row gap-6"><div style="width:80px;height:6px;background:var(--line-2);border-radius:3px;overflow:hidden"><div style="height:100%;width:76%;background:var(--gradient-1)"></div></div><span class="text-xs">76%</span></div></td>
                <td><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td><div class="row gap-8"><div class="ico" style="background:var(--gradient-2);color:#fff;width:32px;height:32px">🏥</div><div><div class="bold">望京异宠专科</div><div class="text-xs text-3">望京</div></div></div></td>
                <td><span class="tag green">异宠</span> <span class="tag">兔</span> <span class="tag">鸟</span> <span class="tag">爬</span></td>
                <td>30 / 日</td>
                <td>22</td>
                <td><div class="row gap-6"><div style="width:80px;height:6px;background:var(--line-2);border-radius:3px;overflow:hidden"><div style="height:100%;width:73%;background:var(--gradient-2)"></div></div><span class="text-xs">73%</span></div></td>
                <td><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td><div class="row gap-8"><div class="ico" style="background:var(--gradient-3);color:#fff;width:32px;height:32px">🏥</div><div><div class="bold">康宁宠物诊所</div><div class="text-xs text-3">丰台</div></div></div></td>
                <td><span class="tag">犬</span> <span class="tag">猫</span></td>
                <td>20 / 日</td>
                <td>8</td>
                <td><div class="row gap-6"><div style="width:80px;height:6px;background:var(--line-2);border-radius:3px;overflow:hidden"><div style="height:100%;width:40%;background:var(--gradient-3)"></div></div><span class="text-xs">40%</span></div></td>
                <td><button class="btn-text">编辑</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="coupon-tags">
        <div class="page-header">
          <div>
            <h1>优惠标签管理</h1>
            <div class="sub">管理商家优惠标签</div>
          </div>
          <div class="actions"><button class="btn btn-primary">+ 新增标签</button></div>
        </div>
<div class="grid grid-3">
          <div class="card" style="background:linear-gradient(135deg,#FFF1EB,#FFE4D6)">
            <div class="row" style="justify-content:space-between;align-items:center;margin-bottom:12px">
              <div class="text-lg bold" style="color:var(--primary)">🏷️ 新客 8 折</div>
              <span class="tag green">启用</span>
            </div>
            <div class="text-sm text-2">首次下单用户专享</div>
            <div class="row gap-6" style="margin-top:10px"><span class="text-xs text-3">关联商家 86 家</span></div>
          </div>
          <div class="card" style="background:linear-gradient(135deg,#E8F4FF,#D6EAFF)">
            <div class="row" style="justify-content:space-between;align-items:center;margin-bottom:12px">
              <div class="text-lg bold" style="color:var(--info)">⭐ 好评优选</div>
              <span class="tag green">启用</span>
            </div>
            <div class="text-sm text-2">4.8 分以上商家</div>
            <div class="row gap-6" style="margin-top:10px"><span class="text-xs text-3">关联商家 32 家</span></div>
          </div>
          <div class="card" style="background:linear-gradient(135deg,#E8FFF1,#D6FFE4)">
            <div class="row" style="justify-content:space-between;align-items:center;margin-bottom:12px">
              <div class="text-lg bold" style="color:var(--success)">🌸 当季推荐</div>
              <span class="tag green">启用</span>
            </div>
            <div class="text-sm text-2">夏季美容优惠</div>
            <div class="row gap-6" style="margin-top:10px"><span class="text-xs text-3">关联商家 24 家</span></div>
          </div>
        </div>
        <div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索标签" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">类型 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 12 个标签</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>标签</th><th>描述</th><th>类型</th><th>背景</th><th>关联商家</th><th>使用次数</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr><td><span class="tag" style="background:linear-gradient(135deg,#FF6B35,#FF8E53);color:#fff">新客 8 折</span></td><td>首次下单用户专享 8 折</td><td>折扣</td><td>橙渐变</td><td>86</td><td>1,286</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td><span class="tag" style="background:linear-gradient(135deg,#4D96FF,#6BB0FF);color:#fff">好评优选</span></td><td>4.8 分以上商家</td><td>标签</td><td>蓝渐变</td><td>32</td><td>4,562</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td><span class="tag" style="background:linear-gradient(135deg,#06D6A0,#4DE0B8);color:#fff">当季推荐</span></td><td>夏季美容优惠</td><td>活动</td><td>绿渐变</td><td>24</td><td>892</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td><span class="tag" style="background:linear-gradient(135deg,#A78BFA,#C4B5FD);color:#fff">VIP 专享</span></td><td>VIP 用户额外 9 折</td><td>折扣</td><td>紫渐变</td><td>120</td><td>3,128</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td></tr>
              <tr><td><span class="tag" style="background:linear-gradient(135deg,#FFD93D,#FFE66D);color:#333">满 200 减 30</span></td><td>订单满 200 减 30</td><td>满减</td><td>黄渐变</td><td>56</td><td>1,842</td><td><span class="tag">禁用</span></td><td><button class="btn-text">编辑</button><button class="btn-text">启用</button></td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="exotic-categories">
        <div class="page-header">
          <div>
            <h1>异宠分类管理</h1>
            <div class="sub">管理异宠细分（兔/啮齿/鸟/爬行/水族）</div>
          </div>
          <div class="actions"></div>
        </div>
<div class="grid grid-3">
          <div class="card">
            <div class="card-header"><h3>🐰 兔类 <span class="tag gray" style="margin-left:8px">24 种</span></h3><button class="btn-text">+</button></div>
            <div class="row gap-6" style="flex-wrap:wrap;margin-bottom:8px">
              <span class="tag">荷兰垂耳兔</span><span class="tag">荷兰侏儒兔</span><span class="tag">安哥拉兔</span>
            </div>
            <div class="text-xs text-3">关联医院 8 家 · 诊疗配置已启用</div>
          </div>
          <div class="card">
            <div class="card-header"><h3>🐹 啮齿类 <span class="tag gray" style="margin-left:8px">32 种</span></h3><button class="btn-text">+</button></div>
            <div class="row gap-6" style="flex-wrap:wrap;margin-bottom:8px">
              <span class="tag">仓鼠</span><span class="tag">豚鼠</span><span class="tag">龙猫</span><span class="tag">刺猬</span>
            </div>
            <div class="text-xs text-3">关联医院 6 家 · 诊疗配置已启用</div>
          </div>
          <div class="card">
            <div class="card-header"><h3>🦜 鸟类 <span class="tag gray" style="margin-left:8px">28 种</span></h3><button class="btn-text">+</button></div>
            <div class="row gap-6" style="flex-wrap:wrap;margin-bottom:8px">
              <span class="tag">玄凤鹦鹉</span><span class="tag">虎皮鹦鹉</span><span class="tag">文鸟</span>
            </div>
            <div class="text-xs text-3">关联医院 5 家 · 诊疗配置已启用</div>
          </div>
          <div class="card">
            <div class="card-header"><h3>🦎 爬行类 <span class="tag gray" style="margin-left:8px">18 种</span></h3><button class="btn-text">+</button></div>
            <div class="row gap-6" style="flex-wrap:wrap;margin-bottom:8px">
              <span class="tag">玉米蛇</span><span class="tag">鬃狮蜥</span><span class="tag">陆龟</span>
            </div>
            <div class="text-xs text-3">关联医院 4 家 · 诊疗配置已启用</div>
          </div>
          <div class="card">
            <div class="card-header"><h3>🐟 水族类 <span class="tag gray" style="margin-left:8px">12 种</span></h3><button class="btn-text">+</button></div>
            <div class="row gap-6" style="flex-wrap:wrap;margin-bottom:8px">
              <span class="tag">金鱼</span><span class="tag">锦鲤</span><span class="tag">银龙鱼</span>
            </div>
            <div class="text-xs text-3">关联医院 3 家 · 诊疗配置已启用</div>
          </div>
          <div class="card" style="background:linear-gradient(135deg,#FFF1EB,#FFE4D6);border:2px dashed var(--primary);display:flex;align-items:center;justify-content:center;min-height:160px;cursor:pointer">
            <div class="text-center">
              <div style="font-size:32px;color:var(--primary)">+</div>
              <div class="text-sm bold" style="color:var(--primary);margin-top:8px">添加新分类</div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header"><h3>📊 异宠分类统计</h3></div>
          <div class="grid grid-5">
            <div class="text-center"><div class="text-2xl bold" style="color:var(--primary)">24</div><div class="text-xs text-2">兔类品种</div></div>
            <div class="text-center"><div class="text-2xl bold" style="color:var(--info)">32</div><div class="text-xs text-2">啮齿类品种</div></div>
            <div class="text-center"><div class="text-2xl bold" style="color:var(--success)">28</div><div class="text-xs text-2">鸟类品种</div></div>
            <div class="text-center"><div class="text-2xl bold" style="color:var(--warning)">18</div><div class="text-xs text-2">爬行类品种</div></div>
            <div class="text-center"><div class="text-2xl bold" style="color:var(--purple, #A78BFA)">12</div><div class="text-xs text-2">水族类品种</div></div>
          </div>
        </div>
      </div>

      <div class="screen" data-screen="registrations">
        <div class="page-header">
          <div>
            <h1>挂号管理</h1>
            <div class="sub">用户挂号记录</div>
          </div>
          <div class="actions"><button class="btn">📥 导出</button></div>
        </div>
<div class="grid grid-4">
<div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">📅</div>
            <div class="info">
              <div class="lbl">今日挂号</div>
              <div class="val">326</div>
              <div class="delta">↑ 8.2% 较昨日</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">⏳</div>
            <div class="info">
              <div class="lbl">待就诊</div>
              <div class="val">86</div>
              <div class="delta">需 24h 内处理</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">✓</div>
            <div class="info">
              <div class="lbl">已完成</div>
              <div class="val">12,486</div>
              <div class="delta">本月</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">❌</div>
            <div class="info">
              <div class="lbl">取消/违约</div>
              <div class="val">32</div>
              <div class="delta">违约率 1.2%</div>
            </div>
          </div>
        </div>
        <div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索用户/宠物/医院" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">状态 ▾</button>
            <button class="filter">医院 ▾</button>
            <button class="filter">挂号时间 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 12,840 条</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>挂号单号</th><th>用户</th><th>宠物</th><th>挂号医院</th><th>科室</th><th>预约时间</th><th>挂号费</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td class="bold" style="color:var(--primary)">#R20260825001</td>
                <td>@萌主小米</td>
                <td>团团 · 橘猫</td>
                <td>爱诺宠物医院</td>
                <td>内科</td>
                <td class="text-xs">2026-08-25 14:30</td>
                <td>¥10</td>
                <td><span class="tag yellow">待就诊</span></td>
                <td><button class="btn-text">详情</button></td>
              </tr>
              <tr>
                <td class="bold" style="color:var(--primary)">#R20260825002</td>
                <td>@阿柴不会飞</td>
                <td>布丁 · 英短</td>
                <td>望京异宠专科</td>
                <td>外科</td>
                <td class="text-xs">2026-08-25 15:00</td>
                <td>¥20</td>
                <td><span class="tag yellow">待就诊</span></td>
                <td><button class="btn-text">详情</button></td>
              </tr>
              <tr>
                <td class="bold">#R20260824015</td>
                <td>@柴犬团子</td>
                <td>团子 · 柴犬</td>
                <td>爱诺宠物医院</td>
                <td>疫苗</td>
                <td class="text-xs">2026-08-24 10:00</td>
                <td>¥10</td>
                <td><span class="tag green">已完成</span></td>
                <td><button class="btn-text">详情</button></td>
              </tr>
              <tr>
                <td class="bold">#R20260824008</td>
                <td>@毛茸茸的雪球</td>
                <td>雪球 · 荷兰兔</td>
                <td>爱诺异宠诊疗中心</td>
                <td>异宠科</td>
                <td class="text-xs">2026-08-24 14:30</td>
                <td>¥30</td>
                <td><span class="tag green">已完成</span></td>
                <td><button class="btn-text">详情</button></td>
              </tr>
              <tr>
                <td class="bold">#R20260823021</td>
                <td>@违规用户_22</td>
                <td>小黑 · 田园猫</td>
                <td>康宁宠物诊所</td>
                <td>内科</td>
                <td class="text-xs">2026-08-23 11:00</td>
                <td>¥10</td>
                <td><span class="tag red">违约取消</span></td>
                <td><button class="btn-text">详情</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="banners">
        <div class="page-header">
          <div>
            <h1>Banner管理</h1>
            <div class="sub">首页轮播图配置</div>
          </div>
          <div class="actions"><button class="btn btn-primary">+ 新增 Banner</button></div>
        </div>
<div class="row" style="gap:16px;flex-wrap:wrap">
          <div class="card" style="width:280px;padding:0;overflow:hidden;cursor:pointer">
            <div style="height:140px;background:linear-gradient(135deg,#FF6B35,#FF8E53);display:flex;align-items:center;justify-content:center;color:#fff;font-size:48px">🐾</div>
            <div style="padding:12px">
              <div class="bold">新用户首单立减 20 元</div>
              <div class="text-xs text-3" style="margin-top:4px">跳转：活动页 / 排序 1</div>
              <div class="row gap-6" style="margin-top:8px"><span class="tag green">显示中</span><span class="tag gray">2026-08-01 ~ 2026-09-30</span></div>
            </div>
          </div>
          <div class="card" style="width:280px;padding:0;overflow:hidden;cursor:pointer">
            <div style="height:140px;background:linear-gradient(135deg,#4D96FF,#6BB0FF);display:flex;align-items:center;justify-content:center;color:#fff;font-size:48px">🏥</div>
            <div style="padding:12px">
              <div class="bold">8 月医保优惠活动开启</div>
              <div class="text-xs text-3" style="margin-top:4px">跳转：医保详情 / 排序 2</div>
              <div class="row gap-6" style="margin-top:8px"><span class="tag green">显示中</span><span class="tag gray">2026-08-15 ~ 2026-08-31</span></div>
            </div>
          </div>
          <div class="card" style="width:280px;padding:0;overflow:hidden;cursor:pointer">
            <div style="height:140px;background:linear-gradient(135deg,#06D6A0,#4DE0B8);display:flex;align-items:center;justify-content:center;color:#fff;font-size:48px">🐰</div>
            <div style="padding:12px">
              <div class="bold">异宠诊疗专题上线</div>
              <div class="text-xs text-3" style="margin-top:4px">跳转：异宠医院列表 / 排序 3</div>
              <div class="row gap-6" style="margin-top:8px"><span class="tag green">显示中</span><span class="tag gray">长期</span></div>
            </div>
          </div>
          <div class="card" style="width:280px;padding:0;overflow:hidden;cursor:pointer;border:2px dashed var(--line-2);display:flex;align-items:center;justify-content:center;min-height:240px">
            <div class="text-center">
              <div style="font-size:48px;color:var(--primary)">+</div>
              <div class="text-sm bold" style="color:var(--primary);margin-top:8px">添加 Banner</div>
              <div class="text-xs text-3" style="margin-top:4px">建议尺寸 750×360</div>
            </div>
          </div>
        </div>
        <div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索标题" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">状态 ▾</button>
            <button class="filter">时间 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 8 个 Banner</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>排序</th><th>封面</th><th>标题</th><th>跳转链接</th><th>有效期</th><th>点击/展示</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr><td class="bold">1</td><td><div style="width:60px;height:36px;background:linear-gradient(135deg,#FF6B35,#FF8E53);border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff">🐾</div></td><td>新用户首单立减 20 元</td><td class="text-3">/activity/newuser</td><td class="text-xs">08-01 ~ 09-30</td><td>1,286 / 12,486</td><td><span class="tag green">显示中</span></td><td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td></tr>
              <tr><td class="bold">2</td><td><div style="width:60px;height:36px;background:linear-gradient(135deg,#4D96FF,#6BB0FF);border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff">🏥</div></td><td>8 月医保优惠活动开启</td><td class="text-3">/activity/medical</td><td class="text-xs">08-15 ~ 08-31</td><td>892 / 8,420</td><td><span class="tag green">显示中</span></td><td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td></tr>
              <tr><td class="bold">3</td><td><div style="width:60px;height:36px;background:linear-gradient(135deg,#06D6A0,#4DE0B8);border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff">🐰</div></td><td>异宠诊疗专题上线</td><td class="text-3">/exotic</td><td class="text-xs">长期</td><td>526 / 4,128</td><td><span class="tag green">显示中</span></td><td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td></tr>
              <tr><td class="bold">4</td><td><div style="width:60px;height:36px;background:linear-gradient(135deg,#A78BFA,#C4B5FD);border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff">💼</div></td><td>招聘专区上线</td><td class="text-3">/jobs</td><td class="text-xs">07-20 ~ 08-20</td><td>328 / 3,420</td><td><span class="tag">已下架</span></td><td><button class="btn-text">编辑</button><button class="btn-text">上架</button></td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="announcements">
        <div class="page-header">
          <div>
            <h1>公告管理</h1>
            <div class="sub">系统公告发布</div>
          </div>
          <div class="actions"><button class="btn">📥 导出</button><button class="btn btn-primary">+ 发布公告</button></div>
        </div>
<div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              <input placeholder="搜索公告" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">类型 ▾</button>
            <button class="filter">状态 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 32 条</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>公告标题</th><th>类型</th><th>发布范围</th><th>发布人</th><th>发布时间</th><th>有效期</th><th>阅读数</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td class="bold">关于医保产品升级的公告</td>
                <td><span class="tag">系统</span></td>
                <td>全部用户</td>
                <td>超级管理员</td>
                <td class="text-xs">2026-08-25 10:00</td>
                <td class="text-xs">08-25 ~ 09-25</td>
                <td>1,286</td>
                <td><span class="tag green">已发布</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td>
              </tr>
              <tr>
                <td class="bold">8 月份新商家入驻名单</td>
                <td><span class="tag blue">运营</span></td>
                <td>全部用户</td>
                <td>运营-小王</td>
                <td class="text-xs">2026-08-20 14:00</td>
                <td class="text-xs">08-20 ~ 09-20</td>
                <td>4,562</td>
                <td><span class="tag green">已发布</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td>
              </tr>
              <tr>
                <td class="bold">8 月 26 日凌晨系统维护通知</td>
                <td><span class="tag yellow">维护</span></td>
                <td>全部用户</td>
                <td>技术-小张</td>
                <td class="text-xs">2026-08-24 18:00</td>
                <td class="text-xs">08-26 02:00 ~ 04:00</td>
                <td>892</td>
                <td><span class="tag green">已发布</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td>
              </tr>
              <tr>
                <td class="bold">违规用户处理结果公示</td>
                <td><span class="tag red">违规</span></td>
                <td>全部用户</td>
                <td>审核-小李</td>
                <td class="text-xs">2026-08-15 09:00</td>
                <td class="text-xs">已结束</td>
                <td>3,128</td>
                <td><span class="tag">已下架</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">发布</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="quick-entries">
        <div class="page-header">
          <div>
            <h1>快捷入口配置</h1>
            <div class="sub">首页快捷功能入口配置</div>
          </div>
          <div class="actions"><button class="btn">恢复默认</button><button class="btn btn-primary">保存配置</button></div>
        </div>
<div class="card">
          <div class="card-header">
            <h3>📱 首页快捷入口（拖拽调整顺序）</h3>
            <span class="text-xs text-3">共 8 个入口</span>
          </div>
          <div class="grid grid-4" style="gap:12px">
            <div class="card" style="background:linear-gradient(135deg,#FFF1EB,#FFE4D6);text-align:center;padding:20px;cursor:move">
              <div style="font-size:36px">💘</div>
              <div class="bold" style="margin-top:8px;color:var(--primary)">缘分匹配</div>
              <div class="text-xs text-3" style="margin-top:4px">位置 1</div>
            </div>
            <div class="card" style="background:linear-gradient(135deg,#E8F4FF,#D6EAFF);text-align:center;padding:20px;cursor:move">
              <div style="font-size:36px">📋</div>
              <div class="bold" style="margin-top:8px;color:var(--info)">宠物档案</div>
              <div class="text-xs text-3" style="margin-top:4px">位置 2</div>
            </div>
            <div class="card" style="background:linear-gradient(135deg,#E8FFF1,#D6FFE4);text-align:center;padding:20px;cursor:move">
              <div style="font-size:36px">🔍</div>
              <div class="bold" style="margin-top:8px;color:var(--success)">找服务</div>
              <div class="text-xs text-3" style="margin-top:4px">位置 3</div>
            </div>
            <div class="card" style="background:linear-gradient(135deg,#FEF3E2,#FDE4C0);text-align:center;padding:20px;cursor:move">
              <div style="font-size:36px">💉</div>
              <div class="bold" style="margin-top:8px;color:var(--warning)">疫苗提醒</div>
              <div class="text-xs text-3" style="margin-top:4px">位置 4</div>
            </div>
            <div class="card" style="background:linear-gradient(135deg,#F3E8FF,#E4D6FF);text-align:center;padding:20px;cursor:move">
              <div style="font-size:36px">📅</div>
              <div class="bold" style="margin-top:8px;color:#A78BFA">预约挂号</div>
              <div class="text-xs text-3" style="margin-top:4px">位置 5</div>
            </div>
            <div class="card" style="background:linear-gradient(135deg,#FFE4F0,#FFD6E4);text-align:center;padding:20px;cursor:move">
              <div style="font-size:36px">🛡️</div>
              <div class="bold" style="margin-top:8px;color:#FF6B9D">宠物医保</div>
              <div class="text-xs text-3" style="margin-top:4px">位置 6</div>
            </div>
            <div class="card" style="background:linear-gradient(135deg,#E0F7FF,#C6EBFF);text-align:center;padding:20px;cursor:move">
              <div style="font-size:36px">💼</div>
              <div class="bold" style="margin-top:8px;color:#06AED5">招聘专区</div>
              <div class="text-xs text-3" style="margin-top:4px">位置 7</div>
            </div>
            <div class="card" style="background:linear-gradient(135deg,#FFEFE5,#FFE0CC);text-align:center;padding:20px;cursor:move">
              <div style="font-size:36px">🍽️</div>
              <div class="bold" style="margin-top:8px;color:#FF6B35">喂食提醒</div>
              <div class="text-xs text-3" style="margin-top:4px">位置 8</div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header"><h3>⚙️ 快捷入口配置</h3></div>
          <div class="info-list">
            <div class="row"><span class="lbl">入口数量</span><span class="val">8 个（首页展示）</span></div>
            <div class="row"><span class="lbl">入口样式</span><span class="val">图标 + 文字（横向 4 列布局）</span></div>
            <div class="row"><span class="lbl">数据来源</span><span class="val">用户最近使用 + 系统推荐</span></div>
            <div class="row"><span class="lbl">更新频率</span><span class="val">实时</span></div>
            <div class="row"><span class="lbl">运营策略</span><span class="val">前 4 个为推荐位（不可调换），后 4 个为热门功能</span></div>
          </div>
        </div>
      </div>

      <div class="screen" data-screen="recommend-services">
        <div class="page-header">
          <div>
            <h1>推荐服务配置</h1>
            <div class="sub">首页推荐服务（医院/美容店）展示顺序与权重</div>
          </div>
          <div class="actions"><button class="btn">智能排序</button><button class="btn btn-primary">+ 添加推荐</button></div>
        </div>
<div class="row" style="gap:12px;margin-bottom:16px">
          <div class="card stat-card" style="flex:1">
            <div class="ico" style="background:var(--gradient-1);color:#fff">🏥</div>
            <div class="info"><div class="lbl">医院推荐位</div><div class="val">6</div><div class="delta">首页展示 6 家</div></div>
          </div>
          <div class="card stat-card" style="flex:1">
            <div class="ico" style="background:var(--gradient-2);color:#fff">✂️</div>
            <div class="info"><div class="lbl">美容店推荐位</div><div class="val">4</div><div class="delta">首页展示 4 家</div></div>
          </div>
          <div class="card stat-card" style="flex:1">
            <div class="ico" style="background:var(--gradient-3);color:#fff">📊</div>
            <div class="info"><div class="lbl">今日点击</div><div class="val">1,286</div><div class="delta">↑ 8.2%</div></div>
          </div>
        </div>
        <div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <input placeholder="搜索商家" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">类型 ▾</button>
            <button class="filter">状态 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 10 个推荐位</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>排序</th><th>推荐位</th><th>商家</th><th>类型</th><th>评分</th><th>推荐权重</th><th>有效期</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr><td class="bold">1</td><td><span class="tag red">置顶</span></td><td>爱诺宠物医院 · 朝阳店</td><td><span class="tag blue">医院</span></td><td>★★★★★ 4.9</td><td><div class="row gap-6"><div style="width:60px;height:6px;background:var(--line-2);border-radius:3px;overflow:hidden"><div style="height:100%;width:95%;background:var(--gradient-1)"></div></div><span>95</span></div></td><td class="text-xs">长期</td><td><span class="tag green">推荐中</span></td><td><button class="btn-text">编辑</button><button class="btn-text">取消</button></td></tr>
              <tr><td class="bold">2</td><td><span class="tag red">置顶</span></td><td>望京异宠专科</td><td><span class="tag green">异宠</span></td><td>★★★★★ 4.8</td><td><div class="row gap-6"><div style="width:60px;height:6px;background:var(--line-2);border-radius:3px;overflow:hidden"><div style="height:100%;width:88%;background:var(--gradient-1)"></div></div><span>88</span></div></td><td class="text-xs">长期</td><td><span class="tag green">推荐中</span></td><td><button class="btn-text">编辑</button><button class="btn-text">取消</button></td></tr>
              <tr><td class="bold">3</td><td>-</td><td>萌宠造型工作室</td><td><span class="tag">美容</span></td><td>★★★★★ 4.8</td><td><div class="row gap-6"><div style="width:60px;height:6px;background:var(--line-2);border-radius:3px;overflow:hidden"><div style="height:100%;width:80%;background:var(--gradient-1)"></div></div><span>80</span></div></td><td class="text-xs">长期</td><td><span class="tag green">推荐中</span></td><td><button class="btn-text">编辑</button><button class="btn-text">取消</button></td></tr>
              <tr><td class="bold">4</td><td>-</td><td>PETU 宠物综合店</td><td><span class="tag purple">宠物店</span></td><td>★★★★☆ 4.6</td><td><div class="row gap-6"><div style="width:60px;height:6px;background:var(--line-2);border-radius:3px;overflow:hidden"><div style="height:100%;width:72%;background:var(--gradient-1)"></div></div><span>72</span></div></td><td class="text-xs">长期</td><td><span class="tag green">推荐中</span></td><td><button class="btn-text">编辑</button><button class="btn-text">取消</button></td></tr>
              <tr><td class="bold">5</td><td>-</td><td>康宁宠物诊所</td><td><span class="tag blue">医院</span></td><td>★★★★☆ 4.5</td><td><div class="row gap-6"><div style="width:60px;height:6px;background:var(--line-2);border-radius:3px;overflow:hidden"><div style="height:100%;width:65%;background:var(--gradient-1)"></div></div><span>65</span></div></td><td class="text-xs">08-20 ~ 09-20</td><td><span class="tag green">推荐中</span></td><td><button class="btn-text">编辑</button><button class="btn-text">取消</button></td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="recommend-posts">
        <div class="page-header">
          <div>
            <h1>热门动态推荐</h1>
            <div class="sub">首页热门动态推荐内容和排序</div>
          </div>
          <div class="actions"></div>
        </div>
<div class="card">
          <div class="card-header"><h3>🔥 热门动态推荐位（首页展示 5 条）</h3><button class="btn btn-primary" style="padding:6px 14px;font-size:13px">+ 添加推荐</button></div>
          <div class="row" style="gap:12px;flex-wrap:wrap">
            <div class="card" style="width:240px;cursor:grab">
              <div class="row gap-8" style="margin-bottom:8px">
                <div class="ava" style="background:var(--gradient-1);width:28px;height:28px;font-size:12px">萌</div>
                <div style="flex:1">
                  <div class="text-sm bold">@萌主小米</div>
                  <div class="text-xs text-3">2 小时前</div>
                </div>
                <span class="tag red">置顶</span>
              </div>
              <div class="text-sm">周末带毛孩子去了新开的宠物公园，晒太阳！</div>
              <div class="row gap-6" style="margin-top:8px"><span class="text-xs text-3">❤ 328</span><span class="text-xs text-3">💬 42</span></div>
            </div>
            <div class="card" style="width:240px;cursor:grab">
              <div class="row gap-8" style="margin-bottom:8px">
                <div class="ava" style="background:var(--gradient-3);width:28px;height:28px;font-size:12px">毛</div>
                <div style="flex:1">
                  <div class="text-sm bold">@毛茸茸的雪球</div>
                  <div class="text-xs text-3">昨天</div>
                </div>
                <span class="tag">2</span>
              </div>
              <div class="text-sm">我家小兔兔第一次洗澡超配合！</div>
              <div class="row gap-6" style="margin-top:8px"><span class="text-xs text-3">❤ 186</span><span class="text-xs text-3">💬 24</span></div>
            </div>
            <div class="card" style="width:240px;cursor:grab">
              <div class="row gap-8" style="margin-bottom:8px">
                <div class="ava" style="background:var(--gradient-2);width:28px;height:28px;font-size:12px">阿</div>
                <div style="flex:1">
                  <div class="text-sm bold">@阿柴不会飞</div>
                  <div class="text-xs text-3">3 天前</div>
                </div>
                <span class="tag">3</span>
              </div>
              <div class="text-sm">求推荐适合柴犬的狗粮，目前在吃皇家，但是...</div>
              <div class="row gap-6" style="margin-top:8px"><span class="text-xs text-3">❤ 56</span><span class="text-xs text-3">💬 42</span></div>
            </div>
            <div class="card" style="width:240px;cursor:grab">
              <div class="row gap-8" style="margin-bottom:8px">
                <div class="ava" style="background:var(--gradient-4);width:28px;height:28px;font-size:12px">柴</div>
                <div style="flex:1">
                  <div class="text-sm bold">@柴犬团子</div>
                  <div class="text-xs text-3">1 周前</div>
                </div>
                <span class="tag">4</span>
              </div>
              <div class="text-sm">团子 1 岁生日，纪念一下！</div>
              <div class="row gap-6" style="margin-top:8px"><span class="text-xs text-3">❤ 526</span><span class="text-xs text-3">💬 86</span></div>
            </div>
            <div class="card" style="width:240px;cursor:grab">
              <div class="row gap-8" style="margin-bottom:8px">
                <div class="ava" style="background:var(--gradient-1);width:28px;height:28px;font-size:12px">异</div>
                <div style="flex:1">
                  <div class="text-sm bold">@异宠达人</div>
                  <div class="text-xs text-3">2 周前</div>
                </div>
                <span class="tag">5</span>
              </div>
              <div class="text-sm">陆龟饲养指南，新手必看</div>
              <div class="row gap-6" style="margin-top:8px"><span class="text-xs text-3">❤ 892</span><span class="text-xs text-3">💬 156</span></div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header"><h3>📊 推荐效果统计</h3></div>
          <div class="grid grid-4">
            <div class="text-center"><div class="text-2xl bold" style="color:var(--primary)">12,486</div><div class="text-xs text-2">本周总曝光</div></div>
            <div class="text-center"><div class="text-2xl bold" style="color:var(--info)">3,128</div><div class="text-xs text-2">总点击</div></div>
            <div class="text-center"><div class="text-2xl bold" style="color:var(--success)">25.1%</div><div class="text-xs text-2">点击率</div></div>
            <div class="text-center"><div class="text-2xl bold" style="color:var(--warning)">+18%</div><div class="text-xs text-2">互动提升</div></div>
          </div>
        </div>
      </div>

      <div class="screen" data-screen="circle-categories">
        <div class="page-header">
          <div>
            <h1>圈子分类管理</h1>
            <div class="sub">管理圈子分类（狗/猫/异宠/其他）</div>
          </div>
          <div class="actions"><button class="btn btn-primary">+ 新增分类</button></div>
        </div>
<div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <input placeholder="搜索分类" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">大类 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 12 个分类</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>分类名称</th><th>图标</th><th>所属大类</th><th>圈子数</th><th>成员数</th><th>排序</th><th>创建时间</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr><td class="bold">🐶 狗狗日常</td><td>🐶</td><td><span class="tag blue">狗</span></td><td>12</td><td>15,486</td><td>1</td><td class="text-xs">2024-01-15</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button></td></tr>
              <tr><td class="bold">🐕 大型犬</td><td>🐕</td><td><span class="tag blue">狗</span></td><td>5</td><td>3,286</td><td>2</td><td class="text-xs">2024-01-15</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button></td></tr>
              <tr><td class="bold">🐩 小型犬</td><td>🐩</td><td><span class="tag blue">狗</span></td><td>8</td><td>5,128</td><td>3</td><td class="text-xs">2024-01-15</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button></td></tr>
              <tr><td class="bold">🐱 猫咪日常</td><td>🐱</td><td><span class="tag purple">猫</span></td><td>15</td><td>18,642</td><td>4</td><td class="text-xs">2024-01-15</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button></td></tr>
              <tr><td class="bold">🐈 短毛猫</td><td>🐈</td><td><span class="tag purple">猫</span></td><td>6</td><td>4,562</td><td>5</td><td class="text-xs">2024-01-15</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button></td></tr>
              <tr><td class="bold">🐰 异宠兔</td><td>🐰</td><td><span class="tag green">异宠</span></td><td>4</td><td>1,286</td><td>6</td><td class="text-xs">2024-03-20</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button></td></tr>
              <tr><td class="bold">🐹 鼠类</td><td>🐹</td><td><span class="tag green">异宠</span></td><td>3</td><td>892</td><td>7</td><td class="text-xs">2024-03-20</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button></td></tr>
              <tr><td class="bold">🦜 鸟类</td><td>🦜</td><td><span class="tag green">异宠</span></td><td>5</td><td>1,128</td><td>8</td><td class="text-xs">2024-05-08</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button></td></tr>
              <tr><td class="bold">🦎 爬行类</td><td>🦎</td><td><span class="tag green">异宠</span></td><td>2</td><td>328</td><td>9</td><td class="text-xs">2024-08-12</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button></td></tr>
              <tr><td class="bold">🐟 水族类</td><td>🐟</td><td><span class="tag green">异宠</span></td><td>2</td><td>256</td><td>10</td><td class="text-xs">2025-02-18</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button></td></tr>
              <tr><td class="bold">💬 宠物杂谈</td><td>💬</td><td><span class="tag gray">其他</span></td><td>3</td><td>2,486</td><td>11</td><td class="text-xs">2024-02-10</td><td><span class="tag green">启用</span></td><td><button class="btn-text">编辑</button></td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="topics">
        <div class="page-header">
          <div>
            <h1>话题管理</h1>
            <div class="sub">管理动态话题标签（热门/推荐）</div>
          </div>
          <div class="actions"><button class="btn">导入话题</button><button class="btn btn-primary">+ 新建话题</button></div>
        </div>
<div class="row" style="gap:16px;flex-wrap:wrap;margin-bottom:16px">
          <div class="card" style="flex:1;min-width:280px;background:linear-gradient(135deg,#FF6B35,#FF8E53);color:#fff">
            <div class="text-sm" style="opacity:0.9">🔥 热门话题 TOP 1</div>
            <div class="text-xl bold" style="margin-top:8px">#柴犬日常</div>
            <div class="text-sm" style="margin-top:4px;opacity:0.9">12,486 动态 · 328 万阅读</div>
          </div>
          <div class="card" style="flex:1;min-width:280px;background:linear-gradient(135deg,#4D96FF,#6BB0FF);color:#fff">
            <div class="text-sm" style="opacity:0.9">🔥 热门话题 TOP 2</div>
            <div class="text-xl bold" style="margin-top:8px">#异宠日常</div>
            <div class="text-sm" style="margin-top:4px;opacity:0.9">8,128 动态 · 156 万阅读</div>
          </div>
          <div class="card" style="flex:1;min-width:280px;background:linear-gradient(135deg,#06D6A0,#4DE0B8);color:#fff">
            <div class="text-sm" style="opacity:0.9">⭐ 推荐话题</div>
            <div class="text-xl bold" style="margin-top:8px">#新手指南</div>
            <div class="text-sm" style="margin-top:4px;opacity:0.9">运营手动推荐</div>
          </div>
        </div>
        <div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <input placeholder="搜索话题" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">状态 ▾</button>
            <button class="filter">类型 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 86 个话题</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>话题</th><th>类型</th><th>动态数</th><th>阅读数</th><th>创建人</th><th>创建时间</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr><td class="bold">#柴犬日常</td><td><span class="tag red">热门</span></td><td>12,486</td><td>3,280,000</td><td>用户自发</td><td class="text-xs">2024-02-15</td><td><span class="tag green">推荐中</span></td><td><button class="btn-text">取消推荐</button></td></tr>
              <tr><td class="bold">#异宠日常</td><td><span class="tag red">热门</span></td><td>8,128</td><td>1,560,000</td><td>用户自发</td><td class="text-xs">2024-04-20</td><td><span class="tag green">推荐中</span></td><td><button class="btn-text">取消推荐</button></td></tr>
              <tr><td class="bold">#新手指南</td><td><span class="tag blue">推荐</span></td><td>3,286</td><td>892,000</td><td>运营-小王</td><td class="text-xs">2024-05-10</td><td><span class="tag green">推荐中</span></td><td><button class="btn-text">编辑</button><button class="btn-text">取消</button></td></tr>
              <tr><td class="bold">#萌宠日常</td><td><span class="tag red">热门</span></td><td>15,486</td><td>4,128,000</td><td>用户自发</td><td class="text-xs">2024-01-20</td><td><span class="tag green">推荐中</span></td><td><button class="btn-text">取消推荐</button></td></tr>
              <tr><td class="bold">#养宠知识</td><td><span class="tag">普通</span></td><td>2,128</td><td>526,000</td><td>用户自发</td><td class="text-xs">2024-06-12</td><td><span class="tag">未推荐</span></td><td><button class="btn-text" style="color:var(--primary)">推荐</button></td></tr>
              <tr><td class="bold">#领养代替购买</td><td><span class="tag blue">推荐</span></td><td>1,286</td><td>328,000</td><td>运营-小王</td><td class="text-xs">2024-08-15</td><td><span class="tag green">推荐中</span></td><td><button class="btn-text">编辑</button><button class="btn-text">取消</button></td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="review-audit">
        <div class="page-header">
          <div>
            <h1>评价审核</h1>
            <div class="sub">待审核评价 8 条</div>
          </div>
          <div class="actions"><button class="btn">📥 导出</button><button class="btn btn-primary">批量通过</button></div>
        </div>
<div class="grid grid-3">
<div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">⏳</div>
            <div class="info">
              <div class="lbl">待审核</div>
              <div class="val">8</div>
              <div class="delta">需 24h 内处理</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">✓</div>
            <div class="info">
              <div class="lbl">今日通过</div>
              <div class="val">42</div>
              <div class="delta">通过率 91%</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">✗</div>
            <div class="info">
              <div class="lbl">今日驳回</div>
              <div class="val">4</div>
              <div class="delta">违规率 9%</div>
            </div>
          </div>
        </div>
        <div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <input placeholder="搜索用户/商家" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">评分 ▾</button>
            <button class="filter">提交时间 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">待审 8 条</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>用户</th><th>商家</th><th>评分</th><th>评价内容</th><th>图片</th><th>提交时间</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><div class="row gap-8"><div class="ava" style="background:var(--gradient-1)">@</div><div><div class="bold">@萌主小米</div><text-xs class="text-3" style="font-size:11px">U10086</text-xs></div></div></td>
                <td>爱诺宠物医院</td>
                <td class="bold" style="color:var(--primary)">★★★★★ 5.0</td>
                <td class="text-sm">王医生很专业，对我家猫咪很温柔，强烈推荐！</td>
                <td><span class="tag">3 张</span></td>
                <td class="text-xs">10 分钟前</td>
                <td><button class="btn-text" style="color:var(--success)">通过</button> <button class="btn-text" style="color:var(--danger)">驳回</button></td>
              </tr>
              <tr>
                <td><div class="row gap-8"><div class="ava" style="background:var(--gradient-2)">@</div><div><div class="bold">@阿柴不会飞</div><div class="text-xs text-3">U10087</div></div></div></td>
                <td>萌宠造型工作室</td>
                <td class="bold" style="color:var(--primary)">★★★★★ 5.0</td>
                <td class="text-sm">造型做得很好，宝贝也很喜欢，下次还会来</td>
                <td><span class="tag">2 张</span></td>
                <td class="text-xs">1 小时前</td>
                <td><button class="btn-text" style="color:var(--success)">通过</button> <button class="btn-text" style="color:var(--danger)">驳回</button></td>
              </tr>
              <tr>
                <td><div class="row gap-8"><div class="ava" style="background:var(--gradient-3)">@</div><div><div class="bold">@毛茸茸的雪球</div><div class="text-xs text-3">U10089</div></div></div></td>
                <td>爱诺异宠诊疗中心</td>
                <td class="bold" style="color:var(--warning)">★★★☆☆ 3.0</td>
                <td class="text-sm">服务还行，但等待时间太长了，希望改进</td>
                <td>-</td>
                <td class="text-xs">2 小时前</td>
                <td><button class="btn-text" style="color:var(--success)">通过</button> <button class="btn-text" style="color:var(--danger)">驳回</button></td>
              </tr>
              <tr>
                <td><div class="row gap-8"><div class="ava" style="background:var(--danger);color:#fff">@</div><div><div class="bold">@违规用户_22</div><div class="text-xs text-3">U10090</div></div></div></td>
                <td>康宁宠物诊所</td>
                <td class="bold" style="color:var(--danger)">★☆☆☆☆ 1.0</td>
                <td class="text-sm" style="color:var(--danger)">差评差评差评，添加联系方式 138****0000 私聊</td>
                <td>-</td>
                <td class="text-xs">3 小时前</td>
                <td><button class="btn-text" style="color:var(--danger)">违规驳回</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="review-replies">
        <div class="page-header">
          <div>
            <h1>评价回复管理</h1>
            <div class="sub">管理商家对用户评价的回复</div>
          </div>
          <div class="actions"><button class="btn">📥 导出</button></div>
        </div>
<div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <input placeholder="搜索商家/用户" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">状态 ▾</button>
            <button class="filter">时间 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 3,128 条</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>原评价</th><th>商家回复</th><th>回复时间</th><th>点赞数</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <div class="text-xs text-3">@萌主小米 · 爱诺宠物医院</div>
                  <div class="text-sm">★★★★★ 王医生很专业，对我家猫咪很温柔</div>
                </td>
                <td class="text-sm">感谢您的好评，我们会继续努力，为每一只毛孩子提供最贴心的服务！期待您再次光临~</td>
                <td class="text-xs">2026-08-25 10:42</td>
                <td>12</td>
                <td><span class="tag green">已展示</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">隐藏</button></td>
              </tr>
              <tr>
                <td>
                  <div class="text-xs text-3">@阿柴不会飞 · 萌宠造型工作室</div>
                  <div class="text-sm">★★★★★ 造型做得很好，宝贝也很喜欢</div>
                </td>
                <td class="text-sm">谢谢您的肯定，毛茸茸的小宝贝都超可爱的！下次来我们给宝贝拍个写真~</td>
                <td class="text-xs">2026-08-25 09:15</td>
                <td>8</td>
                <td><span class="tag green">已展示</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">隐藏</button></td>
              </tr>
              <tr>
                <td>
                  <div class="text-xs text-3">@毛茸茸的雪球 · 爱诺异宠诊疗中心</div>
                  <div class="text-sm">★★★☆☆ 服务还行，但等待时间太长了</div>
                </td>
                <td class="text-sm">非常抱歉让您久等，异宠诊疗确实需要更细致的检查。我们已经优化了预约流程，欢迎您下次再来体验~</td>
                <td class="text-xs">2026-08-24 16:08</td>
                <td>3</td>
                <td><span class="tag green">已展示</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">隐藏</button></td>
              </tr>
              <tr>
                <td>
                  <div class="text-xs text-3">@柴犬团子 · PETU 宠物综合店</div>
                  <div class="text-sm">★★★★★ 店里东西很全，价格实惠</div>
                </td>
                <td class="text-sm" style="color:var(--text-3)">[商家未回复]</td>
                <td class="text-xs">-</td>
                <td>0</td>
                <td><span class="tag yellow">待回复</span></td>
                <td><button class="btn-text" style="color:var(--primary)">提醒商家</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="companies">
        <div class="page-header">
          <div>
            <h1>企业信息管理</h1>
            <div class="sub">审核从业者所属企业信息</div>
          </div>
          <div class="actions"><button class="btn">📥 导出</button><button class="btn btn-primary">+ 新增企业</button></div>
        </div>
<div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <input placeholder="搜索企业" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">行业 ▾</button>
            <button class="filter">规模 ▾</button>
            <button class="filter">状态 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 286 家企业</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>企业名称</th><th>行业</th><th>规模</th><th>法人</th><th>营业执照</th><th>岗位数</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><div class="bold">爱诺宠物医院连锁</div><div class="text-xs text-3">北京 · 朝阳</div></td>
                <td><span class="tag blue">宠物医疗</span></td>
                <td>100-500 人</td>
                <td>张总</td>
                <td>✓ 已认证</td>
                <td>12</td>
                <td><span class="tag green">已认证</span></td>
                <td><button class="btn-text">查看</button><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td><div class="bold">萌宠美容集团</div><div class="text-xs text-3">北京 · 海淀</div></td>
                <td><span class="tag">宠物美容</span></td>
                <td>50-100 人</td>
                <td>王经理</td>
                <td>✓ 已认证</td>
                <td>8</td>
                <td><span class="tag green">已认证</span></td>
                <td><button class="btn-text">查看</button><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td><div class="bold">异宠专科医院联盟</div><div class="text-xs text-3">北京 · 望京</div></td>
                <td><span class="tag green">异宠医疗</span></td>
                <td>20-50 人</td>
                <td>李博士</td>
                <td>✓ 已认证</td>
                <td>5</td>
                <td><span class="tag green">已认证</span></td>
                <td><button class="btn-text">查看</button><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td><div class="bold">新瑞鹏宠物集团</div><div class="text-xs text-3">上海</div></td>
                <td><span class="tag blue">宠物医疗</span></td>
                <td>1000+ 人</td>
                <td>彭总</td>
                <td>⏳ 待审核</td>
                <td>0</td>
                <td><span class="tag yellow">待审核</span></td>
                <td><button class="btn-text" style="color:var(--success)">通过</button> <button class="btn-text">查看</button></td>
              </tr>
              <tr>
                <td><div class="bold">小佩宠物 PETU</div><div class="text-xs text-3">北京 · 中关村</div></td>
                <td><span class="tag purple">宠物用品</span></td>
                <td>50-100 人</td>
                <td>郭总</td>
                <td>✓ 已认证</td>
                <td>3</td>
                <td><span class="tag green">已认证</span></td>
                <td><button class="btn-text">查看</button><button class="btn-text">编辑</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="reminder-rules">
        <div class="page-header">
          <div>
            <h1>提醒规则配置</h1>
            <div class="sub">系统提醒规则和模板配置</div>
          </div>
          <div class="actions"></div>
        </div>
<div class="card">
          <div class="card-header"><h3>⏰ 提醒规则</h3><button class="btn btn-primary" style="padding:6px 14px;font-size:13px">+ 新增规则</button></div>
          <table class="t">
            <thead>
              <tr><th>规则名称</th><th>触发场景</th><th>提前时间</th><th>推送通道</th><th>触发条件</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td class="bold">疫苗到期提醒</td>
                <td>宠物疫苗即将到期</td>
                <td>提前 7 天</td>
                <td>APP Push + 站内信</td>
                <td>用户开启提醒</td>
                <td><span class="tag green">启用</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td>
              </tr>
              <tr>
                <td class="bold">喂食提醒</td>
                <td>每日固定时间</td>
                <td>用户自定义</td>
                <td>APP Push + 微信</td>
                <td>用户设置喂食计划</td>
                <td><span class="tag green">启用</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td>
              </tr>
              <tr>
                <td class="bold">预约前提醒</td>
                <td>服务预约时间前</td>
                <td>提前 1 小时</td>
                <td>APP Push + 短信</td>
                <td>所有有效订单</td>
                <td><span class="tag green">启用</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td>
              </tr>
              <tr>
                <td class="bold">医保到期提醒</td>
                <td>医保产品即将到期</td>
                <td>提前 30 天</td>
                <td>APP Push + 短信</td>
                <td>已购买医保用户</td>
                <td><span class="tag green">启用</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">禁用</button></td>
              </tr>
              <tr>
                <td class="bold">续保提醒</td>
                <td>医保到期后</td>
                <td>到期后 7 天</td>
                <td>APP Push</td>
                <td>已购买医保用户</td>
                <td><span class="tag">禁用</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">启用</button></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="grid grid-2">
          <div class="card">
            <div class="card-header"><h3>📝 疫苗到期提醒模板</h3></div>
            <div style="background:var(--bg-2,#F5F7FA);padding:14px;border-radius:8px;font-size:13px;line-height:1.6">
              <div class="text-sm bold" style="color:var(--primary)">[宠物名]的[疫苗名称]即将到期</div>
              <div class="text-3" style="margin-top:6px">亲爱的[用户名]，您家[宠物名]的[疫苗名称]将于[到期日期]到期，请及时带宝贝接种哦~</div>
              <div class="text-3" style="margin-top:6px">推荐医院：[推荐医院名]</div>
            </div>
            <div class="row gap-6" style="margin-top:10px">
              <button class="btn">编辑模板</button>
              <button class="btn">预览</button>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><h3>📊 提醒效果</h3></div>
            <div class="info-list">
              <div class="row"><span class="lbl">本月触达</span><span class="val bold">128,460 人次</span></div>
              <div class="row"><span class="lbl">点击查看</span><span class="val bold">42,128 人次 (32.8%)</span></div>
              <div class="row"><span class="lbl">完成预约</span><span class="val bold">8,486 单</span></div>
              <div class="row"><span class="lbl">转化率</span><span class="val bold" style="color:var(--primary)">20.1%</span></div>
            </div>
          </div>
        </div>
      </div>

      <div class="screen" data-screen="feeding-reminders">
        <div class="page-header">
          <div>
            <h1>喂食提醒管理</h1>
            <div class="sub">管理用户喂食提醒设置和默认模板</div>
          </div>
          <div class="actions"><button class="btn">默认模板</button><button class="btn btn-primary">批量推送</button></div>
        </div>
<div class="grid grid-4">
<div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">🍽️</div>
            <div class="info">
              <div class="lbl">开启提醒用户</div>
              <div class="val">8,486</div>
              <div class="delta">↑ 12% 较上月</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">📋</div>
            <div class="info">
              <div class="lbl">提醒规则数</div>
              <div class="val">32</div>
              <div class="delta">用户自定义</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">📨</div>
            <div class="info">
              <div class="lbl">本月触达</div>
              <div class="val">256,420</div>
              <div class="delta">推送达</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">✓</div>
            <div class="info">
              <div class="lbl">操作完成率</div>
              <div class="val">78.5%</div>
              <div class="delta">用户点击</div>
            </div>
          </div>
        </div>
        <div class="grid grid-2">
          <div class="card">
            <div class="card-header"><h3>⏰ 默认提醒时间</h3><button class="btn-text">编辑</button></div>
            <div class="info-list">
              <div class="row"><span class="lbl">早餐</span><span class="val bold">08:00</span></div>
              <div class="row"><span class="lbl">午餐</span><span class="val bold">12:00</span></div>
              <div class="row"><span class="lbl">晚餐</span><span class="val bold">18:00</span></div>
              <div class="row"><span class="lbl">夜宵</span><span class="val">未启用</span></div>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><h3>📊 喂食提醒类型分布</h3></div>
            <div class="info-list">
              <div class="row"><span class="lbl">每日 2 次</span><span class="val">42%</span></div>
              <div class="row"><span class="lbl">每日 3 次</span><span class="val">35%</span></div>
              <div class="row"><span class="lbl">每日 1 次</span><span class="val">15%</span></div>
              <div class="row"><span class="lbl">自定义</span><span class="val">8%</span></div>
            </div>
          </div>
        </div>
        <div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <input placeholder="搜索用户/宠物" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">状态 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 8,486 条设置</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>用户</th><th>宠物</th><th>提醒时间</th><th>频率</th><th>通知方式</th><th>设置时间</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><div class="bold">@萌主小米</div><div class="text-xs text-3">U10086</div></td>
                <td>团团 · 橘猫</td>
                <td>08:00 / 12:00 / 18:00</td>
                <td>每日 3 次</td>
                <td>APP + 微信</td>
                <td class="text-xs">2026-08-15</td>
                <td><span class="tag green">已开启</span></td>
                <td><button class="btn-text">查看</button><button class="btn-text">提醒</button></td>
              </tr>
              <tr>
                <td><div class="bold">@阿柴不会飞</div><div class="text-xs text-3">U10087</div></td>
                <td>布丁 · 英短</td>
                <td>08:30 / 18:30</td>
                <td>每日 2 次</td>
                <td>APP</td>
                <td class="text-xs">2026-07-20</td>
                <td><span class="tag green">已开启</span></td>
                <td><button class="btn-text">查看</button><button class="btn-text">提醒</button></td>
              </tr>
              <tr>
                <td><div class="bold">@毛茸茸的雪球</div><div class="text-xs text-3">U10089</div></td>
                <td>雪球 · 荷兰兔</td>
                <td>09:00 / 19:00</td>
                <td>每日 2 次</td>
                <td>APP + 微信</td>
                <td class="text-xs">2026-06-08</td>
                <td><span class="tag green">已开启</span></td>
                <td><button class="btn-text">查看</button><button class="btn-text">提醒</button></td>
              </tr>
              <tr>
                <td><div class="bold">@柴犬团子</div><div class="text-xs text-3">U10088</div></td>
                <td>团子 · 柴犬</td>
                <td>-</td>
                <td>未设置</td>
                <td>-</td>
                <td class="text-xs">-</td>
                <td><span class="tag gray">未开启</span></td>
                <td><button class="btn-text" style="color:var(--primary)">推荐</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="vaccine-reminders">
        <div class="page-header">
          <div>
            <h1>疫苗提醒管理</h1>
            <div class="sub">管理疫苗到期提醒设置</div>
          </div>
          <div class="actions"><button class="btn">📥 导出</button><button class="btn btn-primary">批量提醒</button></div>
        </div>
<div class="grid grid-4">
<div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">💉</div>
            <div class="info">
              <div class="lbl">开启提醒宠物</div>
              <div class="val">42,486</div>
              <div class="delta">覆盖率 81%</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">⏰</div>
            <div class="info">
              <div class="lbl">本月即将到期</div>
              <div class="val">8,486</div>
              <div class="delta">未来 30 天</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">📨</div>
            <div class="info">
              <div class="lbl">提醒推送</div>
              <div class="val">12,840</div>
              <div class="delta">本月已发送</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">✓</div>
            <div class="info">
              <div class="lbl">接种转化</div>
              <div class="val">8,128</div>
              <div class="delta">转化率 63%</div>
            </div>
          </div>
        </div>
        <div class="grid grid-2">
          <div class="card">
            <div class="card-header"><h3>⏰ 默认提醒提前天数</h3><button class="btn-text">编辑</button></div>
            <div class="info-list">
              <div class="row"><span class="lbl">首次提醒</span><span class="val bold">到期前 7 天</span></div>
              <div class="row"><span class="lbl">二次提醒</span><span class="val bold">到期前 3 天</span></div>
              <div class="row"><span class="lbl">紧急提醒</span><span class="val bold">到期前 1 天</span></div>
              <div class="row"><span class="lbl">已过期</span><span class="val">每 3 天 1 次</span></div>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><h3>📊 提醒渠道分布</h3></div>
            <div class="info-list">
              <div class="row"><span class="lbl">APP Push</span><span class="val">95%</span></div>
              <div class="row"><span class="lbl">短信</span><span class="val">42%</span></div>
              <div class="row"><span class="lbl">微信</span><span class="val">68%</span></div>
              <div class="row"><span class="lbl">站内信</span><span class="val">100%</span></div>
            </div>
          </div>
        </div>
        <div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <input placeholder="搜索用户/宠物" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">疫苗类型 ▾</button>
            <button class="filter">状态 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">即将到期 8,486</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>用户</th><th>宠物</th><th>疫苗</th><th>到期日期</th><th>提醒进度</th><th>通知方式</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td>@萌主小米</td>
                <td>团团 · 橘猫</td>
                <td>猫三联（下一针）</td>
                <td class="text-xs">2026-09-12</td>
                <td><div class="row gap-6"><div style="width:80px;height:6px;background:var(--line-2);border-radius:3px;overflow:hidden"><div style="height:100%;width:50%;background:var(--warning)"></div></div><span class="text-xs">18 天后</span></div></td>
                <td>APP + 微信</td>
                <td><span class="tag yellow">已提醒 1 次</span></td>
                <td><button class="btn-text" style="color:var(--primary)">立即提醒</button></td>
              </tr>
              <tr>
                <td>@阿柴不会飞</td>
                <td>布丁 · 英短</td>
                <td>猫三联（下一针）</td>
                <td class="text-xs">2026-09-20</td>
                <td><div class="row gap-6"><div style="width:80px;height:6px;background:var(--line-2);border-radius:3px;overflow:hidden"><div style="height:100%;width:30%;background:var(--success)"></div></div><span class="text-xs">26 天后</span></div></td>
                <td>APP</td>
                <td><span class="tag green">已开启</span></td>
                <td><button class="btn-text">查看</button></td>
              </tr>
              <tr>
                <td>@毛茸茸的雪球</td>
                <td>雪球 · 荷兰兔</td>
                <td>兔出血症疫苗</td>
                <td class="text-xs" style="color:var(--danger)">2026-01-08</td>
                <td><div class="row gap-6"><div style="width:80px;height:6px;background:var(--line-2);border-radius:3px;overflow:hidden"><div style="height:100%;width:100%;background:var(--danger)"></div></div><span class="text-xs" style="color:var(--danger)">已过期</span></div></td>
                <td>APP + 微信 + 短信</td>
                <td><span class="tag red">已过期</span></td>
                <td><button class="btn-text" style="color:var(--primary)">立即提醒</button></td>
              </tr>
              <tr>
                <td>@萌主小米</td>
                <td>豆豆 · 柯基</td>
                <td>狂犬疫苗</td>
                <td class="text-xs" style="color:var(--danger)">2026-06-08</td>
                <td><div class="row gap-6"><div style="width:80px;height:6px;background:var(--line-2);border-radius:3px;overflow:hidden"><div style="height:100%;width:100%;background:var(--danger)"></div></div><span class="text-xs" style="color:var(--danger)">已过期</span></div></td>
                <td>APP + 微信 + 短信</td>
                <td><span class="tag red">已过期</span></td>
                <td><button class="btn-text" style="color:var(--primary)">立即提醒</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="reminder-records">
        <div class="page-header">
          <div>
            <h1>提醒记录</h1>
            <div class="sub">所有提醒发送记录和触达情况</div>
          </div>
          <div class="actions"><button class="btn">📥 导出记录</button></div>
        </div>
<div class="grid grid-4">
<div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">📨</div>
            <div class="info">
              <div class="lbl">今日提醒</div>
              <div class="val">12,486</div>
              <div class="delta">↑ 8.2% 较昨日</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">✓</div>
            <div class="info">
              <div class="lbl">送达</div>
              <div class="val">11,892</div>
              <div class="delta">送达率 95.2%</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">👆</div>
            <div class="info">
              <div class="lbl">点击</div>
              <div class="val">4,128</div>
              <div class="delta">点击率 33.1%</div>
            </div>
          </div><div class="card stat-card">
            <div class="ico" style="background:var(--primary-light);color:var(--primary)">🎯</div>
            <div class="info">
              <div class="lbl">转化</div>
              <div class="val">1,286</div>
              <div class="delta">转化率 10.3%</div>
            </div>
          </div>
        </div>
        <div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <input placeholder="搜索用户" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">提醒类型 ▾</button>
            <button class="filter">状态 ▾</button>
            <button class="filter">时间 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 386,420 条</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>用户</th><th>提醒类型</th><th>标题</th><th>推送通道</th><th>发送时间</th><th>送达</th><th>点击</th><th>状态</th></tr>
            </thead>
            <tbody>
              <tr>
                <td>@萌主小米</td>
                <td><span class="tag yellow">疫苗</span></td>
                <td class="text-sm">团团的猫三联即将到期</td>
                <td>APP Push</td>
                <td class="text-xs">2026-08-25 09:00</td>
                <td>✓ 已送达</td>
                <td>✓ 已点击</td>
                <td><span class="tag green">成功</span></td>
              </tr>
              <tr>
                <td>@阿柴不会飞</td>
                <td><span class="tag">喂食</span></td>
                <td class="text-sm">布丁的喂食时间到啦</td>
                <td>APP + 微信</td>
                <td class="text-xs">2026-08-25 12:00</td>
                <td>✓ 已送达</td>
                <td>✗ 未点击</td>
                <td><span class="tag">送达</span></td>
              </tr>
              <tr>
                <td>@毛茸茸的雪球</td>
                <td><span class="tag red">过期</span></td>
                <td class="text-sm">雪球的兔出血症疫苗已过期</td>
                <td>APP + 短信</td>
                <td class="text-xs">2026-08-25 10:00</td>
                <td>✓ 已送达</td>
                <td>✓ 已点击</td>
                <td><span class="tag green">成功</span></td>
              </tr>
              <tr>
                <td>@柴犬团子</td>
                <td><span class="tag">预约</span></td>
                <td class="text-sm">您预约的疫苗服务将在 1 小时后开始</td>
                <td>APP Push</td>
                <td class="text-xs">2026-08-25 14:00</td>
                <td>✓ 已送达</td>
                <td>✓ 已点击</td>
                <td><span class="tag green">成功</span></td>
              </tr>
              <tr>
                <td>@萌主小米</td>
                <td><span class="tag">喂食</span></td>
                <td class="text-sm">团团的喂食时间到啦</td>
                <td>APP Push</td>
                <td class="text-xs">2026-08-25 18:00</td>
                <td>✗ 未送达</td>
                <td>-</td>
                <td><span class="tag red">失败</span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="accounts">
        <div class="page-header">
          <div>
            <h1>账号管理</h1>
            <div class="sub">管理员账号的增删改查</div>
          </div>
          <div class="actions"><button class="btn">📥 导出</button><button class="btn btn-primary">+ 新增账号</button></div>
        </div>
<div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <input placeholder="搜索账号" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">角色 ▾</button>
            <button class="filter">状态 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 12 个账号</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>账号</th><th>姓名</th><th>角色</th><th>部门</th><th>手机</th><th>最后登录</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><div class="bold">admin@petu.com</div><div class="text-xs text-3">超级管理员</div></td>
                <td>超管</td>
                <td><span class="tag red">超级管理员</span></td>
                <td>管理层</td>
                <td>138****0000</td>
                <td class="text-xs">5 分钟前</td>
                <td><span class="tag green">正常</span></td>
                <td><button class="btn-text">详情</button></td>
              </tr>
              <tr>
                <td><div class="bold">operation@petu.com</div><div class="text-xs text-3">运营账号</div></td>
                <td>运营-小王</td>
                <td><span class="tag">运营</span></td>
                <td>运营部</td>
                <td>139****1234</td>
                <td class="text-xs">2 小时前</td>
                <td><span class="tag green">正常</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">重置密码</button><button class="btn-text" style="color:var(--danger)">禁用</button></td>
              </tr>
              <tr>
                <td><div class="bold">audit@petu.com</div><div class="text-xs text-3">审核账号</div></td>
                <td>审核-小李</td>
                <td><span class="tag yellow">审核</span></td>
                <td>审核部</td>
                <td>137****5678</td>
                <td class="text-xs">今天 10:18</td>
                <td><span class="tag green">正常</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">重置密码</button><button class="btn-text" style="color:var(--danger)">禁用</button></td>
              </tr>
              <tr>
                <td><div class="bold">service@petu.com</div><div class="text-xs text-3">客服账号</div></td>
                <td>客服-小张</td>
                <td><span class="tag blue">客服</span></td>
                <td>客服部</td>
                <td>136****9012</td>
                <td class="text-xs">今天 14:42</td>
                <td><span class="tag green">正常</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">重置密码</button><button class="btn-text" style="color:var(--danger)">禁用</button></td>
              </tr>
              <tr>
                <td><div class="bold">tech@petu.com</div><div class="text-xs text-3">技术账号</div></td>
                <td>技术-小赵</td>
                <td><span class="tag purple">技术</span></td>
                <td>技术部</td>
                <td>135****3456</td>
                <td class="text-xs">昨天 18:08</td>
                <td><span class="tag green">正常</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">重置密码</button><button class="btn-text" style="color:var(--danger)">禁用</button></td>
              </tr>
              <tr>
                <td><div class="bold">finance@petu.com</div><div class="text-xs text-3">财务账号</div></td>
                <td>财务-小钱</td>
                <td><span class="tag green">财务</span></td>
                <td>财务部</td>
                <td>134****7890</td>
                <td class="text-xs">3 天前</td>
                <td><span class="tag red">已禁用</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text" style="color:var(--success)">启用</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="languages">
        <div class="page-header">
          <div>
            <h1>多语言配置</h1>
            <div class="sub">管理 APP 界面语言资源</div>
          </div>
          <div class="actions"><button class="btn">📥 导出翻译</button><button class="btn btn-primary">+ 新增 Key</button></div>
        </div>
<div class="row gap-6" style="margin-bottom:16px">
          <div class="card stat-card" style="flex:1;background:linear-gradient(135deg,#FFF1EB,#FFE4D6)">
            <div class="ico" style="background:var(--primary);color:#fff">中</div>
            <div class="info"><div class="lbl">简体中文</div><div class="val">1,286</div><div class="delta">翻译完成度 100%</div></div>
          </div>
          <div class="card stat-card" style="flex:1;background:linear-gradient(135deg,#E8F4FF,#D6EAFF)">
            <div class="ico" style="background:var(--info);color:#fff">EN</div>
            <div class="info"><div class="lbl">English</div><div class="val">1,168</div><div class="delta">翻译完成度 91%</div></div>
          </div>
          <div class="card stat-card" style="flex:1;background:linear-gradient(135deg,#E8FFF1,#D6FFE4)">
            <div class="ico" style="background:var(--success);color:#fff">繁</div>
            <div class="info"><div class="lbl">繁體中文</div><div class="val">986</div><div class="delta">翻译完成度 77%</div></div>
          </div>
          <div class="card stat-card" style="flex:1;background:linear-gradient(135deg,#FEF3E2,#FDE4C0)">
            <div class="ico" style="background:var(--warning);color:#fff">+</div>
            <div class="info"><div class="lbl">新增语言</div><div class="val">+</div><div class="delta">点击添加</div></div>
          </div>
        </div>
        <div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <input placeholder="搜索 key 或翻译内容" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">模块 ▾</button>
            <button class="filter">语言 ▾</button>
            <button class="filter">状态 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 1,286 个 key</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>Key</th><th>模块</th><th>简体中文</th><th>English</th><th>繁體中文</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td class="bold" style="font-family:monospace;font-size:12px">home.banner.title</td>
                <td><span class="tag">首页</span></td>
                <td>PETU+ 宠物服务社区</td>
                <td>PETU+ Pet Service Community</td>
                <td>PETU+ 寵物服務社區</td>
                <td><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td class="bold" style="font-family:monospace;font-size:12px">service.hospital.name</td>
                <td><span class="tag blue">服务</span></td>
                <td>宠物医院</td>
                <td>Pet Hospital</td>
                <td>寵物醫院</td>
                <td><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td class="bold" style="font-family:monospace;font-size:12px">order.status.pending</td>
                <td><span class="tag yellow">订单</span></td>
                <td>待确认</td>
                <td>Pending</td>
                <td>待確認</td>
                <td><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td class="bold" style="font-family:monospace;font-size:12px">pet.cat.breed</td>
                <td><span class="tag">宠物</span></td>
                <td>猫咪</td>
                <td>Cat</td>
                <td>貓咪</td>
                <td><button class="btn-text">编辑</button></td>
              </tr>
              <tr>
                <td class="bold" style="font-family:monospace;font-size:12px">medical.insurance.title</td>
                <td><span class="tag red">医保</span></td>
                <td>宠物医保</td>
                <td>Pet Insurance</td>
                <td>寵物醫保</td>
                <td><button class="btn-text">编辑</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="faqs">
        <div class="page-header">
          <div>
            <h1>帮助与FAQ</h1>
            <div class="sub">常见问题和使用帮助</div>
          </div>
          <div class="actions"><button class="btn">📥 导出</button><button class="btn btn-primary">+ 新增 FAQ</button></div>
        </div>
<div class="card no-pad">
          <div class="table-toolbar">
            <div class="search">
              <input placeholder="搜索问题" style="background:transparent;border:0;outline:none;font-size:13px;flex:1;font-family:inherit"/>
            </div>
            <button class="filter">分类 ▾</button>
            <button class="filter">状态 ▾</button>
            <div class="text-xs text-3" style="margin-left:auto">共 32 条 FAQ</div>
          </div>
        </div>
        <div class="card no-pad">
          <table class="t">
            <thead>
              <tr><th>分类</th><th>问题</th><th>答案</th><th>浏览</th><th>有用率</th><th>状态</th><th>操作</th></tr>
            </thead>
            <tbody>
              <tr>
                <td><span class="tag">注册</span></td>
                <td class="bold">如何注册 PETU+ 账号？</td>
                <td class="text-sm text-3" style="max-width:300px">打开 APP，点击"我的"-"登录/注册"，输入手机号获取验证码即可注册</td>
                <td>1,286</td>
                <td>92%</td>
                <td><span class="tag green">已发布</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td>
              </tr>
              <tr>
                <td><span class="tag blue">预约</span></td>
                <td class="bold">如何预约宠物服务？</td>
                <td class="text-sm text-3" style="max-width:300px">在首页选择服务类型，浏览商家列表，选择商家后点击"立即预约"即可</td>
                <td>2,486</td>
                <td>95%</td>
                <td><span class="tag green">已发布</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td>
              </tr>
              <tr>
                <td><span class="tag yellow">支付</span></td>
                <td class="bold">支持哪些支付方式？</td>
                <td class="text-sm text-3" style="max-width:300px">支持微信支付、支付宝支付、Apple Pay 等主流支付方式</td>
                <td>892</td>
                <td>88%</td>
                <td><span class="tag green">已发布</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td>
              </tr>
              <tr>
                <td><span class="tag red">医保</span></td>
                <td class="bold">宠物医保如何购买？</td>
                <td class="text-sm text-3" style="max-width:300px">在首页"宠物医保"入口选择方案，按提示填写宠物信息并支付即可</td>
                <td>1,128</td>
                <td>90%</td>
                <td><span class="tag green">已发布</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td>
              </tr>
              <tr>
                <td><span class="tag">退款</span></td>
                <td class="bold">订单如何退款？</td>
                <td class="text-sm text-3" style="max-width:300px">在"我的订单"中找到对应订单，点击"申请退款"并填写原因即可</td>
                <td>526</td>
                <td>85%</td>
                <td><span class="tag green">已发布</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">下架</button></td>
              </tr>
              <tr>
                <td><span class="tag purple">异宠</span></td>
                <td class="bold">异宠有哪些分类？</td>
                <td class="text-sm text-3" style="max-width:300px">异宠包括兔类、啮齿类、鸟类、爬行类、水族类 5 大类</td>
                <td>328</td>
                <td>82%</td>
                <td><span class="tag">草稿</span></td>
                <td><button class="btn-text">编辑</button><button class="btn-text">发布</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="screen" data-screen="about">
        <div class="page-header">
          <div>
            <h1>关于我们</h1>
            <div class="sub">维护 APP 关于页面的内容</div>
          </div>
          <div class="actions"><button class="btn">恢复默认</button><button class="btn btn-primary">保存</button></div>
        </div>
<div class="grid grid-2">
          <div class="card">
            <div class="card-header"><h3>ℹ️ 基本信息</h3></div>
            <div class="info-list">
              <div class="row"><span class="lbl">应用名称</span><span class="val bold">PETU+ 宠物服务社区</span></div>
              <div class="row"><span class="lbl">版本号</span><span class="val">v1.2.0</span></div>
              <div class="row"><span class="lbl">应用大小</span><span class="val">86.2 MB</span></div>
              <div class="row"><span class="lbl">最新更新</span><span class="val">2026-08-25</span></div>
              <div class="row"><span class="lbl">客服电话</span><span class="val">400-888-****</span></div>
              <div class="row"><span class="lbl">客服邮箱</span><span class="val">support@petu.com</span></div>
              <div class="row"><span class="lbl">公司名称</span><span class="val">北京 PETU+ 科技有限公司</span></div>
              <div class="row"><span class="lbl">公司地址</span><span class="val">北京市朝阳区望京 SOHO T2 18 层</span></div>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><h3>📝 关于我们文案</h3><button class="btn-text">编辑</button></div>
            <div style="background:var(--bg-2,#F5F7FA);padding:14px;border-radius:8px;font-size:13px;line-height:1.6;max-height:200px;overflow:auto">
              <div class="bold" style="color:var(--primary)">PETU+ - 让养宠更美好</div>
              <div class="text-3" style="margin-top:8px">PETU+ 是一个专注于宠物服务的综合性平台，我们连接宠物主人、宠物医生、美容师和宠物店，为您的爱宠提供专业、便捷、放心的服务。</div>
              <div class="bold" style="margin-top:12px">🌟 我们的使命</div>
              <div class="text-3" style="margin-top:4px">用科技连接每一个养宠家庭，让爱宠享受更好的生活。</div>
              <div class="bold" style="margin-top:12px">💪 我们的优势</div>
              <div class="text-3" style="margin-top:4px">覆盖 100+ 城市、合作 500+ 商家、服务 28000+ 用户</div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header"><h3>🏆 资质证书</h3><button class="btn-text">+ 上传</button></div>
          <div class="row gap-12" style="flex-wrap:wrap">
            <div class="card" style="width:160px;padding:12px;text-align:center"><div style="font-size:48px">📜</div><div class="text-sm bold">营业执照</div><div class="text-xs text-3" style="margin-top:4px">2024-01-15</div></div>
            <div class="card" style="width:160px;padding:12px;text-align:center"><div style="font-size:48px">📋</div><div class="text-sm bold">ICP 备案</div><div class="text-xs text-3" style="margin-top:4px">京 ICP 备 2024****</div></div>
            <div class="card" style="width:160px;padding:12px;text-align:center"><div style="font-size:48px">🛡️</div><div class="text-sm bold">软件著作权</div><div class="text-xs text-3" style="margin-top:4px">2024-03-20</div></div>
            <div class="card" style="width:160px;padding:12px;text-align:center"><div style="font-size:48px">✓</div><div class="text-sm bold">兽药经营许可</div><div class="text-xs text-3" style="margin-top:4px">2024-05-08</div></div>
          </div>
        </div>
        <div class="card">
          <div class="card-header"><h3>📞 联系方式</h3></div>
          <div class="grid grid-3">
            <div class="text-center" style="padding:16px"><div style="font-size:32px">📞</div><div class="bold" style="margin-top:8px">客服电话</div><div class="text-sm text-3">400-888-****</div></div>
            <div class="text-center" style="padding:16px"><div style="font-size:32px">📧</div><div class="bold" style="margin-top:8px">客服邮箱</div><div class="text-sm text-3">support@petu.com</div></div>
            <div class="text-center" style="padding:16px"><div style="font-size:32px">💬</div><div class="bold" style="margin-top:8px">在线客服</div><div class="text-sm text-3">9:00-22:00</div></div>
          </div>
        </div>
      </div>

    </div>
  </main>
</div>

  <!-- 登录页 -->
  <div class="login-page" id="loginPage" style="display:none">
    <div class="login-bg">
      <div class="login-deco login-deco-1"></div>
      <div class="login-deco login-deco-2"></div>
      <div class="login-deco login-deco-3"></div>
    </div>
    <div class="login-container">
      <div class="login-left">
        <div class="login-brand">
          <div class="login-logo">🐾</div>
          <div class="login-brand-name">PETU+</div>
        </div>
        <div class="login-title">宠物服务管理后台</div>
        <div class="login-subtitle">让养宠更美好 · 让管理更轻松</div>
        <div class="login-features">
          <div class="login-feat"><div class="ico">📊</div><div><div class="bold">数据概览</div><div class="text-xs text-3">实时核心指标</div></div></div>
          <div class="login-feat"><div class="ico">🏪</div><div><div class="bold">商家管理</div><div class="text-xs text-3">全方位运营</div></div></div>
          <div class="login-feat"><div class="ico">📋</div><div><div class="bold">订单处理</div><div class="text-xs text-3">高效便捷</div></div></div>
        </div>
      </div>
      <div class="login-right">
        <div class="login-form-card">
          <div class="login-form-title">欢迎登录</div>
          <div class="login-form-sub">请使用管理员账号登录</div>
          <div class="form-row" style="margin-top:24px">
            <div class="lbl">账号</div>
            <div class="ipt-wrap">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M6 21v-2a4 4 0 014-4h4a4 4 0 014 4v2"/></svg>
              <input class="ipt" placeholder="admin@petu.com" value="admin@petu.com" />
            </div>
          </div>
          <div class="form-row" style="margin-top:14px">
            <div class="lbl">密码</div>
            <div class="ipt-wrap">
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
              <input class="ipt" type="password" placeholder="请输入密码" value="••••••••" />
            </div>
          </div>
          <div class="form-row" style="margin-top:14px">
            <div class="lbl">验证码</div>
            <div class="row gap-8">
              <div class="ipt-wrap" style="flex:1">
                <input class="ipt" placeholder="请输入验证码" value="A8K2" />
              </div>
              <div class="captcha-box" style="background:linear-gradient(135deg,#FF6B35,#FF8E53);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;letter-spacing:4px;width:110px;height:38px;border-radius:8px;cursor:pointer;font-family:monospace">A8K2</div>
            </div>
          </div>
          <div class="row" style="margin-top:16px;justify-content:space-between">
            <label class="row gap-6" style="cursor:pointer"><input type="checkbox" checked style="accent-color:var(--primary)"/><span class="text-sm">记住我</span></label>
            <a class="text-sm" style="color:var(--primary);cursor:pointer">忘记密码？</a>
          </div>
          <button class="btn btn-primary" style="width:100%;margin-top:20px;height:44px;font-size:15px" onclick="go('dashboard');document.getElementById('loginPage').style.display='none'">登 录</button>
          <div class="text-center text-xs text-3" style="margin-top:20px">
            登录即代表您同意<a style="color:var(--primary);cursor:pointer">《用户协议》</a>和<a style="color:var(--primary);cursor:pointer">《隐私政策》</a>
          </div>
        </div>
        <div class="text-center text-xs text-3" style="margin-top:20px;color:rgba(255,255,255,0.7)">
          © 2026 PETU+ All Rights Reserved · v1.2.0
        </div>
      </div>
    </div>
  </div>

<!-- 通用弹层 -->
<div class="modal-mask" id="modalMask">
  <div class="modal">
    <div class="head">
      <h3>新建服务</h3>
      <span class="x" onclick="closeModal()">×</span>
    </div>
    <div class="body">
      <div class="form-row"><div class="lbl">服务名称 *</div><input class="ipt" placeholder="如：基础体检" /></div>
      <div class="form-row"><div class="lbl">服务分类 *</div><input class="ipt" value="医院 / 体检" /></div>
      <div class="form-row"><div class="lbl">价格 *</div><input class="ipt" placeholder="¥ 99" /></div>
      <div class="form-row"><div class="lbl">服务时长</div><input class="ipt" placeholder="30 分钟" /></div>
      <div class="form-row"><div class="lbl">服务描述</div><textarea class="ipt" placeholder="详细说明服务内容...">