编辑页面

HTML内容
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>冒泡·小程序 · 交互原型</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root{
    --bg:#0f1020;
    --bg-2:#16172e;
    --panel:#1c1d36;
    --panel-2:#232449;
    --line:rgba(255,255,255,.08);
    --line-2:rgba(255,255,255,.14);
    --text:#e9eaf6;
    --muted:#9ea1c4;
    --muted-2:#6b6e94;
    --primary:#6B46FF;       /* 冒泡紫 */
    --primary-2:#5B3FFF;
    --primary-soft:rgba(107,70,255,.16);
    --pink:#FF6FA9;
    --green:#27c08f;
    --orange:#ff9a3c;
    --red:#ff4d6a;
    --shadow:0 20px 60px rgba(0,0,0,.45);
    --radius:18px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:radial-gradient(1200px 700px at 10% -10%,#22244a 0%,var(--bg) 60%) fixed;color:var(--text);font-family:"Outfit","Noto Sans SC",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit}

  /* Layout */
  .app{
    display:grid;
    grid-template-columns: 1fr;
    gap:0;
    max-width:1500px;
    margin:0 auto;
    padding:24px 24px 48px;
    min-height:100vh;
  }
  @media (max-width: 900px){
    .app{padding:16px}
  }

  /* Top bar (header inside each column would feel cramped, use one top bar) */
  .topbar{
    grid-column:1 / -1;
    display:flex;align-items:center;gap:16px;
    padding:8px 4px 4px;
  }
  .logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px}
  .logo .dot{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,var(--primary),#a98bff);display:grid;place-items:center;box-shadow:0 6px 16px rgba(107,70,255,.45)}
  .logo .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
  .tag{font-size:11px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted)}
  .spacer{flex:1}
  .role-switch{
    display:inline-flex;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:999px;
  }
  .role-switch button{
    border:0;background:transparent;color:var(--muted);
    padding:8px 14px;border-radius:999px;font-size:13px;cursor:pointer;
  }
  .role-switch button.active{background:linear-gradient(135deg,var(--primary),#8e6dff);color:#fff;box-shadow:0 6px 16px rgba(107,70,255,.4)}
  .role-switch button:not(.active):hover{color:#fff}

  /* Center phone stage */
  .stage{
    display:flex;align-items:flex-start;justify-content:center;padding:8px 0;
  }
  .phone{
    width:375px;height:780px;border-radius:54px;background:#0a0a14;
    padding:14px;
    box-shadow:
      0 0 0 2px #2a2c4a,
      0 0 0 6px #0e0f1f,
      0 30px 60px rgba(0,0,0,.55),
      inset 0 0 0 1px rgba(255,255,255,.05);
    position:relative;
  }
  .phone::after{
    content:"";position:absolute;inset:6px;border-radius:48px;border:1px solid rgba(255,255,255,.04);pointer-events:none;
  }
  .phone-screen{
    width:100%;height:100%;border-radius:40px;background:#fff;overflow:hidden;position:relative;
    display:flex;flex-direction:column;
  }
  /* status bar */
  .status-bar{
    height:44px;display:flex;align-items:center;justify-content:space-between;padding:14px 24px 0;color:#111;font-weight:600;font-size:15px;
    background:#fff;
  }
  .status-bar .right{display:flex;align-items:center;gap:6px}
  .notch{
    position:absolute;top:8px;left:50%;transform:translateX(-50%);width:120px;height:28px;background:#0a0a14;border-radius:0 0 18px 18px;z-index:30;
  }

  /* page container */
  .screen{flex:1;overflow-y:auto;overflow-x:hidden;background:#fff;position:relative}
  .screen::-webkit-scrollbar{width:0;height:0}
  .page{position:absolute;inset:0;display:none;flex-direction:column;background:#fff}
  .page.active{display:flex;animation:fade .25s ease}
  @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

  /* common header */
  .appbar{
    display:flex;align-items:center;gap:8px;padding:8px 14px 10px;color:#111;
    background:#fff;border-bottom:1px solid #f1f1f5;
  }
  .appbar .back{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;cursor:pointer;color:#222}
  .appbar .back:hover{background:#f3f3f8}
  .appbar .title{font-size:16px;font-weight:600;flex:1}
  .appbar .action{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;cursor:pointer;color:#333}
  .appbar .action:hover{background:#f3f3f8}

  /* tabbar */
  .tabbar{
    display:grid;grid-template-columns:repeat(3,1fr);padding:6px 4px 10px;background:#fff;
    border-top:1px solid #f1f1f5;
  }
  .tabbar .tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;color:#9aa0a6;font-size:10px;cursor:pointer}
  .tabbar .tab.active{color:var(--primary)}
  .tabbar .tab svg{width:22px;height:22px}

  /* Buttons */
  .btn-primary{
    display:block;width:100%;background:linear-gradient(135deg,var(--primary),#8e6dff);
    color:#fff;font-weight:600;font-size:15px;padding:14px;border-radius:14px;border:0;cursor:pointer;
    box-shadow:0 10px 22px rgba(107,70,255,.35);
  }
  .btn-primary:disabled{opacity:.5;box-shadow:none;cursor:not-allowed}
  .btn-ghost{background:#f3f0ff;color:var(--primary);font-weight:600;font-size:14px;padding:10px 18px;border-radius:999px;border:0;cursor:pointer}
  .chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:#f3f0ff;color:var(--primary);font-size:11px;font-weight:500}

  /* right info panel removed */
  .flow .step .n{flex:0 0 22px;height:22px;border-radius:7px;background:var(--primary-soft);color:#c9bdff;display:grid;place-items:center;font-size:11px;font-weight:600;font-family:"JetBrains Mono"}
  .kbd{display:inline-block;padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.08);border:1px solid var(--line-2);font-family:"JetBrains Mono";font-size:11px;color:#cfcfe7}

  /* ==== Page-specific styles ==== */

  /* Splash (开屏页) */
  .splash{
    background:radial-gradient(700px 500px at 50% 35%,#2a1a55 0%,#0d0d20 70%) !important;color:#fff;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 32px;text-align:center;
  }
  .splash .badge{margin-top:140px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#cfcfe7;font-size:12px}
  .splash .logo-big{margin-top:22px;width:130px;height:130px;border-radius:36px;background:linear-gradient(135deg,#7c5cff,#4327c8);display:grid;place-items:center;box-shadow:0 24px 48px rgba(124,92,255,.45)}
  .splash .logo-big::after{content:"";width:36px;height:36px;border-radius:50%;background:#fff}
  .splash h1{margin:26px 0 8px;font-size:30px;font-weight:700;letter-spacing:1px}
  .splash .sub{color:#b6b6d6;font-size:14px;margin-bottom:auto}
  .splash .quote{color:#cfd0eb;font-size:13px;margin-bottom:18px;line-height:1.5}
  .splash .quote b{color:#fff;font-weight:600}
  .splash .splash-cta{width:100%;background:linear-gradient(135deg,#7c5cff,#4327c8);color:#fff;border:0;padding:15px;border-radius:14px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 14px 28px rgba(124,92,255,.4);margin-bottom:14px}
  .splash .splash-foot{color:#7a7c9c;font-size:11px;margin-bottom:20px}

  /* Author home (博主首页) */
  .home-greet{padding:18px 16px 6px;background:linear-gradient(180deg,#f8f6ff,#fff)}
  .home-greet h2{margin:6px 0 2px;font-size:22px;color:#111}
  .home-greet .sub{color:#7a7c9c;font-size:13px}
  .stat-card{margin:14px 16px 0;background:#fff;border:1px solid #ececf5;border-radius:16px;padding:16px;box-shadow:0 4px 16px rgba(20,12,80,.04)}

  /* Hero */
  .home-hero{
    position:relative;overflow:hidden;color:#fff;
    background:linear-gradient(135deg,#5b3fff 0%,#7c5cff 50%,#a98bff 100%);
    padding:62px 16px 22px;
  }
  .home-hero::before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);right:-50px;top:-60px;pointer-events:none}
  .home-hero::after{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.1),transparent 70%);left:-30px;bottom:-50px;pointer-events:none}
  .home-hero .greet-line{display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:1}
  .home-hero .greet{font-size:13px;opacity:.85}
  .home-hero h2{margin:4px 0 4px;font-size:22px;font-weight:700;letter-spacing:.2px;position:relative;z-index:1}
  .home-hero .motto{font-size:12px;opacity:.8;position:relative;z-index:1}
  .home-hero .ask{
    display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:7px 12px;
    background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);border-radius:99px;
    font-size:12px;cursor:pointer;backdrop-filter:blur(6px);position:relative;z-index:1;
  }
  .home-hero .ask:hover{background:rgba(255,255,255,.28)}
  .home-hero .ask .av{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#ffd1a8,#ff6fa9);display:inline-grid;place-items:center;font-size:9px;font-weight:700;color:#fff}
  .home-hero .ask::after{content:"›";opacity:.7;margin-left:2px}

  /* Quick stats 4-grid */
  .data-grid{display:grid;grid-template-columns:repeat(4,1fr);margin:0 12px;background:#fff;border-radius:16px;box-shadow:0 4px 18px rgba(20,12,80,.05);position:relative;z-index:2;margin-top:-12px}
  .data-grid .it{text-align:center;padding:12px 4px;position:relative;cursor:pointer}
  .data-grid .it + .it::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:#f0f0f5}
  .data-grid .it .v{font-size:15px;font-weight:700;color:#111;line-height:1.1}
  .data-grid .it .v small{font-size:9px;color:#1aa67a;font-weight:600;margin-left:2px;vertical-align:middle}
  .data-grid .it .v small.down{color:#ff4d6a}
  .data-grid .it .l{font-size:10.5px;color:#7a7c9c;margin-top:4px}

  /* Status card (compact) */
  .home-status{margin:14px 12px 0;background:#fff;border-radius:16px;padding:14px;box-shadow:0 4px 16px rgba(20,12,80,.04);display:flex;align-items:center;gap:12px}
  .home-status .ring{width:48px;height:48px;border-radius:50%;background:conic-gradient(#7c5cff 0 85%,#ece9ff 85%);display:grid;place-items:center;flex-shrink:0;position:relative}
  .home-status .ring::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
  .home-status .ring span{position:relative;z-index:1;font-weight:700;color:#5b3fff;font-size:13px}
  .home-status .info{flex:1;min-width:0}
  .home-status .info h4{margin:0 0 2px;font-size:14px;color:#111;font-weight:600}
  .home-status .info p{margin:0;font-size:11.5px;color:#7a7c9c}
  .home-status .btns{display:flex;gap:6px;flex-shrink:0}
  .home-status .btns button{padding:7px 10px;border-radius:99px;font-size:11.5px;border:0;cursor:pointer}
  .home-status .btns .pri{background:linear-gradient(135deg,#5b3fff,#7c5cff);color:#fff;font-weight:600}
  .home-status .btns .gh{background:#f3f0ff;color:#5b3fff;font-weight:500}

  /* Task cards */
  .home-tasks{margin:14px 12px 0;display:flex;flex-direction:column;gap:8px}
  .task-card{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;color:#fff;cursor:pointer;position:relative;overflow:hidden}
  .task-card::after{content:"";position:absolute;right:-20px;top:-20px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.15),transparent 70%);pointer-events:none}
  .task-card .ic{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.2);display:grid;place-items:center;flex-shrink:0}
  .task-card .ic svg{width:16px;height:16px}
  .task-card .txt{flex:1;min-width:0;position:relative;z-index:1}
  .task-card .txt .t1{font-size:13px;font-weight:600}
  .task-card .txt .t2{font-size:11px;opacity:.85;margin-top:1px;display:flex;align-items:center;gap:6px}
  .task-card .tag{background:rgba(255,255,255,.25);padding:1px 6px;border-radius:6px;font-size:10px}
  .task-card .arr{opacity:.7;position:relative;z-index:1}
  .task-purple{background:linear-gradient(135deg,#5b3fff,#7c5cff)}
  .task-pink{background:linear-gradient(135deg,#ff6fa9,#ff9a3c)}

  /* Main banner */
  .feature-banner{margin:18px 12px 0;border-radius:16px;height:120px;position:relative;overflow:hidden;cursor:pointer;background:linear-gradient(120deg,#1a1340 0%,#5b3fff 50%,#b698ff 100%);color:#fff;padding:18px}
  .feature-banner::before{content:"";position:absolute;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 70%);right:-30px;bottom:-50px;pointer-events:none}
  .feature-banner::after{content:"";position:absolute;right:0;top:0;width:120px;height:120px;background:radial-gradient(circle at 70% 30%,rgba(255,180,80,.35),transparent 60%);pointer-events:none}
  .feature-banner .tag{display:inline-block;padding:3px 8px;background:rgba(255,255,255,.2);border-radius:99px;font-size:10px;margin-bottom:6px;backdrop-filter:blur(4px);position:relative;z-index:1}
  .feature-banner h3{margin:0 0 4px;font-size:16px;font-weight:600;position:relative;z-index:1}
  .feature-banner p{margin:0 0 10px;font-size:11px;opacity:.85;position:relative;z-index:1}
  .feature-banner .go{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.95);color:#3a1f9a;padding:5px 12px;border-radius:99px;font-size:11px;font-weight:600;position:relative;z-index:1}
  .progress{height:6px;background:#f1eeff;border-radius:999px;overflow:hidden;margin-top:6px}
  .progress > i{display:block;height:100%;background:linear-gradient(90deg,#7c5cff,#b6a0ff);width:0;transition:width .6s}
  .stat-row{display:flex;justify-content:space-between;font-size:11px;color:#7a7c9c;margin-top:4px}
  .stat-row b{color:#111;font-weight:600}
  .stat-actions{display:flex;gap:8px;margin-top:12px;align-items:center}
  .status-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#e7faf2;color:#1aa67a;font-size:11px;font-weight:500}
  .status-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:#1aa67a}

  .section-title{padding:22px 16px 8px;color:#111;font-size:14px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
  .section-title span{color:#9aa0a6;font-size:12px;font-weight:400}

  .vlog-scroll{display:flex;gap:10px;overflow-x:auto;padding:4px 16px 8px;scroll-snap-type:x mandatory}
  .vlog-scroll::-webkit-scrollbar{display:none}
  .vlog-card{flex:0 0 110px;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #ececf5;scroll-snap-align:start}
  .vlog-card .cover{position:relative;aspect-ratio:3/4;background:#e5e0ff;background-size:cover;background-position:center}
  .vlog-card .cover .play{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
  .vlog-card .cover .play svg{width:30px;height:30px;fill:rgba(0,0,0,.5);stroke:#fff}
  .vlog-card .cover .dur{position:absolute;left:6px;bottom:6px;font-size:10px;color:#fff;background:rgba(0,0,0,.45);padding:1px 5px;border-radius:4px}
  .vlog-card .meta{padding:6px 8px 8px;font-size:12px;color:#222;line-height:1.3}
  .vlog-card .views{color:#9aa0a6;font-size:10px;display:flex;align-items:center;gap:3px;margin-top:2px}

  /* public profile */
  .pub-cover{height:160px;background:linear-gradient(135deg,#a18bff,#5b3fff 50%,#2b1a7a);position:relative}
  .pub-back{position:absolute;top:14px;left:14px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.3);color:#fff;display:grid;place-items:center;cursor:pointer}
  .pub-back:hover{background:rgba(0,0,0,.5)}
  .pub-head{padding:0 16px 12px;background:#fff;margin-top:-44px;border-radius:18px 18px 0 0;position:relative}
  .pub-avatar{width:76px;height:76px;border-radius:18px;border:3px solid #fff;background:#e0d6ff;box-shadow:0 6px 14px rgba(0,0,0,.12);position:absolute;top:-44px;left:16px;display:grid;place-items:center;color:#5b3fff;font-weight:700}
  .pub-name{margin-left:92px;padding-top:10px}
  .pub-name h2{margin:0 0 2px;font-size:18px;color:#111}
  .pub-name .loc{font-size:12px;color:#9aa0a6}
  .pub-tags{display:flex;gap:6px;margin:8px 0 12px;flex-wrap:wrap}
  .pub-stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;border:1px solid #ececf5;border-radius:14px;padding:12px 0;margin-top:6px}
  .pub-stats .v{font-size:16px;font-weight:600;color:#111}
  .pub-stats .l{font-size:11px;color:#9aa0a6;margin-top:2px}
  .pub-tabs{display:grid;grid-template-columns:repeat(5,1fr);text-align:center;margin-top:14px;font-size:13px;color:#7a7c9c}
  .pub-tabs .t{padding:8px 0;cursor:pointer;position:relative}
  .pub-tabs .t.active{color:#5b3fff;font-weight:600}
  .pub-tabs .t.active::after{content:"";position:absolute;left:30%;right:30%;bottom:0;height:2px;background:#5b3fff;border-radius:2px}

  /* profile wizard */
  .wiz-step{padding:8px 18px 0;color:#5b3fff;font-size:12px}
  .wiz-progress{margin:6px 18px 14px;height:4px;background:#f1eeff;border-radius:99px;overflow:hidden}
  .wiz-progress > i{display:block;height:100%;background:#5b3fff;width:0;transition:width .4s}
  .wiz-list{padding:6px 18px}
  .wiz-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid #f1f1f5;font-size:14px;color:#222}
  .wiz-row .val{color:#7a7c9c;display:flex;align-items:center;gap:4px;cursor:pointer}
  .wiz-row .val.placeholder{color:#bbb}
  .wiz-foot{padding:14px 18px 18px}

  /* mine (我的) */
  .me-head{
    background:linear-gradient(160deg,#5b3fff 0%,#3a1f9a 100%);
    color:#fff;padding:18px 16px 0;position:relative;overflow:hidden;
  }
  .me-head::after{
    content:"";position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);pointer-events:none;
  }
  .me-top{display:flex;gap:14px;align-items:center;position:relative;z-index:1}
  .me-top .avatar{
    width:64px;height:64px;border-radius:18px;flex-shrink:0;position:relative;
    background:linear-gradient(135deg,#a18bff,#4327c8);
    display:grid;place-items:center;font-weight:700;font-size:22px;
    border:2px solid rgba(255,255,255,.5);
    box-shadow:0 8px 20px rgba(0,0,0,.2);
  }
  .me-top .avatar .badge-v{
    position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;
    background:#27c08f;border:2px solid #fff;display:grid;place-items:center;color:#fff;
  }
  .me-top .avatar .badge-v svg{width:10px;height:10px}
  .me-top .info{flex:1;min-width:0;padding-top:2px}
  .me-top .info h3{margin:0 0 4px;font-size:18px;font-weight:600;letter-spacing:.2px}
  .me-top .info .meta{font-size:11px;opacity:.75;display:flex;align-items:center;gap:4px}
  .me-top .info .meta .dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.4)}
  .me-top .qr{
    width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.12);
    display:grid;place-items:center;cursor:pointer;border:1px solid rgba(255,255,255,.15);
  }
  .me-top .qr:hover{background:rgba(255,255,255,.2)}

  .me-bio{position:relative;z-index:1;margin-top:14px;font-size:12.5px;line-height:1.55;opacity:.85;max-width:90%}
  .me-stats{
    position:relative;z-index:1;margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:10px 0;backdrop-filter:blur(6px);
  }
  .me-stats .it{text-align:center;cursor:pointer;position:relative}
  .me-stats .it:not(:last-child)::after{content:"";position:absolute;right:0;top:18%;bottom:18%;width:1px;background:rgba(255,255,255,.18)}
  .me-stats .it .v{font-size:17px;font-weight:700;line-height:1.1}
  .me-stats .it .l{font-size:10.5px;opacity:.7;margin-top:3px}

  .me-progress{
    position:relative;z-index:1;margin:14px 0 0;padding:12px 12px;border-radius:12px;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
    display:flex;align-items:center;gap:10px;cursor:pointer;
  }
  .me-progress .ring{
    width:36px;height:36px;border-radius:50%;
    background:conic-gradient(#fff 0 80%,rgba(255,255,255,.25) 80%);
    display:grid;place-items:center;flex-shrink:0;
  }
  .me-progress .ring span{width:28px;height:28px;border-radius:50%;background:#5b3fff;color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center}
  .me-progress .txt{flex:1;min-width:0}
  .me-progress .txt .t1{font-size:12.5px;font-weight:600}
  .me-progress .txt .t2{font-size:10.5px;opacity:.7;margin-top:2px}
  .me-progress .arr{opacity:.7}

  /* list cards */
  .me-card{
    background:#fff;margin:-8px 12px 12px;border-radius:18px;
    box-shadow:0 8px 22px rgba(20,12,80,.06);
    overflow:hidden;position:relative;
  }
  .me-group{padding:6px 0}
  .me-group + .me-group{border-top:8px solid #f7f7fb}
  .me-group-title{padding:8px 16px 4px;font-size:10.5px;color:#9aa0a6;letter-spacing:.6px;font-weight:500;text-transform:uppercase}
  .me-row{display:flex;align-items:center;gap:12px;padding:11px 16px;font-size:13.5px;color:#222;cursor:pointer;transition:background .15s}
  .me-row + .me-row{position:relative}
  .me-row + .me-row::before{content:"";position:absolute;left:54px;right:0;top:0;height:1px;background:#f3f3f8}
  .me-row:hover{background:#fafaff}
  .me-row .ic{
    width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;
  }
  .me-row .ic svg{width:16px;height:16px}
  .me-row .label{flex:1;font-weight:500}
  .me-row .sub{font-size:11px;color:#9aa0a6;margin-top:1px}
  .me-row .arr{color:#c5c8d6;flex-shrink:0}
  .me-row .badge{background:#ff4d6a;color:#fff;font-size:10px;padding:2px 7px;border-radius:99px;font-weight:500}

  /* icon bg tints */
  .ic-purple{background:#f3f0ff;color:#5b3fff}
  .ic-blue{background:#e8f1ff;color:#3b82f6}
  .ic-red{background:#ffecef;color:#ff4d6a}
  .ic-green{background:#e6f8ef;color:#1aa67a}
  .ic-orange{background:#fff3e6;color:#ff9a3c}
  .ic-pink{background:#ffeaf3;color:#ff6fa9}
  .ic-gray{background:#f1f2f6;color:#5b6271}

  /* quick grid 4 cells (used in client me) */
  .quick-grid{display:grid;grid-template-columns:repeat(4,1fr);margin:14px 12px 0;background:#fff;border-radius:16px;box-shadow:0 4px 16px rgba(20,12,80,.04);padding:8px 0}
  .quick-grid .it{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 0;cursor:pointer;position:relative}
  .quick-grid .it + .it::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:#f0f0f5}
  .quick-grid .it .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center}
  .quick-grid .it .ic svg{width:18px;height:18px}
  .quick-grid .it .l{font-size:11.5px;color:#222;font-weight:500}
  .quick-grid .it .num{position:absolute;top:6px;right:24%;background:#ff4d6a;color:#fff;font-size:9px;padding:1px 5px;border-radius:99px;font-weight:500;min-width:16px;text-align:center}

  /* brand badge (blue for B-side) */
  .brand-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:99px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);font-size:10px;color:#fff;font-weight:500}
  .brand-chip svg{width:10px;height:10px}
  .cme-progress .txt .t1{color:#1aa67a}
  .cme-progress .ring{background:conic-gradient(#27c08f 0 100%,rgba(255,255,255,.25) 100%)}

  /* find creator hero */
  .find-hero{
    position:relative;overflow:hidden;color:#fff;
    background:linear-gradient(135deg,#3a4dff 0%,#5b3fff 50%,#7c5cff 100%);
    padding:62px 16px 24px;
  }
  .find-hero::before{content:"";position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);right:-60px;top:-70px;pointer-events:none}
  .find-hero::after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(255,200,140,.18),transparent 70%);left:-30px;bottom:-50px;pointer-events:none}
  .find-hero .head{display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:1}
  .find-hero h2{margin:4px 0 6px;font-size:22px;font-weight:700;letter-spacing:.2px;position:relative;z-index:1}
  .find-hero .motto{font-size:12px;opacity:.85;position:relative;z-index:1}
  .find-hero .motto b{font-weight:700;background:rgba(255,255,255,.18);padding:1px 6px;border-radius:6px}

  .find-search{
    display:flex;align-items:center;gap:6px;margin-top:16px;padding:5px 5px 5px 14px;
    background:rgba(255,255,255,.96);border-radius:99px;position:relative;z-index:1;
    box-shadow:0 6px 20px rgba(58,30,150,.25);
  }
  .find-search svg{color:#7a7c9c;flex-shrink:0}
  .find-search input{flex:1;border:0;background:transparent;font-size:13px;outline:none;color:#222;padding:6px 0}
  .find-search input::placeholder{color:#9aa0a6}
  .find-search button{
    border:0;background:linear-gradient(135deg,#5b3fff,#7c5cff);color:#fff;
    padding:7px 16px;border-radius:99px;font-size:12.5px;font-weight:600;cursor:pointer;flex-shrink:0;
  }
  .find-search .filter{
    width:30px;height:30px;border-radius:50%;background:#f3f0ff;color:#5b3fff;
    display:grid;place-items:center;cursor:pointer;flex-shrink:0;
  }
  .find-search .filter:hover{background:#e8e2ff}

  .find-hot{display:flex;gap:6px;margin-top:14px;overflow-x:auto;position:relative;z-index:1;padding-bottom:2px}
  .find-hot::-webkit-scrollbar{display:none}
  .find-hot .chip{
    padding:5px 11px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);
    border-radius:99px;font-size:11.5px;color:#fff;white-space:nowrap;cursor:pointer;backdrop-filter:blur(6px);
  }
  .find-hot .chip.on{background:#fff;color:#5b3fff;font-weight:500;border-color:#fff}
  .find-hot .chip.hot::before{content:"🔥";margin-right:3px;font-size:9px}

  /* 4-cell quick */
  .find-grid{display:grid;grid-template-columns:repeat(4,1fr);margin:0 12px;background:#fff;border-radius:16px;box-shadow:0 4px 18px rgba(20,12,80,.05);padding:10px 0;position:relative;z-index:2;margin-top:-12px}
  .find-grid .it{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 0;cursor:pointer;position:relative}
  .find-grid .it + .it::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;background:#f0f0f5}
  .find-grid .it .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center}
  .find-grid .it .ic svg{width:16px;height:16px}
  .find-grid .it .l{font-size:11.5px;color:#222;font-weight:500}
  .find-grid .it .badge{position:absolute;top:4px;right:22%;background:linear-gradient(135deg,#ff6fa9,#ff9a3c);color:#fff;font-size:8.5px;padding:1px 5px;border-radius:99px;font-weight:500}

  /* banner */
  .find-banner{margin:14px 12px 0;border-radius:16px;height:110px;position:relative;overflow:hidden;cursor:pointer;
    background:linear-gradient(120deg,#1a1340 0%,#3a4dff 50%,#5b3fff 100%);color:#fff;padding:18px}
  .find-banner::before{content:"";position:absolute;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(255,200,140,.25),transparent 70%);right:-20px;bottom:-50px;pointer-events:none}
  .find-banner .tag{display:inline-block;padding:3px 8px;background:rgba(255,255,255,.2);border-radius:99px;font-size:10px;margin-bottom:6px;backdrop-filter:blur(4px);position:relative;z-index:1}
  .find-banner h3{margin:0 0 4px;font-size:15px;font-weight:600;position:relative;z-index:1}
  .find-banner p{margin:0 0 8px;font-size:11px;opacity:.85;position:relative;z-index:1}
  .find-banner .go{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.95);color:#3a1f9a;padding:5px 12px;border-radius:99px;font-size:11px;font-weight:600;position:relative;z-index:1}

  /* industry category grid */
  .find-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 12px 0}
  .find-cat{background:#fff;border-radius:14px;padding:12px 6px;text-align:center;cursor:pointer;transition:transform .15s;box-shadow:0 2px 8px rgba(20,12,80,.03)}
  .find-cat:hover{transform:translateY(-2px)}
  .find-cat .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;margin:0 auto 6px;font-size:18px}
  .find-cat .l{font-size:12px;color:#111;font-weight:500}
  .find-cat .sub{font-size:9.5px;color:#9aa0a6;margin-top:1px}

  /* explore (探索更多) */
  .search{padding:10px 14px 4px;background:#fff;position:sticky;top:0;z-index:5}
  .search .box{background:#f3f3f8;border-radius:99px;padding:8px 12px;display:flex;align-items:center;gap:6px;font-size:13px;color:#7a7c9c}
  .ex-tabs{display:flex;gap:18px;padding:6px 14px 8px;border-bottom:1px solid #f1f1f5;font-size:13px;color:#7a7c9c;background:#fff;position:sticky;top:50px;z-index:4}
  .ex-tabs .t{cursor:pointer;position:relative;padding:8px 0}
  .ex-tabs .t.active{color:#111;font-weight:600}
  .ex-tabs .t.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#111;border-radius:2px}
  .ex-feature{margin:12px 14px;height:90px;border-radius:14px;background:linear-gradient(120deg,#3a1f9a,#5b3fff);color:#fff;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between}
  .ex-feature h4{margin:0;font-size:15px}
  .ex-feature small{opacity:.85;font-size:11px}
  .ex-list{padding:4px 14px 80px}
  .ex-item{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid #f1f1f5}
  .ex-item .thumb{width:96px;height:64px;border-radius:8px;background:linear-gradient(135deg,#d8ccff,#9d82ff);flex-shrink:0;background-size:cover;background-position:center}
  .ex-item .meta{flex:1;min-width:0}
  .ex-item .meta h5{margin:0 0 4px;font-size:13px;color:#111;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .ex-item .meta .auth{font-size:11px;color:#5b3fff;display:flex;align-items:center;gap:4px}
  .ex-item .meta .stat{font-size:10px;color:#9aa0a6;margin-top:6px;display:flex;align-items:center;gap:8px}

  /* Client side */
  .client-search{padding:14px 16px 8px;background:#fff}
  .client-search h3{margin:0 0 4px;font-size:18px;color:#111}
  .client-search .sub{color:#7a7c9c;font-size:12px;margin-bottom:12px}
  .cs-input{display:flex;gap:8px}
  .cs-input input{flex:1;border:1px solid #ececf5;border-radius:99px;padding:10px 14px;font-size:13px;background:#fafaff;color:#222;outline:none}
  .cs-input input:focus{border-color:#5b3fff;background:#fff}
  .cs-input button{background:linear-gradient(135deg,#5b3fff,#7c5cff);color:#fff;border:0;padding:0 18px;border-radius:99px;font-size:13px;font-weight:500;cursor:pointer}
  .quick{padding:8px 16px 0}
  .quick h5{margin:10px 0 8px;font-size:12px;color:#7a7c9c;font-weight:500}
  .chips{display:flex;flex-wrap:wrap;gap:6px}
  .chips span{padding:6px 12px;border:1px solid #ececf5;border-radius:99px;font-size:12px;color:#222;cursor:pointer}
  .chips span.on{background:#5b3fff;color:#fff;border-color:#5b3fff}
  .recom-head{padding:16px 16px 8px;display:flex;justify-content:space-between;align-items:center}
  .recom-head h5{margin:0;font-size:13px;color:#111}
  .recom-head a{font-size:11px;color:#5b3fff}

  /* search results */
  .filter-bar{display:flex;gap:6px;padding:10px 14px;background:#fff;border-bottom:1px solid #f1f1f5;font-size:12px;color:#7a7c9c;overflow-x:auto}
  .filter-bar::-webkit-scrollbar{display:none}
  .filter-bar span{padding:5px 10px;border-radius:8px;background:#f3f3f8;color:#222;white-space:nowrap;cursor:pointer}
  .filter-bar span.active{background:#5b3fff;color:#fff}
  .sr-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid #f5f5f9;cursor:pointer}
  .sr-item:hover{background:#fafaff}
  .sr-item .av{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#c5b3ff,#7c5cff);display:grid;place-items:center;color:#fff;font-weight:600;flex-shrink:0}
  .sr-item .info{flex:1;min-width:0}
  .sr-item .info h5{margin:0;font-size:13px;color:#111}
  .sr-item .info p{margin:2px 0 0;font-size:11px;color:#7a7c9c}
  .sr-item .price{font-size:12px;color:#5b3fff;font-weight:600}
  .sr-foot{position:absolute;bottom:0;left:0;right:0;padding:10px 14px;background:#fff;border-top:1px solid #f1f1f5;display:flex;align-items:center;gap:10px;font-size:12px;color:#7a7c9c}
  .sr-foot .btn{padding:10px 22px;background:linear-gradient(135deg,#5b3fff,#7c5cff);color:#fff;border:0;border-radius:99px;font-size:13px;font-weight:500;cursor:pointer}

  /* creator detail (client) */
  .cd-hero{height:220px;background:linear-gradient(135deg,#1a1340,#5b3fff 70%,#b698ff);position:relative}
  .cd-hero .close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.3);color:#fff;display:grid;place-items:center;cursor:pointer}
  .cd-body{padding:0 16px 16px;background:#fff;margin-top:-30px;border-radius:20px 20px 0 0;position:relative}
  .cd-avatar{width:64px;height:64px;border-radius:16px;border:3px solid #fff;background:#e8defc;display:grid;place-items:center;color:#5b3fff;font-weight:700;box-shadow:0 6px 12px rgba(0,0,0,.1);position:absolute;top:-32px;left:16px}
  .cd-name{margin-left:80px;padding-top:12px}
  .cd-name h2{margin:0 0 2px;font-size:16px;color:#111}
  .cd-name small{color:#7a7c9c;font-size:11px}
  .cd-stats{display:flex;gap:0;justify-content:space-around;border:1px solid #ececf5;border-radius:12px;padding:10px 0;margin-top:10px}
  .cd-stats .v{font-size:14px;font-weight:600;color:#111;text-align:center;flex:1}
  .cd-stats .v small{display:block;font-size:10px;color:#9aa0a6;font-weight:400;margin-top:2px}
  .cd-pricecard{margin-top:14px;border:1px solid #ececf5;border-radius:14px;padding:14px}
  .cd-pricecard h5{margin:0 0 8px;font-size:13px;color:#111}
  .cd-price{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;color:#222}
  .cd-price .v b{color:#5b3fff;font-weight:600}
  .cd-cta{display:flex;gap:8px;padding:14px 16px;background:#fff;border-top:1px solid #f1f1f5;position:sticky;bottom:0}
  .cd-cta .ghost{flex:1;background:#f3f0ff;color:#5b3fff;border:0;padding:13px;border-radius:14px;font-weight:600;font-size:14px;cursor:pointer}
  .cd-cta .pri{flex:1;background:linear-gradient(135deg,#5b3fff,#7c5cff);color:#fff;border:0;padding:13px;border-radius:14px;font-weight:600;font-size:14px;cursor:pointer;box-shadow:0 8px 18px rgba(107,70,255,.35)}

  /* my list */
  .ml-head{padding:12px 16px;background:#fff;border-bottom:1px solid #f1f1f5;display:flex;justify-content:space-between;align-items:center;font-size:13px}
  .ml-head .del{color:#ff4d6a}
  .ml-item{display:flex;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid #f5f5f9;cursor:pointer}
  .ml-item .check{width:20px;height:20px;border-radius:50%;border:1.5px solid #c5c8d6;display:grid;place-items:center;flex-shrink:0}
  .ml-item.on .check{background:#5b3fff;border-color:#5b3fff}
  .ml-item.on .check::after{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
  .ml-item .av{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#c5b3ff,#7c5cff);display:grid;place-items:center;color:#fff;font-weight:600;font-size:13px}
  .ml-item .info{flex:1;min-width:0}
  .ml-item .info h5{margin:0;font-size:13px;color:#111}
  .ml-item .info p{margin:2px 0 0;font-size:11px;color:#7a7c9c}
  .ml-item .pr{font-size:12px;color:#5b3fff;font-weight:600}
  .ml-foot{position:absolute;bottom:0;left:0;right:0;padding:10px 14px;background:#fff;border-top:1px solid #f1f1f5;display:flex;align-items:center;gap:10px}
  .ml-foot .btn{padding:11px 24px;background:linear-gradient(135deg,#5b3fff,#7c5cff);color:#fff;border:0;border-radius:99px;font-size:13px;font-weight:500;cursor:pointer;margin-left:auto}

  /* export modal */
  .modal-mask{position:absolute;inset:0;background:rgba(0,0,0,.5);display:none;z-index:50;align-items:flex-end}
  .modal-mask.show{display:flex}
  .modal{background:#fff;width:100%;border-radius:20px 20px 0 0;padding:18px 18px 24px;animation:slideUp .25s ease}
  @keyframes slideUp{from{transform:translateY(40px)}to{transform:none}}
  .modal h4{margin:0 0 4px;font-size:16px}
  .modal p{color:#7a7c9c;font-size:12px;margin:0 0 12px}
  .opt{padding:14px 0;border-top:1px solid #f1f1f5}
  .opt h6{margin:0 0 8px;font-size:12px;color:#7a7c9c;font-weight:500}
  .opt label{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px;color:#222;cursor:pointer}
  .opt label .box{width:18px;height:18px;border-radius:5px;border:1.5px solid #c5c8d6;display:grid;place-items:center}
  .opt label .box.on{background:#5b3fff;border-color:#5b3fff}
  .opt label .box.on::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
  .opt .fmt{display:flex;gap:8px}
  .opt .fmt span{flex:1;padding:8px;border:1px solid #ececf5;border-radius:10px;text-align:center;font-size:12px;color:#222;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
  .opt .fmt span.on{border-color:#5b3fff;color:#5b3fff;background:#f6f3ff}
  .opt .excel-icon{color:#1aa67a}
  .opt .pdf-icon{color:#ff4d6a}
  .modal .confirm{margin-top:14px;width:100%;background:linear-gradient(135deg,#5b3fff,#7c5cff);color:#fff;border:0;padding:13px;border-radius:14px;font-weight:600;font-size:14px;cursor:pointer}
  .toast{position:absolute;left:50%;bottom:140px;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;padding:8px 14px;border-radius:99px;font-size:12px;z-index:60;opacity:0;transition:opacity .2s;pointer-events:none}
  .toast.show{opacity:1}

  /* search page overlay */
  .page-search-results{padding-top:0}

  /* progress bar accent on wizard */
  .wiz-step strong{color:#5b3fff}

  /* tiny logo for avatar (no real photo) */
  .av-photo{
    background-size:cover;background-position:center;
  }

  /* page-empty state */
  .empty{padding:60px 24px;text-align:center;color:#9aa0a6;font-size:13px}
  .empty svg{width:80px;height:80px;color:#e0d6ff;margin-bottom:8px}
</style>
</head>
<body>
<div class="app">

  <!-- top bar -->
  <div class="topbar">
    <div class="logo">
      <div class="dot"></div>
      <div>
        冒泡 · 小程序交互原型
        <div style="font-size:11px;font-weight:400;color:#7a7c9c;margin-top:2px">Mini Program · Interactive Prototype</div>
      </div>
    </div>
    <div class="spacer"></div>
    <div class="role-switch" id="roleSwitch">
      <button data-role="author" class="active">博主端</button>
      <button data-role="client">客户端</button>
    </div>
    <span class="tag">v0.1</span>
  </div>

  <!-- Center: phone stage -->
  <main class="stage">
    <div class="phone">
      <div class="notch"></div>
      <div class="phone-screen">
        <div class="status-bar">
          <span>9:41</span>
          <div class="right">
            <!-- signal -->
            <svg width="16" height="11" viewBox="0 0 16 11" fill="#111"><rect x="0" y="7" width="3" height="4" rx="1"/><rect x="4.5" y="5" width="3" height="6" rx="1"/><rect x="9" y="2.5" width="3" height="8.5" rx="1"/><rect x="13.5" y="0" width="3" height="11" rx="1"/></svg>
            <!-- wifi -->
            <svg width="14" height="10" viewBox="0 0 14 10" fill="#111"><path d="M7 9.5a1 1 0 110-2 1 1 0 010 2zM3.5 6.3a4.95 4.95 0 017 0l-1.2 1.2a3.25 3.25 0 00-4.6 0L3.5 6.3zM.7 3.5a8.7 8.7 0 0112.6 0l-1.2 1.2a6.95 6.95 0 00-10.2 0L.7 3.5z"/></svg>
            <!-- battery -->
            <svg width="26" height="11" viewBox="0 0 26 11" fill="none"><rect x=".5" y=".5" width="22" height="10" rx="2.5" stroke="#111"/><rect x="2" y="2" width="18" height="7" rx="1.5" fill="#111"/><rect x="23.5" y="3.5" width="1.5" height="4" rx=".75" fill="#111"/></svg>
          </div>
        </div>

        <div class="screen" id="screen">

          <!-- 1 splash (author) -->
          <section class="page splash active" id="p-splash">
            <span class="badge">小程序 · 全量 UI DEMO</span>
            <div class="logo-big"></div>
            <h1>冒泡</h1>
            <p class="sub">让好内容，被更多人看见</p>
            <div style="flex:1"></div>
            <p class="quote">嗨，<b>小熊</b>🐻<br/>欢迎来到冒泡！</p>
            <button class="splash-cta" data-go="p-home">立即体验</button>
            <p class="splash-foot">冒泡网络科技 · 体验版</p>
          </section>

          <!-- 2 author home -->
          <section class="page" id="p-home">
            <div class="appbar" style="background:transparent;color:#fff;border:0;position:absolute;left:0;right:0;top:0;z-index:5">
              <div class="title" style="color:#fff">冒泡</div>
              <div class="action" title="搜索" style="color:#fff">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              </div>
              <div class="action" title="更多" style="color:#fff">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></svg>
              </div>
            </div>
            <div style="flex:1;overflow-y:auto;background:#f7f7fb">
              <div class="home-hero">
                <div class="greet-line">
                  <div class="greet">☀️ 早上好 · 8月21日</div>
                </div>
                <h2>嗨，小熊 🐻</h2>
                <div class="motto">今天让好内容被更多人看见</div>
                <span class="ask"><span class="av">AI</span>问点什么</span>
              </div>

              <div class="data-grid">
                <div class="it">
                  <div class="v">1.2w<small>↑12%</small></div>
                  <div class="l">今日曝光</div>
                </div>
                <div class="it">
                  <div class="v">+128</div>
                  <div class="l">新增粉丝</div>
                </div>
                <div class="it">
                  <div class="v">3.4k<small>↑8%</small></div>
                  <div class="l">互动</div>
                </div>
                <div class="it">
                  <div class="v" style="color:#ff4d6a">2</div>
                  <div class="l">待办</div>
                </div>
              </div>

              <div class="home-status">
                <div class="ring"><span>85%</span></div>
                <div class="info">
                  <h4>资料完成度 85%</h4>
                  <p>还差 2 项即可获得专属推荐</p>
                </div>
                <div class="btns">
                  <button class="pri" data-go="p-wizard">去完善</button>
                  <button class="gh" data-go="p-public">查看主页</button>
                </div>
              </div>

              <div class="home-tasks">
                <div class="task-card task-purple" data-go="p-wizard">
                  <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2l3 6 6 1-4.5 4 1 6L12 16l-5.5 3 1-6L3 9l6-1z"/></svg></div>
                  <div class="txt">
                    <div class="t1">完善资料 · 获得专属推荐</div>
                    <div class="t2"><span class="tag">进行中</span>奖励 +50 经验值</div>
                  </div>
                  <svg class="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg>
                </div>
                <div class="task-card task-pink">
                  <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 12V8a2 2 0 00-2-2h-3l-1-2-4 2-4-2-1 2H5a2 2 0 00-2 2v4M4 12v6a2 2 0 002 2h12a2 2 0 002-2v-6"/></svg></div>
                  <div class="txt">
                    <div class="t1">🎉 创作活动 · 冬季主题征集</div>
                    <div class="t2"><span class="tag">新上线</span>奖金池 ¥30,000</div>
                  </div>
                  <svg class="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg>
                </div>
              </div>

              <div class="feature-banner">
                <span class="tag">主笔人说</span>
                <h3>2026 冬季灵感专题</h3>
                <p>5 位创作者,11 个内容方向,一个专题搞定</p>
                <span class="go">立即查看 ›</span>
              </div>

              <div class="section-title"><span>冒泡精选</span><span>查看全部</span></div>
              <div class="vlog-scroll">
                <div class="vlog-card" onclick="go('p-explore')">
                  <div class="cover av-photo" style="background-image:linear-gradient(135deg,#ff8aae,#7c5cff)">
                    <div class="play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
                    <div class="dur">2:08</div>
                  </div>
                  <div class="meta">冬日穿搭笔记<div class="views">♡ 1.2万</div></div>
                </div>
                <div class="vlog-card" onclick="go('p-explore')">
                  <div class="cover av-photo" style="background-image:linear-gradient(135deg,#a18bff,#4327c8)">
                    <div class="play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
                    <div class="dur">1:36</div>
                  </div>
                  <div class="meta">品牌挚爱合集<div class="views">♡ 8.5千</div></div>
                </div>
                <div class="vlog-card" onclick="go('p-explore')">
                  <div class="cover av-photo" style="background-image:linear-gradient(135deg,#27c08f,#a18bff)">
                    <div class="play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
                    <div class="dur">3:24</div>
                  </div>
                  <div class="meta">小众城市漫步<div class="views">♡ 5.1千</div></div>
                </div>
                <div class="vlog-card" onclick="go('p-explore')">
                  <div class="cover av-photo" style="background-image:linear-gradient(135deg,#ff9a3c,#ff6fa9)">
                    <div class="play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
                    <div class="dur">4:12</div>
                  </div>
                  <div class="meta">暖冬家居好物<div class="views">♡ 3.7千</div></div>
                </div>
              </div>
              <div style="height:80px"></div>
            </div>
            <div class="tabbar">
              <div class="tab active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 11l9-7 9 7"/><path d="M5 10v10h14V10"/></svg>首页</div>
              <div class="tab" data-go="p-explore"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>探索</div>
              <div class="tab" data-go="p-me"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0116 0"/></svg>我的</div>
            </div>
          </section>

          <!-- 3 public profile -->
          <section class="page" id="p-public">
            <div class="pub-cover">
              <div class="pub-back" data-go="p-home">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M15 6l-6 6 6 6"/></svg>
              </div>
            </div>
            <div class="pub-head">
              <div class="pub-avatar">小</div>
              <div class="pub-name">
                <h2>小熊的生活日记</h2>
                <div class="loc">📍 北京 · 小红书</div>
                <div class="pub-tags">
                  <span class="chip">冒泡创作者</span>
                </div>
              </div>
              <div class="pub-stats">
                <div><div class="v">32.6万</div><div class="l">粉丝</div></div>
                <div><div class="v">6.2%</div><div class="l">互动率</div></div>
                <div><div class="v">3.1万</div><div class="l">平均点赞</div></div>
              </div>
              <div class="pub-tabs">
                <div class="t active">母婴</div>
                <div class="t">生活方式</div>
                <div class="t">家居</div>
                <div class="t">好物分享</div>
                <div class="t">+</div>
              </div>
              <div style="margin-top:14px">
                <div style="font-size:13px;font-weight:600;color:#111;margin-bottom:8px">合作报价（图文 / 视频）</div>
                <div style="display:flex;justify-content:space-between;padding:10px 12px;border:1px solid #ececf5;border-radius:12px;margin-bottom:6px">
                  <div style="font-size:12px;color:#7a7c9c">图文</div>
                  <div style="font-weight:600;color:#5b3fff">¥ 3,000 / 篇</div>
                </div>
                <div style="display:flex;justify-content:space-between;padding:10px 12px;border:1px solid #ececf5;border-radius:12px">
                  <div style="font-size:12px;color:#7a7c9c">视频</div>
                  <div style="font-weight:600;color:#5b3fff">¥ 5,000 / 条</div>
                </div>
                <div style="margin-top:8px;font-size:11px;color:#7a7c9c">* 具体价格以创作者实际沟通为准</div>
              </div>
              <div style="font-size:13px;font-weight:600;color:#111;margin:18px 0 8px">代表作品</div>
              <div class="vlog-scroll" style="padding:0">
                <div class="vlog-card" style="flex:0 0 96px">
                  <div class="cover av-photo" style="background-image:linear-gradient(135deg,#ffd1a8,#ff8aae)">
                    <div class="play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
                    <div class="dur">2.1万</div>
                  </div>
                </div>
                <div class="vlog-card" style="flex:0 0 96px">
                  <div class="cover av-photo" style="background-image:linear-gradient(135deg,#a18bff,#4327c8)">
                    <div class="play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
                    <div class="dur">3.6万</div>
                  </div>
                </div>
                <div class="vlog-card" style="flex:0 0 96px">
                  <div class="cover av-photo" style="background-image:linear-gradient(135deg,#27c08f,#5b3fff)">
                    <div class="play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
                    <div class="dur">2.8万</div>
                  </div>
                </div>
              </div>
              <div style="height:24px"></div>
            </div>
          </section>

          <!-- 4 wizard (profile) -->
          <section class="page" id="p-wizard">
            <div class="appbar">
              <div class="back" data-go="p-home">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M15 6l-6 6 6 6"/></svg>
              </div>
              <div class="title">完善资料</div>
            </div>
            <div style="flex:1;overflow-y:auto">
              <div class="wiz-step" id="wizStepLabel">第 <strong>1</strong> / 5 步 · 基础信息</div>
              <div class="wiz-progress"><i id="wizBar" style="width:20%"></i></div>

              <!-- step 1: 基础信息 -->
              <div class="wiz-list wiz-pane" data-step="1">
                <div class="wiz-row"><span>昵称</span><span class="val">小熊的生活日记</span></div>
                <div class="wiz-row"><span>所在地</span><span class="val">北京 · 朝阳区</span></div>
                <div class="wiz-row"><span>主营平台</span><span class="val">小红书</span></div>
                <div class="wiz-row"><span>个人简介</span><span class="val placeholder" id="wiz-bio">未填写</span></div>
              </div>

              <!-- step 2: 数据展示 -->
              <div class="wiz-list wiz-pane" data-step="2" style="display:none">
                <div class="wiz-row"><span>粉丝量</span><span class="val">8.6万</span></div>
                <div class="wiz-row"><span>平均点赞</span><span class="val">2,143</span></div>
                <div class="wiz-row"><span>平均评论</span><span class="val">186</span></div>
                <div class="wiz-row"><span>近 30 天更新</span><span class="val">12 篇</span></div>
                <div style="padding:12px 0 0;font-size:11px;color:#9aa0a6;line-height:1.6">提示：数据将自动同步平台公开数据,无需手动填写。</div>
              </div>

              <!-- step 3: 类目标签 -->
              <div class="wiz-list wiz-pane" data-step="3" style="display:none">
                <div style="font-size:13px;color:#222;padding:6px 0 10px">选择你擅长或感兴趣的内容方向（最多 5 个）</div>
                <div class="chips" style="padding:0">
                  <span class="on">母婴</span><span>亲子</span><span>穿搭</span><span>美妆</span><span class="on">家居</span><span>生活方式</span><span>旅行</span><span>美食</span><span>数码</span><span>萌宠</span><span>职场</span><span>读书</span>
                </div>
                <div style="padding:18px 0 0;font-size:13px;color:#222">内容形式</div>
                <div class="chips" style="padding:6px 0 0">
                  <span class="on">图文</span><span>短视频</span><span>直播</span>
                </div>
              </div>

              <!-- step 4: 合作报价 -->
              <div class="wiz-list wiz-pane" data-step="4" style="display:none">
                <div style="font-size:12px;color:#7a7c9c;padding:6px 0 10px">参考同行报价,可后续修改</div>
                <div class="wiz-row"><span>图文 · 单篇</span><span class="val">¥ 3,000</span></div>
                <div class="wiz-row"><span>视频 · 单条</span><span class="val">¥ 5,000</span></div>
                <div class="wiz-row"><span>套餐 · 月度</span><span class="val placeholder">未设置</span></div>
                <div class="wiz-row"><span>直播 · 小时</span><span class="val placeholder">未设置</span></div>
                <div style="padding:12px 0 0;font-size:11px;color:#9aa0a6;line-height:1.6">* 价格仅展示给已通过认证的品牌方,粉丝不会看到。</div>
              </div>

              <!-- step 5: 作品与联系 -->
              <div class="wiz-list wiz-pane" data-step="5" style="display:none">
                <div class="wiz-row"><span>代表作品 1</span><span class="val">冬日穿搭笔记</span></div>
                <div class="wiz-row"><span>代表作品 2</span><span class="val">小众城市漫步</span></div>
                <div class="wiz-row"><span>代表作品 3</span><span class="val">品牌挚爱合集</span></div>
                <div class="wiz-row"><span>微信号</span><span class="val placeholder" id="wiz-contact">请填写</span></div>
                <div class="wiz-row"><span>邮箱</span><span class="val">bear@maopao.cn</span></div>
                <div style="padding:14px 0 0;font-size:12px;color:#1aa67a;background:#e7faf2;border-radius:10px;padding:10px 12px;line-height:1.5">✓ 提交后将进入审核,通常 1 个工作日内反馈。</div>
              </div>
            </div>
            <div class="wiz-foot">
              <button class="btn-primary" id="wizNext" style="position:relative">
                <span id="wizNextLabel">下一步</span>
              </button>
            </div>
          </section>

          <!-- 5 me -->
          <section class="page" id="p-me">
            <div class="appbar" style="background:linear-gradient(160deg,#5b3fff 0%,#3a1f9a 100%);color:#fff;border-bottom:0;position:relative;z-index:2">
              <div class="title" style="color:#fff">我的</div>
              <div class="action" style="color:#fff"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1a1.7 1.7 0 001.5-1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3h.1a1.7 1.7 0 001-1.5V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8v.1a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z"/></svg></div>
            </div>
            <div style="flex:1;overflow-y:auto;background:#f7f7fb">
              <div class="me-head">
                <div class="me-top">
                  <div class="avatar">
                    小
                    <div class="badge-v"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l4 4L19 7"/></svg></div>
                  </div>
                  <div class="info">
                    <h3>小熊的生活日记</h3>
                    <div class="meta">
                      <span>📍 北京</span><span class="dot"></span>
                      <span>小红书</span><span class="dot"></span>
                      <span>母婴博主</span>
                    </div>
                  </div>
                  <div class="qr" title="个人名片">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 14h3v3M21 14v3M14 21h3M21 18v3"/></svg>
                  </div>
                </div>
                <div class="me-bio">90 后妈妈，分享带娃日常 · 母婴好物 · 居家生活，让妈妈不焦虑 ✨</div>
                <div class="me-stats">
                  <div class="it"><div class="v">32.6w</div><div class="l">粉丝</div></div>
                  <div class="it"><div class="v">128</div><div class="l">作品</div></div>
                  <div class="it"><div class="v">6.2%</div><div class="l">互动率</div></div>
                </div>
                <div class="me-progress" data-go="p-wizard">
                  <div class="ring"><span>80%</span></div>
                  <div class="txt">
                    <div class="t1">资料完整度 80%</div>
                    <div class="t2">还差 2 项即可获得专属推荐</div>
                  </div>
                  <svg class="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg>
                </div>
                <div style="height:18px"></div>
              </div>

              <div class="me-card">

                <div class="me-group">
                  <div class="me-group-title">创作</div>
                  <div class="me-row" data-go="p-public">
                    <div class="ic ic-purple"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>
                    <div style="flex:1">
                      <div class="label">我的主页（公开）</div>
                      <div class="sub">品牌方看到的样子</div>
                    </div>
                    <svg class="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg>
                  </div>
                  <div class="me-row" data-go="p-wizard">
                    <div class="ic ic-blue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 113 3L7 19l-4 1 1-4z"/></svg></div>
                    <div style="flex:1">
                      <div class="label">编辑资料</div>
                      <div class="sub">5 步完善,获得更多曝光</div>
                    </div>
                    <svg class="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg>
                  </div>
                </div>

                <div class="me-group">
                  <div class="me-group-title">提醒与数据</div>
                  <div class="me-row">
                    <div class="ic ic-red"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/><path d="M11 7h2v4h-2zM11 13h2v2h-2z"/></svg></div>
                    <div style="flex:1">
                      <div class="label">资料更新提醒</div>
                      <div class="sub">建议补全联系方式与简介</div>
                    </div>
                    <span class="badge">2</span>
                    <svg class="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" style="margin-left:6px"><path d="M9 6l6 6-6 6"/></svg>
                  </div>
                  <div class="me-row">
                    <div class="ic ic-green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg></div>
                    <div style="flex:1">
                      <div class="label">数据看板</div>
                      <div class="sub">近 30 天表现</div>
                    </div>
                    <svg class="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg>
                  </div>
                </div>

                <div class="me-group">
                  <div class="me-group-title">账户与支持</div>
                  <div class="me-row">
                    <div class="ic ic-orange"><svg viewBox="0 0 24 24" 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></div>
                    <div style="flex:1">
                      <div class="label">账号与安全</div>
                      <div class="sub">手机、密码、实名</div>
                    </div>
                    <svg class="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg>
                  </div>
                  <div class="me-row">
                    <div class="ic ic-pink"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 0118 0v6a2 2 0 01-2 2h-2v-7h4M3 12v6a2 2 0 002 2h2v-7H3"/></svg></div>
                    <div style="flex:1">
                      <div class="label">联系客服</div>
                      <div class="sub">7×24 小时在线</div>
                    </div>
                    <svg class="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg>
                  </div>
                  <div class="me-row">
                    <div class="ic ic-gray"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1a1.7 1.7 0 001.5-1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3h.1a1.7 1.7 0 001-1.5V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8v.1a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z"/></svg></div>
                    <div style="flex:1">
                      <div class="label">设置</div>
                      <div class="sub">通知、隐私、缓存</div>
                    </div>
                    <svg class="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg>
                  </div>
                </div>

              </div>
              <div style="height:20px"></div>
            </div>
            <div class="tabbar">
              <div class="tab" data-go="p-home"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 11l9-7 9 7"/><path d="M5 10v10h14V10"/></svg>首页</div>
              <div class="tab" data-go="p-explore"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>探索</div>
              <div class="tab active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0116 0"/></svg>我的</div>
            </div>
          </section>

          <!-- 6 explore -->
          <section class="page" id="p-explore">
            <div class="search">
              <div class="box">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7a7c9c" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
                <span>搜内容、品类或创作者</span>
              </div>
            </div>
            <div class="ex-tabs">
              <div class="t active">精选</div>
              <div class="t">大视说</div>
              <div class="t">品牌案例</div>
              <div class="t">行业活动</div>
            </div>
            <div style="overflow-y:auto;flex:1">
              <div class="ex-feature">
                <div>
                  <h4>如何让内容更有商业价值？</h4>
                  <small>主笔人说 · 1.3万 次学习</small>
                </div>
                <div style="align-self:flex-end;background:rgba(255,255,255,.18);padding:5px 12px;border-radius:99px;font-size:11px">立即学习</div>
              </div>
              <div class="section-title">精选内容</div>
              <div class="ex-list">
                <div class="ex-item">
                  <div class="thumb av-photo" style="background-image:linear-gradient(135deg,#ffb0c8,#7c5cff)"></div>
                  <div class="meta">
                    <h5>从 0 到百万粉丝，内容定位的高质量逻辑</h5>
                    <div class="auth">@豆包_Bearrs</div>
                    <div class="stat">♡ 1.2w · 💬 342</div>
                  </div>
                </div>
                <div class="ex-item">
                  <div class="thumb av-photo" style="background-image:linear-gradient(135deg,#a18bff,#4327c8)"></div>
                  <div class="meta">
                    <h5>家居品类如何通过内容拉动年轻人？</h5>
                    <div class="auth">@李四</div>
                    <div class="stat">♡ 8923 · 💬 156</div>
                  </div>
                </div>
                <div class="ex-item">
                  <div class="thumb av-photo" style="background-image:linear-gradient(135deg,#27c08f,#5b3fff)"></div>
                  <div class="meta">
                    <h5>2026 下半年，值得关注的内容趋势</h5>
                    <div class="auth">@小熊</div>
                    <div class="stat">♡ 1.5w · 💬 478</div>
                  </div>
                </div>
                <div class="ex-item">
                  <div class="thumb av-photo" style="background-image:linear-gradient(135deg,#ff9a3c,#ff6fa9)"></div>
                  <div class="meta">
                    <h5>小红书品牌种草的五个关键变量</h5>
                    <div class="auth">@小柒</div>
                    <div class="stat">♡ 6582 · 💬 89</div>
                  </div>
                </div>
                <div class="ex-item">
                  <div class="thumb av-photo" style="background-image:linear-gradient(135deg,#5b3fff,#27c08f)"></div>
                  <div class="meta">
                    <h5>博主接广告前，要先问自己的三个问题</h5>
                    <div class="auth">@阿May</div>
                    <div class="stat">♡ 2.1w · 💬 612</div>
                  </div>
                </div>
              </div>
              <div style="height:80px"></div>
            </div>
            <div class="tabbar">
              <div class="tab" data-go="p-home"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 11l9-7 9 7"/><path d="M5 10v10h14V10"/></svg>首页</div>
              <div class="tab active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>探索</div>
              <div class="tab" data-go="p-me"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0116 0"/></svg>我的</div>
            </div>
          </section>

          <!-- ========= CLIENT ========= -->

          <!-- 1 find creator (client home) -->
          <section class="page" id="p-find">
            <div class="appbar" style="background:transparent;color:#fff;border:0;position:absolute;left:0;right:0;top:0;z-index:5">
              <div class="title" style="color:#fff">冒泡</div>
              <div class="action" title="搜索" style="color:#fff">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
              </div>
              <div class="action" title="更多" style="color:#fff">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></svg>
              </div>
            </div>
            <div style="flex:1;overflow-y:auto;background:#f7f7fb">
              <div class="find-hero">
                <div class="head">
                  <div class="motto">👋 嗨，品牌方</div>
                </div>
                <h2>找创作者</h2>
                <div class="motto"><b>6,000+</b> 优质创作者 · <b>5</b> 大行业 · 24h 反馈</div>
                <div class="find-search">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
                  <input id="findInput" placeholder="搜索关键词 · 母婴 / 北京 / 5w粉" />
                  <div class="filter" title="高级筛选">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M6 12h12M10 18h4"/></svg>
                  </div>
                  <button data-go="p-results">搜索</button>
                </div>
                <div class="find-hot">
                  <span class="chip hot on">母婴</span>
                  <span class="chip">家居</span>
                  <span class="chip">美妆</span>
                  <span class="chip">穿搭</span>
                  <span class="chip">美食</span>
                  <span class="chip">萌宠</span>
                  <span class="chip">数码</span>
                  <span class="chip">旅行</span>
                </div>
              </div>

              <div class="find-grid">
                <div class="it">
                  <div class="ic ic-purple"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></div>
                  <div class="l">今日推荐</div>
                  <span class="badge">新</span>
                </div>
                <div class="it">
                  <div class="ic ic-orange"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2c1 3 4 5 7 6-3 1-5 3-7 6-2-3-4-5-7-6 3-1 6-3 7-6z"/></svg></div>
                  <div class="l">高活跃</div>
                </div>
                <div class="it">
                  <div class="ic ic-green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3v18M6 7l8-4 4 4v12l-4 4-8-4z"/><path d="M10 11l2 2 4-4"/></svg></div>
                  <div class="l">优质创作者</div>
                </div>
                <div class="it">
                  <div class="ic ic-pink"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h7l-1 8 10-12h-7z"/></svg></div>
                  <div class="l">限时合作</div>
                </div>
              </div>

              <div class="find-banner">
                <span class="tag">🎯 冬季内容专题</span>
                <h3>8 位穿搭博主 · 限时优惠</h3>
                <p>即日起 7 天内,签约即送数据复盘报告</p>
                <span class="go">立即查看 ›</span>
              </div>

              <div class="section-title"><span>行业分类</span><span data-go="p-results" style="cursor:pointer">全部 ›</span></div>
              <div class="find-cats">
                <div class="find-cat" data-go="p-results">
                  <div class="ic ic-purple" style="background:#f3f0ff">👶</div>
                  <div class="l">母婴</div>
                  <div class="sub">2,134 位</div>
                </div>
                <div class="find-cat" data-go="p-results">
                  <div class="ic ic-blue" style="background:#e8f1ff">🛋️</div>
                  <div class="l">家居</div>
                  <div class="sub">1,562 位</div>
                </div>
                <div class="find-cat" data-go="p-results">
                  <div class="ic ic-pink" style="background:#ffeaf3">💄</div>
                  <div class="l">美妆</div>
                  <div class="sub">986 位</div>
                </div>
                <div class="find-cat" data-go="p-results">
                  <div class="ic ic-orange" style="background:#fff3e6">👗</div>
                  <div class="l">穿搭</div>
                  <div class="sub">1,847 位</div>
                </div>
                <div class="find-cat" data-go="p-results">
                  <div class="ic ic-red" style="background:#ffecef">🍰</div>
                  <div class="l">美食</div>
                  <div class="sub">1,203 位</div>
                </div>
                <div class="find-cat" data-go="p-results">
                  <div class="ic ic-gray" style="background:#f1f2f6">📱</div>
                  <div class="l">数码</div>
                  <div class="sub">562 位</div>
                </div>
                <div class="find-cat" data-go="p-results">
                  <div class="ic ic-green" style="background:#e6f8ef">🐱</div>
                  <div class="l">萌宠</div>
                  <div class="sub">893 位</div>
                </div>
                <div class="find-cat" data-go="p-results">
                  <div class="ic ic-blue" style="background:#e8f1ff">✈️</div>
                  <div class="l">旅行</div>
                  <div class="sub">715 位</div>
                </div>
              </div>

              <div class="section-title"><span>今日精选</span><span data-go="p-results" style="cursor:pointer">更多 ›</span></div>
              <div class="vlog-scroll">
                <div class="vlog-card" data-go="p-detail" style="flex:0 0 130px">
                  <div class="cover av-photo" style="background-image:linear-gradient(135deg,#ffb0c8,#7c5cff);aspect-ratio:1/1">
                    <div class="play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
                    <div class="dur">29.6万粉</div>
                  </div>
                  <div class="meta">小熊的生活日记<div class="views">¥ 3,000 / 篇</div></div>
                </div>
                <div class="vlog-card" data-go="p-detail" style="flex:0 0 130px">
                  <div class="cover av-photo" style="background-image:linear-gradient(135deg,#a18bff,#4327c8);aspect-ratio:1/1">
                    <div class="play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
                    <div class="dur">26.4万粉</div>
                  </div>
                  <div class="meta">一只猫猫<div class="views">¥ 2,800 / 篇</div></div>
                </div>
                <div class="vlog-card" data-go="p-detail" style="flex:0 0 130px">
                  <div class="cover av-photo" style="background-image:linear-gradient(135deg,#27c08f,#5b3fff);aspect-ratio:1/1">
                    <div class="play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
                    <div class="dur">16.8万粉</div>
                  </div>
                  <div class="meta">可乐妈育儿记<div class="views">¥ 2,600 / 篇</div></div>
                </div>
                <div class="vlog-card" data-go="p-detail" style="flex:0 0 130px">
                  <div class="cover av-photo" style="background-image:linear-gradient(135deg,#ff9a3c,#ff6fa9);aspect-ratio:1/1">
                    <div class="play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
                    <div class="dur">18.7万粉</div>
                  </div>
                  <div class="meta">豆豆的成长日记<div class="views">¥ 2,500 / 篇</div></div>
                </div>
              </div>
              <div style="height:80px"></div>
            </div>
            <div class="tabbar">
              <div class="tab active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 11l9-7 9 7"/><path d="M5 10v10h14V10"/></svg>找创作者</div>
              <div class="tab" data-go="p-list"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>我的名单</div>
              <div class="tab" data-go="p-cme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0116 0"/></svg>我的</div>
            </div>
          </section>

          <!-- 2 search results -->
          <section class="page" id="p-results">
            <div class="appbar">
              <div class="back" data-go="p-find"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M15 6l-6 6 6 6"/></svg></div>
              <div class="box" style="flex:1;background:#f3f3f8;border-radius:99px;padding:7px 12px;display:flex;align-items:center;gap:6px;font-size:13px;color:#222">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7a7c9c" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
                <span>母婴·北京</span>
                <span style="margin-left:auto;color:#9aa0a6;font-size:14px">×</span>
              </div>
              <div class="action" style="font-size:13px">取消</div>
            </div>
            <div class="filter-bar">
              <span>综合</span>
              <span class="active">粉丝量 ↓</span>
              <span>地区</span>
              <span>报价</span>
              <span>活跃度</span>
            </div>
            <div style="flex:1;overflow-y:auto;padding-bottom:80px" id="resultsList">
              <div class="sr-item" data-go="p-detail">
                <div class="av">小</div>
                <div class="info">
                  <h5>小熊的生活日记 <span style="color:#5b3fff;font-size:10px;background:#f3f0ff;padding:1px 6px;border-radius:99px;margin-left:4px">冒泡创作者</span></h5>
                  <p>32.6万粉 · 北京</p>
                </div>
                <div class="price">¥3,000 / 篇</div>
              </div>
              <div class="sr-item" data-go="p-detail">
                <div class="av" style="background:linear-gradient(135deg,#ff8aae,#a18bff)">可</div>
                <div class="info">
                  <h5>可乐妈育儿记</h5>
                  <p>15.6万粉 · 北京</p>
                </div>
                <div class="price">¥2,600 / 篇</div>
              </div>
              <div class="sr-item" data-go="p-detail">
                <div class="av" style="background:linear-gradient(135deg,#a18bff,#27c08f)">阿</div>
                <div class="info">
                  <h5>阿May 在成长</h5>
                  <p>28.7万粉 · 北京</p>
                </div>
                <div class="price">¥2,800 / 篇</div>
              </div>
              <div class="sr-item" data-go="p-detail">
                <div class="av" style="background:linear-gradient(135deg,#ff9a3c,#ff6fa9)">豆</div>
                <div class="info">
                  <h5>豆豆的成长日记</h5>
                  <p>18.7万粉 · 北京</p>
                </div>
                <div class="price">¥2,500 / 篇</div>
              </div>
              <div class="sr-item" data-go="p-detail">
                <div class="av" style="background:linear-gradient(135deg,#5b3fff,#7c5cff)">栗</div>
                <div class="info">
                  <h5>栗子猫</h5>
                  <p>15.2万粉 · 深圳</p>
                </div>
                <div class="price">¥2,200 / 篇</div>
              </div>
            </div>
            <div class="sr-foot">
              <span>已选 <b style="color:#5b3fff" id="srCount">3</b> 位</span>
              <button class="btn" data-go="p-list" style="margin-left:auto">查看名单</button>
            </div>
          </section>

          <!-- 3 creator detail -->
          <section class="page" id="p-detail">
            <div class="cd-hero">
              <div class="close" data-go="p-results"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M6 6l12 12M18 6L6 18"/></svg></div>
            </div>
            <div style="flex:1;overflow-y:auto;background:#fff">
              <div class="cd-body">
                <div class="cd-avatar">小</div>
                <div class="cd-name">
                  <h2>小熊的生活日记 <span style="color:#5b3fff;font-size:10px;background:#f3f0ff;padding:2px 6px;border-radius:99px;margin-left:4px;vertical-align:middle">冒泡创作者</span></h2>
                  <small>📍 北京 · 小红书</small>
                </div>
                <div class="cd-stats">
                  <div class="v">32.6万<small>粉丝</small></div>
                  <div class="v">6.2%<small>互动率</small></div>
                  <div class="v">3.1万<small>平均点赞</small></div>
                </div>
                <div style="display:flex;gap:6px;margin-top:10px">
                  <span class="chip">母婴</span>
                  <span class="chip" style="background:#f1faf5;color:#1aa67a">生活方式</span>
                  <span class="chip" style="background:#fff0f6;color:#ff4d6a">好物分享</span>
                </div>
                <div class="cd-pricecard">
                  <h5>合作报价（图 / 视频）</h5>
                  <div class="cd-price"><span>图文</span><span class="v"><b>¥ 3,000</b> / 篇</span></div>
                  <div class="cd-price"><span>视频</span><span class="v"><b>¥ 5,000</b> / 条</span></div>
                  <div style="font-size:10px;color:#9aa0a6;margin-top:8px">* 具体价格以实际沟通为准</div>
                </div>
                <div style="font-size:13px;font-weight:600;color:#111;margin:18px 0 8px">代表作品</div>
                <div class="vlog-scroll" style="padding:0">
                  <div class="vlog-card" style="flex:0 0 96px"><div class="cover av-photo" style="background-image:linear-gradient(135deg,#ffd1a8,#ff8aae)"><div class="play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div><div class="dur">2.1万</div></div></div>
                  <div class="vlog-card" style="flex:0 0 96px"><div class="cover av-photo" style="background-image:linear-gradient(135deg,#a18bff,#4327c8)"><div class="play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div><div class="dur">3.6万</div></div></div>
                  <div class="vlog-card" style="flex:0 0 96px"><div class="cover av-photo" style="background-image:linear-gradient(135deg,#27c08f,#5b3fff)"><div class="play"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div><div class="dur">2.8万</div></div></div>
                </div>
                <div style="height:24px"></div>
              </div>
            </div>
            <div class="cd-cta">
              <button class="ghost" id="addBtn" data-go="p-list">加入名单</button>
              <button class="pri">联系冒泡</button>
            </div>
          </section>

          <!-- 4 my list -->
          <section class="page" id="p-list">
            <div class="appbar">
              <div class="back" data-go="p-find"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M15 6l-6 6 6 6"/></svg></div>
              <div class="title">我的名单 <span style="color:#9aa0a6;font-size:12px;font-weight:400" id="listCountTag">(8)</span></div>
              <div class="action"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 21l-4.3-4.3"/><circle cx="11" cy="11" r="7"/></svg></div>
            </div>
            <div class="ml-head">
              <span>已选 <b id="selCount" style="color:#5b3fff">3</b> 位</span>
              <span class="del">清空选择</span>
            </div>
            <div style="flex:1;overflow-y:auto;padding-bottom:90px" id="mlList">
              <div class="ml-item on" data-name="小熊的生活日记" data-price="32.6万 / 3.0万">
                <div class="check"></div>
                <div class="av">小</div>
                <div class="info"><h5>小熊的生活日记</h5><p>粉丝 32.6万 · 互动 6.2%</p></div>
                <div class="pr">¥3,000</div>
              </div>
              <div class="ml-item on" data-name="一只猫猫" data-price="26.4万 / 2.8万">
                <div class="check"></div>
                <div class="av" style="background:linear-gradient(135deg,#ff8aae,#a18bff)">一</div>
                <div class="info"><h5>一只猫猫</h5><p>粉丝 26.4万 · 互动 5.8%</p></div>
                <div class="pr">¥2,800</div>
              </div>
              <div class="ml-item on" data-name="阿May 在成长" data-price="28.7万 / 2.6万">
                <div class="check"></div>
                <div class="av" style="background:linear-gradient(135deg,#a18bff,#27c08f)">阿</div>
                <div class="info"><h5>阿May 在成长</h5><p>粉丝 28.7万 · 互动 4.9%</p></div>
                <div class="pr">¥2,600</div>
              </div>
              <div class="ml-item" data-name="可乐妈育儿记" data-price="15.6万 / 2.6万">
                <div class="check"></div>
                <div class="av" style="background:linear-gradient(135deg,#ff8aae,#a18bff)">可</div>
                <div class="info"><h5>可乐妈育儿记</h5><p>粉丝 15.6万 · 互动 4.6%</p></div>
                <div class="pr">¥2,600</div>
              </div>
              <div class="ml-item" data-name="豆豆的成长日记" data-price="18.7万 / 2.5万">
                <div class="check"></div>
                <div class="av" style="background:linear-gradient(135deg,#ff9a3c,#ff6fa9)">豆</div>
                <div class="info"><h5>豆豆的成长日记</h5><p>粉丝 18.7万 · 互动 5.2%</p></div>
                <div class="pr">¥2,500</div>
              </div>
            </div>
            <div class="ml-foot">
              <button class="btn" data-go="p-export">导出名单</button>
            </div>
          </section>

          <!-- 5 export -->
          <section class="page" id="p-export">
            <div class="appbar">
              <div class="back" data-go="p-list"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M15 6l-6 6 6 6"/></svg></div>
              <div class="title">导出名单</div>
            </div>
            <div style="flex:1;overflow-y:auto;background:#fafaff;padding:14px 16px;font-size:13px;color:#222">
              <div style="background:#fff;border:1px solid #ececf5;border-radius:12px;padding:14px;margin-bottom:12px">
                <div style="font-size:12px;color:#7a7c9c;margin-bottom:6px">将导出内容（同名覆盖）</div>
                <div style="font-weight:600">冒泡_创作者名单_v1.xlsx</div>
              </div>
              <div style="font-size:13px;font-weight:600;color:#111;margin-bottom:6px">导出内容</div>
              <div style="background:#fff;border:1px solid #ececf5;border-radius:12px;padding:6px 14px">
                <label><span class="box on" id="ck1"></span>基础信息（头像、昵称、平台、粉丝数）</label>
                <label><span class="box on" id="ck2"></span>内容标签</label>
                <label><span class="box on" id="ck3"></span>报价信息</label>
                <label><span class="box on" id="ck4"></span>代表作品（封面 + 链接）</label>
              </div>
              <div style="font-size:13px;font-weight:600;color:#111;margin:18px 0 6px">导出格式</div>
              <div style="display:flex;gap:10px">
                <div class="fmt"><span class="on"><svg class="excel-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg>Excel 表格</span></div>
                <div class="fmt"><span><svg class="pdf-icon" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg>PDF 文件</span></div>
              </div>
              <p style="color:#7a7c9c;font-size:11px;margin-top:14px">将发送到你预留的邮箱或邮件</p>
            </div>
            <div style="padding:12px 16px;background:#fff;border-top:1px solid #f1f1f5">
              <button class="btn-primary" id="exportBtn">确认导出</button>
            </div>
            <div class="toast" id="toast">已发送至邮箱 · 1024***@qq.com</div>
          </section>

          <!-- 6 client me (品牌方个人中心) -->
          <section class="page" id="p-cme">
            <div class="appbar" style="background:linear-gradient(135deg,#3a4dff 0%,#5b3fff 100%);color:#fff;border-bottom:0;position:relative;z-index:2">
              <div class="title" style="color:#fff">我的</div>
              <div class="action" style="color:#fff">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1a1.7 1.7 0 001.5-1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3h.1a1.7 1.7 0 001-1.5V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8v.1a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z"/></svg>
              </div>
            </div>
            <div style="flex:1;overflow-y:auto;background:#f7f7fb">
              <div class="me-head" style="background:linear-gradient(160deg,#3a4dff 0%,#5b3fff 50%,#3a1f9a 100%)">
                <div class="me-top">
                  <div class="avatar" style="background:linear-gradient(135deg,#5cc4ff,#3a4dff)">
                    母
                    <div class="badge-v"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l4 4L19 7"/></svg></div>
                  </div>
                  <div class="info">
                    <h3>小熊母婴用品 <span class="brand-chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M5 12l4 4L19 7"/></svg>已认证</span></h3>
                    <div class="meta">
                      <span>📍 北京</span><span class="dot"></span>
                      <span>互联网 · 母婴电商</span>
                    </div>
                  </div>
                  <div class="qr" title="企业名片">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 14h3v3M21 14v3M14 21h3M21 18v3"/></svg>
                  </div>
                </div>
                <div class="me-bio">专注 0–6 岁母婴用品 · 期待与中腰部创作者长期合作 ✨</div>
                <div class="me-stats">
                  <div class="it"><div class="v">12</div><div class="l">单合作</div></div>
                  <div class="it"><div class="v">5</div><div class="l">进行中</div></div>
                  <div class="it"><div class="v">28</div><div class="l">收藏</div></div>
                </div>
                <div class="me-progress cme-progress">
                  <div class="ring"><span>✓</span></div>
                  <div class="txt">
                    <div class="t1">企业认证 100% 已通过</div>
                    <div class="t2">解锁全部品牌方权益</div>
                  </div>
                  <svg class="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg>
                </div>
                <div style="height:18px"></div>
              </div>

              <div class="quick-grid">
                <div class="it" data-go="p-list">
                  <div class="ic ic-purple"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></div>
                  <div class="l">我的名单</div>
                  <span class="num">28</span>
                </div>
                <div class="it">
                  <div class="ic ic-orange"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 14l-7 7-7-7M19 5l-7 7-7-7"/></svg></div>
                  <div class="l">收藏夹</div>
                  <span class="num">12</span>
                </div>
                <div class="it">
                  <div class="ic ic-green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg></div>
                  <div class="l">数据看板</div>
                </div>
                <div class="it">
                  <div class="ic ic-pink"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 0118 0v6a2 2 0 01-2 2h-2v-7h4M3 12v6a2 2 0 002 2h2v-7H3"/></svg></div>
                  <div class="l">联系顾问</div>
                </div>
              </div>

              <div class="me-card">

                <div class="me-group">
                  <div class="me-group-title">我的业务</div>
                  <div class="me-row">
                    <div class="ic ic-purple"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12"/></svg></div>
                    <div style="flex:1">
                      <div class="label">我的订单</div>
                      <div class="sub">5 单进行中 · 12 单已完成</div>
                    </div>
                    <span class="badge">5</span>
                    <svg class="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" style="margin-left:6px"><path d="M9 6l6 6-6 6"/></svg>
                  </div>
                  <div class="me-row">
                    <div class="ic ic-blue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-5"/></svg></div>
                    <div style="flex:1">
                      <div class="label">品牌数据看板</div>
                      <div class="sub">曝光、互动、转化一站查看</div>
                    </div>
                    <svg class="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg>
                  </div>
                  <div class="me-row">
                    <div class="ic ic-green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h6"/></svg></div>
                    <div style="flex:1">
                      <div class="label">发票与合同</div>
                      <div class="sub">3 张待开票</div>
                    </div>
                    <span class="badge">3</span>
                    <svg class="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" style="margin-left:6px"><path d="M9 6l6 6-6 6"/></svg>
                  </div>
                </div>

                <div class="me-group">
                  <div class="me-group-title">客户支持</div>
                  <div class="me-row">
                    <div class="ic ic-pink"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 0118 0v6a2 2 0 01-2 2h-2v-7h4M3 12v6a2 2 0 002 2h2v-7H3"/></svg></div>
                    <div style="flex:1">
                      <div class="label">联系冒泡顾问</div>
                      <div class="sub">1 对 1 专属服务 · 7×24h</div>
                    </div>
                    <svg class="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg>
                  </div>
                  <div class="me-row">
                    <div class="ic ic-orange"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M9 12h6M12 9v6"/></svg></div>
                    <div style="flex:1">
                      <div class="label">帮助中心</div>
                      <div class="sub">下单流程 · 创作者沟通</div>
                    </div>
                    <svg class="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg>
                  </div>
                  <div class="me-row">
                    <div class="ic ic-gray"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1a1.7 1.7 0 001.5-1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3h.1a1.7 1.7 0 001-1.5V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8v.1a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z"/></svg></div>
                    <div style="flex:1">
                      <div class="label">设置</div>
                      <div class="sub">通知、隐私、账号</div>
                    </div>
                    <svg class="arr" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg>
                  </div>
                </div>

              </div>
              <div style="height:20px"></div>
            </div>
            <div class="tabbar">
              <div class="tab" data-go="p-find"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 11l9-7 9 7"/><path d="M5 10v10h14V10"/></svg>找创作者</div>
              <div class="tab" data-go="p-list"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>我的名单</div>
              <div class="tab active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0116 0"/></svg>我的</div>
            </div>
          </section>

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

</div>

<script>
  // ====== role switch ======
  const roleBtns = document.querySelectorAll('#roleSwitch button');
  const FIRST_PAGES = { author: 'p-splash', client: 'p-find' };
  roleBtns.forEach(b=>b.addEventListener('click',()=>{
    roleBtns.forEach(x=>x.classList.remove('active'));
    b.classList.add('active');
    const role = b.dataset.role;
    go(FIRST_PAGES[role] || 'p-splash');
  }));

  // ====== navigation ======
  function go(id){
    document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));
    const target = document.getElementById(id);
    if(!target) return;
    target.classList.add('active');
  }

  // clickable elements with data-go
  document.addEventListener('click',(e)=>{
    const el = e.target.closest('[data-go]');
    if(el){
      e.preventDefault();
      go(el.dataset.go);
    }
  });

  // ====== Wizard stepper ======
  let wizStep = 1;
  const WIZ_LABELS = ['基础信息','数据展示','类目标签','合作报价','作品与联系'];
  const wizBar = document.getElementById('wizBar');
  const wizStepLabel = document.getElementById('wizStepLabel');
  const wizNextLabel = document.getElementById('wizNextLabel');
  const wizPanes = document.querySelectorAll('.wiz-pane');

  function renderWiz(){
    wizBar.style.width = (wizStep*20)+'%';
    wizStepLabel.innerHTML = `第 <strong>${wizStep}</strong> / 5 步 · ${WIZ_LABELS[wizStep-1]}`;
    wizPanes.forEach(p=>p.style.display = (+p.dataset.step===wizStep ? '' : 'none'));
    wizNextLabel.textContent = (wizStep===5 ? '提交审核' : '下一步');
  }

  document.getElementById('wizNext').addEventListener('click',()=>{
    if(wizStep < 5){
      wizStep++;
      renderWiz();
    } else {
      wizNextLabel.textContent = '✓ 已提交';
      setTimeout(()=>{ wizStep=1; renderWiz(); go('p-me'); },800);
    }
  });

  // chips toggle inside step 3
  document.querySelectorAll('.wiz-pane[data-step="3"] .chips span').forEach(s=>{
    s.addEventListener('click',()=>s.classList.toggle('on'));
  });
  renderWiz();

  // ====== My list toggle ======
  function refreshListCount(){
    const on = document.querySelectorAll('#mlList .ml-item.on').length;
    document.getElementById('selCount').textContent = on;
    document.getElementById('listCountTag').textContent = `(${document.querySelectorAll('#mlList .ml-item').length})`;
  }
  document.getElementById('mlList').addEventListener('click',(e)=>{
    const item = e.target.closest('.ml-item');
    if(!item) return;
    item.classList.toggle('on');
    refreshListCount();
  });

  // ====== Search results count sync ======
  document.getElementById('resultsList').addEventListener('click',(e)=>{
    const item = e.target.closest('.sr-item');
    if(!item) return;
    // simulate toggle
  });
  document.getElementById('findInput').addEventListener('keydown',(e)=>{
    if(e.key==='Enter'){ go('p-results'); }
  });

  // ====== Export toast ======
  document.getElementById('exportBtn').addEventListener('click',()=>{
    const t = document.getElementById('toast');
    t.classList.add('show');
    setTimeout(()=>t.classList.remove('show'),2200);
  });
  // toggle checkboxes
  document.querySelectorAll('.cd-pricecard, [id^="ck"]').forEach(el=>{});
  document.querySelectorAll('.modal label .box, [id^="ck"]').forEach(el=>{
    el.addEventListener('click',(e)=>{
      // ignore; only labels with box class here belong to export options
    });
  });

  // ====== Add button feedback ======
  document.getElementById('addBtn').addEventListener('click',()=>{
    // already navigates to list via data-go; add little visual toast:
  });

  // initialize
  refreshListCount();
</script>
</body>
</html>