page { background: #f8f5f0; color: #20332e; font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; font-size: 14px; line-height: 1.5; }
view, scroll-view, input, button { box-sizing: border-box; }
button::after { border: 0; }
.phone { width: 100%; max-width: 430px; min-height: 100vh; margin: 0 auto; padding-bottom: 88px; padding-bottom: calc(88px + env(safe-area-inset-bottom)); background: #f8f5f0; }
.top { min-height: 58px; padding: 12px 17px; display: flex; align-items: center; gap: 10px; }
.top-title { flex: 1; min-width: 0; font-size: 18px; font-weight: 700; overflow-wrap: break-word; }
.role { max-width: 40%; font-size: 11px; color: #f07c62; font-weight: 700; background: #fff0eb; padding: 5px 8px; border-radius: 99px; text-align: center; }
.more { flex-shrink: 0; font-size: 20px; }
.page { padding: 5px 15px 18px; }
.hello { background: linear-gradient(135deg,#fff7f2,#ffede6); border-radius: 16px; padding: 16px 17px; margin: 7px 0 16px; position: relative; overflow: hidden; }
.hello::after { content: '缘'; position: absolute; right: 18px; top: -18px; font-size: 98px; font-weight: 800; color: rgba(246,196,183,.2); line-height: 1; pointer-events: none; }
.hello-title { display: block; position: relative; z-index: 1; font-size: 20px; font-weight: 700; margin-bottom: 5px; overflow-wrap: break-word; }
.hello-sub { display: block; position: relative; z-index: 1; color: #7f756e; font-size: 12px; }
.stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.stat { min-width: 0; background: #fff; border: 1px solid #f2ece5; border-radius: 13px; padding: 14px; box-shadow: 0 4px 16px rgba(34,50,44,.06); }
.stat-label,.stat-desc { display: block; color: #82908b; font-size: 12px; overflow-wrap: break-word; }
.stat-num { display: block; font-size: 25px; font-weight: 700; margin: 8px 0 4px; overflow-wrap: anywhere; }
.stat-desc { font-size: 11px; color: #4a8b70; }
.section-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; font-size: 16px; line-height: 24px; font-weight: 700; margin: 22px 2px 11px; }
.section-link { font-size: 12px; color: #f07c62; font-weight: 400; }
.page-heading { font-size: 20px; }
.quick { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.quick-item { min-width: 0; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border-radius: 12px; padding: 11px 3px 10px; text-align: center; font-size: 11px; box-shadow: 0 4px 16px rgba(34,50,44,.06); }
.quick-icon { display: block; flex-shrink: 0; width: 31px; height: 31px; margin: 0 auto 7px; background: #fff0eb; color: #f07c62; border-radius: 10px; font-size: 18px; line-height: 31px; text-align: center; }
.card { background: #fff; border-radius: 15px; box-shadow: 0 4px 16px rgba(34,50,44,.06); border: 1px solid #f4eee8; margin-bottom: 10px; }
.todo { padding: 0 14px; }
.todo-row { display: flex; gap: 10px; align-items: center; padding: 13px 0; border-bottom: 1px solid #eee8e0; }
.todo-row:last-child { border: 0; }
.row-copy { flex: 1; min-width: 0; overflow-wrap: break-word; }
.dot { width: 8px; height: 8px; background: #f07c62; border-radius: 50%; flex-shrink: 0; }
.dot-1 { background: #d99e49; }
.dot-2 { background: #61a384; }
.todo-title { display: block; font-size: 13px; margin-bottom: 4px; }
.todo-sub { display: block; color: #82908b; font-size: 11px; }
.todo-tabs { display: flex; gap: 7px; margin-bottom: 8px; }
.todo-search { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.todo-search .search { flex: 1; min-width: 0; width: 0; margin: 0; padding: 0 10px; font-size: 12px; }
.todo-search .todo-search-button { flex-shrink: 0; width: auto; margin: 0; padding: 0 14px; height: 44px; line-height: 44px; background: #fff0eb; color: #c9644c; border-radius: 10px; font-size: 13px; }
.event-filter-summary.todo-search-summary { justify-content: flex-end; }
.todo-tabs .todo-tab { flex: 1; min-width: 0; margin: 0; padding: 9px 3px; background: #eee9e2; color: #67736e; border-radius: 10px; font-size: 12px; line-height: 20px; }
.todo-tab text { display: block; }
.todo-tabs .todo-tab.active { background: #fff0eb; color: #c9644c; }
.todo-count { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.todo-note { display: block; margin-bottom: 10px; color: #82908b; font-size: 11px; line-height: 18px; }
.section-title .todo-refresh { margin: 0; padding: 4px 0 4px 12px; background: transparent; color: #c9644c; font-size: 12px; line-height: 20px; }
.chev { flex-shrink: 0; margin-left: auto; color: #a5aea9; font-size: 19px; }
.chart-card { padding: 15px; margin-top: 10px; }
.chart-empty { min-height: 90px; display: flex; align-items: center; justify-content: center; color: #a19b94; font-size: 12px; text-align: center; line-height: 1.6; }
.trend-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #82908b; font-size: 12px; }
.trend-summary .trend-refresh { margin: 0; padding: 4px 0 4px 8px; width: auto; background: transparent; color: #c9644c; font-size: 12px; line-height: 20px; flex-shrink: 0; }
.trend-canvas { display: block; width: 100%; height: 100px; }
.trend-labels { display: flex; }
.trend-day { flex: 1; min-width: 0; text-align: center; color: #82908b; font-size: 10px; }
.trend-day text { display: block; }
.trend-day .trend-value { color: #c9644c; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; margin-bottom: 3px; }
.trend-zero { display: block; margin-top: 10px; color: #82908b; font-size: 12px; text-align: center; }
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-width: 430px; margin: 0 auto; padding-bottom: env(safe-area-inset-bottom); background: rgba(255,255,255,.97); border-top: 1px solid #eee8e0; z-index: 5; display: flex; }
.tab { flex: 1; min-width: 0; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #929e99; font-size: 10px; text-align: center; padding: 7px 0; }
.tab-icon { display: block; height: 27px; font-size: 21px; line-height: 27px; }
.tab.active { color: #f07c62; font-weight: 700; }
.list-card { display: flex; align-items: center; gap: 11px; padding: 14px; }
.face,.mini,.profile-avatar,.qr-icon,.detail-avatar { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.face { width: 43px; height: 43px; border-radius: 50%; background: #f6d7cd; color: #b45745; font-size: 16px; font-weight: 700; }
.list-info { min-width: 0; flex: 1; }
.list-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; }
.list-name { display: block; font-size: 15px; font-weight: 700; overflow-wrap: break-word; }
.list-sub { display: block; color: #82908b; font-size: 11px; margin-top: 4px; overflow-wrap: anywhere; }
.list-tag { display: inline-block; flex-shrink: 0; font-size: 10px; color: #c9644c; background: #fff0eb; padding: 4px 6px; border-radius: 99px; }
.tag { display: inline-block; max-width: 100%; font-size: 10px; color: #806757; background: #f9f0e9; padding: 4px 6px; border-radius: 5px; margin-top: 6px; overflow-wrap: anywhere; }
.empty { text-align: center; color: #82908b; padding: 32px 16px; font-size: 13px; }
.people-note { font-size: 12px; color: #766f68; padding: 12px 13px; background: #fff0eb; border-radius: 11px; line-height: 1.6; margin-bottom: 12px; }
.tree { padding: 13px; }
.member { display: flex; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid #eee8e0; }
.member:last-child { border: 0; }
.indent-1 { margin-left: 22px; }
.indent-2 { margin-left: 44px; }
.indent-3 { margin-left: 66px; }
.mini { height: 33px; width: 33px; background: #f6d7cd; color: #b45745; border-radius: 50%; font-size: 13px; font-weight: 700; }
.member .list-name { font-size: 13px; }
.member-count { flex-shrink: 0; margin-left: auto; font-size: 11px; color: #82908b; white-space: nowrap; }
.kv { padding: 15px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.kv text { display: block; color: #82908b; font-size: 11px; overflow-wrap: anywhere; }
.kv .kv-value { color: #20332e; font-size: 13px; font-weight: 600; margin-top: 4px; }
.event-card { padding: 15px; margin-bottom: 11px; }
.event-date { font-size: 11px; font-weight: 700; color: #bd5a45; background: #fff0eb; border-radius: 7px; padding: 5px 7px; display: inline-block; }
.event-name { display: block; font-size: 16px; font-weight: 700; margin: 10px 0 5px; overflow-wrap: break-word; }
.event-desc { display: block; font-size: 12px; color: #82908b; line-height: 1.65; overflow-wrap: anywhere; }
.event-cover { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 10px; margin-bottom: 11px; background: #f0ece7; }
.event-subtitle { display: block; color: #766f68; font-size: 12px; margin: -1px 0 6px; overflow-wrap: break-word; }
.progress { background: #f0ece7; height: 6px; border-radius: 5px; overflow: hidden; margin: 11px 0 6px; }
.progress view { background: #f07c62; height: 100%; border-radius: 5px; }
.search { display: block; width: 100%; height: 44px; min-height: 44px; line-height: 44px; padding: 0 13px; border: 1px solid #eee8e0; background: #fff; border-radius: 10px; font-size: 13px; margin-bottom: 10px; }
.chips { display: block; width: 100%; white-space: nowrap; margin: 0 0 12px; }
.chip { display: inline-block; border-radius: 99px; background: #eee9e2; color: #67736e; padding: 7px 11px; font-size: 12px; margin-right: 7px; }
.chip.active { color: #f07c62; background: #fff0eb; }
.event-filter-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 12px; color: #82908b; font-size: 12px; }
.event-filter-summary .clear-filter { width: auto; margin: 0; padding: 6px 0 6px 12px; background: transparent; color: #c9644c; font-size: 12px; line-height: 20px; flex-shrink: 0; }
.profile-hero { background: linear-gradient(135deg,#1f4b42,#326759); color: #fff; border-radius: 18px; padding: 18px; display: flex; align-items: center; gap: 12px; }
.profile-avatar { width: 54px; height: 54px; border-radius: 50%; background: #f7b7a5; color: #8e4639; font-weight: 800; font-size: 21px; }
.profile-name { display: block; font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.profile-sub { display: block; font-size: 11px; color: #d9e7e0; }
.profile-line { padding: 15px; display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.profile-line .quick-icon { margin: 0; }
.qr-row { padding: 14px; display: flex; align-items: center; gap: 13px; margin-top: 10px; }
.qr-icon { width: 52px; height: 52px; border-radius: 12px; background: #fff5f2; color: #f07c62; font-size: 32px; }
.qr-thumbnail { display: block; width: 52px; height: 52px; }
.qr-placeholder { font-size: 10px; }
.state-card { padding: 15px; background: #fff; border: 1px solid #f4eee8; border-radius: 12px; color: #65736e; font-size: 12px; line-height: 1.6; margin: 8px 0 12px; overflow-wrap: anywhere; }
.loading-card { text-align: center; color: #82908b; }
.error-card { color: #c9644c; }
.state-action { display: inline-block; color: #f07c62; margin-left: 12px; }
.inline-loading { text-align: center; color: #82908b; font-size: 12px; padding: 18px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0 6px; color: #82908b; font-size: 11px; }
.pager .pager-button { width: auto; flex-shrink: 0; height: 36px; margin: 0; padding: 0 12px; border-radius: 8px; background: #fff0eb; color: #c9644c; font-size: 11px; line-height: 36px; }
.pager .pager-button[disabled] { color: #bdb8b2; background: #f0ece7; }
.modal-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(27,48,42,.35); z-index: 10; }
.detail-sheet { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; max-width: 430px; max-height: 88vh; margin: 0 auto; overflow-y: auto; padding: 13px 16px 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: #fff; }
.sheet-handle { width: 36px; height: 4px; margin: 0 auto 14px; border-radius: 4px; background: #d9d7d3; }
.sheet-title { display: block; margin-bottom: 14px; font-size: 18px; font-weight: 700; }
.detail-head { display: flex; align-items: center; gap: 11px; padding: 10px 0; }
.detail-avatar { width: 52px; height: 52px; border-radius: 50%; background: #f6d7cd; color: #b45745; }
.detail-initial { font-size: 19px; font-weight: 700; }
.detail-name { display: block; font-size: 17px; font-weight: 700; }
.detail-block { padding: 13px; margin-top: 10px; border-radius: 12px; background: #faf7f3; }
.detail-block .kv { padding: 0; }
.detail-block-title { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.detail-line { display: block; color: #65736e; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.detail-sheet .sheet-close,.detail-sheet .submit-button,.detail-sheet .test-button,.page .logout-button { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; line-height: 44px; margin: 14px 0 0; padding: 0 12px; border-radius: 9px; font-size: 13px; }
.sheet-close { color: #5c6863; background: #f3f0ec; }
.action-sheet { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.form-hint { display: block; color: #82908b; font-size: 11px; line-height: 18px; margin: 0 0 10px; }
.form-input,.form-picker,.form-textarea { width: 100%; min-height: 44px; margin: 8px 0; padding: 0 12px; border: 1px solid #ece4dc; border-radius: 9px; background: #fffaf6; color: #3d4944; font-size: 13px; line-height: 44px; }
.form-textarea { height: 82px; padding-top: 10px; line-height: 20px; }
.form-row { display: flex; gap: 8px; }
.form-row .half { flex: 1; min-width: 0; }
.form-picker { color: #3d4944; }
.form-picker.full { display: block; }
.upload-button { width: 100%; height: 42px; margin: 8px 0; color: #c9644c; background: #fff0eb; border-radius: 9px; font-size: 13px; line-height: 42px; }
.submit-button { color: #fff; background: #f07c62; font-weight: 700; }
.test-button { color: #c9644c; background: #fff0eb; }
.webview-empty { padding: 60px 24px; color: #82908b; font-size: 13px; text-align: center; }
.qr-sheet { text-align: center; }
.invite-qr-image { display: block; width: 264px; max-width: 100%; margin: 12px auto; background: #fff; }
.invite-qr-caption { display: block; color: #20332e; font-size: 14px; font-weight: 600; }
.invite-qr-hint { display: block; margin: 6px 0 18px; }
.qr-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px; padding: 16px; border: 1px dashed #f2c8bb; border-radius: 14px; color: #65736e; background: #fffaf7; font-size: 13px; line-height: 1.7; }
.qr-placeholder-icon { font-size: 64px; line-height: 76px; color: #f07c62; }
.qr-small { margin-top: 6px; color: #a19b94; font-size: 11px; }
.qr-token,.qr-link { display: block; margin-top: 11px; padding: 8px 10px; border-radius: 7px; background: #f6f0e9; color: #766352; font-family: monospace; font-size: 10px; line-height: 1.5; word-break: break-all; text-align: left; }
.page .logout-button { margin: 22px 0 10px; border: 1px solid #f1d8ce; color: #c9644c; background: #fff; }
@media (max-width: 350px) { .indent-1 { margin-left: 14px; } .indent-2 { margin-left: 28px; } .indent-3 { margin-left: 42px; } .member { gap: 6px; } }