:root {
  --blue: #3978d4;
  --blue-dark: #255eac;
  --wechat: #19b765;
  --ink: #17191c;
  --muted: #666b73;
  --soft: #969ba3;
  --line: #e7e9ec;
  --fill: #f4f5f7;
  --surface: #fff;
  --red: #e34d59;
  --orange: #f3a83b;
  --purple: #7367d9;
  --cyan: #14a7c7;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; color: var(--ink); background: #e9edf2; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
body { overscroll-behavior: none; }
button, input, textarea { font: inherit; letter-spacing: 0; }
button { border: 0; outline: 0; color: inherit; background: none; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { display: block; stroke-width: 1.9; }

.app-shell { position: relative; width: min(100%, 430px); min-height: 100dvh; margin: 0 auto; overflow: hidden; background: white; box-shadow: 0 18px 60px rgba(23,39,62,.15); isolation: isolate; }
.app-shell::after { content: ""; position: absolute; inset: 0; z-index: 90; border-radius: inherit; background: rgba(7,28,55,.26); opacity: 0; pointer-events: none; transition: opacity .28s ease; }
main { min-height: 100dvh; }
.page { display: none; min-height: 100dvh; padding-bottom: calc(64px + var(--safe-bottom)); background: white; }
.page.active { display: block; animation: page-in .16s ease; }
@keyframes page-in { from { opacity: .78; } to { opacity: 1; } }

.main-header, .detail-header { position: sticky; top: 0; z-index: 20; min-height: 62px; display: grid; grid-template-columns: 54px 1fr 54px; align-items: end; padding: max(10px, env(safe-area-inset-top)) 10px 8px; border-bottom: 1px solid rgba(231,233,236,.85); background: rgba(255,255,255,.96); backdrop-filter: blur(16px); }
.main-header h1, .detail-header h1 { margin: 0; align-self: center; text-align: center; font-size: 18px; font-weight: 600; }
.blue-header { color: white; border-bottom: 0; background: var(--blue); }
.header-avatar, .header-action { width: 36px; height: 36px; display: grid; place-items: center; justify-self: start; border-radius: 50%; }
.header-avatar { position: relative; }
.header-avatar span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--blue); background: #edf4ff; font-size: 12px; font-weight: 700; }
.blue-header .header-avatar span { color: white; background: rgba(255,255,255,.18); }
.header-avatar i { position: absolute; right: 1px; bottom: 1px; width: 8px; height: 8px; border: 2px solid white; border-radius: 50%; background: var(--wechat); }
.blue-header .header-avatar i { border-color: var(--blue); }
.header-action { justify-self: end; }
.header-action:active { background: rgba(127,132,141,.1); }
.header-action svg { width: 22px; height: 22px; }
.blue-header .header-action svg { width: 24px; height: 24px; }

.global-search { width: calc(100% - 24px); height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 10px 12px; padding: 0 12px; border-radius: 7px; color: #8d929a; background: #f1f3f5; font-size: 13px; }
.blue-header + .global-search { margin-top: 12px; }
.global-search svg { width: 17px; }
.global-search.light { background: #f2f3f5; }

.message-shortcuts { height: 48px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #f0f1f2; border-bottom: 1px solid var(--line); }
.message-shortcuts button { display: flex; align-items: center; justify-content: center; gap: 6px; color: #545961; font-size: 12px; }
.message-shortcuts button + button { border-left: 1px solid #f0f1f2; }
.message-shortcuts svg { width: 17px; color: var(--blue); }
.message-shortcuts button:first-child svg { color: var(--purple); }

.chat-row { width: 100%; min-height: 72px; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 10px 14px; text-align: left; border-bottom: 1px solid #f0f1f2; background: white; }
.chat-row:active, .mail-row:active, .doc-row:active, .contact-row:active { background: #f7f8fa; }
.avatar { position: relative; width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: white; font-size: 14px; font-weight: 700; }
.avatar.round { border-radius: 50%; }
.external-dot { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; color: white; background: var(--wechat); font-size: 8px; font-style: normal; }
.chat-copy { min-width: 0; }
.chat-copy strong { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; }
.chat-copy p { margin: 5px 0 0; overflow: hidden; color: #8d929a; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.chat-tag, .wechat-chip { padding: 1px 4px; border-radius: 3px; color: var(--purple); background: #f0edff; font-size: 8px; font-weight: 600; }
.wechat-chip { color: #129a53; background: #eaf8f0; }
.chat-meta { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: 2px 0; color: #a9adb4; font-size: 9px; }
.unread-badge { min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; border-radius: 10px; color: white; background: var(--red); font-size: 9px; }

.mail-filters { height: 42px; display: flex; gap: 22px; padding: 0 14px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.mail-filters::-webkit-scrollbar { display: none; }
.mail-filters button { position: relative; flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.mail-filters button.active { color: var(--ink); font-weight: 500; }
.mail-filters button.active::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 20px; height: 2px; transform: translateX(-50%); border-radius: 2px; background: var(--blue); }
.mail-filters b { color: var(--blue); font-size: 10px; }
.mail-row { width: 100%; min-height: 78px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #f0f1f2; text-align: left; }
.mail-row.unread { background: #f7faff; }
.mail-row.selecting { grid-template-columns: 26px 38px minmax(0,1fr) auto; }
.mail-select-box { width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid #b8bdc5; border-radius: 50%; color: white; }
.mail-select-box.checked { border-color: var(--blue); background: var(--blue); }
.mail-select-box svg { width: 12px; height: 12px; }
.mail-row .avatar { width: 38px; height: 38px; border-radius: 9px; font-size: 11px; }
.mail-copy { min-width: 0; }
.mail-copy strong { display: block; font-size: 13px; }
.mail-copy h3 { margin: 4px 0 0; overflow: hidden; font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.mail-copy p { margin: 4px 0 0; overflow: hidden; color: var(--soft); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.mail-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; color: var(--soft); font-size: 9px; }
.mail-meta svg { width: 14px; color: var(--orange); fill: currentColor; }

.doc-tabs { height: 42px; display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--line); }
.doc-tabs button { position: relative; color: var(--muted); font-size: 12px; }
.doc-tabs button.active { color: var(--ink); font-weight: 600; }
.doc-tabs button.active::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 22px; height: 2px; transform: translateX(-50%); background: var(--blue); }
.favorite-section, .document-section, .contact-section { padding: 12px 14px 0; }
.section-heading { min-height: 30px; display: flex; align-items: center; justify-content: space-between; }
.section-heading h2 { margin: 0; font-size: 15px; font-weight: 600; }
.section-heading button, .section-heading > span { color: var(--soft); font-size: 10px; }
.section-heading svg { width: 15px; }
.favorite-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 9px 0 12px; }
.favorite-doc { min-width: 0; height: 74px; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 9px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 7px; text-align: left; }
.doc-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; color: white; background: var(--doc-color); }
.doc-icon svg { width: 18px; }
.favorite-doc strong { min-width: 0; overflow: hidden; font-size: 11px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.doc-row { width: 100%; min-height: 66px; display: grid; grid-template-columns: 38px minmax(0,1fr) 16px; gap: 10px; align-items: center; border-bottom: 1px solid #f0f1f2; text-align: left; }
.doc-row .doc-icon { width: 36px; height: 36px; }
.doc-copy { min-width: 0; }
.doc-copy strong { display: block; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.doc-copy span { display: block; margin-top: 5px; overflow: hidden; color: var(--soft); font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.doc-row > svg { width: 15px; color: #b9bdc4; }
.empty-list-state { min-height: 180px; display: grid; place-items: center; color: #9a9fa7; font-size: 13px; }

.work-page { background: var(--fill); }
.work-header { min-height: 76px; display: flex; align-items: flex-end; justify-content: space-between; padding: max(16px, env(safe-area-inset-top)) 16px 11px; color: white; background: var(--blue); }
.work-header span { font-size: 10px; opacity: .78; }
.work-header h1 { margin: 2px 0 0; font-size: 22px; }
.work-page > .global-search { background: white; }
.work-focus { min-height: 64px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; align-items: center; margin: 10px 12px 0; padding: 10px 12px; border-radius: 8px; background: white; }
.focus-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--purple); }
.focus-icon svg { width: 18px; }
.work-focus strong, .work-focus small { display: block; }
.work-focus strong { font-size: 13px; }
.work-focus small { margin-top: 4px; color: var(--soft); font-size: 9px; }
.work-focus button { height: 28px; padding: 0 10px; border-radius: 5px; color: white; background: var(--blue); font-size: 10px; }
.work-group { margin-top: 10px; padding: 13px 12px 8px; background: white; }
.work-group h2 { margin: 0 2px; color: #777c84; font-size: 11px; font-weight: 500; }
.work-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px 5px; padding: 15px 0 8px; }
.work-app { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.work-app-icon { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--app-color); }
.work-app-icon svg { width: 20px; }
.work-app-icon b { position: absolute; right: -6px; top: -6px; min-width: 16px; height: 16px; display: grid; place-items: center; padding: 0 4px; border: 2px solid white; border-radius: 9px; color: white; background: var(--red); font-size: 8px; }
.work-app > span:last-child { max-width: 100%; overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }

.contact-entries { border-top: 8px solid var(--fill); border-bottom: 8px solid var(--fill); }
.contact-entries button { width: 100%; min-height: 62px; display: grid; grid-template-columns: 38px minmax(0,1fr) 16px; gap: 11px; align-items: center; padding: 0 14px; border-bottom: 1px solid #f0f1f2; text-align: left; }
.contact-entries button:last-child { border-bottom: 0; }
.entry-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: white; }
.entry-icon.blue { background: var(--blue); }
.entry-icon.green { background: var(--wechat); }
.entry-icon svg { width: 18px; }
.contact-entries strong, .contact-entries small { display: block; }
.contact-entries strong { font-size: 13px; }
.contact-entries small { margin-top: 4px; color: var(--soft); font-size: 9px; }
.contact-entries > button > svg { width: 15px; color: #b9bdc4; }
.contact-row { width: 100%; min-height: 62px; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 11px; align-items: center; border-bottom: 1px solid #f0f1f2; text-align: left; }
.contact-row .avatar { width: 40px; height: 40px; border-radius: 50%; font-size: 12px; }
.contact-copy { min-width: 0; }
.contact-copy strong { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.contact-copy span { display: block; margin-top: 4px; overflow: hidden; color: var(--soft); font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.contact-row > svg { width: 15px; color: #b9bdc4; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wechat); }
.status-dot.busy { background: var(--orange); }

.bottom-nav { position: fixed; left: 50%; bottom: 0; z-index: 40; width: min(100%,430px); height: calc(64px + var(--safe-bottom)); display: grid; grid-template-columns: repeat(5,1fr); padding: 3px 6px var(--safe-bottom); transform: translateX(-50%); border-top: 1px solid var(--line); background: rgba(255,255,255,.97); backdrop-filter: blur(18px); }
.bottom-nav[hidden] { display: none; }
.bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #747a82; font-size: 9px; }
.bottom-nav button.active { color: var(--blue); }
.nav-icon { position: relative; height: 26px; display: grid; place-items: center; }
.nav-icon svg { width: 21px; height: 21px; }
.nav-icon b { position: absolute; left: 15px; top: -4px; min-width: 16px; height: 16px; display: grid; place-items: center; padding: 0 4px; border: 2px solid white; border-radius: 9px; color: white; background: var(--red); font-size: 8px; }

.detail-page { position: relative; z-index: 30; height: 100dvh; min-height: 0; padding-bottom: 0; }
.detail-page.active { display: flex; flex-direction: column; }
.detail-header { flex: 0 0 auto; grid-template-columns: 46px 1fr 46px; align-items: center; padding-left: 7px; padding-right: 7px; }
.detail-header > button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; }
.detail-header > button svg { width: 22px; }
.detail-header > div { min-width: 0; text-align: center; }
.detail-header h1 { overflow: hidden; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
.detail-header small { display: block; margin-top: 1px; color: var(--soft); font-size: 8px; }
.detail-body { flex: 1; min-height: 0; overflow-y: auto; background: white; }

.chat-detail { min-height: calc(100dvh - 62px); display: flex; flex-direction: column; background: #f1f2f4; }
.chat-stream { flex: 1; padding: 14px 13px 96px; }
.message-time { margin: 10px 0; color: #a3a7ae; font-size: 9px; text-align: center; }
.bubble-row { display: flex; gap: 8px; align-items: flex-start; margin: 13px 0; }
.bubble-row.me { justify-content: flex-end; }
.bubble-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: white; font-size: 9px; font-weight: 700; }
.bubble-wrap { max-width: 77%; }
.bubble-author { display: block; margin: 0 0 4px 3px; color: var(--soft); font-size: 8px; }
.bubble { padding: 10px 12px; border-radius: 4px 10px 10px 10px; background: white; box-shadow: 0 1px 2px rgba(31,35,41,.05); font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.bubble-row.me .bubble { border-radius: 10px 4px 10px 10px; background: #cde8d8; }
.bubble-card { width: min(280px,78vw); padding: 12px; border-radius: 8px; background: white; }
.bubble-card h3 { margin: 0; font-size: 13px; }
.summary-list { margin-top: 10px; border-top: 1px solid var(--line); }
.summary-list div { display: grid; grid-template-columns: 18px 1fr; gap: 7px; padding: 8px 0; border-bottom: 1px solid #f0f1f2; font-size: 10px; line-height: 1.45; }
.summary-list b { color: var(--blue); }
.chat-composer { position: sticky; bottom: 0; z-index: 6; padding: 8px 10px calc(8px + var(--safe-bottom)); border-top: 1px solid var(--line); background: white; }
.composer-row { display: grid; grid-template-columns: 31px minmax(0,1fr) 31px; gap: 6px; align-items: center; }
.composer-row > button { width: 31px; height: 36px; display: grid; place-items: center; }
.composer-row svg { width: 20px; color: #5e636b; }
.composer-row input { min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; outline: 0; background: #f7f8fa; font-size: 12px; }
.external-tools { display: flex; gap: 12px; padding: 8px 4px 0; overflow-x: auto; }
.external-tools button { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; color: var(--wechat); font-size: 8px; }
.external-tools svg { width: 13px; }

.mail-detail { padding: 20px 16px 100px; }
.mail-detail h2 { margin: 0; font-size: 20px; line-height: 1.4; }
.mail-sender { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 10px; align-items: center; margin-top: 20px; }
.mail-sender .avatar { width: 40px; height: 40px; font-size: 11px; }
.mail-sender strong, .mail-sender small { display: block; }
.mail-sender strong { font-size: 12px; }
.mail-sender small, .mail-sender time { margin-top: 3px; color: var(--soft); font-size: 9px; }
.mail-body { margin-top: 24px; font-size: 12px; line-height: 1.8; white-space: pre-wrap; }
.attachment { min-height: 50px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 9px; align-items: center; margin-top: 20px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; }
.attachment > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; color: white; background: var(--wechat); }
.attachment svg { width: 17px; }
.attachment strong { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.attachment small { color: var(--soft); font-size: 8px; }
.mail-actions { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 9px 14px calc(9px + var(--safe-bottom)); border-top: 1px solid var(--line); background: white; }
.mail-actions button { height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; }
.mail-actions svg { width: 16px; }

.doc-editor { padding: 22px 17px 90px; }
.doc-editor h1 { margin: 0; font-size: 24px; line-height: 1.35; }
.doc-meta { margin-top: 10px; color: var(--soft); font-size: 9px; }
.doc-callout { margin: 20px 0; padding: 12px; border-left: 3px solid var(--blue); border-radius: 4px; background: #f3f7fd; font-size: 11px; line-height: 1.6; }
.doc-editor h2 { margin: 22px 0 9px; font-size: 16px; }
.doc-editor p, .doc-editor li { color: #3d4249; font-size: 12px; line-height: 1.8; }
.doc-editor ul { padding-left: 18px; }
.doc-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 9px; }
.doc-table th, .doc-table td { padding: 8px; border: 1px solid var(--line); text-align: left; }
.doc-table th { color: var(--muted); background: var(--fill); }

.native-page { min-height: 100%; padding: 12px 11px 38px; background: var(--fill); }
.native-card { overflow: hidden; margin-bottom: 12px; border-radius: 9px; background: white; }
.native-row { width: 100%; min-height: 55px; display: grid; grid-template-columns: 88px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 0 13px; border-bottom: 1px solid #f0f1f2; text-align: left; }
.native-card > .native-row:last-child { border-bottom: 0; }
.native-row > span:first-child { font-size: 13px; }
.native-row strong { color: #747981; font-size: 11px; font-weight: 400; line-height: 1.45; text-align: right; overflow-wrap: anywhere; }
.native-row > svg { width: 15px; color: #b9bdc4; }
.external-display-label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.external-profile-mark { width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 50%; color: white; background: #f39a20; font-size: 12px; font-style: normal; font-weight: 700; line-height: 1; }
.external-display-value { display: flex; align-items: center; justify-content: flex-end; min-width: 0; white-space: nowrap; }
.external-display-value b { color: #747981; font-weight: 400; }
.external-display-value em { color: #f28b18; font-style: normal; font-weight: 400; }
.verified-company-value { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.verified-company-value .wecom-icon { flex: 0 0 auto; width: 18px; height: 18px; color: #2fbd69; }
.verified-company-value b { min-width: 0; overflow: hidden; color: #747981; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.avatar-info-row { min-height: 72px; }
.profile-avatar-large { justify-self: end; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--blue); font-size: 14px; font-weight: 700; }
.native-label { margin: 17px 4px 8px; color: #7d828a; font-size: 10px; font-weight: 500; }
.company-hero { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 13px; align-items: center; padding: 18px 15px; border-radius: 9px; background: white; }
.company-logo-large { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 12px; color: white; background: var(--blue); font-size: 18px; font-weight: 700; }
.company-hero h2 { margin: 0 0 6px; font-size: 16px; line-height: 1.35; }
.verified { display: inline-flex; align-items: center; gap: 4px; color: var(--wechat); font-size: 9px; }
.verified svg { width: 14px; }

.module-head { padding: 20px 15px 16px; border-bottom: 8px solid var(--fill); }
.module-head h2 { margin: 0; font-size: 20px; }
.module-head p { margin: 6px 0 0; color: var(--soft); font-size: 10px; line-height: 1.5; }
.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 16px; background: var(--line); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.stat-grid div { padding: 10px 6px; text-align: center; background: white; }
.stat-grid strong, .stat-grid span { display: block; }
.stat-grid strong { font-size: 17px; }
.stat-grid span { margin-top: 3px; color: var(--soft); font-size: 8px; }
.simple-list { background: white; }
.simple-row { width: 100%; min-height: 64px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #f0f1f2; text-align: left; }
.simple-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--row-color,var(--blue)); }
.simple-icon svg { width: 18px; }
.simple-row strong, .simple-row small { display: block; }
.simple-row strong { font-size: 12px; }
.simple-row small { margin-top: 4px; color: var(--soft); font-size: 9px; }
.simple-row > span:last-child, .simple-row time { color: var(--soft); font-size: 9px; }

.approval-card { display: block; width: calc(100% - 24px); margin: 10px 12px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; text-align: left; background: white; }
.approval-card > span { color: var(--blue); font-size: 9px; }
.approval-card h3 { margin: 8px 0 0; font-size: 14px; }
.approval-card p { margin: 5px 0 0; color: var(--soft); font-size: 10px; line-height: 1.5; }
.approval-card b { display: block; margin-top: 9px; font-size: 15px; }
.approval-footer { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1.7fr; gap: 9px; padding: 9px 14px calc(9px + var(--safe-bottom)); border-top: 1px solid var(--line); background: white; }
.approval-footer button { height: 40px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.approval-footer .reject { color: var(--red); border: 1px solid #f2cbd0; }
.approval-footer .approve { color: white; background: var(--blue); }

.clock-card { margin: 18px 14px 12px; padding: 24px 16px; border-radius: 10px; text-align: center; color: white; background: var(--blue); }
.clock-card time { display: block; font-size: 34px; font-variant-numeric: tabular-nums; }
.clock-card p { margin: 6px 0 0; font-size: 10px; opacity: .8; }
.clock-button { width: 104px; height: 104px; display: grid; place-items: center; margin: 26px auto; border: 7px solid #e1edfb; border-radius: 50%; color: white; background: var(--blue); box-shadow: 0 8px 24px rgba(57,120,212,.25); font-size: 16px; font-weight: 600; }
.schedule-row { min-height: 76px; display: grid; grid-template-columns: 52px 4px minmax(0,1fr); gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid #f0f1f2; }
.schedule-row time { font-size: 11px; }
.schedule-row i { width: 4px; height: 48px; border-radius: 2px; background: var(--event-color); }
.schedule-row strong, .schedule-row small { display: block; }
.schedule-row strong { font-size: 12px; }
.schedule-row small { margin-top: 5px; color: var(--soft); font-size: 9px; }
.meeting-join { margin: 12px; padding: 18px; border-radius: 9px; color: white; background: #265fae; }
.meeting-join span { font-size: 10px; opacity: .75; }
.meeting-join h2 { margin: 8px 0 0; font-size: 18px; }
.meeting-join p { margin: 6px 0 14px; font-size: 10px; opacity: .8; }
.meeting-join button { width: 100%; height: 38px; border-radius: 6px; color: var(--blue-dark); background: white; font-size: 11px; font-weight: 600; }

.customer-row { width: 100%; min-height: 72px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #f0f1f2; text-align: left; }
.customer-row .avatar { width: 42px; height: 42px; border-radius: 50%; font-size: 12px; }
.customer-row strong, .customer-row small { display: block; }
.customer-row strong { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.customer-row small { margin-top: 4px; color: var(--soft); font-size: 9px; }
.customer-row > span:last-child { color: var(--soft); font-size: 9px; }
.table-wrap { overflow-x: auto; padding: 10px 0; }
.smart-table { min-width: 650px; border-collapse: collapse; font-size: 9px; }
.smart-table th, .smart-table td { height: 42px; padding: 8px 10px; border: 1px solid var(--line); text-align: left; white-space: nowrap; }
.smart-table th { color: var(--muted); background: #f3f5f8; }
.table-tag { padding: 2px 5px; border-radius: 3px; color: #138d4e; background: #e7f8ef; }

.account-layer { position: fixed; inset: 0; z-index: 100; }
.account-layer[hidden] { display: none; }
.account-mask { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(15,28,48,.46); backdrop-filter: blur(2px); }
.account-drawer { position: absolute; inset: 0 auto 0 0; width: calc(100% - 42px); max-width: 388px; overflow-y: auto; color: white; background: #103661; box-shadow: 18px 0 44px rgba(13,31,54,.28); animation: drawer-in .22s ease; }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
.drawer-profile { min-height: 142px; display: grid; grid-template-columns: 62px minmax(0,1fr) 34px; gap: 12px; align-items: center; padding: max(30px, env(safe-area-inset-top)) 20px 18px; }
.drawer-avatar { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 12px; color: var(--blue-dark); background: #e9f2ff; font-size: 20px; font-weight: 700; }
.drawer-name { display: flex; align-items: center; gap: 3px; margin-left: -6px; color: white; }
.drawer-name strong { font-size: 20px; }
.drawer-name svg { width: 17px; }
.drawer-profile p { margin: 6px 0 0; color: rgba(255,255,255,.66); font-size: 10px; }
.drawer-qr { width: 34px; height: 34px; display: grid; place-items: center; color: rgba(255,255,255,.78); }
.drawer-qr svg { width: 21px; }
.drawer-company { width: 100%; min-height: 68px; display: grid; grid-template-columns: 38px minmax(0,1fr) 16px; gap: 10px; align-items: center; padding: 0 20px; text-align: left; background: rgba(255,255,255,.08); }
.company-mini { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; color: var(--blue-dark); background: white; font-size: 12px; font-weight: 700; }
.drawer-company strong, .drawer-company small { display: block; }
.drawer-company strong { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.drawer-company small { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: #74d99e; font-size: 8px; }
.drawer-company small svg { width: 12px; }
.drawer-company > svg { width: 15px; color: rgba(255,255,255,.55); }
.drawer-menu { padding: 12px 20px; }
.drawer-menu button { width: 100%; min-height: 52px; display: grid; grid-template-columns: 24px minmax(0,1fr) auto 16px; gap: 9px; align-items: center; color: rgba(255,255,255,.92); border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
.drawer-menu button > svg:first-child { width: 19px; color: #8fc0ff; }
.drawer-menu button span { font-size: 12px; }
.drawer-menu button b { min-width: 17px; height: 17px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--red); font-size: 8px; }
.drawer-menu button > svg:last-child { width: 14px; color: rgba(255,255,255,.38); }
.drawer-footer { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px calc(16px + var(--safe-bottom)); border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.6); font-size: 9px; }
.drawer-footer span { display: flex; align-items: center; gap: 4px; }
.drawer-footer span > i { width: 7px; height: 7px; border-radius: 50%; background: var(--wechat); }
.drawer-footer b { color: white; font-weight: 500; }
.drawer-footer button { color: #8fc0ff; }

.sheet-layer { position: fixed; inset: 0; z-index: 110; display: flex; align-items: flex-end; justify-content: center; }
.sheet-layer[hidden] { display: none; }
.sheet-mask { position: absolute; inset: 0; width: 100%; background: rgba(23,25,28,.38); }
.action-sheet { position: relative; z-index: 2; width: min(100%,430px); padding: 12px 14px calc(16px + var(--safe-bottom)); border-radius: 12px 12px 0 0; background: white; animation: sheet-up .2s ease; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.sheet-handle { width: 34px; height: 4px; margin: 0 auto 13px; border-radius: 2px; background: #d5d8dc; }
.sheet-title { display: flex; align-items: center; justify-content: space-between; }
.sheet-title h2 { margin: 0; font-size: 16px; }
.sheet-title button { width: 32px; height: 32px; display: grid; place-items: center; }
.sheet-title svg { width: 18px; }
.create-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px 7px; padding: 20px 0 8px; }
.create-grid button { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 10px; }
.create-grid span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--create-color); }
.create-grid svg { width: 20px; }
.compose-form label { display: block; margin-top: 12px; color: var(--muted); font-size: 10px; }
.compose-form input, .compose-form textarea { width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; outline: 0; font-size: 12px; }
.compose-form textarea { min-height: 110px; resize: none; }
.sheet-submit { width: 100%; height: 40px; margin-top: 14px; border-radius: 6px; color: white; background: var(--blue); font-size: 12px; font-weight: 600; }
.toast { position: fixed; left: 50%; bottom: 88px; z-index: 130; max-width: min(330px,calc(100% - 30px)); padding: 9px 13px; transform: translate(-50%,12px); border-radius: 6px; color: white; background: rgba(23,25,28,.9); font-size: 10px; opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 340px) {
  .work-grid { gap: 16px 2px; }
  .work-app > span:last-child { font-size: 9px; }
  .account-drawer { width: calc(100% - 34px); }
  .drawer-profile, .drawer-company, .drawer-menu { padding-left: 14px; padding-right: 14px; }
}

@media (min-width: 700px) {
  body { padding: 24px 0; }
  .app-shell { min-height: calc(100dvh - 48px); border-radius: 15px; }
  .page { min-height: calc(100dvh - 48px); }
  .bottom-nav { bottom: 24px; border-radius: 0 0 15px 15px; }
  .account-drawer { left: calc(50% - 215px); }
}

/* Official WeCom mobile shell, matched to the supplied iPhone reference. */
html, body { background: #fff; }
.app-shell { background: #fff; box-shadow: none; }
.page { background: #fff; }
.official-top { padding-bottom: 14px; color: #111; background: #e6f0ff; }
.official-header { position: relative; min-height: 58px; grid-template-columns: 52px 1fr 52px; align-items: center; padding: max(8px, env(safe-area-inset-top)) 10px 4px; border: 0; background: transparent; backdrop-filter: none; }
.official-header h1 { font-size: 20px; font-weight: 600; }
.official-header .header-action { color: #101316; }
.official-header .header-action .wecom-icon { width: 27px; height: 27px; }
.drawer-trigger { position: relative; width: 40px; height: 40px; display: grid; place-items: center; justify-self: start; }
.drawer-trigger svg { width: 24px; }
.drawer-trigger b { position: absolute; left: 24px; top: 0; min-width: 24px; height: 20px; display: grid; place-items: center; padding: 0 6px; border-radius: 11px; color: #fff; background: #fa5b55; font-size: 11px; font-weight: 600; }
.has-alert { position: relative; }
.has-alert > b { position: absolute; right: 3px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: #fa5b55; }
.header-actions { display: flex; justify-content: flex-end; gap: 2px; }
.header-actions .header-action { width: 34px; }
.global-search, .global-search.light { width: calc(100% - 20px); height: 38px; margin: 4px 10px 0; border-radius: 6px; color: #9ba0a8; background: rgba(255,255,255,.86); }
.global-search svg { width: 19px; }
.global-search span { font-size: 16px; }

.cert-notice { min-height: 58px; display: grid; grid-template-columns: 24px minmax(0,1fr) auto 20px; gap: 7px; align-items: center; margin: 12px; padding: 10px 12px; border-radius: 8px; color: #286abf; background: #e7f1ff; }
.cert-notice > svg { width: 21px; }
.cert-notice span { font-size: 13px; line-height: 1.45; }
.cert-notice button { color: #287de0; font-size: 11px; white-space: nowrap; }
.cert-notice button:last-child { color: #8c949e; }
.cert-notice button:last-child svg { width: 16px; }

.message-shortcuts { height: 44px; grid-template-columns: repeat(4,1fr); padding: 0 10px; border-top: 0; border-bottom: 1px solid #eceef0; }
.message-shortcuts button { flex-direction: row; gap: 4px; color: #6f747b; border-right: 1px solid #eceef0; font-size: 14px; }
.message-shortcuts button + button { border-left: 0; }
.message-shortcuts button:last-child { border-right: 0; }
.message-shortcuts svg { width: 18px; height: 18px; color: #737981 !important; }
.message-shortcuts button svg:last-child { width: 13px; }
.chat-list { padding: 0 12px; }
.chat-row { min-height: 62px; grid-template-columns: 48px minmax(0,1fr) 44px; gap: 10px; padding: 0; border-bottom: 1px solid #eef0f2; }
.chat-avatar-slot { position: relative; width: 48px; height: 48px; display: block; }
.chat-avatar-slot > .unread-badge { position: absolute; right: -7px; top: -7px; z-index: 2; border: 2px solid #fff; }
.chat-row .avatar, .chat-app-icon { width: 48px; height: 48px; border-radius: 9px; }
.chat-app-icon { display: grid; place-items: center; color: #fff; background: #5899ec; }
.chat-app-icon svg { width: 27px; height: 27px; }
.chat-app-growth { color: #1682e7; background: #fff; border: 2px solid #1682e7; border-radius: 50%; }
.chat-app-weekly { background: #45b3dc; }
.chat-app-ai { color: #4d73ef; background: #eff2ff; }
.chat-app-announcement { background: #f1ad48; }
.chat-copy strong { font-size: 17px; font-weight: 500; }
.chat-copy p { margin-top: 5px; color: #a5a9ae; font-size: 14px; }
.chat-meta { min-height: 48px; justify-content: flex-start; padding-top: 3px; }
.chat-meta time { color: #b8bcc2; font-size: 11px; }
.unread-badge { min-width: 18px; height: 18px; border: 0; border-radius: 10px; background: #fa5b55; font-size: 9px; }

.mail-filters, .doc-tabs { height: 48px; display: grid; grid-template-columns: repeat(3,1fr); gap: 0; padding: 0 12px; overflow: visible; border-bottom: 1px solid #e8eaed; background: #fff; }
.mail-filters button, .doc-tabs button { height: 48px; display: flex; align-items: center; justify-content: center; gap: 5px; color: #6c7279; border: 0; font-size: 14px; }
.mail-filters button + button, .doc-tabs button + button { border-left: 1px solid #eceef0; }
.mail-filters button.active, .doc-tabs button.active { color: #555b62; font-weight: 400; }
.mail-filters svg, .doc-tabs svg { width: 19px; }
.mail-filters button > b { display: none; }
.mail-list { padding: 0 12px; }
.mail-row.unread { background: #fff; }
.mail-row { min-height: 82px; grid-template-columns: 48px minmax(0,1fr) 42px; gap: 10px; padding: 0; border-bottom: 1px solid #e9ebed; }
.mail-row.selecting { grid-template-columns: 28px 48px minmax(0,1fr) 42px; }
.mail-app-icon { width: 42px; height: 42px; display: grid; place-items: center; align-self: center; border-radius: 50%; color: #fff; background: #5a99e9; }
.mail-app-icon svg { width: 22px; }
.mail-copy strong { display: flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 500; }
.mail-copy strong i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #347ff0; }
.mail-copy h3 { margin-top: 4px; font-size: 15px; font-weight: 400; }
.mail-copy p { margin-top: 4px; font-size: 14px; }
.mail-meta { align-self: start; padding-top: 13px; }
.mail-meta time { color: #bcc0c6; font-size: 11px; }

.document-section { padding: 0 12px; }
.doc-row { min-height: 74px; grid-template-columns: 46px minmax(0,1fr) auto; gap: 10px; padding: 0; border-bottom: 1px solid #eaebed; }
.doc-icon { width: 38px; height: 38px; border-radius: 3px; }
.doc-icon svg { width: 22px; }
.doc-copy strong { font-size: 17px; font-weight: 500; }
.doc-copy span { margin-top: 6px; color: #a3a7ac; font-size: 13px; }
.doc-row time { align-self: start; padding-top: 14px; color: #bcc0c6; font-size: 11px; }

.work-page { background: #eef1f5; }
.work-top { padding-bottom: 12px; }
.work-portals { min-height: 100px; display: grid; grid-template-columns: repeat(3,1fr); margin: 0 10px; border-radius: 8px; overflow: hidden; background: #fff; }
.work-portals button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 16px; }
.work-portals button span { width: 34px; height: 34px; display: grid; place-items: center; color: #478ceb; }
.work-portals button:nth-child(2) span { color: #45bd72; }
.work-portals button:nth-child(3) span { color: #5a98ea; }
.work-portals svg { width: 29px; height: 29px; }
.service-banner { width: calc(100% - 20px); min-height: 142px; display: grid; grid-template-columns: minmax(0,1fr) 92px; margin: 10px; padding: 16px; border-radius: 8px; overflow: hidden; text-align: left; color: #287ae7; background: #e0efff; }
.service-banner div { display: flex; flex-direction: column; align-items: flex-start; }
.service-banner b { color: #22a953; font-size: 17px; }
.service-banner b small { color: #5b9ff2; }
.service-banner strong { margin-top: 10px; font-size: 16px; line-height: 1.45; }
.service-banner span { margin-top: 8px; font-size: 11px; }
.service-banner em { margin-top: 9px; padding: 4px 9px; border-radius: 5px; color: #327bd6; background: #fff; font-size: 10px; font-style: normal; }
.service-banner > svg, .service-banner-icon { width: 76px; height: 76px; align-self: center; object-fit: contain; opacity: .72; }
.work-group { margin: 10px; padding: 0 0 2px; border-radius: 8px; background: #fff; }
.work-group h2 { margin: 0; padding: 13px 14px 8px; color: #878c92; font-size: 15px; font-weight: 400; }
.work-grid { display: block; padding: 0 14px; }
.work-app { width: 100%; min-height: 58px; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; align-items: center; justify-items: stretch; border-bottom: 1px solid #eceef0; text-align: left; }
.work-app-icon { width: 34px; height: 34px; border-radius: 7px; }
.work-app-icon svg { width: 19px; }
.work-app > span:last-child { max-width: none; font-size: 17px; }

.directory-list { padding: 0 16px 90px; }
.directory-list > h2 { margin: 0; padding: 18px 0 8px; color: #72777d; font-size: 15px; font-weight: 400; }
.directory-list > button, .directory-list .contact-row { min-height: 64px; display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 10px; align-items: center; width: 100%; border-bottom: 1px solid #eceef0; text-align: left; }
.directory-list > button strong { font-size: 17px; font-weight: 500; }
.directory-list > button small { color: #a4a8ad; font-size: 11px; }
.entry-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; color: #fff; }
.entry-icon svg { width: 23px; }
.entry-icon.robot, .entry-icon.blue { background: #5b9aed; }
.entry-icon.wechat { background: #2fc75a; }
.entry-icon.add { color: #3d83ea; background: #edf4ff; }
.directory-list .contact-row { grid-template-columns: 42px minmax(0,1fr); }
.directory-list .contact-row .avatar { width: 38px; height: 38px; border-radius: 7px; }
.directory-list .contact-copy strong { font-size: 17px; }
.directory-list .contact-copy span { font-size: 12px; }

.bottom-nav { height: calc(60px + var(--safe-bottom)); padding: 3px 4px var(--safe-bottom); }
.bottom-nav button { gap: 2px; font-size: 12px; }
.nav-icon { height: 27px; }
.nav-icon svg { width: 25px; height: 25px; stroke-width: 1.8; }
.nav-icon b { left: 18px; top: -5px; min-width: 18px; height: 18px; border: 0; font-size: 9px; }

.mail-selection-bar { position: fixed; left: 50%; bottom: 0; z-index: 45; width: min(100%,430px); height: calc(60px + var(--safe-bottom)); display: grid; grid-template-columns: .8fr repeat(3,1fr); padding: 3px 4px var(--safe-bottom); transform: translateX(-50%); border-top: 1px solid #e4e7ea; background: rgba(255,255,255,.98); backdrop-filter: blur(18px); }
.mail-selection-bar[hidden] { display: none; }
.mail-selection-bar button { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #5f656d; font-size: 11px; }
.mail-selection-bar button:first-child { color: #2f78dc; font-size: 14px; }
.mail-selection-bar button.danger { color: #e34d59; }
.mail-selection-bar .wecom-icon { width: 24px; height: 24px; }

.account-mask { left: calc(100% - 48px); right: auto; width: 48px; background: transparent; backdrop-filter: none; }
.account-mask { opacity: 0; transition: opacity .36s ease; }
.account-drawer { width: calc(100% - 47px); max-width: 383px; color: #fff; background: linear-gradient(180deg, #051d4d 0%, #062055 48%, #08245c 100%); box-shadow: none; animation: none; transform: translateX(-102%); transition: transform .38s cubic-bezier(.22,1,.36,1); }
.account-layer.open .account-mask { opacity: 1; }
.account-layer.open .account-drawer { transform: translateX(0); }
.drawer-profile { min-height: 138px; grid-template-columns: 66px minmax(0,1fr); padding: max(24px, env(safe-area-inset-top)) 22px 20px; background: transparent; }
.drawer-avatar { width: 64px; height: 64px; border-radius: 10px; font-size: 20px; }
.drawer-name strong { font-size: 22px; font-weight: 500; }
.drawer-profile p { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; }
.drawer-profile p b { padding: 2px 7px; border-radius: 12px; color: #b8cff3; background: rgba(255,255,255,.08); font-size: 10px; font-weight: 400; }
.drawer-profile p .drawer-verified-shield { flex: 0 0 auto; width: 20px; height: 20px; object-fit: contain; image-rendering: auto; }
.drawer-card-link { width: 100%; min-height: 58px; display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; margin: 0; padding: 0 22px; border-top: 1px solid rgba(255,255,255,.09); border-bottom: 1px solid rgba(255,255,255,.09); text-align: left; font-size: 17px; background: transparent; }
.drawer-card-link svg { width: 22px; }
.drawer-enterprises { padding: 8px 0 6px; background: transparent; }
.drawer-enterprises button { width: 100%; min-height: 58px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 0 22px; color: #fff; text-align: left; }
.drawer-enterprises button:first-child { background: rgba(255,255,255,.1); }
.drawer-enterprises strong { overflow: hidden; font-size: 17px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.drawer-enterprises b { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.18); font-size: 11px; }
.company-mini { width: 38px; height: 38px; border-radius: 8px; }
.company-mini.muted { color: #a9bddc; background: rgba(255,255,255,.08); }
.drawer-pending-head { min-height: 44px; display: grid; grid-template-columns: minmax(0,1fr) auto 16px; gap: 7px; align-items: center; margin: 0 22px; border-top: 1px solid rgba(255,255,255,.13); color: #9cb4d5; font-size: 14px; }
.drawer-pending-head b { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.17); color: #fff; font-size: 11px; }
.drawer-pending-head svg { width: 16px; color: #7e9abe; }
.drawer-pending-company { width: calc(100% - 32px); min-height: 58px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center; margin: 0 16px 8px; padding: 0 8px; border-radius: 8px; text-align: left; background: rgba(255,255,255,.06); }
.drawer-pending-company strong { overflow: hidden; font-size: 17px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.drawer-pending-company small { padding: 2px 5px; color: #d4e0f1; background: rgba(255,255,255,.1); font-size: 10px; }
.drawer-bottom-menu { margin: 8px 22px 0; padding: 8px 0 calc(18px + var(--safe-bottom)); border-top: 1px solid rgba(255,255,255,.13); }
.drawer-bottom-menu button { min-height: 49px; grid-template-columns: 34px 1fr; border: 0; }
.drawer-bottom-menu button > svg:first-child { width: 22px; height: 22px; color: #c9d9f1; }
.drawer-bottom-menu button span { font-size: 17px; }

.sheet-list { max-height: min(58dvh,520px); overflow-y: auto; margin: 10px -14px -4px; border-top: 1px solid #eceef0; }
.sheet-list-row { width: 100%; min-height: 58px; display: grid; grid-template-columns: 30px minmax(0,1fr) 22px; gap: 10px; align-items: center; padding: 0 18px; border-bottom: 1px solid #eceef0; text-align: left; }
.sheet-list-row > .wecom-icon:first-child { width: 22px; height: 22px; color: #687079; }
.sheet-list-row > .wecom-icon:last-child { width: 18px; height: 18px; justify-self: end; color: #b9bdc4; }
.sheet-list-row.selected > .wecom-icon:last-child { color: #347ff0; }
.sheet-list-row span { min-width: 0; font-size: 16px; }
.sheet-list-row strong, .sheet-list-row small { display: block; }
.sheet-list-row strong { overflow: hidden; font-size: 16px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sheet-list-row small { margin-top: 3px; color: #9a9fa6; font-size: 11px; }
.sheet-company-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: #3978d4; background: #edf4ff; font-size: 12px; font-style: normal; font-weight: 700; }

.wecom-icon { display: block; width: 24px; height: 24px; overflow: visible; color: inherit; }
.nav-icon .wecom-icon { grid-area: 1 / 1; width: 26px; height: 26px; }
.nav-icon .nav-on { display: none; }
.bottom-nav button.active .nav-off { display: none; }
.bottom-nav button.active .nav-on { display: block; }

.work-portals button span img { width: 34px; height: 34px; object-fit: contain; }
.chat-app-icon.native,
.mail-app-icon.native,
.doc-icon.native,
.work-app-icon.native,
.entry-icon.native {
  overflow: visible;
  border: 0;
  color: inherit;
  background: transparent;
}
.chat-app-icon.native img,
.mail-app-icon.native img,
.doc-icon.native img,
.work-app-icon.native img,
.entry-icon.native img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
  -webkit-user-drag: none;
}
.chat-app-growth.native { border: 0; border-radius: 9px; }
.chat-app-growth.native img { width: 94%; height: 94%; }
.mail-app-icon.native { width: 42px; height: 42px; }
.doc-icon.native { width: 38px; height: 38px; }
.work-app-icon.native { width: 34px; height: 34px; }
.entry-icon.native { width: 38px; height: 38px; }

.detail-header { min-height: 58px; border-bottom: 0; background: #eef1f5; }
.detail-header h1 { font-size: 18px; }
.native-page { padding: 0; background: #eef1f5; }
.native-card { margin: 0 0 12px; border-radius: 0; }
.native-label { margin: 0; padding: 10px 16px 7px; color: #858a91; font-size: 12px; font-weight: 400; }
.native-row { min-height: 58px; grid-template-columns: minmax(90px,1fr) minmax(0,1.5fr) 16px; padding: 0 16px; }
.native-row > span { font-size: 17px; }
.native-row strong { font-size: 15px; }
.avatar-info-row { min-height: 90px; }
.profile-avatar-large { width: 64px; height: 64px; border-radius: 8px; }
.company-hero { margin: 0 0 12px; border-radius: 0; }

.settings-profile { min-height: 88px; display: grid; grid-template-columns: 56px minmax(0,1fr) 18px; gap: 12px; align-items: center; margin-bottom: 12px; padding: 0 16px; background: #fff; }
.settings-avatar { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: var(--blue); font-size: 16px; font-weight: 600; background-size: cover; background-position: center; }
.settings-profile strong, .settings-profile small { display: block; }
.settings-profile strong { font-size: 17px; }
.settings-profile small { margin-top: 5px; color: #969ba3; font-size: 12px; }
.settings-profile > .wecom-icon { width: 18px; color: #bec2c7; }
.setting-toggle-row { grid-template-columns: minmax(0,1fr) auto; }
.setting-toggle-row .native-switch { position: relative; width: 44px; height: 25px; border-radius: 13px; background: #d8dce1; transition: background .18s ease; }
.setting-toggle-row .native-switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .18s ease; }
.setting-toggle-row .native-switch.active { background: #347ff0; }
.setting-toggle-row .native-switch.active::after { transform: translateX(19px); }

.detail-page.detail-enter { animation: detail-slide-in .38s cubic-bezier(.22,1,.36,1); }
.detail-page.detail-exit { animation: detail-slide-out .34s cubic-bezier(.4,0,.2,1) both; pointer-events: none; }
.detail-page.detail-exit-account {
  position: fixed;
  inset: 0;
  z-index: 110;
  width: 100%;
  height: 100dvh;
  overflow-y: auto;
  background: #eef1f5;
  animation: detail-slide-out .34s cubic-bezier(.4,0,.2,1) both;
  pointer-events: none;
}
.detail-page.detail-pop { animation: detail-pop-in .28s ease; }
@keyframes detail-slide-in { from { opacity: .82; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes detail-slide-out { from { opacity: 1; transform: translateX(0); } to { opacity: .88; transform: translateX(100%); } }
@keyframes detail-pop-in { from { opacity: .86; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 699px) {
  .app-shell { width: 100vw; max-width: none; margin: 0; transition: transform .38s cubic-bezier(.22,1,.36,1), border-radius .38s ease; transform-origin: left center; }
  body.account-open { overflow: hidden; background: #08245c; }
  body.account-open .app-shell { transform: translateX(calc(100vw - 48px)); border-radius: 18px 0 0 18px; box-shadow: none; }
  body.account-open .app-shell::after { opacity: 1; }
}

@media (max-width: 340px) {
  .official-header h1 { font-size: 17px; }
  .cert-notice { grid-template-columns: 22px minmax(0,1fr) 18px; }
  .cert-notice > button:nth-of-type(1) { display: none; }
  .message-shortcuts button { font-size: 11px; }
  .service-banner { grid-template-columns: minmax(0,1fr) 64px; }
  .service-banner > svg { width: 56px; }
}

@media (min-width: 700px) {
  .account-mask { left: calc(50% + 167px); }
  .mail-selection-bar { bottom: 24px; border-radius: 0 0 15px 15px; }
}

/* Local visual QA mode. It only activates with ?qa-mobile. */
html.qa-mobile,
html.qa-mobile body { width: 390px; min-height: 844px; padding: 0; overflow-x: hidden; background: #fff; }
html.qa-mobile body.account-open { background: #08245c; }
html.qa-mobile .app-shell { width: 390px; max-width: none; min-height: 844px; margin: 0; border-radius: 0; }
html.qa-mobile .page { min-height: 844px; }
html.qa-mobile .bottom-nav,
html.qa-mobile .mail-selection-bar { left: 0; bottom: 0; width: 390px; transform: none; border-radius: 0; }
html.qa-mobile .account-mask { left: 342px; width: 48px; }
html.qa-mobile .account-drawer { left: 0; width: 343px; }
html.qa-mobile body.account-open .app-shell { transform: translateX(342px); border-radius: 18px 0 0 18px; box-shadow: none; }