/* 本地 4.0：低饱和绿与暖白，聊天保持独立滚动，工具不挤占输入区。 */
body.v4-active{--bg:#f6f7f3;--panel:#fffefb;--surface:#fffefb;--text:#243d38;--text-dim:#65756e;--border:#e0e6df;--accent:#326454;--accent-text:#fff;--bubble-mine:#d4e9d6;--bubble-mine-text:#213a2a;--bubble-them:#fffefb;--bubble-them-text:#243d38;background:var(--bg)}
/* 4.0 页面的语义颜色（2026-10-21 深色模式）：页面只用 --v4-*；这里的默认值就是主题 C 的浅色 / 深色，
   主题 A / B 在 themes.css 里各给一套。正文对比度 ≥ 4.5:1；fill 是按钮 / 选中底色，link 是强调文字色，深色下两者分开。 */
body.v4-active{--v4-bg:#f6f7f3;--v4-card:#fffefb;--v4-line:#e0e6df;--v4-divider:#edf0e8;--v4-text:#243d38;--v4-muted:#5d6c66;--v4-faint:#657060;--v4-fill:#326454;--v4-on-fill:#fff;--v4-link:#326454;--v4-tint:#e5eddf;--v4-tint-line:#dce5d5;--v4-tint-ink:#4e6652;--v4-art:#c6d8bd;--v4-soft:#f0f3ec;--v4-warm:#f3eadf;--v4-warm-ink:#8c5736;--v4-warm-line:#dfc6a4;--v4-warm-card:#fffbf3;--v4-danger:#ad493d;--v4-nav:#fffefbf5;--v4-input:#fafbf6;--v4-switch:#d7ddd3;--v4-shadow:#1b372a28;--v4-backdrop:#1e302b80}
@media (prefers-color-scheme:dark){body.v4-active{--v4-bg:#1b1a17;--v4-card:#25241f;--v4-line:#3a372f;--v4-divider:#302e28;--v4-text:#ece6da;--v4-muted:#b1aa9b;--v4-faint:#969080;--v4-fill:#4d705c;--v4-on-fill:#fff;--v4-link:#9cc5a8;--v4-tint:#232a23;--v4-tint-line:#33402f;--v4-tint-ink:#a9c4ad;--v4-art:#3e5440;--v4-soft:#22231e;--v4-warm:#352b21;--v4-warm-ink:#e2b98e;--v4-warm-line:#5e4a33;--v4-warm-card:#2a2620;--v4-danger:#f0907f;--v4-nav:#1f1e1bf2;--v4-input:#211f1b;--v4-switch:#4a4740;--v4-shadow:#00000066;--v4-backdrop:#000000a0}}
.v4-away{display:none!important}.v4-active #chat{height:calc(100dvh - 70px - env(safe-area-inset-bottom));padding-bottom:0}.v4-active #single{height:calc(100dvh - 70px - env(safe-area-inset-bottom));min-height:0;overflow:auto;align-items:flex-start;padding:24px 16px 40px}.v4-active .single-card{max-width:580px;box-shadow:none;border:1px solid var(--border)}
/* 底部安全区（iPhone 的 Home 条）已经由底栏 .v4-nav 让出，输入栏不再重复留一份，否则输入栏和底栏之间空出一大截（2026-10-22 iPhone 11 Pro 实测） */
.v4-active #composer{padding-bottom:10px}
/* 聊天页没有底部导航（P-061 / T-046 方案 C）：「我们」「在一起」「我的」收进顶栏右边，「···」菜单拿掉；聊天页自己让出 Home 条的安全区 */
.v4-in-chat .v4-nav{display:none}.v4-active.v4-in-chat #chat{height:100dvh}.v4-active.v4-in-chat #composer{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.v4-active #chat header{grid-template-columns:108px minmax(0,1fr) 108px}.v4-active #head-more,.v4-active #head-menu{display:none}
.v4-headtabs{display:flex;gap:2px;justify-content:flex-end}.v4-headtab{position:relative;width:34px;height:34px;display:grid;place-items:center;padding:0;border:0;border-radius:10px;background:none;color:var(--v4-muted);cursor:pointer;-webkit-tap-highlight-color:transparent}.v4-headtab svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.v4-headtab .v4-dot{top:5px;left:auto;right:5px;transform:none}@media(hover:hover){.v4-headtab:hover{background:var(--v4-tint)}}
/* 已组队时其他页的顶栏（P-064 B 胶囊，审核稿 deploy/candidates/top-nav/）：左边圆形聊天图标返回聊天，中间分段胶囊，右边留同宽空位让胶囊居中；底部导航不显示，页面自己让出 Home 条的安全区；切页时新页面从右边滑进来，横向裁掉，免得一闪出现横向滚动 */
.v4-topbar{position:relative;z-index:5;display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;gap:8px;box-sizing:border-box;height:calc(var(--header-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(12px,calc((100vw - 760px)/2)) 0;background:var(--panel);border-bottom:1px solid var(--border)}
.v4-back{position:relative;width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--v4-tint);color:var(--v4-link);cursor:pointer;-webkit-tap-highlight-color:transparent}.v4-back .v4-dot{top:4px;left:auto;right:2px;transform:none}
.v4-back svg,.v4-pagetab svg{display:block;flex:none;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v4-pagetabs{justify-self:center;display:flex;gap:2px;padding:3px;border-radius:13px;background:var(--v4-soft);border:1px solid var(--v4-line)}
.v4-pagetab{position:relative;display:flex;align-items:center;gap:4px;height:32px;padding:0 11px;border:0;border-radius:10px;background:none;color:var(--v4-muted);font:13px system-ui;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}.v4-pagetab[aria-current=page]{background:var(--v4-card);color:var(--v4-link);font-weight:650;box-shadow:0 1px 4px var(--v4-shadow)}.v4-pagetab .v4-dot{top:3px;left:28px;transform:none}
@media(max-width:360px){.v4-topbar{gap:4px;padding-inline:8px}.v4-pagetab{gap:3px;padding:0 7px}.v4-pagetab .v4-dot{left:24px}}
html:has(>body.v4-active),body.v4-active{overflow-x:clip}.v4-top .v4-nav{display:none}.v4-top .v4-screen{height:calc(100dvh - var(--header-h) - env(safe-area-inset-top));padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.v4-nav{position:fixed;bottom:0;left:0;right:0;z-index:25;height:calc(70px + env(safe-area-inset-bottom));padding:6px max(12px,calc((100vw - 760px)/2)) env(safe-area-inset-bottom);display:flex;gap:4px;background:var(--v4-nav);border-top:1px solid var(--v4-line);backdrop-filter:blur(16px)}
.v4-nav-item{border:0;background:transparent;flex:1;min-width:0;height:58px;color:var(--v4-muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font:12px system-ui;cursor:pointer;position:relative;border-radius:16px;transition:background-color .2s ease,color .2s ease}.v4-nav-item[aria-current=page]{color:var(--v4-link);background:var(--v4-tint);font-weight:650}.v4-nav-icon{width:28px;height:29px;display:grid;place-items:center;transform:translateY(0);transition:transform .2s ease}.v4-nav-icon svg{display:block;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.v4-nav-label{position:absolute;left:0;right:0;top:calc(50% + 9px);height:14px;line-height:14px;text-align:center;white-space:nowrap;opacity:0;transform:translateY(3px);transition:opacity .2s ease,transform .2s ease;pointer-events:none}.v4-nav-item[aria-current=page] .v4-nav-label{opacity:1;transform:translateY(0)}.v4-nav-item[aria-current=page] .v4-nav-icon{transform:translateY(-8px)}.v4-nav-item[aria-current=page] .v4-dot{transform:translateY(-8px)}.v4-dot{position:absolute;top:13px;left:calc(50% + 12px);transition:transform .2s ease;width:6px;height:6px;border-radius:50%;background:var(--v4-danger)}
.v4-screen{height:calc(100dvh - 70px - env(safe-area-inset-bottom));overflow:auto;padding:32px max(22px,calc((100vw - 760px)/2)) 40px;background:var(--v4-bg);color:var(--v4-text);scrollbar-gutter:stable}.v4-heading{margin:0 0 28px}.v4-heading h1{font-size:clamp(25px,4vw,32px);line-height:1.4;letter-spacing:-.8px;margin:8px 0 10px;font-weight:650}.v4-heading p{font-size:13px;line-height:1.8;color:var(--v4-muted);margin:0}.v4-eyebrow{font-size:10px;letter-spacing:1.5px;color:var(--v4-faint);font-weight:650}
.v4-hero{position:relative;background:var(--v4-tint);border:1px solid var(--v4-tint-line);border-radius:24px;padding:28px;overflow:hidden;min-height:180px}.v4-hero h2{font-size:24px;position:relative;z-index:1;margin:20px 0 6px}.v4-hero p{font-size:12px;color:var(--v4-tint-ink);position:relative;z-index:1}.v4-hero-art{position:absolute;right:-6px;bottom:-30px;width:190px;height:190px;fill:none;stroke:var(--v4-art);stroke-width:.8;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-8deg)}
.v4-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 30px}.v4-quick button{display:flex;align-items:center;justify-content:center;gap:7px;background:var(--v4-card);color:var(--v4-text);border:1px solid var(--v4-line);border-radius:14px;padding:16px 4px;font-size:12px;white-space:nowrap}.v4-quick-icon{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.v4-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.v4-section-head h2,.v4-section-title{font-size:17px;letter-spacing:-.3px;margin:12px 0 16px}.v4-section-head>span{font-size:11px;color:var(--v4-muted)}
.v4-button{border:0;border-radius:12px;padding:12px 18px;font:600 13px system-ui;background:var(--v4-fill);color:var(--v4-on-fill);cursor:pointer}.v4-button:disabled{opacity:.55;cursor:wait}.v4-link{border:0;background:none;color:var(--v4-muted);padding:8px;font:12px system-ui;cursor:pointer}.v4-title-button{border:0;background:none;padding:4px 0;text-align:left;color:inherit;font:600 16px system-ui;cursor:pointer}.v4-empty{padding:30px 20px;border:1px dashed var(--v4-tint-line);border-radius:20px;text-align:center;color:var(--v4-muted);font-size:13px;line-height:1.8;background:var(--v4-soft)}.v4-empty h3{color:var(--v4-text);font-size:16px}.v4-empty-icon{font-size:32px;color:var(--v4-tint-ink)}.v4-empty .v4-button{margin-top:12px}
.v4-date-card{display:flex;flex-wrap:wrap;align-items:center;gap:16px;background:var(--v4-card);border:1px solid var(--v4-line);border-radius:18px;padding:18px;margin-bottom:12px}.v4-date-stamp{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;background:var(--v4-warm);width:58px;height:68px;color:var(--v4-warm-ink);flex-shrink:0}.v4-date-stamp b{font:30px/1.1 Georgia}.v4-date-stamp small{font-size:11px;margin-top:5px}.v4-date-body{flex:1;min-width:140px;display:flex;align-items:flex-start;flex-direction:column}.v4-date-body p{font-size:12px;margin:3px 0;color:var(--v4-muted)}.v4-status{font-size:10px;margin-top:5px;color:var(--v4-faint)}.v4-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:100%;padding-top:8px;border-top:1px solid var(--v4-divider)}.v4-due{color:var(--v4-warm-ink);font-size:12px;margin:0}.v4-date-card.is-due{border-color:var(--v4-warm-line);background:var(--v4-warm-card)}
/* 纪念日计时章（P-056 / T-045）：章里写过了多久；「今天」「1,000」这类放不下 30px 的缩小；当天和整周年换主题主色 */
.v4-date-stamp b.long{font-size:19px}.v4-date-body p.v4-elapsed{font-weight:650;color:var(--v4-warm-ink);font-size:13px}.v4-date-card.is-special .v4-date-stamp{background:var(--v4-fill);color:var(--v4-on-fill)}.v4-date-card.is-special .v4-date-body p.v4-elapsed{color:var(--v4-fill)}
.v4-summary{flex-shrink:0;display:flex;align-items:center;background:var(--v4-tint);padding:5px 12px;gap:8px;border-bottom:1px solid var(--v4-tint-line)}.v4-summary-main{border:0;background:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:var(--v4-tint-ink);font:12px system-ui;padding:8px 0;cursor:pointer}
.v4-search{width:100%;padding:14px 16px;border:1px solid var(--v4-line);border-radius:14px;background:var(--v4-card);color:var(--v4-text);font:14px system-ui;margin-bottom:20px}.v4-tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.v4-tool-card{border:1px solid var(--v4-line);border-radius:20px;background:var(--v4-card);padding:22px 18px;text-align:left;cursor:pointer;color:var(--v4-text);display:flex;flex-direction:column}.v4-tool-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:25px;background:var(--v4-tint);margin-bottom:16px;color:var(--v4-tint-ink)}.v4-tool-card:nth-child(2n) .v4-tool-icon{background:var(--v4-warm);color:var(--v4-warm-ink)}.v4-tool-card small{font-size:10px;color:var(--v4-faint)}.v4-tool-card h3{font-size:16px;margin:6px 0}.v4-tool-card p{font-size:12px;line-height:1.7;margin:0;color:var(--v4-muted)}.v4-roadmap{background:var(--v4-soft);border-radius:18px;margin:24px 0 0;padding:20px}.v4-roadmap h3{font-size:15px;margin:0 0 8px}.v4-roadmap p{font-size:12px;color:var(--v4-muted)}.v4-roadmap small{font-size:11px;color:var(--v4-faint)}
.v4-profile{display:flex;align-items:center;gap:18px;padding:24px;background:var(--v4-tint);border-radius:20px;margin-bottom:24px;font-size:13px}.v4-avatar{background:var(--v4-tint-line);color:var(--v4-tint-ink);width:52px;height:52px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;font-size:20px}.v4-setting-list{border:1px solid var(--v4-line);background:var(--v4-card);border-radius:18px;overflow:hidden;margin-bottom:28px}.v4-setting{width:100%;display:block;text-align:left;padding:18px;background:transparent;border:0;border-bottom:1px solid var(--v4-divider);color:var(--v4-text);cursor:pointer;font:14px system-ui}.v4-setting:last-child{border-bottom:0}.v4-archive{padding:18px;border-radius:16px;background:var(--v4-soft);margin-bottom:12px}.v4-archive p,.v4-archive small,.v4-note{font-size:12px;line-height:1.8;color:var(--v4-muted)}.v4-footnote{font-size:10px;color:var(--v4-faint);margin-top:24px;line-height:1.7}
.v4-discovery-profile{padding:24px;border-radius:20px;background:var(--v4-tint);margin-bottom:28px}.v4-discovery-profile h2{font-size:22px;margin:12px 0}.v4-discovery-profile p{font-size:13px;line-height:1.8;color:var(--v4-tint-ink)}.v4-person{padding:24px;border-radius:20px;border:1px solid var(--v4-line);background:var(--v4-card);margin-bottom:16px}.v4-person h3{margin:12px 0 8px;font-size:18px}.v4-person p{font-size:14px;color:var(--v4-muted);overflow-wrap:anywhere}.v4-person small{display:block;margin-bottom:16px;color:var(--v4-faint)}
.v4-dialog{max-width:440px;width:calc(100% - 32px);max-height:85dvh;overflow:auto;background:var(--v4-card);color:var(--v4-text);padding:24px;border:1px solid var(--v4-line);border-radius:24px;box-shadow:0 20px 80px var(--v4-shadow)}.v4-dialog::backdrop{background:var(--v4-backdrop);backdrop-filter:blur(4px)}.v4-dialog .v4-section-head h2{font-size:19px}.v4-close{border:0;background:transparent;font:28px system-ui;color:var(--v4-muted);cursor:pointer}.v4-form{display:flex;flex-direction:column;gap:16px}.v4-form label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--v4-muted)}.v4-form input:not([type=checkbox]),.v4-form textarea{width:100%;min-width:0;max-width:100%;border:1px solid var(--v4-line);border-radius:10px;background:var(--v4-input);padding:12px;color:var(--v4-text);font:14px system-ui}.v4-form textarea{min-height:100px;resize:vertical}.v4-form .v4-checkbox{display:flex;flex-direction:row;align-items:center}.v4-form p{margin:0}.v4-error{font-size:12px;color:var(--v4-danger)}.v4-large{font-size:28px;color:var(--v4-link)}.v4-active button:focus-visible,.v4-active input:focus-visible,.v4-active textarea:focus-visible,.v4-active select:focus-visible{outline:2px solid var(--v4-warm-ink);outline-offset:3px}
@media(min-width:900px){.v4-active #chat{max-width:960px;margin:auto;border-inline:1px solid var(--border)}.v4-tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:360px){.v4-hero-art{width:150px;height:150px;right:-16px;bottom:-26px}}@media(max-width:400px){.v4-screen{padding:24px 18px 32px}.v4-hero{padding:24px}.v4-tool-card{padding:18px 14px}}
/* 「我们」页下半部分：我的数据、两人共享设置、我的设置（docs/PAIR_PLAN.md 第十节） */
.v4-us-panel{margin-top:28px}.v4-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin-bottom:28px}.v4-stat{background:var(--v4-card);border:1px solid var(--v4-line);border-radius:16px;padding:14px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}.v4-stat b{font:600 22px/1.2 Georgia,serif;color:var(--v4-text);overflow-wrap:anywhere}.v4-stat small{font-size:11px;color:var(--v4-muted)}.v4-stat-wide{grid-column:1/-1;gap:8px}.v4-stat-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.v4-stat-nums>div{display:flex;flex-direction:column;gap:4px;min-width:0}.v4-stat-nums>div+div{border-left:1px solid var(--v4-divider);padding-left:10px}
/* 「我的数据」收在「我们」页最底部、默认收起（P-060 / T-044）；展开 / 收起时 v4.js 给 .v4-fold-body 做高度动画 */
.v4-fold{margin-bottom:28px}.v4-fold>summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:54px;padding:0 18px;border:1px solid var(--v4-line);background:var(--v4-card);border-radius:18px;color:var(--v4-text);cursor:pointer;-webkit-tap-highlight-color:transparent}.v4-fold>summary::-webkit-details-marker{display:none}.v4-fold>summary strong{font-size:15px;font-weight:600}.v4-fold>summary small{flex:1;text-align:right;font-size:11px;color:var(--v4-muted)}.v4-fold>summary::after{content:'›';font-size:20px;color:var(--v4-muted);transition:transform .2s}.v4-fold[open]:not(.is-closing)>summary::after{transform:rotate(90deg)}.v4-fold-body{overflow:hidden}.v4-fold .v4-stats{margin:10px 0 0;grid-template-columns:repeat(2,minmax(0,1fr))}
.v4-toggle-list{border:1px solid var(--v4-line);background:var(--v4-card);border-radius:18px;overflow:hidden;margin-bottom:16px}.v4-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--v4-divider);cursor:pointer}.v4-toggle:last-child{border-bottom:0}.v4-toggle>span{display:flex;flex-direction:column;gap:2px;min-width:0}.v4-toggle strong{font-size:14px;font-weight:600;color:var(--v4-text)}.v4-toggle small{font-size:11px;color:var(--v4-muted);line-height:1.5}.v4-toggle input{width:44px;height:26px;appearance:none;-webkit-appearance:none;border-radius:13px;background:var(--v4-switch);position:relative;flex-shrink:0;cursor:pointer;margin:0}.v4-toggle input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s}.v4-toggle input:checked{background:var(--v4-fill)}.v4-toggle input:checked::after{left:21px}.v4-toggle input:disabled{opacity:.5}
.v4-presets{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin:-6px 0 8px;font-size:12px;color:var(--v4-muted)}
.v4-pins{margin:0 0 16px}.v4-pins .pins-empty{margin:12px 0 0;text-align:left;color:var(--v4-muted)}
/* 「我的」页名片两人这一行（2026-10-21）：「名字 头像 头像 名字」，两个头像之间在正中（2026-10-23 去掉中间的图标，但保留它原来的空位：两头像相距 34px），两侧名字各占一半、贴着头像；自己在左；Ta 在线时右下角呼吸光晕圆点。颜色走主题变量，深色随主题切换 */
.v4-duo{position:relative;z-index:1;flex:1;min-width:0;max-width:100%}
.v4-duo-art{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr);align-items:center;gap:8px;font-size:22px;font-weight:650;letter-spacing:-.3px;line-height:1.25;white-space:nowrap;color:var(--v4-text)}
.v4-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.v4-duo-av{flex:none;width:42px;height:42px;font-size:17px;border-radius:50%;box-shadow:0 0 0 2px var(--v4-tint),0 2px 8px rgba(0,0,0,.14);position:relative;overflow:visible}
.v4-duo-av img{border-radius:50%}
/* 两个头像中间的品牌双星（2026-10-25）：占原爱心那一格，8px 间距 + 18px 图标 + 8px 间距，两个头像仍相距 34px、双星在名片正中。
   大星用主题主色，小星用品牌暖金（浅底上加深一点才看得清） */
.v4-duo-mark{flex:none;display:block;width:18px;height:auto;stroke-width:1.1;stroke-linejoin:round}
.v4-duo-mark .big{fill:var(--v4-fill);stroke:var(--v4-fill)}
.v4-duo-mark .small{fill:#d4a24c;stroke:#d4a24c}
@media (prefers-color-scheme:dark){.v4-duo-mark .small{fill:#e8c27a;stroke:#e8c27a}}
/* 无头像时的底色：主题 A / B 的 .avatar 底色选择器更具体（白字只有约 2:1），这里提高优先级；我用填充色，Ta 用暖色 */
body.v4-active .v4-duo-av.is-me:not(.has-img){background:var(--v4-fill);color:var(--v4-on-fill)}
body.v4-active .v4-duo-av:not(.is-me):not(.has-img){background:var(--v4-warm);color:var(--v4-warm-ink)}
.v4-duo-name{min-width:0;overflow:hidden;text-overflow:clip}
.v4-duo-name.is-me{text-align:right}
.v4-duo-art.squeezed .v4-duo-name{text-overflow:ellipsis}
.v4-online{display:none;position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#34c759;box-shadow:0 0 0 2px var(--v4-tint)}
.v4-duo-av.online .v4-online{display:block}
.v4-online::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:rgba(52,199,89,.35);animation:v4-online 2.2s ease-out infinite}
@keyframes v4-online{0%{transform:scale(.6);opacity:.9}70%,100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.v4-online::after{animation:none;opacity:.5}}
html.still .v4-online::after{animation:none;opacity:.5}
/* 收藏：「我们」页紧凑卡片 + 全屏收藏页（2026-10-21 用户审定） */
.v4-pin-card{display:block;width:100%;box-sizing:border-box;padding:14px 16px 12px;text-align:left;font:inherit;color:var(--v4-text);background:var(--v4-card);border:1px solid var(--v4-line);border-radius:18px;cursor:pointer}
.v4-pin-top{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.v4-pin-top strong{font-size:15px}
.v4-pin-stat{flex:1;min-width:0;font-size:12px;color:var(--v4-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4-pin-go{flex:none;font-size:12px;color:var(--v4-link)}
.v4-pin-recent{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.v4-pin-row{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px}
.v4-pin-who{flex:none;max-width:6.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--v4-muted)}
.v4-pin-who::after{content:"："}
.v4-pin-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v4-pin-text.dim{color:var(--v4-muted)}
.v4-pin-thumb{flex:none;width:32px;height:32px;object-fit:cover;border-radius:6px;background:var(--v4-soft)}
.v4-pin-thumb.sticker{object-fit:contain;background:none}
body.v4-pp-open .v4-nav{visibility:hidden}
.v4-pins-page{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;background:var(--v4-bg);color:var(--v4-text);padding-top:env(safe-area-inset-top);animation:v4-pp-in .22s ease-out}
@keyframes v4-pp-in{from{transform:translateX(24px);opacity:0}}
@media (prefers-reduced-motion:reduce){.v4-pins-page{animation:none}}
html.still .v4-pins-page{animation:none}
.v4-pp-bar{flex:none;display:flex;align-items:center;gap:6px;height:52px;padding:0 14px 0 4px;border-bottom:1px solid var(--v4-line);background:var(--v4-card)}
.v4-pp-bar h2{flex:1;margin:0;font-size:17px}
.v4-pp-back{width:44px;height:44px;font-size:28px;line-height:1;color:var(--v4-text);background:none;border:0;cursor:pointer}
.v4-pp-count{font-size:12px;color:var(--v4-muted)}
.v4-pp-tabs{flex:none;display:flex;gap:6px;padding:10px 14px;overflow-x:auto;background:var(--v4-card);border-bottom:1px solid var(--v4-line)}
.v4-pp-tab{flex:none;padding:6px 12px;font:inherit;font-size:13px;color:var(--v4-muted);background:none;border:1px solid var(--v4-line);border-radius:999px;cursor:pointer;white-space:nowrap}
.v4-pp-tab[aria-selected="true"]{color:var(--v4-on-fill);background:var(--v4-fill);border-color:var(--v4-fill)}
.v4-pp-list{flex:1;min-height:0;overflow-y:auto;padding:4px max(14px,calc((100vw - 760px)/2)) calc(24px + env(safe-area-inset-bottom))}
.v4-pp-list .pins-empty{margin:40px 0;text-align:center;color:var(--v4-muted)}
.v4-pp-row{margin:16px 0}
.v4-pp-row .bubble-wrap{align-items:flex-start}
.v4-pp-row.mine .bubble-wrap{align-items:flex-end}
.v4-pp-date{margin:0 4px 4px;font-size:11px;line-height:1.3;color:var(--v4-muted)}
.v4-pp-row .bubble{cursor:pointer;-webkit-tap-highlight-color:transparent}
.v4-pp-row .bubble:focus-visible{outline:2px solid var(--v4-link);outline-offset:3px}
.v4-pp-other{color:var(--text-dim)}
.v4-pp-more{padding:16px 0;text-align:center;font-size:12px;color:var(--v4-muted)}
/* 浅色卡片（大卡片、发现页名片、我的页名片、摘要条）里的眉标用卡片文字色（faint 在 tint 上不到 4.5:1） */
.v4-hero .v4-eyebrow,.v4-discovery-profile .v4-eyebrow,.v4-profile .v4-eyebrow{color:var(--v4-tint-ink)}
/* 单身时的组队页（#single）沿用 style.css 的登录卡片样式：在 4.0 里把它用到的主题变量映射成 --v4-*，和其他 4.0 页面同一套深浅色 */
.v4-active #single{--bg:var(--v4-bg);--panel:var(--v4-input);--surface:var(--v4-card);--text:var(--v4-text);--text-dim:var(--v4-muted);--border:var(--v4-line);--accent:var(--v4-fill);--accent-text:var(--v4-on-fill);color:var(--v4-text)}
.v4-active #single .btn-lite,.v4-active #single .link-btn{color:var(--v4-link)}
/* 「我的」页设置区（原「设置」弹层拆进来，2026-10-21）：沿用 app.js 的 .profile-row 结构，换成 4.0 卡片样式；聊天背景行在「我们」页同样式 */
.v4-active .mine-list{border:1px solid var(--v4-line);background:var(--v4-card);border-radius:18px;overflow:hidden;margin-bottom:28px}
.v4-active .mine-list .profile-row{min-height:54px;padding:0 18px;font:14px system-ui;color:var(--v4-text);border-bottom:1px solid var(--v4-divider)}
.v4-active .mine-list .profile-row:last-child{border-bottom:0}
.v4-active .mine-list .profile-row::after{color:var(--v4-muted)}
.v4-active .mine-list .profile-row:active{background:var(--v4-soft)}
.v4-active .mine-list .profile-row .row-value{color:var(--v4-muted);font-size:13px}
.v4-active .mine-list .profile-row.static{cursor:default}.v4-active .mine-list .profile-row.static::after{content:none}
.v4-active .mine-list .profile-row.danger>span:first-child{color:var(--v4-danger)}
.v4-active .mine-list .row-avatar{width:34px;height:34px;font-size:14px;border-radius:50%;flex:none}
.v4-active .mine-list .profile-setting{min-height:54px;padding:0 18px;font:14px system-ui;color:var(--v4-text)}
.v4-active .mine-list .profile-setting button{font-size:13px;color:var(--v4-text);background:var(--v4-soft);border-color:var(--v4-line);border-radius:10px}
.v4-active .mine-list #push-note{color:var(--v4-muted)}
.v4-active .mine-list .passkey-device{padding:10px 18px 10px 30px;color:var(--v4-muted);border-bottom:1px solid var(--v4-divider)}
.v4-active .mine-panel .profile-logout{margin:0 0 6px;padding:16px;border:1px solid var(--v4-line);border-radius:18px;background:var(--v4-card);color:var(--v4-danger);font:14px system-ui}
.v4-active .mine-panel .profile-version{color:var(--v4-faint);margin:12px 0 28px}
.mine-back{border:0;background:none;padding:4px 0;margin:0 0 6px;font:14px system-ui;color:var(--v4-link);cursor:pointer}
@media(hover:hover){.v4-active .mine-list .profile-row:not(.static):hover,.v4-active .mine-panel .profile-logout:hover{background:var(--v4-soft)}}
/* ---------- 外观（P-044，2026-10-22 用户审核通过）：「我们」页两人共享设置里的外观卡片 + 先试再定的底部面板 ----------
   颜色都走主题变量（--v4-* 管 4.0 页面，--bg / --bubble-* / --accent 管聊天），试穿只改 html[data-theme]，卡片、面板、缩略聊天跟着整套换。 */
.v4-active .v4-look{margin-bottom:16px}
.v4-look-preview{display:block;border-bottom:1px solid var(--v4-divider)}
/* 缩略聊天：真实的 .row / .bubble，缩小字号和间距；主题自带背景靠 style.css / themes.css 的 .chat-mini-bg */
.chat-mini{display:flex;flex-direction:column;height:178px;overflow:hidden;border:1px solid var(--v4-line);border-radius:16px;background:var(--bg);color:var(--text);pointer-events:none}
.chat-mini.small{height:142px;border:0;border-radius:0}
.cm-head{flex:none;display:flex;align-items:center;justify-content:center;height:28px;font-size:12px;font-weight:600;color:var(--text);background:var(--panel);border-bottom:1px solid var(--border)}
.cm-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 10px 4px}
.chat-mini .row{gap:6px;margin-bottom:6px}.chat-mini .row.grouped{margin-top:-2px}
.chat-mini .avatar{width:22px;height:22px;font-size:10px}
.chat-mini .bubble{padding:4px 9px;font-size:12px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-mini .message-body{white-space:nowrap}   /* 每句只占一行，长的省略 */
.chat-mini .bubble-wrap{max-width:72%}
.cm-composer{flex:none;display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--surface);border-top:1px solid var(--border)}
.cm-composer span{flex:1;padding:3px 9px;font-size:11px;color:var(--text-dim);border:1px solid var(--border);border-radius:12px}
.cm-composer i{font-style:normal;font-size:11px;padding:3px 9px;border-radius:10px;background:var(--accent);color:var(--accent-text)}
.chat-mini.small .cm-composer{display:none}
/* 底部面板：背后不遮暗、不模糊，试穿时看得到整个 App 换上的样子 */
body.tt-open .v4-screen{overflow:hidden}
.tt-backdrop{position:fixed;inset:0;z-index:40;background:transparent;transition:background-color .2s ease;touch-action:none}
.tt-backdrop.in{background:rgba(0,0,0,.12)}
.tt-sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;box-sizing:border-box;max-width:760px;margin:0 auto;max-height:82dvh;overflow-y:auto;overscroll-behavior:contain;padding:6px 16px calc(14px + env(safe-area-inset-bottom));background:var(--v4-card);color:var(--v4-text);border:1px solid var(--v4-line);border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 -10px 40px var(--v4-shadow);transform:translateY(100%);transition:transform .22s ease-out;font-family:system-ui,-apple-system,"PingFang SC",sans-serif}
.tt-sheet.in{transform:none}.tt-sheet:focus{outline:none}
@media (prefers-reduced-motion:reduce){.tt-sheet,.tt-backdrop{transition:none}}
html.still .tt-sheet,html.still .tt-backdrop{transition:none}
.tt-grab{width:36px;height:4px;margin:2px auto 8px;border-radius:2px;background:var(--v4-line)}
.tt-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.tt-top h2{margin:0;font-size:18px}.tt-top span{font-size:12px;color:var(--v4-muted)}
.tt-pane{margin-top:12px}
/* 主题：三张卡片，色块画这套主题的底色和两种气泡（主题固定三套，色值取自 themes.css） */
.tt-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tt-theme{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:8px 8px 9px;text-align:left;font:inherit;color:var(--v4-text);background:var(--v4-card);border:1.5px solid var(--v4-line);border-radius:14px;cursor:pointer}
.tt-theme[aria-pressed=true]{border-color:var(--v4-fill);box-shadow:0 0 0 1.5px var(--v4-fill)}
.tt-theme strong{font-size:13px;margin-top:4px}.tt-theme small{font-size:10px;line-height:1.4;color:var(--v4-muted)}
.tt-theme em,.tt-bg em{position:absolute;top:4px;right:4px;padding:1px 6px;font:600 10px/1.5 system-ui;font-style:normal;color:var(--v4-tint-ink);background:var(--v4-tint);border-radius:8px}
.tt-swatch{position:relative;display:block;width:100%;height:48px;border-radius:9px;overflow:hidden;border:1px solid rgba(0,0,0,.06)}
.tt-swatch i{position:absolute;height:10px;border-radius:6px}.tt-swatch i:first-child{left:7px;top:10px;width:46%}.tt-swatch i:last-child{right:7px;bottom:10px;width:40%}
.tt-swatch[data-swatch=a]{background:linear-gradient(160deg,#e7f0ff,#f6e8ff 50%,#ffeef2)}.tt-swatch[data-swatch=a] i:first-child{background:rgba(255,255,255,.9);box-shadow:0 2px 6px rgba(80,90,140,.15)}.tt-swatch[data-swatch=a] i:last-child{background:linear-gradient(135deg,#5b9bff,#7a6bff)}
.tt-swatch[data-swatch=b]{background:#fff8f3}.tt-swatch[data-swatch=b] i:first-child{background:#fff;border:1.5px solid #f3dde3}.tt-swatch[data-swatch=b] i:last-child{background:#ffb5c8;border:1.5px solid #f59ab4}
.tt-swatch[data-swatch=c]{background:#f4f1ea}.tt-swatch[data-swatch=c] i:first-child{background:#fffdf8;border:1px solid #e4ddcf}.tt-swatch[data-swatch=c] i:last-child{background:#2f3b33}
@media (prefers-color-scheme:dark){.tt-swatch[data-swatch=a]{background:linear-gradient(160deg,#1a2238,#241c3a 50%,#2a1c28)}.tt-swatch[data-swatch=a] i:first-child{background:rgba(44,50,78,.95)}.tt-swatch[data-swatch=b]{background:#2a1f24}.tt-swatch[data-swatch=b] i:first-child{background:#3a2c33;border-color:#4a373f}.tt-swatch[data-swatch=b] i:last-child{background:#c9607f;border-color:#d97a98}.tt-swatch[data-swatch=c]{background:#1b1a17}.tt-swatch[data-swatch=c] i:first-child{background:#2a2925;border-color:#3a372f}.tt-swatch[data-swatch=c] i:last-child{background:#4a6253}}
/* 聊天背景：只列当前主题那一组，色块用 bubbles.css 的 .cbg-*；「默认」用 .chat-mini-bg 显示正在试的主题自带的背景 */
.tt-bgs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px 6px}
.tt-bg{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:0;font:inherit;color:var(--v4-text);background:none;border:0;cursor:pointer}
.tt-bg-swatch{display:block;width:100%;height:40px;border-radius:10px;border:1px solid var(--v4-line)}
.tt-bg[aria-pressed=true] .tt-bg-swatch{border-color:var(--v4-fill);box-shadow:0 0 0 2px var(--v4-fill)}
.tt-bg small{font-size:11px;white-space:nowrap}.tt-bg[aria-pressed=true] small{color:var(--v4-link);font-weight:600}
.tt-bg em{top:-6px;right:-2px}
.tt-error:empty{display:none}.tt-error{margin:10px 0 0}
.tt-actions{display:flex;gap:10px;margin-top:14px}
.tt-cancel{flex:0 0 34%;padding:12px 0;font:600 13px system-ui;color:var(--v4-text);background:var(--v4-soft);border:1px solid var(--v4-line);border-radius:12px;cursor:pointer}
.tt-ok{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-actions button:disabled{opacity:.45;cursor:default}
/* 待办清单（P-059 / TD-04，2026-10-28 主人通过，2026-10-30 接入，web/client/todo.js）：审核稿 todo.css 整份并进来。页面骨架用现成的 .v4-pins-page / .v4-pp-bar / .v4-dialog / .v4-empty / .v4-button，
   这里只补清单本身；颜色只用 --v4-* 变量，主题 A / B / C 和深浅色都跟着走。 */
.td-add { flex: none; display: flex; gap: 8px; padding: 12px 14px; background: var(--v4-card); border-bottom: 1px solid var(--v4-line); }
.td-add input { flex: 1; min-width: 0; border: 1px solid var(--v4-line); border-radius: 12px; background: var(--v4-input); padding: 11px 12px; color: var(--v4-text); font: 14px system-ui; }
.td-add .v4-button { flex: none; padding: 0 16px; }
.td-add .v4-button:disabled { opacity: .45; cursor: default; }
.td-list { list-style: none; margin: 0; padding: 0; }
.td-item { display: flex; align-items: flex-start; gap: 4px; border-bottom: 1px solid var(--v4-divider); border-radius: 12px; transition: background-color .3s; }
.td-check { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.td-check svg { width: 22px; height: 22px; overflow: visible; }
.td-check circle { fill: transparent; stroke: var(--v4-muted); stroke-width: 1.6; transition: fill .2s, stroke .2s; }
.td-check path { fill: none; stroke: var(--v4-on-fill); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .22s ease-out .08s; }
.td-check[aria-checked="true"] circle { fill: var(--v4-fill); stroke: var(--v4-fill); }
.td-check[aria-checked="true"] path { stroke-dashoffset: 0; }
/* 勾掉的动效（2026-10-28 主人要求）：① 放大、闪两下、外面扩散一圈 → ② 填色画对钩（上面的过渡）→ ③ 整条滑到已完成（phone.html 的 flip）→ ④ 删除线划过（.strike-in） */
.td-check::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--v4-fill); opacity: 0; pointer-events: none; }
.td-check.pop svg { animation: td-pop .42s cubic-bezier(.3, .7, .3, 1.3); }
.td-check.pop circle { animation: td-flash .3s steps(1); }
.td-check.pop::after { animation: td-ripple .5s ease-out .08s; }
@keyframes td-pop { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes td-flash { 0% { stroke: var(--v4-fill); fill: var(--v4-tint); } 33% { stroke: var(--v4-muted); fill: transparent; } 66% { stroke: var(--v4-fill); fill: var(--v4-tint); } }
@keyframes td-ripple { from { transform: scale(1); opacity: .6; } to { transform: scale(2.2); opacity: 0; } }
.td-item.moving { position: relative; z-index: 1; background: var(--v4-card); box-shadow: 0 6px 20px var(--v4-shadow); }
.td-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 11px 6px 11px 0; border: 0; background: none; color: var(--v4-text); text-align: left; font: inherit; cursor: pointer; }
.td-text { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.td-body small { font-size: 11.5px; color: var(--v4-muted); }
/* 删除线用背景画的一条线（不是 text-decoration），才能从左往右划过去；折行时按行接着划 */
.td-item.done .td-line { color: var(--v4-muted); background: linear-gradient(var(--v4-faint), var(--v4-faint)) no-repeat 0 55% / 100% 1.5px; }
.td-item.done .td-line.strike-in { animation: td-strike .35s ease-out .48s both; }
@keyframes td-strike { from { background-size: 0 1.5px; color: var(--v4-text); } to { background-size: 100% 1.5px; color: var(--v4-muted); } }
@media (prefers-reduced-motion: reduce) { .td-check.pop svg, .td-check.pop circle, .td-check.pop::after, .td-item.done .td-line.strike-in { animation: none; } .td-check circle, .td-check path { transition: none; } }
/* Ta 刚加的 / 刚勾掉的：淡底色 + 「刚刚」，看过就消失（审核稿里 2 分钟内都算） */
.td-item.fresh { background: var(--v4-tint); border-bottom-color: transparent; }
.td-item.fresh small { color: var(--v4-tint-ink); font-weight: 600; }
.td-fold { width: 100%; display: flex; align-items: center; gap: 6px; margin: 18px 0 4px; padding: 8px 4px; border: 0; background: none; color: var(--v4-muted); font: 600 13px system-ui; cursor: pointer; }
.td-fold i { font-style: normal; transition: transform .2s; }
.td-fold[aria-expanded="true"] i { transform: rotate(90deg); }
.td-alldone { margin: 18px 4px 0; font-size: 13px; color: var(--v4-muted); }
.td-page .v4-empty { margin-top: 28px; }
/* 「在一起」页：Ta 动过清单后卡片角上的红点（2026-10-28 主人定：Ta 动了清单只做红点，不推送、聊天里不提示） */
.v4-tool-card { position: relative; }
.td-dot { position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--v4-danger); }
.td-dialog-text { margin: 0 0 12px; font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
.td-dialog-meta { margin: 0; font-size: 12.5px; line-height: 1.9; color: var(--v4-muted); }
.td-dialog-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.td-del { border: 1px solid var(--v4-line); border-radius: 12px; padding: 12px 18px; background: none; color: var(--v4-danger); font: 600 13px system-ui; cursor: pointer; }
.td-del.confirm { background: var(--v4-danger); border-color: var(--v4-danger); color: var(--v4-card); }
.td-undo { border: 1px solid var(--v4-line); border-radius: 12px; padding: 12px 18px; background: none; color: var(--v4-text); font: 600 13px system-ui; cursor: pointer; }