:root {
  --ink: #101947;
  --muted: #8189a8;
  --purple: #6837ff;
  --purple-2: #8c5cff;
  --purple-soft: #f0ebff;
  --blue-soft: #eef4ff;
  --surface: rgba(255,255,255,.94);
  --line: #eceef8;
  --shadow: 0 8px 24px rgba(39, 28, 104, .07);
  --radius: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #eef0ff; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input { font: inherit; }
button { color: inherit; }
.svg-sprite { position: fixed; width: 0; height: 0; overflow: hidden; }
.app-shell { position: relative; width: 100%; max-width: 430px; min-height: 100vh; margin: 0 auto; background: radial-gradient(circle at 92% 8%, #ede9ff 0, rgba(237,233,255,0) 26%), linear-gradient(180deg,#fbfbff 0,#f8f9ff 100%); overflow: hidden; box-shadow: 0 0 32px rgba(25,17,70,.12); }
#page-root { min-height: 100vh; padding: 18px 14px 92px; }
.page { opacity:1; }
.topbar { display:flex; align-items:center; justify-content:space-between; min-height:38px; margin-bottom:14px; }
.brand { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:800; letter-spacing:-.2px; }
.brand-mark { width:28px; height:28px; border-radius:8px; display:block; object-fit:cover; box-shadow:0 7px 15px rgba(97,50,255,.22); }
.top-actions { display:flex; align-items:center; gap:15px; }
.icon-btn { width:29px; height:29px; border:0; background:transparent; padding:3px; display:grid; place-items:center; cursor:pointer; }
.icon-btn svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.bell-wrap { position:relative; }
.bell-wrap::after { content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:#ff4b5f; border:2px solid #fff; right:1px; top:1px; }
.hero-home { min-height:105px; position:relative; margin:0 -14px 10px; padding:11px 22px 18px; overflow:hidden; }
.hero-home::before { content:""; position:absolute; inset:-12px -8px 0 34%; background:linear-gradient(150deg,rgba(116,72,255,.02),rgba(116,72,255,.16)), linear-gradient(30deg,transparent 36%,rgba(91,63,228,.12) 37% 39%,transparent 40%); clip-path:polygon(40% 0,100% 0,100% 100%,0 100%); }
.hero-home::after { content:""; position:absolute; right:26px; bottom:10px; width:108px; height:64px; border:1px solid rgba(104,55,255,.16); background:linear-gradient(90deg,rgba(109,70,245,.10),rgba(196,184,255,.25)); clip-path:polygon(0 35%,55% 0,100% 20%,100% 100%,0 100%); box-shadow: inset 14px -8px 20px rgba(92,52,230,.10); }
.hero-home h1 { position:relative; z-index:1; font-size:23px; margin:5px 0 5px; letter-spacing:-.6px; }
.hero-home p { position:relative; z-index:1; color:var(--muted); font-size:13px; margin:0; }
.demo-chip { display:inline-flex; margin-left:6px; padding:2px 6px; font-size:10px; font-weight:700; color:#7651ee; background:#eee8ff; border-radius:10px; vertical-align:2px; }
.card { background:var(--surface); border:1px solid rgba(235,235,248,.78); border-radius:var(--radius); box-shadow:var(--shadow); }
.stats { display:grid; grid-template-columns:repeat(3,1fr); padding:16px 6px; margin-bottom:12px; }
.stat { text-align:center; position:relative; }
.stat + .stat::before { content:""; position:absolute; left:0; top:3px; bottom:3px; width:1px; background:#e8e9f2; }
.stat strong { display:block; font-size:24px; line-height:1; margin-bottom:8px; }
.stat span { color:#69718d; font-size:12px; }
.section { margin-top:12px; padding:13px 12px; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.section-head h2 { font-size:16px; margin:0; letter-spacing:-.2px; }
.section-head button,.more { border:0; background:transparent; color:#8c93ab; font-size:12px; padding:0; }
.task-list { display:grid; gap:9px; }
.task { display:grid; grid-template-columns:21px 1fr auto; align-items:center; gap:8px; width:100%; padding:0; border:0; background:transparent; text-align:left; font-size:13px; }
.task-dot { width:20px; height:20px; border:1.5px solid #bdc4dc; border-radius:50%; display:grid; place-items:center; background:#fff; }
.task.done .task-dot { background:linear-gradient(145deg,#8259ff,#5c2ffc); border-color:transparent; color:#fff; }
.task.done .task-dot::before { content:"✓"; font-size:12px; font-weight:800; }
.task time { color:#a1a7ba; font-size:11px; }
.media-card { position:relative; min-height:92px; overflow:hidden; padding:15px 138px 14px 14px; background:linear-gradient(120deg,#f1edff 0,#fbfbff 58%); }
.media-card img { position:absolute; right:0; top:0; width:48%; height:100%; object-fit:cover; }
.media-card::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#f2eeff 0 43%,rgba(245,242,255,.55) 58%,transparent 75%); pointer-events:none; }
.media-content { position:relative; z-index:2; }
.tag { display:inline-flex; align-items:center; border-radius:6px; padding:3px 7px; font-size:10px; font-weight:700; color:#fff; background:linear-gradient(135deg,#8b5cff,#6131ef); margin-bottom:7px; }
.media-card h3 { margin:0; font-size:16px; line-height:1.26; letter-spacing:-.3px; }
.media-card p { margin:5px 0 0; font-size:11px; color:#777f99; }
.play { position:absolute; z-index:3; right:16px; top:50%; width:36px; height:36px; margin-top:-18px; border:0; border-radius:50%; background:#fff; box-shadow:0 5px 15px rgba(16,25,71,.2); }
.play::before { content:""; position:absolute; left:14px; top:10px; border-left:10px solid var(--ink); border-top:7px solid transparent; border-bottom:7px solid transparent; }
.customer-mini { display:grid; grid-template-columns:50px 1fr auto; align-items:center; gap:9px; }
.customer-mini img { width:50px; height:50px; border-radius:9px; object-fit:cover; }
.customer-mini h3 { margin:0 0 4px; font-size:14px; }
.customer-mini p { margin:2px 0; color:#8b91a8; font-size:10px; }
.pill { display:inline-flex; padding:3px 6px; border-radius:5px; font-size:9px; margin-left:4px; font-weight:700; }
.pill.blue { color:#4d75e8; background:#edf3ff; }
.pill.orange { color:#ef6e52; background:#fff0eb; }
.pill.purple { color:#7147e9; background:#f0eaff; }
.pill.green { color:#1ca56e; background:#e9fbf3; }
.page-title { margin:3px 0 4px; font-size:27px; letter-spacing:-1px; }
.page-subtitle { margin:0 0 15px; font-size:13px; color:#737b9a; }
.academy-hero { position:relative; overflow:hidden; padding-bottom:5px; }
.academy-hero::after { content:""; position:absolute; width:135px; height:96px; right:0; bottom:-5px; background:radial-gradient(ellipse at center,rgba(111,64,248,.17),transparent 68%); transform:rotate(-8deg); }
.academy-hero::before { content:""; position:absolute; width:88px; height:52px; right:18px; bottom:8px; border:1px solid rgba(100,62,238,.16); border-radius:0 0 55px 55px; transform:skewX(-18deg); }
.tabs { display:flex; gap:1px; overflow-x:auto; padding:0 2px 8px; margin:0 -2px 8px; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { flex:0 0 auto; border:0; background:transparent; color:#707896; font-size:12px; padding:8px 12px; border-radius:9px; position:relative; }
.tab.active { color:var(--purple); font-weight:800; }
.tab.active::after { content:""; position:absolute; width:18px; height:3px; border-radius:3px; bottom:1px; left:50%; transform:translateX(-50%); background:var(--purple); }
.academy-stack { display:grid; gap:11px; }
.academy-card { min-height:105px; position:relative; overflow:hidden; padding:18px 47% 14px 15px; background:linear-gradient(120deg,#eee9ff,#fbfaff); }
.academy-card img { position:absolute; right:0; top:0; width:46%; height:100%; object-fit:cover; }
.academy-card::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#f0ebff 0 48%,rgba(244,241,255,.54) 61%,transparent 78%); }
.academy-card .copy { position:relative; z-index:2; }
.academy-card h3 { margin:0; font-size:17px; line-height:1.28; }
.academy-card p { margin:6px 0 0; color:#6f7792; font-size:11px; }
.academy-card .circle-arrow { position:absolute; z-index:3; right:11px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.9); display:grid; place-items:center; font-size:18px; }
.share-row { display:grid; grid-template-columns:38px 1fr auto; gap:9px; align-items:center; padding:12px 2px 2px; }
.share-icon { width:36px; height:36px; border-radius:8px; background:linear-gradient(145deg,#ff9371,#ff684d); color:#fff; display:grid; place-items:center; font-size:18px; }
.share-row h4 { margin:0 0 3px; font-size:13px; }
.share-row p { margin:0; font-size:10px; color:#9299ae; }
.ai-page { padding-top:4px; }
.ai-brand { display:flex; align-items:center; gap:9px; }
.ai-brand .ai-logo { width:35px; height:35px; border-radius:9px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#875bff,#5d2cf2); box-shadow:0 7px 15px rgba(97,50,255,.22); }
.ai-brand .ai-logo svg { width:23px; height:23px; fill:none; stroke:#fff; stroke-width:1.7; }
.ai-brand strong { display:block; font-size:15px; }
.ai-brand small { display:block; font-size:8px; letter-spacing:.7px; color:#8e95aa; margin-top:2px; }
.ai-hero { text-align:center; padding:8px 0 7px; }
.robot-halo { width:124px; height:124px; border-radius:50%; margin:0 auto 3px; background:radial-gradient(circle,#fff 30%,#e3dcff 31% 56%,#f0ecff 57% 70%,transparent 71%); display:grid; place-items:center; overflow:hidden; }
.robot-halo img { width:108px; height:94px; object-fit:cover; object-position:center 5%; }
.ai-hero h1 { margin:4px 0 5px; font-size:23px; }
.ai-hero p { margin:0; color:#858ca4; font-size:12px; }
.prompt-list { display:grid; gap:9px; margin:13px 0 17px; }
.prompt { border:1px solid #ebebf6; background:rgba(255,255,255,.94); box-shadow:0 6px 18px rgba(34,26,93,.05); border-radius:14px; padding:12px 13px; display:grid; grid-template-columns:29px 1fr auto; align-items:center; gap:9px; text-align:left; cursor:pointer; }
.prompt svg { width:25px; height:25px; fill:none; stroke:var(--purple); stroke-width:1.7; }
.prompt strong { font-size:13px; }
.prompt small { display:block; margin-top:2px; font-size:10px; color:#959bae; }
.recent-list { display:grid; gap:0; }
.recent { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:9px; padding:9px 2px; border-bottom:1px solid #f0f1f7; }
.avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(145deg,#f0f1f8,#dfe2ef); display:grid; place-items:center; color:#fff; }
.recent h4 { margin:0 0 3px; font-size:12px; }
.recent p,.recent time { margin:0; color:#9299ad; font-size:9px; }
.composer { position:sticky; bottom:75px; margin:10px 0 -4px; border:1px solid #e8eaf4; background:rgba(255,255,255,.97); box-shadow:0 9px 24px rgba(33,25,90,.09); border-radius:15px; padding:10px; }
.composer input { width:100%; border:0; outline:0; padding:3px 3px 11px; color:var(--ink); background:transparent; font-size:12px; }
.composer-row { display:flex; justify-content:space-between; align-items:center; }
.mode { border:0; background:#f7f7fd; padding:7px 10px; border-radius:18px; color:#545c78; font-size:10px; }
.send-btn { width:34px; height:34px; border:0; border-radius:50%; background:linear-gradient(145deg,#875bff,#5a29f4); color:#fff; box-shadow:0 7px 15px rgba(94,46,245,.25); }
.send-btn svg { width:18px; height:18px; fill:none; stroke:#fff; stroke-width:1.8; }
.customer-head { margin-top:1px; }
.customer-head .headline { display:flex; justify-content:space-between; align-items:flex-start; }
.add-btn { width:38px; height:38px; border:0; border-radius:11px; background:linear-gradient(145deg,#875bff,#5c2bf3); color:#fff; box-shadow:0 7px 14px rgba(96,47,248,.24); }
.add-btn svg { width:21px; height:21px; fill:none; stroke:#fff; stroke-width:2; }
.filter-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; background:#fff; border:1px solid #eeeefa; padding:4px; border-radius:12px; margin:11px 0 10px; box-shadow:var(--shadow); }
.filter { border:0; background:transparent; font-size:12px; line-height:18px; padding:8px 3px; border-radius:8px; color:#626b8b; font-weight:500; letter-spacing:0; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; }
.filter.active { background:linear-gradient(145deg,#8659ff,#5b2af3); color:#fff; font-weight:650; box-shadow:0 5px 10px rgba(95,46,245,.22); }
.customer-list { display:grid; gap:8px; }
.customer-card { display:grid; grid-template-columns:70px 1fr 18px; gap:10px; align-items:center; min-height:88px; padding:9px; border-radius:14px; background:rgba(255,255,255,.95); border:1px solid #eff0f7; box-shadow:0 5px 16px rgba(34,26,93,.05); }
.customer-card .customer-image { width:70px; height:70px; object-fit:cover; border-radius:11px; background:#f2efff; }
.customer-card h3 { margin:0 0 5px; font-size:14px; }
.customer-card p { margin:3px 0; font-size:10px; color:#8b91a6; }
.customer-search { height:38px; margin:2px 0 9px; padding:0 11px; border:1px solid #eaecf7; border-radius:11px; background:#fff; box-shadow:0 4px 13px rgba(31,25,84,.04); display:flex; align-items:center; gap:8px; }
.customer-search svg { width:17px; height:17px; fill:none; stroke:#8f96ad; stroke-width:1.8; }
.customer-search input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font-size:12px; }
.customer-search input::placeholder { color:#a0a6ba; }
.customer-card[hidden] { display:none; }
.subpage-bar { min-height:40px; display:grid; grid-template-columns:38px 1fr 72px; align-items:center; margin:-2px 0 10px; }
.subpage-bar h1 { margin:0; font-size:18px; text-align:left; letter-spacing:-.4px; }
.back-btn { width:34px; height:34px; padding:5px; border:0; background:transparent; display:grid; place-items:center; }
.back-btn svg { width:23px; height:23px; fill:none; stroke:var(--ink); stroke-width:1.8; }
.bar-spacer { display:block; }
.bar-link { justify-self:end; border:0; background:transparent; color:var(--purple); font-size:13px; }
.small-primary { justify-self:end; border:0; border-radius:9px; padding:8px 10px; color:#fff; background:linear-gradient(145deg,#8659ff,#5b2af3); font-size:11px; box-shadow:0 5px 12px rgba(95,46,245,.18); }
.subpage-intro { margin:10px 3px 13px; }
.subpage-intro h2 { margin:0 0 5px; font-size:24px; }
.subpage-intro p { margin:0; color:#7d85a1; font-size:12px; }
.customer-form { padding:4px 13px 14px; }
.form-row { min-height:54px; display:grid; grid-template-columns:86px 1fr; align-items:center; border-bottom:1px solid #f0f1f7; font-size:12px; }
.form-row > span:first-child,.textarea-row > span:first-child { font-weight:650; }
.form-row b,.textarea-row b,fieldset b { color:#ff4d65; margin-left:2px; }
.form-control { min-width:0; display:flex; align-items:center; justify-content:flex-end; }
.form-control input,.form-control select { width:100%; padding:10px; border:0; outline:0; appearance:none; background:#f7f7fc; border-radius:9px; color:#4b5472; font-size:12px; text-align:left; }
.form-control input::placeholder { color:#b2b7c8; }
.form-control select:invalid { color:#b2b7c8; }
.form-control .chevron { margin-left:-24px; width:14px; height:14px; pointer-events:none; }
.upload-block { padding:14px 0; border-bottom:1px solid #f0f1f7; }
.upload-block strong { font-size:12px; }
.upload-block p { margin:4px 0 9px; color:#9aa0b3; font-size:10px; }
.upload-tile { width:72px; height:72px; border:1px dashed #b8abf7; background:#faf9ff; border-radius:10px; color:var(--purple); display:grid; place-items:center; align-content:center; gap:5px; font-size:9px; }
.upload-tile svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; }
.textarea-row { position:relative; display:grid; grid-template-columns:86px 1fr; padding:14px 0; border-bottom:1px solid #f0f1f7; font-size:12px; }
.textarea-row textarea { min-height:82px; padding:10px; border:0; outline:0; resize:none; border-radius:9px; background:#f7f7fc; color:#4b5472; font:inherit; }
.textarea-row textarea::placeholder { color:#b2b7c8; }
.textarea-row small { position:absolute; right:9px; bottom:20px; color:#a4aabd; font-size:9px; }
.primary-submit,.wide-bottom-btn { width:100%; height:43px; border:0; border-radius:11px; color:#fff; background:linear-gradient(145deg,#875aff,#5c2af3); font-size:14px; font-weight:700; box-shadow:0 7px 16px rgba(94,47,245,.22); }
.customer-form .primary-submit { margin-top:14px; }
.customer-hero { position:relative; height:178px; margin:0 -14px 12px; overflow:hidden; border-radius:0 0 14px 14px; }
.customer-hero img { width:100%; height:100%; object-fit:cover; }
.hero-count { position:absolute; right:12px; bottom:10px; padding:4px 8px; border-radius:10px; color:#fff; background:rgba(18,21,52,.65); font-size:10px; }
.customer-title-row { display:flex; align-items:center; justify-content:space-between; }
.customer-title-row h2 { display:inline-block; margin:0 6px 0 0; font-size:21px; }
.round-call { width:38px; height:38px; border:0; border-radius:50%; color:#6532f4; background:#eee8ff; display:grid; place-items:center; }
.round-call svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; }
.customer-line { display:flex; align-items:center; gap:5px; margin:9px 0; color:#727a97; font-size:11px; }
.customer-line svg { width:15px; height:15px; fill:none; stroke:#687191; stroke-width:1.8; }
.detail-tabs { display:grid; grid-template-columns:repeat(3,1fr); margin:15px 0 10px; border-bottom:1px solid #e9eaf3; }
.detail-tabs button { position:relative; height:38px; border:0; background:transparent; color:#666f8d; font-size:12px; }
.detail-tabs button.active { color:var(--purple); font-weight:750; }
.detail-tabs button.active::after { content:""; position:absolute; bottom:-1px; left:24%; width:52%; height:3px; border-radius:3px; background:var(--purple); }
.detail-card { padding:13px; }
.detail-card h3 { margin:0 0 8px; font-size:15px; }
.detail-card dl { margin:0; }
.detail-card dl div { display:grid; grid-template-columns:88px 1fr; gap:8px; padding:10px 0; border-bottom:1px solid #f0f1f7; font-size:11px; }
.detail-card dl div:last-child { border-bottom:0; }
.detail-card dt { color:#8b92a8; }
.detail-card dd { margin:0; text-align:right; color:#505a78; }
.detail-dock { position:sticky; bottom:-20px; display:grid; grid-template-columns:68px 68px 1fr; gap:9px; margin:13px -14px -20px; padding:10px 14px 14px; background:rgba(255,255,255,.97); border-top:1px solid #e9eaf4; }
.detail-dock button { min-height:46px; border:0; border-radius:11px; background:#f2f1fa; color:#606985; font-size:10px; display:grid; place-items:center; gap:2px; }
.detail-dock svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.detail-dock button.primary { display:block; color:#fff; font-size:14px; font-weight:700; background:linear-gradient(145deg,#875aff,#5c2af3); }
.follow-customer { display:grid; grid-template-columns:58px 1fr; align-items:center; gap:10px; padding:9px; margin-bottom:12px; }
.follow-customer .customer-image { width:58px; height:58px; object-fit:cover; border-radius:10px; }
.follow-customer h3 { margin:0 0 5px; font-size:14px; }
.follow-customer p { margin:0; color:#8b92aa; font-size:10px; }
.timeline { position:relative; margin:7px 0 12px; }
.timeline::before { content:""; position:absolute; left:17px; top:28px; bottom:12px; width:1px; background:#e6e7f2; }
.timeline-item { position:relative; display:grid; grid-template-columns:36px 1fr; gap:9px; margin-bottom:12px; }
.timeline-icon { z-index:1; width:34px; height:34px; border-radius:50%; color:#fff; display:grid; place-items:center; }
.timeline-icon.green { background:#2cc58b; }.timeline-icon.blue { background:#5d45f5; }.timeline-icon.purple { background:#7b45f7; }
.timeline-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.timeline-card { padding:11px; }
.timeline-card header { display:flex; justify-content:space-between; color:#7f879e; font-size:10px; }
.follow-type { display:inline-flex; margin:7px 0 4px; padding:3px 7px; border-radius:6px; color:#6540ef; background:#eee9ff; font-size:9px; font-weight:700; }
.timeline-card p { margin:3px 0; color:#4f5877; font-size:11px; line-height:1.55; }
.voice-row { width:75%; height:28px; margin-top:7px; padding:0 8px; border-radius:8px; color:#6642ef; background:#eeeaff; display:flex; align-items:center; gap:7px; }
.voice-row svg { width:15px; height:15px; fill:none; stroke:currentColor; }.voice-row span { flex:1; height:3px; border-radius:3px; background:linear-gradient(90deg,#7b57f6 55%,#d7cff8 55%); }.voice-row b { font-size:9px; }
.follow-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:8px; }
.follow-gallery img { width:100%; height:54px; object-fit:cover; border-radius:7px; }
.wide-bottom-btn { position:sticky; bottom:2px; }
.followup-form fieldset { margin:0 0 12px; padding:0; border:0; }
.followup-form legend { margin-bottom:9px; font-size:12px; font-weight:650; }
.choice-row { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.choice { height:34px; border:1px solid #e8e8f3; border-radius:9px; background:#fff; color:#69718c; font-size:10px; }
.choice.active { border-color:#7a50f6; color:#6838ef; background:#f0ebff; font-weight:700; }
.followup-form > .form-row,.followup-form > .textarea-row { margin-bottom:10px; padding:10px; border:0; border-radius:11px; background:#fff; }
.followup-form > .primary-submit { margin-top:3px; }
.inquiry-filters { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:10px; border-bottom:1px solid #e8e9f2; }
.inquiry-filters button { position:relative; height:39px; border:0; background:transparent; color:#66708d; font-size:11px; }
.inquiry-filters button.active { color:var(--purple); font-weight:750; }
.inquiry-filters button.active::after { content:""; position:absolute; left:23%; right:23%; bottom:-1px; height:3px; border-radius:3px; background:var(--purple); }
.inquiry-list { display:grid; gap:9px; }
.inquiry-card { padding:12px; }
.inquiry-card header { display:grid; grid-template-columns:40px 1fr auto; gap:8px; align-items:center; }
.inquiry-avatar { width:38px; height:38px; border-radius:50%; color:#fff; background:linear-gradient(145deg,#e2e4f0,#c7cbdd); display:grid; place-items:center; }
.inquiry-avatar svg { width:23px; height:23px; fill:#fff; stroke:#fff; }
.inquiry-card h3 { margin:0 0 3px; font-size:13px; }.inquiry-card header p,.inquiry-card time { margin:0; color:#8e95aa; font-size:9px; }
.inquiry-content { min-height:42px; margin:10px 0; color:#4e5877; font-size:11px; line-height:1.55; }
.inquiry-card > div:last-child { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.convert-btn,.ignore-btn { height:35px; border-radius:18px; font-size:11px; }
.convert-btn { border:0; color:#fff; background:linear-gradient(145deg,#875aff,#5c2af3); }.convert-btn.secondary { color:#6239ef; background:#eee9ff; }.ignore-btn { border:1px solid #e5e7f1; color:#68718c; background:#fff; }
.subpage-route .bottom-nav { display:none; }
.subpage-route #page-root { padding-bottom:20px; }
.chevron { width:16px; height:16px; fill:none; stroke:#8f96ad; stroke-width:1.7; }
.profile-page .page-title { margin-bottom:14px; }
.profile-card { padding:14px; display:grid; grid-template-columns:48px 1fr 18px; align-items:center; gap:10px; margin-bottom:12px; }
.profile-avatar { width:48px; height:48px; border-radius:50%; background:linear-gradient(145deg,#eceefa,#d8dbea); display:grid; place-items:center; color:#fff; }
.profile-avatar svg { width:29px; height:29px; fill:#fff; stroke:#fff; }
.profile-card h2 { margin:0 0 4px; font-size:16px; }
.profile-card p { margin:0; color:#858ca4; font-size:11px; }
.role { display:inline-block; color:#7148ed; background:#eee8ff; border-radius:5px; padding:2px 7px; font-size:9px; margin-left:5px; vertical-align:2px; }
.menu-card { margin-top:11px; padding:3px 13px; }
.menu-row { display:grid; grid-template-columns:36px 1fr 18px; align-items:center; gap:8px; width:100%; min-height:65px; padding:0; border:0; border-bottom:1px solid #f0f1f7; background:transparent; text-align:left; }
.menu-row:last-child { border-bottom:0; }
.menu-icon { width:31px; height:31px; border-radius:50%; display:grid; place-items:center; }
.menu-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.menu-icon.orange { color:#f39a25; background:#fff3df; }
.menu-icon.purple { color:#6b39f5; background:#efe9ff; }
.menu-icon.blue { color:#2996ec; background:#e6f4ff; }
.menu-icon.pink { color:#f24e82; background:#ffeaf1; }
.menu-icon.gray { color:#5f6884; background:#eff1f7; }
.menu-row h3 { margin:0 0 3px; font-size:13px; }
.menu-row p { margin:0; color:#9298ac; font-size:10px; }
.bottom-nav { position:fixed; z-index:20; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,430px); height:76px; padding:8px 15px max(8px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:repeat(5,1fr); align-items:end; background:rgba(255,255,255,.96); border-top:1px solid #e5e7f1; backdrop-filter:blur(16px); box-shadow:0 -7px 20px rgba(28,23,75,.05); }
.nav-item { border:0; background:transparent; padding:3px 0 0; display:flex; flex-direction:column; align-items:center; gap:4px; color:#747c96; font-size:10px; cursor:pointer; }
.nav-icon { width:24px; height:24px; display:grid; place-items:center; }
.nav-item svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; }
.nav-item.active { color:var(--purple); font-weight:800; }
.nav-item.active:not(.nav-ai) svg { fill:currentColor; stroke:currentColor; }
.nav-ai { position:relative; padding-top:0; }
.ai-orb { width:50px; height:50px; margin-top:-24px; border-radius:50%; display:grid; place-items:center; color:#fff; background:radial-gradient(circle at 33% 27%,#9b75ff,#6634f7 70%); box-shadow:0 7px 19px rgba(93,49,245,.35),0 0 0 7px rgba(255,255,255,.88); }
.ai-orb svg { width:26px; height:26px; stroke:#fff; }
.nav-ai.active .ai-orb { box-shadow:0 8px 20px rgba(90,43,245,.42),0 0 0 7px rgba(255,255,255,.92); transform:scale(1.04); }
.toast { position:fixed; z-index:40; left:50%; bottom:92px; transform:translateX(-50%); background:#171b39; color:#fff; border-radius:20px; padding:9px 14px; font-size:11px; box-shadow:0 8px 20px rgba(0,0,0,.18); animation:toast .22s ease; }
@keyframes toast { from { opacity:0; transform:translate(-50%,8px); } }
@media (max-width: 389px) { #page-root { padding-left:12px; padding-right:12px; } .page-title { font-size:25px; } .academy-card h3 { font-size:16px; } }
html[data-preview-width="390"] .app-shell,
html[data-preview-width="390"] .bottom-nav { max-width:390px; width:390px; }
html[data-preview-height="844"] .app-shell { min-height:844px; height:844px; }
html[data-preview-height="844"] #page-root { min-height:844px; height:844px; overflow-y:auto; }
html[data-preview-height="844"] .bottom-nav { position:absolute; }
html[data-capture="1"] * { cursor:none !important; }

/* WeChat-level readability baseline: body 16px, captions no smaller than 13px. */
html { font-size:16px; }
body { font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.brand,.ai-brand strong { font-size:17px; }
.hero-home h1,.ai-hero h1 { font-size:26px; }
.hero-home p,.page-subtitle,.academy-card p,.ai-hero p,.subpage-intro p { font-size:14px; }
.demo-chip,.tag,.pill,.role,.follow-type { font-size:12px; }
.stat span,.section-head button,.more,.tab,.filter,.composer input,.customer-search input,.form-row,.textarea-row,.followup-form legend,.detail-tabs button { font-size:14px; }
.section-head h2,.profile-card h2,.detail-card h3 { font-size:18px; }
.task,.prompt strong,.share-row h4,.menu-row h3,.recent h4,.customer-card h3,.follow-customer h3,.inquiry-card h3 { font-size:15px; }
.task time,.media-card p,.customer-mini p,.customer-card p,.prompt small,.recent p,.recent time,.share-row p,.profile-card p,.menu-row p,.follow-customer p,.timeline-card header,.inquiry-card header p,.inquiry-card time { font-size:13px; }
.mode,.small-primary,.choice,.inquiry-filters button,.convert-btn,.ignore-btn,.detail-dock button { font-size:13px; }
.form-control input,.form-control select,.timeline-card p,.inquiry-content { font-size:15px; }
.upload-block strong { font-size:15px; }.upload-block p,.upload-tile,.textarea-row small { font-size:13px; }
.primary-submit,.wide-bottom-btn,.detail-dock button.primary { font-size:16px; height:48px; }
.nav-item { font-size:12px; }
.toast { font-size:14px; }

.sub-title,.group-title { margin:18px 2px 10px; font-size:18px; }
.content-card { margin:12px 0; padding:16px; border:1px solid #ececf6; border-radius:16px; background:#fff; box-shadow:var(--shadow); }
.content-card h2 { margin:0 0 8px; font-size:21px; }.content-card h3 { font-size:17px; }
.lead,.section-note { color:#707995; font-size:14px; }
.course-cover-large { position:relative; height:220px; margin:0 -14px 14px; overflow:hidden; background:#17163a; }
.course-cover-large img { width:100%; height:100%; object-fit:cover; opacity:.86; }.course-cover-large > span { position:absolute; right:12px; bottom:9px; color:#fff; font-size:13px; }
.course-play { position:absolute; left:50%; top:50%; width:58px; height:58px; transform:translate(-50%,-50%); border:2px solid #fff; border-radius:50%; color:#fff; background:rgba(20,16,55,.5); font-size:23px; }
.check-list { list-style:none; padding:0; margin:12px 0; }.check-list li { position:relative; padding:8px 0 8px 30px; font-size:15px; }.check-list li::before { content:'✓'; position:absolute; left:0; width:21px; height:21px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--purple); font-size:12px; }
.notice-box { margin:12px 0 0; padding:13px; border-radius:12px; color:#5c46b9; background:#f0ecff; font-size:14px; }
.sticky-actions { position:sticky; bottom:0; display:grid; grid-template-columns:92px 1fr; gap:10px; margin:14px -14px -20px; padding:12px 14px max(14px,env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); border-top:1px solid #ececf4; }
.ghost-btn { min-height:46px; border:1px solid #dfdff0; border-radius:12px; background:#fff; color:#5d6682; font-size:15px; }
.chapter-list,.resource-list,.history-list,.notification-list { display:grid; gap:10px; }
.chapter-row { width:100%; display:grid; grid-template-columns:76px 1fr 32px; gap:11px; align-items:center; padding:9px; border:0; border-radius:13px; background:#fff; text-align:left; box-shadow:0 4px 14px rgba(31,25,84,.05); }.chapter-row.playing { background:#f0ebff; }.chapter-row img { width:76px; height:58px; object-fit:cover; border-radius:9px; }.chapter-row span { display:grid; }.chapter-row b,.chapter-row small { color:#747d9a; font-size:13px; }.chapter-row strong { font-size:15px; }.chapter-row i { color:var(--purple); font-style:normal; font-size:19px; }
.resource-row { display:grid; grid-template-columns:42px 1fr 58px; gap:10px; align-items:center; padding:13px; border-radius:13px; background:#fff; box-shadow:0 4px 14px rgba(31,25,84,.05); }.resource-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:11px; color:#fff; background:linear-gradient(145deg,#8d61ff,#5d2af4); }.resource-row div { display:grid; }.resource-row b { font-size:15px; }.resource-row small { color:#8c94aa; font-size:13px; }.resource-row button,.script-box button { border:1px solid #7d4df7; border-radius:8px; color:#6734f2; background:#fff; padding:7px 9px; font-size:13px; }
.share-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.share-grid button { overflow:hidden; padding:0 0 9px; border:1px solid #e9e9f4; border-radius:12px; background:#fff; }.share-grid img { width:100%; height:78px; object-fit:cover; }.share-grid b,.share-grid span { display:block; padding:0 5px; font-size:13px; }.share-grid span { margin-top:5px; color:var(--purple); }
.share-preview { display:grid; grid-template-columns:92px 1fr; gap:12px; padding:12px; }.share-preview img { width:92px; height:72px; object-fit:cover; border-radius:10px; }.share-preview b { font-size:15px; }.share-preview p { color:#8189a4; font-size:13px; }
.segmented { display:grid; grid-template-columns:repeat(2,1fr); padding:4px; margin:8px 0 12px; border-radius:13px; background:#f2f1f9; }.segmented.three { grid-template-columns:repeat(3,1fr); }.segmented button { min-height:39px; border:0; border-radius:10px; color:#68718d; background:transparent; font-size:14px; }.segmented button.active { color:#fff; background:linear-gradient(145deg,#8659ff,#5b2af3); }
.select-customer { width:100%; display:grid; grid-template-columns:58px 1fr 28px; gap:10px; align-items:center; padding:10px; border:1px solid #e4ddff; border-radius:13px; color:var(--purple); background:#fff; text-align:left; }.select-customer img { width:58px; height:58px; border-radius:9px; object-fit:cover; }.select-customer span { display:grid; color:var(--ink); }.select-customer b { font-size:15px; }.select-customer small { color:#8088a1; font-size:13px; }
.share-methods { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.share-methods button { min-height:58px; padding:5px; border:1px solid #ecebf5; border-radius:12px; background:#fff; color:#646d87; font-size:13px; }.share-methods button.active { border-color:#6d3df4; color:#6331ed; background:#f1ecff; }
.script-box { margin:13px 0; padding:14px; border-radius:14px; background:#f6f5fb; }.script-box p { color:#5f6884; font-size:14px; line-height:1.7; }
.share-record-list { display:grid; gap:10px; }.share-record { display:grid; grid-template-columns:76px 1fr auto; gap:10px; padding:10px; }.share-record img { width:76px; height:70px; object-fit:cover; border-radius:9px; }.share-record div { display:grid; gap:2px; }.share-record b { font-size:15px; }.share-record p,.share-record small,.share-record strong { margin:0; color:#78819e; font-size:13px; }.share-record button { align-self:center; border:0; color:var(--purple); background:#f0ebff; border-radius:8px; padding:8px; font-size:13px; }
.chat-messages { display:grid; gap:15px; padding:8px 0 90px; }.bubble { max-width:88%; padding:13px 15px; border-radius:16px; font-size:15px; line-height:1.65; }.bubble.user { justify-self:end; color:#fff; background:linear-gradient(145deg,#8659ff,#6840ec); border-bottom-right-radius:5px; }.assistant-message { display:grid; grid-template-columns:38px 1fr; gap:9px; align-items:start; }.assistant-message img { width:38px; height:38px; border-radius:50%; object-fit:cover; }.bubble.assistant { max-width:100%; border:1px solid #e9eaf4; background:#fff; border-top-left-radius:5px; }.bubble.assistant p { margin-top:0; }.bubble.assistant li { margin:10px 0; }
.chat-composer { position:fixed; left:50%; bottom:10px; width:min(calc(100% - 28px),402px); transform:translateX(-50%); display:grid; grid-template-columns:1fr 38px; align-items:center; z-index:22; }.chat-composer input { padding:10px; font-size:15px; }
.history-row { width:100%; display:grid; grid-template-columns:38px 1fr 20px; gap:10px; align-items:center; padding:13px; border:1px solid #ededf5; border-radius:13px; background:#fff; text-align:left; }.history-row > span { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; color:var(--purple); background:#f0ebff; }.history-row svg { width:20px; height:20px; fill:none; stroke:currentColor; }.history-row div { display:grid; }.history-row b { font-size:15px; }.history-row small { color:#8a92aa; font-size:13px; }
.period-btn { border:1px solid #e4e5f0; border-radius:18px; padding:7px 11px; background:#fff; font-size:14px; }.performance-hero { padding:16px; margin:12px 0; border-radius:17px; background:linear-gradient(145deg,#e8e4ff,#f9f8ff); }.performance-hero h2 { margin:0; font-size:21px; }.performance-hero p { color:#7c85a3; font-size:13px; }
.chart-bars { height:125px; display:flex; justify-content:space-between; align-items:end; padding:10px 8px 0; border-bottom:1px solid #dfe1ec; }.chart-bars i { position:relative; width:20px; height:var(--h); border-radius:5px 5px 0 0; background:linear-gradient(180deg,#b9a8ff,#ded7ff); }.chart-bars i span { position:absolute; left:50%; bottom:0; width:7px; height:65%; transform:translateX(-50%); background:#7140f5; }.chart-labels { display:flex; justify-content:space-between; color:#8a92a9; font-size:11px; }
.donut-row { display:grid; grid-template-columns:145px 1fr; gap:14px; align-items:center; }.donut { width:135px; height:135px; border-radius:50%; display:grid; place-items:center; align-content:center; background:radial-gradient(circle,#fff 0 48%,transparent 49%),conic-gradient(#6e38f7 0 33%,#aa8cff 33% 62%,#5591fa 62% 87%,#8ec0fa 87%); }.donut b { font-size:28px; }.donut small { font-size:12px; color:#7f87a0; }.donut-row ul { list-style:none; padding:0; font-size:14px; line-height:2.1; }
.learning-hero,.device-hero { min-height:170px; display:flex; align-items:center; justify-content:space-between; margin:0 -14px 12px; padding:15px 18px; overflow:hidden; background:linear-gradient(135deg,#f7f5ff,#e7e1ff); }.learning-hero h1,.device-hero h2 { margin:0; font-size:27px; }.learning-hero p,.device-hero p { color:#737b9a; }.learning-hero img,.device-hero img { width:44%; height:155px; object-fit:contain; }
.continue-course { display:grid; grid-template-columns:105px 1fr auto; gap:10px; align-items:center; }.continue-course img { width:105px; height:90px; border-radius:10px; object-fit:cover; }.continue-course b { font-size:15px; }.continue-course p,.continue-course small { margin:4px 0; color:#8088a1; font-size:13px; }.continue-course button { border:0; border-radius:19px; color:#fff; background:var(--purple); padding:9px 12px; font-size:13px; }.progress { height:7px; border-radius:8px; background:#ebe9f5; }.progress i { display:block; width:65%; height:100%; border-radius:8px; background:var(--purple); }
.learning-row { width:100%; display:grid; grid-template-columns:72px 1fr auto; gap:10px; align-items:center; padding:10px 0; border:0; border-bottom:1px solid #eeeef5; background:transparent; text-align:left; }.learning-row img { width:72px; height:60px; border-radius:9px; object-fit:cover; }.learning-row span { display:grid; }.learning-row b { font-size:15px; }.learning-row small { color:#858da6; font-size:13px; }.learning-row em { border-radius:12px; padding:5px 8px; color:#5b34e8; background:#efebff; font-size:12px; font-style:normal; }
.device-hero { min-height:150px; margin-bottom:0; color:#fff; background:linear-gradient(145deg,#6d3ef3,#8a67ff); }.device-hero p { color:#fff; }.device-stats { display:grid; grid-template-columns:repeat(4,1fr); padding:13px 4px; background:#fff; border-radius:0 0 15px 15px; }.device-stats span { display:grid; text-align:center; color:#757e9a; font-size:12px; }.device-stats b { color:var(--ink); font-size:22px; }
.title-line { display:flex; justify-content:space-between; align-items:center; }.info-list { margin:0; }.info-list div { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid #efeff5; font-size:15px; }.info-list dt { color:#7e869f; }.info-list dd { margin:0; }.carrier { display:flex; justify-content:space-between; padding:12px; border-radius:12px; background:#f5f4fa; font-size:14px; }.logistics { border-left:2px solid #e0ddf0; margin:16px 0 0 8px; padding-left:18px; }.logistics p { position:relative; color:#838ba5; font-size:14px; }.logistics i { position:absolute; left:-25px; top:6px; width:11px; height:11px; border-radius:50%; background:#c8c3df; }.logistics p.active { color:var(--purple); }.logistics p.active i { background:var(--purple); }
.steps { display:grid; grid-template-columns:repeat(3,1fr); align-items:center; margin:8px 0 14px; color:#9ba1b5; font-size:13px; text-align:center; }.steps b { color:var(--purple); }.receipt-head { display:grid; grid-template-columns:1fr 100px; }.receipt-head img { width:100px; height:120px; object-fit:contain; }.receipt-head div { display:grid; }.receipt-head small { color:#848ca6; }.receipt-head .danger { color:#f15a5f; }.quantity-control { display:grid; grid-template-columns:1fr 38px 50px 38px; align-items:center; padding:12px 0; }.quantity-control button,.quantity-control input { height:38px; border:1px solid #e6e5ef; text-align:center; background:#fff; font-size:16px; }.dual-actions { display:grid; grid-template-columns:1fr 1.5fr; gap:10px; margin-top:14px; }
.allocation-list { display:grid; gap:9px; }.allocation-row { display:grid; grid-template-columns:22px 66px 1fr auto; align-items:center; gap:9px; padding:9px; }.allocation-row .customer-image { width:66px; height:66px; border-radius:9px; object-fit:cover; }.allocation-row span { display:grid; }.allocation-row b { font-size:15px; }.allocation-row small { color:#7f879f; font-size:13px; }.allocation-row em { color:var(--purple); font-size:13px; font-style:normal; }
.notification-row { display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:start; padding:13px 2px; border-bottom:1px solid #eeeeF5; }.notification-row b { font-size:15px; }.notification-row p { margin:4px 0 0; color:#6f7893; font-size:14px; }.notification-row time { color:#8c94a9; font-size:12px; }.notification-row time i { display:inline-block; width:6px; height:6px; margin-left:4px; border-radius:50%; background:#ff435e; }
.logout-btn { width:100%; margin-top:15px; height:48px; border:0; border-radius:13px; color:#ef4d55; background:#fff; font-size:16px; box-shadow:var(--shadow); }
.login-page { min-height:calc(100vh - 36px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px 10px; text-align:center; }.login-logo { width:68px; height:68px; border-radius:17px; box-shadow:0 10px 26px rgba(92,47,235,.24); }.login-page h1 { margin:16px 0 3px; font-size:28px; }.login-page > p { margin:0 0 26px; color:#7c85a1; font-size:15px; }.login-form { width:100%; display:grid; gap:13px; padding:20px; border:1px solid #ebeaf6; border-radius:18px; background:#fff; box-shadow:var(--shadow); text-align:left; }.login-form label { display:grid; gap:7px; color:#4d5673; font-size:15px; }.login-form input { height:48px; padding:0 13px; border:1px solid #e2e3ed; border-radius:11px; outline:0; font-size:16px; }.login-form small { color:#8991a9; font-size:13px; text-align:center; }.fatal-state { padding:90px 20px; text-align:center; }.fatal-state p { color:#747d98; }
small,time,.ai-brand small,.customer-line,.detail-card dl div,.timeline-card header,.timeline-card p,.voice-row b,.inquiry-card header p,.inquiry-card time,.hero-count,.chart-labels,.device-stats span { font-size:13px!important; }