@charset "UTF-8";
/* =====================================================================
   PJSKFriends · 核心样式（v2.0 重构 · 品牌对齐版）
   设计令牌与 PSJKPersona（「世界」人格测试）严格同源，保证碴儿.NET 品牌
   家族视觉一致：teal 主色 #2ab1a8 / 主 CTA 渐变 #259C95→#1a8c86 /
   玻璃 blur(20px) saturate(190%) / 卡圆角 28px / 胶囊 999px / --ios-ease。
   性能：动画仅驱动 transform 与 opacity，并按设备性能分三档降级。
   ===================================================================== */

/* ============================ BRAND TOKENS ============================
   与 PSJKPersona/style.css :root 一一对应（--accent-text 在人格站为角色
   主题色，本站无角色主题，统一映射到品牌 teal var(--accent)）。
   ===================================================================== */
:root {
    /* 背景 */
    --bg-fallback: #eaeaf0;

    /* 品牌主色 */
    --accent: #2ab1a8;
    --accent-deep: #259C95;                    /* 主 CTA 渐变起点 / 弹窗确认 */
    --accent-deeper: #1a8c86;                  /* 主 CTA 渐变终点 */
    --accent-contrast: #FFFFFF;
    --accent-light: rgba(42, 177, 168, 0.12);
    --accent-tint: rgba(42, 177, 168, 0.16);   /* 强调区块渐变起点 */
    --accent-glow: rgba(37, 156, 149, 0.25);

    /* 中性/灰阶填充（取消按钮、勾选行） */
    --neutral-fill: rgba(120, 120, 136, 0.12);
    --neutral-fill-soft: rgba(120, 120, 136, 0.07);
    --neutral-border: rgba(120, 120, 136, 0.12);

    /* 文本 */
    --text-main: #1d1d1f;
    --text-sub: #515154;
    --text-muted: #8E8E93;
    --secondary: #2E3440;

    /* 语义色 */
    --success: #5EBB7A;
    --error: #e65c5c;
    --error-light: rgba(230, 92, 92, 0.10);

    /* 描边 */
    --border-light: rgba(255, 255, 255, 0.6);
    --border-soft: rgba(255, 255, 255, 0.5);
    --border-subtle: rgba(0, 0, 0, 0.06);

    /* 玻璃层级（与人格站 --card 0.65 / 列表 0.4 / 输入 0.6 / 弹窗 0.82 同源）
       --glass-page：大面积页面容器专用。本站容器在窄视口几乎铺满全屏，
       若与卡片同用 0.65 会让背景透出极少（整页发白），故大面积层更透，
       观感对齐 Persona（其小卡片四周大量透出背景）。 */
    --glass-page: rgba(255, 255, 255, 0.52);
    --card: rgba(255, 255, 255, 0.65);
    --glass-list: rgba(255, 255, 255, 0.40);
    --glass-field: rgba(255, 255, 255, 0.60);
    --glass-raised: rgba(255, 255, 255, 0.55);
    --glass-strong: rgba(255, 255, 255, 0.82);
    --glass-xl: rgba(255, 255, 255, 0.90);
    --blur-enabled: 1;

    /* 圆角 */
    --radius-card: 28px;
    --radius-panel: 18px;
    --radius-item: 14px;
    --radius-field: 16px;
    --radius-tag: 10px;
    --radius-pill: 999px;

    /* 阴影 */
    --shadow-card: 0 16px 48px rgba(0,0,0,0.12), inset 0 1px 1px rgba(255,255,255,0.8);
    --shadow-elevated: 0 24px 64px rgba(0,0,0,0.15), inset 0 1px 1px rgba(255,255,255,0.8);
    --shadow-cta: 0 4px 16px rgba(37, 156, 149, 0.25), inset 0 1px 0 rgba(255,255,255,0.18);
    --shadow-inset-soft: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.6);

    /* 动效 */
    --ios-ease: cubic-bezier(0.25, 1, 0.22, 1);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --dur-fast: 0.2s;
    --dur-base: 0.28s;
    --dur-slow: 0.45s;

    /* 字体 */
    --font-stack: -apple-system, "SF Pro Display", "SF Pro Text", "PingFang SC", "Noto Sans SC", sans-serif;

    --container-w: 840px;
}

/* 标准档：降低模糊半径，保留玻璃质感 */
html[data-perf="medium"] { --blur-enabled: 1; }

/* 流畅档：关闭毛玻璃与常驻动画，用更实的填充补偿对比度 */
html[data-perf="low"] {
    --blur-enabled: 0;
    --glass-page: rgba(255, 255, 255, 0.84);
    --card: rgba(255, 255, 255, 0.86);
    --glass-list: rgba(255, 255, 255, 0.74);
    --glass-field: rgba(255, 255, 255, 0.84);
    --glass-raised: rgba(255, 255, 255, 0.82);
    --glass-strong: rgba(255, 255, 255, 0.94);
    --glass-xl: rgba(255, 255, 255, 0.96);
    --dur-fast: 0.1s;
    --dur-base: 0.14s;
    --dur-slow: 0.18s;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.06), inset 0 1px 1px rgba(255,255,255,0.8);
    --shadow-elevated: 0 2px 8px rgba(0,0,0,0.08), inset 0 1px 1px rgba(255,255,255,0.8);
}

/* ============================ RESET / BASE ============================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* ============================ 全屏背景 ============================
   背景图放在 body 首子元素 .wpf-page-bg（position:fixed 全视口图层）上：
   cover 只相对视口解析，文档高度变化（展开扩表/更多菜单）不会引起背景缩放。
   历史坑（勿回退）：
   1) 曾经同时给 html 和 body 设背景色 → body 背景占据画布，
      盖住 body::before（z-index:-2）的背景图，整页呈现"白色色块"。
   2) 改为 body::before + z-index:-2 后仍不稳定：负 z-index 子元素
      在部分引擎下会被 body 的后代/背景绘制顺序影响，容器外区域同样不透。
   3) 改为背景图设在 html 上（传播到 canvas）虽然渲染最稳，但根元素背景
      的 cover 以整个文档画布为基准 → 展开「填写扩列表」「更多来自碴儿.NET」
      等长内容时文档变高，背景图跟着放大，出现"背景缩放"效果。2026-09-02
      改为 .wpf-page-bg 固定视口图层 + html 仅保留 background-color 兜底。
   结论：背景图交给 .wpf-page-bg（z-index:0），主内容明确置于 z-index:1；
        html 同图仅作版本错配回退，body 必须 transparent。
   图源：服务器本地 assets/（原外域图床对该 URL 返回 302 重定向，
        content-type 为 text/html，CSS 背景图重定向后无法作为图像渲染）。
   ================================================================= */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background-color: var(--bg-fallback);
    /* 部署期间若 HTML/CSS 短暂版本不一致，仍保留可见背景作为回退。 */
    background-image: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)),
                      url('../assets/background_Miku_Sekai.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.wpf-page-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)),
                      url('../assets/background_Miku_Sekai.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    pointer-events: none;
    /* 不用 background-attachment: fixed：移动端（尤其 iOS Safari / 安卓 WebView）
       对 fixed 背景有已知渲染 bug；元素本身 fixed 即可，cover 基准恒为视口 */
}

body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    font-family: var(--font-stack);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-main);
    /* body 必须透明：否则其背景会传播到画布，盖住 html 的背景图 */
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 60px;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    touch-action: manipulation;
    overflow-x: hidden;
}

.wpf-container { position: relative; z-index: 1; width: 100%; max-width: var(--container-w); margin: 0 auto; }

/* 与主容器同为 body 直属内容，必须稳定绘制在固定背景层之上。 */
.more-menu-card { position: relative; z-index: 1; }

/* ============================ PAGE TITLE ============================ */
.wpf-page-title {
    text-align: center;
    margin-bottom: 20px;
    padding: 24px 28px 22px;
    background: var(--glass-page);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html:not([data-perf="low"]) .wpf-page-title {
        -webkit-backdrop-filter: blur(20px) saturate(190%);
        backdrop-filter: blur(20px) saturate(190%);
    }
}

.wpf-page-title h1 {
    font-size: clamp(24px, 3.4vw, 32px);
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 1.4;
}

/* 彩虹高亮：与人格站 #homeTitleAnimated 同源（background-position 动画） */
@keyframes titleRainbow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.wpf-page-title h1 .highlight {
    background: linear-gradient(to right, #884499, #4455DD, #88DD44, #EE1166, #FF9900, #884499);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: titleRainbow 12s linear infinite;
}
html[data-perf="low"] .wpf-page-title h1 .highlight { animation: none; background-position: 30% 50%; }

.wpf-page-title .tagline {
    font-size: 13.5px;
    color: var(--text-sub);
    font-weight: 600;
    margin-top: 6px;
    letter-spacing: 0.2px;
}
.wpf-page-title .tagline strong { color: var(--accent); font-weight: 700; }

/* ============================ TOGGLE BUTTON ============================ */
.wpf-toggle-area { text-align: center; margin-bottom: 24px; }

.wpf-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 40px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, var(--accent-deep), var(--accent-deeper));
    color: var(--accent-contrast);
    box-shadow: var(--shadow-cta);
    position: relative;
    overflow: hidden;
    user-select: none;
    letter-spacing: 0.3px;
    transition: transform var(--dur-fast) var(--ios-ease), box-shadow var(--dur-fast) ease;
}
.wpf-toggle-btn:hover { box-shadow: 0 6px 20px rgba(37, 156, 149, 0.35), inset 0 1px 0 rgba(255,255,255,0.18); transform: translateY(-1px); }
.wpf-toggle-btn:active { transform: scale(0.98); }
.wpf-toggle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-perf="low"] .wpf-toggle-btn:hover { transform: none; }

.wpf-toggle-btn .btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; font-size: 15px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    transition: transform var(--dur-slow) var(--ios-ease), background var(--dur-fast) ease;
}
.wpf-toggle-btn:hover .btn-icon { background: rgba(255, 255, 255, 0.3); }
.wpf-toggle-btn.active .btn-icon { transform: rotate(45deg); background: rgba(255, 255, 255, 0.15); }

/* 高光扫过：transform 位移，不触发布局 */
.wpf-toggle-btn .btn-pulse {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
    transform: translateX(-100%);
    pointer-events: none;
}
@keyframes wpfBtnShine { 0%, 100% { transform: translateX(-100%); } 55% { transform: translateX(100%); } }
html:not([data-perf="low"]) .wpf-toggle-btn .btn-pulse { animation: wpfBtnShine 3.6s ease-in-out infinite; }
html[data-perf="low"] .wpf-toggle-btn .btn-pulse { display: none; }

/* ============================ FORM WRAPPER ============================ */
.wpf-form-wrap {
    height: 0;
    max-height: 0;
    margin-bottom: 0;
    overflow: hidden;
    opacity: 0;
    background: var(--glass-page);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    contain: layout paint style;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html:not([data-perf="low"]) .wpf-form-wrap {
        -webkit-backdrop-filter: blur(20px) saturate(190%);
        backdrop-filter: blur(20px) saturate(190%);
    }
}
.wpf-form-wrap.open {
    height: auto;
    opacity: 1;
    max-height: none;
    margin-bottom: 24px;
    transition: margin-bottom var(--dur-slow) var(--ease-out);
}

.wpf-form-content { padding-bottom: 2px; }
.wpf-card { width: 100%; background: transparent; border-radius: var(--radius-card); padding: 28px 24px; position: relative; }

.wpf-header { text-align: center; margin-bottom: 24px; }
.wpf-header h1 { font-size: 22px; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 6px; }
.wpf-header h1 .highlight { color: var(--accent); }
.wpf-header p { font-size: 13px; color: var(--text-sub); font-weight: 500; }

/* ============================ SECTION / FIELDS ============================ */
.wpf-section {
    margin-bottom: 16px;
    padding: 16px 14px;
    background: var(--glass-raised);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-inset-soft);
}
.wpf-section:last-of-type { margin-bottom: 16px; }
.wpf-section.char-section-active { position: relative; z-index: 30; }

.wpf-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; font-weight: 800; color: var(--text-sub);
    letter-spacing: 0.6px; margin-bottom: 12px;
}
.wpf-section-title .badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 6px;
    background: var(--accent); color: #fff;
    font-size: 10.5px; font-weight: 800; flex-shrink: 0;
}

.wpf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wpf-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wpf-field.full { grid-column: 1 / -1; }

.wpf-label { font-size: 12.5px; font-weight: 700; color: var(--text-sub); letter-spacing: 0.2px; }
.wpf-label .required { color: var(--accent); margin-left: 2px; }
.wpf-label .optional { font-weight: 600; color: var(--text-muted); font-size: 11px; margin-left: 4px; }
.wpf-label .required-mark { font-weight: 800; color: var(--error); font-size: 10.5px; background: var(--error-light); padding: 1px 7px; border-radius: 6px; margin-left: 4px; }

.wpf-input, .wpf-textarea {
    width: 100%;
    padding: 13px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-main);
    background: var(--glass-field);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: var(--radius-field);
    outline: none;
    transition: border-color var(--dur-fast) var(--ios-ease), box-shadow var(--dur-fast) var(--ios-ease);
}
.wpf-input:focus, .wpf-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.wpf-input::placeholder, .wpf-textarea::placeholder { color: var(--text-muted); }
.wpf-input.error, .wpf-textarea.error { border-color: var(--error); box-shadow: 0 0 0 3px var(--error-light); }

.wpf-textarea { min-height: 96px; max-height: 320px; resize: none; line-height: 1.6; }

.wpf-error-msg { display: none; font-size: 12px; color: var(--error); font-weight: 600; }
.wpf-error-msg.visible { display: block; }

/* 更多联系方式（抖音/快手）：默认收起，点击展开。
   与 .wpf-form-wrap 同语言：高度瞬切，内容仅做 transform/opacity 过渡 */
.wpf-more-contact { margin-top: 12px; }
.wpf-more-contact-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 2px; margin: 0;
    font-family: inherit; font-size: 12.5px; font-weight: 700;
    color: var(--accent); background: none; border: none; cursor: pointer;
    letter-spacing: 0.2px;
    transition: color var(--dur-fast) ease;
    user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.wpf-more-contact-toggle:hover { color: var(--accent-deep); }
.wpf-more-contact-toggle:active { transform: scale(0.97); }
.wpf-more-contact-toggle:focus-visible { outline: none; border-radius: 8px; box-shadow: 0 0 0 3px var(--accent-light); }
.wpf-more-contact-arrow { transition: transform 0.35s var(--ios-ease); }
.wpf-more-contact-toggle[aria-expanded="true"] .wpf-more-contact-arrow { transform: rotate(180deg); }
.wpf-more-contact-panel { display: none; }
.wpf-more-contact-panel.open { display: block; }
.wpf-more-contact-inner { opacity: 0; transform: translateY(-6px); transition: opacity 0.35s var(--ios-ease), transform 0.35s var(--ios-ease); }
.wpf-more-contact-panel.open .wpf-more-contact-inner { opacity: 1; transform: none; }
.wpf-more-contact-inner .wpf-row { padding-top: 12px; }

/* 性别 / 兴趣 / 时间：胶囊选择 */
.wpf-gender-group, .wpf-interest-group, .wpf-time-group { display: flex; flex-wrap: wrap; gap: 8px; }
.wpf-gender-opt, .wpf-interest-opt { position: relative; }
.wpf-gender-opt input, .wpf-interest-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wpf-gender-label, .wpf-interest-label {
    display: inline-flex; align-items: center;
    min-height: 36px; padding: 8px 16px;
    font-size: 13.5px; font-weight: 700;
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.32));
    box-shadow: var(--shadow-inset-soft);
    border-radius: var(--radius-pill);
    cursor: pointer;
    user-select: none;
    transition: transform var(--dur-fast) var(--ios-ease), background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.wpf-gender-label:hover, .wpf-interest-label:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.5));
    color: var(--accent);
    border-color: rgba(42,177,168,0.35);
}
.wpf-gender-label:active, .wpf-interest-label:active { transform: scale(0.97); background: rgba(255,255,255,0.78); }
.wpf-gender-opt input:checked + .wpf-gender-label,
.wpf-interest-opt input:checked + .wpf-interest-label {
    color: #fff;
    background: linear-gradient(135deg, var(--accent-deep), var(--accent-deeper));
    border-color: transparent;
    box-shadow: var(--shadow-cta);
}
.wpf-gender-opt input:focus-visible + .wpf-gender-label,
.wpf-interest-opt input:focus-visible + .wpf-interest-label { box-shadow: 0 0 0 3px var(--accent-light); }

/* ============================ MULTISELECT ============================ */
.wpf-multiselect { position: relative; }
.wpf-multiselect-trigger {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    min-height: 46px;
    padding: 8px 38px 8px 14px;
    background: var(--glass-field);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: var(--radius-field);
    cursor: pointer;
    position: relative;
    transition: border-color var(--dur-fast) var(--ios-ease), box-shadow var(--dur-fast) var(--ios-ease);
}
.wpf-multiselect-trigger:hover { border-color: rgba(42,177,168,0.35); }
.wpf-multiselect-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.wpf-multiselect-trigger.error { border-color: var(--error); box-shadow: 0 0 0 3px var(--error-light); }
.wpf-multiselect-trigger .placeholder { color: var(--text-muted); font-size: 13.5px; }
.wpf-multiselect-trigger .tag-summary { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.wpf-multiselect-trigger .arrow {
    position: absolute; right: 15px; top: 50%; width: 7px; height: 7px;
    border-right: 2px solid var(--text-sub); border-bottom: 2px solid var(--text-sub);
    transform: translateY(-70%) rotate(45deg);
    transition: transform var(--dur-base) var(--ios-ease);
}
.wpf-multiselect.open .wpf-multiselect-trigger .arrow { transform: translateY(-30%) rotate(225deg); }

.mini-tag {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    font-size: 11.5px; font-weight: 800;
    background: var(--accent-light); color: var(--accent-deep);
    border-radius: var(--radius-tag);
    white-space: nowrap;
}
.mini-tag.more { background: var(--secondary); color: #fff; opacity: 0.75; }

.wpf-multiselect-dropdown {
    display: none;
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    max-height: 300px; overflow-y: auto;
    /* 极窄屏下禁止下拉横向滚动（选项文字换行处理，见 .ms-name） */
    overflow-x: hidden;
    padding: 8px;
    background: var(--glass-strong);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-item);
    box-shadow: var(--shadow-elevated);
    z-index: 40;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.wpf-multiselect-dropdown.open { display: block; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html:not([data-perf="low"]) .wpf-multiselect-dropdown {
        -webkit-backdrop-filter: blur(20px) saturate(190%);
        backdrop-filter: blur(20px) saturate(190%);
    }
}

.ms-group + .ms-group { margin-top: 6px; }
.ms-group-label {
    padding: 6px 10px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px;
    color: var(--text-muted);
    /* 长团名（如 Wonderlands×Showtime）在极窄屏下换行而非溢出 */
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ms-item {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    font-size: 13.5px; font-weight: 600;
    border-radius: var(--radius-item);
    cursor: pointer;
    /* 允许 flex 子项收缩：极窄屏下文字超宽时换行而非撑破容器 */
    min-width: 0;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.ms-item:hover, .ms-item:focus { background: var(--accent-light); outline: none; }
.ms-item .ms-name {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.5;
}
.ms-item.selected { background: linear-gradient(135deg, var(--accent-deep), var(--accent-deeper)); color: #fff; font-weight: 700; }
.ms-item .ms-check {
    width: 15px; height: 15px; flex-shrink: 0;
    border: 1.5px solid rgba(120,120,136,0.45); border-radius: 5px;
    background: rgba(255,255,255,0.72);
    position: relative;
}
.ms-item.selected .ms-check { border-color: #fff; background: rgba(255,255,255,0.2); }
.ms-item.selected .ms-check::after {
    content: ""; position: absolute; left: 4px; top: 1px;
    width: 4px; height: 8px;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

/* ============================ CP PAIRS ============================ */
.wpf-cp-add-btn {
    display: inline-flex; align-items: center;
    margin-top: 8px; padding: 9px 16px;
    font-size: 12.5px; font-weight: 700; font-family: inherit;
    color: var(--accent-deep);
    background: rgba(255,255,255,0.45);
    border: 1px dashed rgba(37,156,149,0.65);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--dur-fast) ease, transform var(--dur-fast) var(--ios-ease);
}
.wpf-cp-add-btn:hover { background: rgba(255,255,255,0.7); }
.wpf-cp-add-btn:active { transform: scale(0.98); }

.wpf-cp-pair {
    padding: 12px;
    margin-bottom: 10px;
    background: var(--glass-list);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--radius-item);
}
.wpf-cp-pair.dropdown-active { position: relative; z-index: 20; }
.wpf-cp-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.wpf-cp-col { min-width: 0; }
.wpf-cp-select { position: relative; }
.wpf-cp-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    min-height: 40px; padding: 8px 28px 8px 12px;
    font-size: 13.5px;
    background: var(--glass-field);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wpf-cp-trigger .arrow {
    position: absolute; right: 12px; top: 50%; width: 6px; height: 6px;
    border-right: 2px solid var(--text-sub); border-bottom: 2px solid var(--text-sub);
    transform: translateY(-70%) rotate(45deg);
}
.wpf-cp-symbol { color: var(--accent); font-weight: 800; }
.wpf-cp-pair-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.wpf-cp-type-group { display: flex; gap: 6px; }
.wpf-cp-type-opt { position: relative; }
.wpf-cp-type-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wpf-cp-type-label {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 32px; padding: 6px 12px; font-size: 12.5px; font-weight: 700;
    color: var(--text-main);
    background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.32));
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: var(--radius-pill); cursor: pointer;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.wpf-cp-type-opt input:checked + .wpf-cp-type-label {
    color: #fff;
    background: linear-gradient(135deg, var(--accent-deep), var(--accent-deeper));
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(37,156,149,0.25);
}
.wpf-cp-remove-btn {
    padding: 6px 14px; font-size: 12.5px; font-weight: 700; font-family: inherit;
    color: var(--error); background: var(--error-light);
    border: none; border-radius: var(--radius-pill); cursor: pointer;
    transition: opacity var(--dur-fast) ease;
}
.wpf-cp-remove-btn:hover { opacity: 0.75; }

/* ============================ SECURITY SECTION ============================ */
.wpf-security-auth, .wpf-security-bound {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px;
    background: linear-gradient(135deg, rgba(42,177,168,0.16), rgba(42,177,168,0.05)), rgba(255,255,255,0.55);
    border: 1px solid rgba(42,177,168,0.22);
    border-radius: var(--radius-panel);
    box-shadow: 0 4px 16px rgba(37,156,149,0.10), inset 0 1px 0 rgba(255,255,255,0.5);
}
.wpf-security-auth-icon, .wpf-security-bound-icon { color: var(--accent-deep); flex-shrink: 0; display: flex; }
.wpf-security-auth-text { flex: 1; min-width: 160px; font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.wpf-security-bound-text { flex: 1; min-width: 160px; }
.wpf-security-bound-title { font-size: 13.5px; font-weight: 800; color: var(--text-main); }
.wpf-security-bound-desc { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.wpf-security-bound-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wpf-security-auth-btn {
    padding: 11px 22px; font-size: 14px; font-weight: 700; font-family: inherit;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-deep), var(--accent-deeper));
    border: none;
    border-radius: var(--radius-pill); cursor: pointer;
    box-shadow: var(--shadow-cta);
    transition: transform var(--dur-fast) var(--ios-ease);
}
.wpf-security-auth-btn:active { transform: scale(0.98); }
.wpf-security-toggle { width: 100%; text-align: right; }
.wpf-security-toggle-btn {
    padding: 4px 10px; font-size: 11.5px; font-weight: 700; font-family: inherit;
    color: var(--accent-deep); background: transparent; border: none;
    text-decoration: underline; cursor: pointer;
}
.wpf-security-pwd { padding: 4px 0; }

/* ============================ SUBMIT ============================ */
.wpf-submit-area { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 12px; }
.wpf-btn-submit, .wpf-btn-reset {
    position: relative;
    padding: 15px 40px;
    font-size: 15px; font-weight: 700; font-family: inherit;
    border-radius: var(--radius-pill);
    cursor: pointer;
    border: none;
    transition: transform var(--dur-fast) var(--ios-ease), box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
.wpf-btn-submit {
    color: #fff;
    background: linear-gradient(135deg, var(--accent-deep), var(--accent-deeper));
    box-shadow: var(--shadow-cta);
}
.wpf-btn-submit:hover { box-shadow: 0 6px 20px rgba(37,156,149,0.35), inset 0 1px 0 rgba(255,255,255,0.18); }
.wpf-btn-submit:active { transform: scale(0.98); }
.wpf-btn-submit.success { background: linear-gradient(135deg, #4CA669, #3d8f5b); box-shadow: 0 4px 16px rgba(76,166,105,0.28); }
.wpf-btn-reset {
    color: var(--text-main);
    background: rgba(255,255,255,0.45);
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: var(--shadow-inset-soft);
}
.wpf-btn-reset:hover { background: rgba(255,255,255,0.7); }
.wpf-btn-reset:active { transform: scale(0.98); }

.btn-spinner { display: none; }
.loading .btn-spinner {
    display: inline-block;
    width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wpfSpin 0.7s linear infinite;
}
@keyframes wpfSpin { to { transform: rotate(360deg); } }

/* ============================ FEED ============================ */
.wpf-feed-container {
    background: var(--glass-page);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    /* 注意：不能用 contain: style/paint —— 会创建 stacking context，
       隔离内部 .wpf-next-bar 的 z-index；sticky 随一按钮滚到底部与
       「更多来自碴儿.NET」重叠时会被菜单盖住。layout 保留且无此问题。 */
    contain: layout;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html:not([data-perf="low"]) .wpf-feed-container {
        -webkit-backdrop-filter: blur(20px) saturate(190%);
        backdrop-filter: blur(20px) saturate(190%);
    }
}

.wpf-feed { display: flex; flex-direction: column; }
.wpf-feed-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
    padding: 14px clamp(18px, 3vw, 28px);
    border-bottom: 1px solid var(--border-subtle);
}
/* 标题：与旧版/Persona 同款 teal 渐变 clip 文字 */
.wpf-feed-title {
    text-align: center;
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 700;
    letter-spacing: 0.3px;
    background: linear-gradient(135deg, var(--accent), var(--accent-deeper));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.wpf-feed-toolbar { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* 用户（登录）按钮移到工具栏最右侧 */
.wpf-user-btn { order: 1; }

/* 工具栏胶囊：与人格站 .btn-back / .tag-time 同源
   触摸目标按 UIUXPROMAX 放大：min-height 40px（近 44px 推荐值） */
.wpf-user-btn, .wpf-feed-rule-btn, .wpf-search-trigger-btn, .wpf-filter-trigger-btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 9px 18px;
    font-size: 14px; font-weight: 700; font-family: inherit;
    color: var(--text-main);
    background: rgba(255,255,255,0.45);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: var(--radius-pill);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ios-ease);
}
.wpf-user-btn:hover, .wpf-feed-rule-btn:hover, .wpf-search-trigger-btn:hover, .wpf-filter-trigger-btn:hover {
    background: rgba(255,255,255,0.7);
    color: var(--accent-deep);
    border-color: rgba(42,177,168,0.35);
}
.wpf-user-btn:active, .wpf-feed-rule-btn:active, .wpf-search-trigger-btn:active, .wpf-filter-trigger-btn:active { transform: scale(0.96); }
.wpf-feed-rule-btn { padding: 9px 12px; }
/* 登录后按钮：teal 渐变挂在按钮自身（.logged-in），
   avatar 仅是文字 span，按钮尺寸与其它工具栏按钮严格一致 */
.wpf-user-btn.logged-in {
    color: #fff;
    background: linear-gradient(135deg, var(--accent-deep), var(--accent-deeper));
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(37, 156, 149, 0.22), inset 0 1px 0 rgba(255,255,255,0.22);
}
.wpf-user-btn.logged-in:hover {
    color: #fff;
    background: linear-gradient(135deg, #1f8f88, #157a74);
    border-color: transparent;
}
.wpf-user-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    letter-spacing: 0.3px;
}
.wpf-filter-trigger-btn.has-filter {
    color: #fff;
    background: linear-gradient(135deg, var(--accent-deep), var(--accent-deeper));
    border-color: transparent;
}
.filter-badge {
    display: none;
    min-width: 16px; height: 16px; padding: 0 4px;
    font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
    color: var(--accent-contrast); background: rgba(255,255,255,0.28); border-radius: 8px;
}
.wpf-filter-trigger-btn.has-filter .filter-badge { display: inline-block; }
.wpf-filter-trigger-btn.has-filter:hover .filter-badge { background: rgba(255,255,255,0.42); }

/* 左右留白由 .wpf-feed-stack 的 --feed-stack-front-inset 控制（与旧版一致）
   overflow: clip 仅裁剪 3D 视差背卡（far 层 rotate+translate 后）溢出容器的部分，
   不影响 stack 内部 preserve-3d（clip 建立 grouping context 只作用于本层）。 */
.wpf-feed-content { padding: 16px 0 0; display: flex; flex-direction: column; overflow: clip; }

/* ---- 牌堆（与旧版 Edge 式卡堆逐参数还原：3D 视差 + 双层背卡） ---- */
.wpf-feed-stack {
    --feed-stack-peek: clamp(34px, 6vw, 56px);
    --feed-stack-front-inset: clamp(18px, 3vw, 28px);
    position: relative;
    min-width: 0;
    padding: 0 var(--feed-stack-front-inset) 14px;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.wpf-feed-stack-front { position: relative; z-index: 3; min-width: 0; }
#wpfFeedList { position: relative; }

.wpf-feed-stack-back {
    position: absolute;
    inset: 18px calc(var(--feed-stack-front-inset) + 12px) 18px var(--feed-stack-peek);
    border-radius: calc(var(--radius-card) - 2px);
    pointer-events: none;
    opacity: 0;
    transform-origin: 50% 84%;
    /* 背卡只在进入浏览状态时淡入；不参与前景卡的 transform 时间线 */
    transition: opacity 160ms var(--ios-ease);
}
.wpf-feed-stack-back--near {
    z-index: 2;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.80), rgba(239, 248, 248, 0.62)),
        var(--card);
    border: 1px solid rgba(255, 255, 255, 0.56);
    box-shadow: 0 16px 36px rgba(32, 70, 73, 0.10), inset 0 1px 1px rgba(255,255,255,0.48);
    transform: translate3d(3.5%, 2px, -20px) rotate(3.2deg) scale(0.98);
}
.wpf-feed-stack-back--far {
    z-index: 1;
    inset-block: 24px 12px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(228, 242, 242, 0.48)),
        var(--card);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: 0 12px 28px rgba(32, 70, 73, 0.075), inset 0 1px 1px rgba(255,255,255,0.34);
    transform: translate3d(6.5%, 8px, -44px) rotate(5.2deg) scale(0.945);
}
.wpf-feed-stack.is-browsing .wpf-feed-stack-back--near { opacity: 1; }
.wpf-feed-stack.is-browsing .wpf-feed-stack-back--far { opacity: 0.72; }
/* 流畅档：背卡静止保留（无 blur 成本），仅去掉 3D 视差降合成压力 */
html[data-perf="low"] .wpf-feed-stack { perspective: none; transform-style: flat; }
html[data-perf="low"] .wpf-feed-stack-back--near { transform: translate3d(3.5%, 2px, 0) rotate(3.2deg) scale(0.98); }
html[data-perf="low"] .wpf-feed-stack-back--far { transform: translate3d(6.5%, 8px, 0) rotate(5.2deg) scale(0.945); }

/* ---- 卡片 ---- */
.wpf-feed-card {
    position: relative;
    /* 顶部（前景）卡片不透明，保证正文可读性；背卡仍保持玻璃 */
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.08), inset 0 1px 1px rgba(255,255,255,0.8);
    padding: 18px;
    contain: layout style;
}
.wpf-feed-card.fade-in { opacity: 0; }
.wpf-feed-card.fade-in.visible { opacity: 1; transition: opacity var(--dur-slow) var(--ease-out); }
.wpf-feed-card.highlight-new { box-shadow: 0 0 0 2px var(--accent), 0 4px 16px var(--accent-glow), inset 0 1px 1px rgba(255,255,255,0.8); }

/* 卡片头部排版（已移除头像块）：昵称为主行，碴儿PASS ID / 时间为次级行 */
.wpf-feed-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wpf-feed-user { min-width: 0; flex: 1; }
.wpf-feed-meta { min-width: 0; }
.wpf-feed-name { font-size: 20px; font-weight: 900; letter-spacing: -0.2px; word-break: break-all; }
/* 碴儿PASS ID：次要信息，品牌浅 teal 小徽章。
   圆角依据字体定位：保留完整左右 padding（圆角背景正常包裹文字），
   再以 margin-left: -9px 抵消左 padding，使首字「碴」与上方昵称
   首字左对齐——背景圆角跟随字体，而非边界贴字或偏离 */
.wpf-feed-passid {
    display: inline-flex; align-items: center;
    margin-top: 3px; padding: 2px 9px; margin-left: -9px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.2px;
    color: var(--accent-deep);
    background: var(--accent-light);
    border-radius: var(--radius-pill);
    width: fit-content;
}
/* 创始人徽章（ID < 100）：金色，与赞赏按钮同族 */
.wpf-feed-passid.founder {
    color: #8a5a10;
    background: linear-gradient(135deg, rgba(248, 220, 132, 0.55), rgba(216, 157, 43, 0.22));
    border: 1px solid rgba(216, 157, 43, 0.45);
}
/* 开发者徽章（ID = 2）：紫色 */
.wpf-feed-passid.dev {
    color: #6b46c1;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.34), rgba(139, 92, 246, 0.18));
    border: 1px solid rgba(139, 92, 246, 0.4);
}
/* 称号与 ID 的分隔符 */
.wpf-feed-passid .passid-sep {
    margin: 0 6px;
    opacity: 0.55;
    font-weight: 700;
}
.wpf-feed-time { font-size: 11px; color: var(--text-muted); font-weight: 600; margin-top: 3px; }
.wpf-feed-time-sep { margin: 0 6px; }

.wpf-feed-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
/* 举报按钮：红色警示圆形，32px（比 meta 信息区略小、但保证可点性） */
.wpf-feed-btn-report {
    width: 32px; height: 32px;
    font-size: 15px; font-weight: 900; font-family: inherit;
    color: #fff;
    background: var(--error);
    box-shadow: 0 1px 5px rgba(230, 92, 92, 0.34);
    border: none; border-radius: 50%;
    cursor: pointer; line-height: 1;
    transition: opacity var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.wpf-feed-btn-report:hover { background: #d94a4a; box-shadow: 0 2px 7px rgba(230, 92, 92, 0.42); }
.wpf-feed-btn-report:active { transform: scale(0.92); }

/* ===================== 卡片内容区 =====================
   样式与原版 friends_bk 完全对齐（用户要求：内容区 UIUX 大体与原版一致）。
   保留的明确更改：卡片头部（昵称/碴儿PASS 徽章/时间/举报红色按钮）、
   无头像、联系方式复制交互、顶部卡片不透明。 */
.wpf-feed-section { margin-bottom: 12px; }
.wpf-feed-section:last-of-type { margin-bottom: 0; }
.wpf-feed-label {
    font-size: 10px; font-weight: 700;
    color: #9E9EA2; letter-spacing: 0.6px; margin-bottom: 6px;
    user-select: none; text-transform: uppercase;
}
.wpf-feed-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.age-tag, .gender-tag {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 4px 12px; font-size: 12px; font-weight: 600;
    border-radius: var(--radius-pill);
}
.age-tag {
    background: rgba(255, 179, 71, 0.14);
    border: 1px solid rgba(255, 179, 71, 0.25);
    color: #B87A2C;
}
.gender-tag { border: 1px solid; font-weight: 700; }
.gender-tag.male { background: rgba(88, 159, 255, 0.12); color: #589FFF; border-color: rgba(88, 159, 255, 0.25); }
.gender-tag.female { background: rgba(108, 92, 231, 0.12); color: #6C5CE7; border-color: rgba(108, 92, 231, 0.25); }

.wpf-feed-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--glass-list);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #1d1d1f;
    word-break: break-all;
}
.wpf-feed-badge.char { background: var(--accent-light); color: var(--accent); }
.wpf-feed-badge.interest { background: rgba(46, 52, 64, 0.10); color: #1d1d1f; }
.wpf-feed-badge.cp { background: rgba(42, 177, 168, 0.10); color: var(--accent); border: 1px solid rgba(42, 177, 168, 0.18); }
.wpf-feed-badge.time { background: rgba(94, 187, 122, 0.12); color: #357A4A; }

/* 人格测试胶囊（原版：teal 浅底 + 描边，小 logo） */
.wpf-feed-persona {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px;
    margin-top: 4px; padding: 3px 10px;
    background: linear-gradient(135deg, rgba(42, 177, 168, 0.10), rgba(42, 177, 168, 0.04));
    border: 1px solid rgba(42, 177, 168, 0.18);
    border-radius: var(--radius-pill);
    font-size: 11px; font-weight: 700;
    color: var(--accent);
    min-height: 22px;
}
.wpf-feed-persona img { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; background: var(--accent-light); }
.wpf-feed-persona .empty-text { color: var(--text-muted); font-weight: 600; font-size: 10.5px; opacity: 0.6; }

/* AI 评估徽标：与原版同源（teal 渐变胶囊，紧凑尺寸） */
.wpf-feed-ai-badge {
    display: inline-flex; align-items: center; gap: 3px;
    margin-left: 6px; padding: 3px 8px 3px 6px;
    font-size: 9.5px; font-weight: 800; font-family: inherit; letter-spacing: 0.02em;
    color: #fff; line-height: 1;
    background: linear-gradient(135deg, #2ab1a8, #1a948d);
    border: none; border-radius: var(--radius-pill); cursor: pointer;
    transition: transform var(--dur-fast) var(--ios-ease);
}
.wpf-feed-ai-badge:active { transform: scale(0.97); }
.wpf-feed-ai-badge svg { width: 12px; height: 12px; }
.wpf-feed-ai-chevron { width: 11px !important; height: 11px !important; opacity: 0.8; }

.bio-marker {
    font-size: 10px; font-weight: 700;
    color: #9E9EA2; letter-spacing: 0.6px; margin-bottom: 6px;
    user-select: none; text-transform: uppercase;
}
.wpf-feed-bio {
    font-size: 14px; line-height: 1.8;
    color: var(--text-main); word-break: break-word;
    padding: 12px 14px;
    background: rgba(255,255,255,0.35);
    border-radius: 12px;
    white-space: pre-wrap;
}
.wpf-feed-bio.collapsed { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wpf-feed-bio-toggle {
    font-size: 12px; font-weight: 600;
    color: var(--accent); cursor: pointer;
    background: rgba(42, 177, 168, 0.08);
    border: 1px solid rgba(42, 177, 168, 0.15);
    padding: 4px 12px; border-radius: var(--radius-pill);
    font-family: inherit; margin-top: 8px; margin-bottom: 14px;
    display: inline-block; line-height: 1.4;
    transition: background var(--dur-fast) var(--ios-ease), border-color var(--dur-fast) var(--ios-ease);
    user-select: none; -webkit-user-select: none;
}
.wpf-feed-bio-toggle:hover { background: rgba(42, 177, 168, 0.15); border-color: rgba(42, 177, 168, 0.3); }
.wpf-feed-bio-toggle:active { transform: scale(0.97); }

.wpf-feed-bottom { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.wpf-feed-bottom.no-border-top { border-top: none; padding-top: 4px; }
.wpf-feed-contact { display: flex; gap: 8px; flex-wrap: wrap; }
.wpf-feed-contact-item {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px;
    font-size: 14px; font-weight: 700;
    background: var(--glass-list);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: var(--radius-pill);
    cursor: pointer; position: relative;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ios-ease);
}
.wpf-feed-contact-item:hover { background: rgba(255,255,255,0.7); color: var(--accent-deep); }
.wpf-feed-contact-item:active { transform: scale(0.97); }
.wpf-feed-contact-item .contact-label { font-size: 10.5px; font-weight: 800; color: var(--text-muted); }
.wpf-feed-contact-item .contact-value { font-weight: 700; word-break: break-all; }
/* 「复制QQ号」提示文字不再显示（hover/已复制均不出现），
   label+value+icon 恒定显示 → 按钮宽度固定，按下不引起排版跳变 */
.wpf-feed-contact-item .contact-copy-text { display: none; }
.wpf-feed-contact-item .contact-copy { display: inline-flex; color: var(--text-muted); }
.wpf-feed-contact-item.copied { background: rgba(76,166,105,0.14); }
.wpf-feed-contact-item.copied .contact-copy { color: #3d8f5b; }

/* ---- 空态 / 引导 / 骨架 / 错误 ---- */
.wpf-feed-empty, .wpf-feed-guide { padding: 32px 20px; text-align: center; color: var(--text-sub); }
.wpf-feed-empty .empty-icon, .wpf-feed-guide .guide-illustration { display: inline-flex; color: var(--text-sub); opacity: 0.45; margin-bottom: 12px; }
.wpf-feed-guide .guide-illustration img { width: 84px; height: 84px; object-fit: contain; opacity: 0.9; }
.wpf-feed-empty h3, .wpf-feed-guide .guide-title { font-size: 16px; font-weight: 800; color: var(--text-main); margin-bottom: 6px; }
.wpf-feed-empty p { font-size: 13px; }
.wpf-feed-empty .cta-hint, .wpf-feed-guide .guide-hint {
    display: inline-block; margin-top: 14px; padding: 6px 14px;
    font-size: 11.5px; font-weight: 800;
    color: var(--accent-deep); background: var(--accent-light);
    border-radius: var(--radius-pill);
}
@keyframes wpfGuideBreathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }
html:not([data-perf="low"]) .wpf-feed-guide .guide-hint { animation: wpfGuideBreathe 2.4s ease-in-out infinite; }

.wpf-retry-btn {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 14px; padding: 11px 22px;
    font-size: 13.5px; font-weight: 700; font-family: inherit;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-deep), var(--accent-deeper));
    border: none;
    border-radius: var(--radius-pill); cursor: pointer;
    box-shadow: var(--shadow-cta);
}

.wpf-skeleton { padding: 18px; border: 1px solid var(--border-light); border-radius: 22px; background: var(--glass-list); }
.wpf-skeleton-line { height: 14px; margin-bottom: 12px; border-radius: 7px; background: rgba(120,120,136,0.10); }
.wpf-skeleton-line:last-child { margin-bottom: 0; width: 60%; }
@keyframes wpfSkeletonPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
html:not([data-perf="low"]) .wpf-skeleton-line { animation: wpfSkeletonPulse 1.2s ease-in-out infinite; }

/* ---- 胶囊条 ----
   UI 逻辑：胶囊本体不做强模糊；「随一个」按钮背后始终带轻微毛玻璃。
   single（仅一个按钮）时整个胶囊条几乎透明，只保留按钮背后的微模糊，
   形成"按钮悬浮于微模糊背景"的观感。 */
.wpf-next-bar {
    position: sticky; bottom: 16px;
    display: flex; gap: 10px; justify-content: center; align-items: center;
    margin-top: 16px;
    padding: 8px;
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: none;
    z-index: 20;
}

/* 「随一个」按钮：背后背景恒定微模糊（毛玻璃 teal）；「上一个」白玻璃胶囊 */
.wpf-prev-btn, .wpf-next-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 46px; padding: 0 26px;
    font-size: 15px; font-weight: 700; font-family: inherit;
    border: none; border-radius: var(--radius-pill);
    cursor: pointer;
    transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ios-ease), background var(--dur-fast) ease;
}
.wpf-prev-btn {
    color: var(--text-main);
    background: rgba(255,255,255,0.45);
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: var(--shadow-inset-soft);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
}
.wpf-next-btn {
    color: #fff;
    background: linear-gradient(135deg, rgba(37,156,149,0.86), rgba(26,140,134,0.86));
    box-shadow: 0 4px 14px rgba(37, 156, 149, 0.3), inset 0 1px 0 rgba(255,255,255,0.2);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
}
html[data-perf="low"] .wpf-prev-btn,
html[data-perf="low"] .wpf-next-btn {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html[data-perf="low"] .wpf-prev-btn { background: rgba(255,255,255,0.8); }
html[data-perf="low"] .wpf-next-btn { background: linear-gradient(135deg, var(--accent-deep), var(--accent-deeper)); }
.wpf-next-btn:hover { box-shadow: 0 6px 20px rgba(37,156,149,0.35), inset 0 1px 0 rgba(255,255,255,0.18); }
.wpf-prev-btn:hover { background: rgba(255,255,255,0.7); }
.wpf-next-btn:active, .wpf-prev-btn:active { transform: scale(0.97); }
.wpf-next-btn.loading { opacity: 0.7; pointer-events: none; }

.wpf-prev-btn--merged {
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
    padding: 0;
    width: 0;
    overflow: hidden;
    border-width: 0;
}
.wpf-next-bar.single .wpf-next-btn { padding: 0 34px; }

.wpf-feed-footer { padding: 14px 0 16px; text-align: center; }
.footer-count { font-size: 11.5px; font-weight: 700; color: var(--text-sub); opacity: 0.78; }

/* ============================ MORE MENU ============================
   与 PSJKPersona 的「更多来自碴儿.NET」逐属性对齐
   ==================================================================== */
.more-menu-card {
    width: 100%;
    max-width: var(--container-w);
    margin: 20px auto 0;
    padding: 0;
    background: var(--glass-page);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html:not([data-perf="low"]) .more-menu-card {
        -webkit-backdrop-filter: blur(20px) saturate(190%);
        backdrop-filter: blur(20px) saturate(190%);
    }
}
@keyframes moreMenuIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
html:not([data-perf="low"]) .more-menu-card { animation: moreMenuIn 0.55s var(--ios-ease) both; }

.more-menu-toggle {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 18px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-main);
    transition: background 0.2s ease;
}
.more-menu-toggle:hover { background: rgba(0,0,0,0.025); }
.more-menu-toggle:active { background: rgba(0,0,0,0.05); }
.more-menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.more-menu-title-group { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.more-menu-leading-icon { color: var(--accent); flex-shrink: 0; transition: transform 0.32s var(--ios-ease), color 0.2s ease; }
.more-menu-toggle:hover .more-menu-leading-icon { transform: rotate(45deg) scale(1.06); }
.more-menu-title { font-size: 13px; font-weight: 800; color: var(--text-main); letter-spacing: 0.3px; text-align: left; flex: 1; min-width: 0; }

.more-menu-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 6px;
    border-radius: 999px;
    background: var(--accent); color: #fff;
    font-size: 10.5px; font-weight: 800; line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.more-menu-card.more-menu-collapsed .more-menu-badge { display: none; }

.more-menu-chevron { color: var(--text-sub); flex-shrink: 0; transition: transform 0.32s var(--ios-ease), color 0.2s ease; }
.more-menu-toggle:hover .more-menu-chevron { color: var(--accent); }
.more-menu-card:not(.more-menu-collapsed) .more-menu-chevron { transform: rotate(180deg); color: var(--accent); }

.more-menu-body { display: flex; flex-direction: column; gap: 10px; padding: 0 18px 18px; overflow: hidden; contain: layout paint style; }
.more-menu-divider { height: 1px; background: var(--border-subtle); margin: 0 -4px 2px; }
.more-menu-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.more-menu-item { display: flex; flex-direction: column; gap: 6px; padding: 4px 6px; border-radius: 14px; transition: background 0.2s ease; }
.more-menu-item:hover { background: rgba(0,0,0,0.018); }

.more-menu-btn {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.32));
    box-shadow: 0 2px 8px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.6);
    transition: transform 0.2s var(--ios-ease), background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}
.more-menu-btn:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.5));
    box-shadow: 0 4px 12px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7);
    color: var(--accent);
    border-color: rgba(42,177,168,0.35);
}
.more-menu-btn:active { transform: scale(0.97); background: rgba(255, 255, 255, 0.78); }
/* 赞赏入口：与 Persona 同款金色行动按钮（菜单内唯一暖色层级） */
.donation-menu-btn {
    color: #3d2605;
    background: linear-gradient(135deg, #f8dc84 0%, #d89d2b 100%);
    border-color: rgba(145, 95, 13, 0.52);
    box-shadow: 0 7px 18px rgba(183, 125, 22, 0.24), inset 0 1px 0 rgba(255,255,255,0.62);
}
.donation-menu-btn:hover {
    color: #332004;
    background: linear-gradient(135deg, #ffe89d 0%, #e5ad3d 100%);
    border-color: rgba(145, 95, 13, 0.64);
    box-shadow: 0 9px 22px rgba(183, 125, 22, 0.31), inset 0 1px 0 rgba(255,255,255,0.7);
}
.donation-menu-btn:active { background: #d09323; }
.donation-menu-btn:focus-visible { outline: 2px solid #b87512; outline-offset: 2px; }

.more-menu-desc {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-sub);
    opacity: 0.88;
    text-align: center;
    margin: 0;
    padding: 0 2px 2px;
    letter-spacing: 0.1px;
}

.more-menu-perf { gap: 8px; padding: 8px 6px; }
.more-menu-perf-label { font-size: 11.5px; font-weight: 800; color: var(--text-sub); text-align: center; letter-spacing: 0.4px; }
.more-menu-perf-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.perf-chip {
    min-height: 32px; padding: 6px 16px;
    font-size: 12px; font-weight: 700; font-family: inherit;
    color: var(--text-sub);
    background: rgba(120,120,136,0.12);
    border: none; border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s var(--ios-ease);
}
.perf-chip:hover { background: rgba(120,120,136,0.2); color: var(--text-main); }
.perf-chip:active { transform: scale(0.97); }
.perf-chip.active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent-deep), var(--accent-deeper));
    box-shadow: 0 2px 8px rgba(37,156,149,0.3);
}

.more-menu-footer {
    width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    margin-top: 4px; padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
    text-align: center;
    line-height: 1.55;
    color: var(--text-sub);
}
.more-menu-footer .info-row { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.more-menu-footer .info-row span { font-size: 10.5px; opacity: 0.78; font-weight: 500; letter-spacing: 0.1px; }
.more-menu-footer .info-row span:last-child { font-size: 10px; opacity: 0.62; }

/* ============================ TOAST ============================ */
.wpf-toast {
    position: fixed;
    left: 50%; bottom: 40px;
    max-width: 88vw;
    padding: 12px 22px;
    font-size: 13.5px; font-weight: 700;
    color: #fff; background: rgba(46,52,64,0.92);
    border-radius: var(--radius-pill);
    box-shadow: 0 8px 28px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translate3d(-50%, 16px, 0);
    pointer-events: none;
    z-index: 200;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.wpf-toast.show { opacity: 1; transform: translate3d(-50%, 0, 0); }
.wpf-toast.success { background: linear-gradient(135deg, var(--accent-deep), var(--accent-deeper)); }

/* ============================ UTILITIES ============================ */
[hidden] { display: none !important; }
.wpf-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* 弹窗打开时锁定背景滚动（不使用 position:fixed，避免关闭时的跳动） */
html.modal-open, body.modal-open { overflow: hidden; }

/* 首屏初始化遮罩：z-index 低于浮层，保证系统公告可见 */
.wpf-boot-veil { position: fixed; inset: 0; background: var(--bg-fallback); z-index: 90; opacity: 1; transition: opacity 0.28s linear; }
.wpf-boot-veil.gone { opacity: 0; pointer-events: none; }

/* 系统级减少动态效果偏好：等同「流畅」档 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.12s !important;
        scroll-behavior: auto !important;
    }
    .wpf-page-title h1 .highlight { animation: none !important; }
    .wpf-toggle-btn .btn-pulse { display: none; }
}

/* 小屏适配 */
@media (max-width: 520px) {
    body { padding: 20px 14px 32px; font-size: 14.5px; }
    .wpf-row { grid-template-columns: 1fr; }
    .wpf-card { padding: 20px 16px; }
    /* 扩列条左右边距与上下边距对齐（14px），不再用 18px 的较宽 inset，
       避免移动端卡片显细长；左右留白仍由 stack 单点控制不双缩进 */
    .wpf-feed-content { padding: 14px 0 0; }
    .wpf-feed-stack { --feed-stack-front-inset: 14px; --feed-stack-peek: 26px; }
    .wpf-feed-header { padding: 12px 14px; }
    /* 工具栏按钮：压缩内边距防溢出（360px 视口下 4 按钮总宽 314px 仍超容器右缘 9px） */
    .wpf-user-btn, .wpf-feed-rule-btn, .wpf-search-trigger-btn, .wpf-filter-trigger-btn {
        min-height: 36px; padding: 7px 12px; font-size: 13px; gap: 5px;
    }
    .wpf-feed-rule-btn { padding: 7px 9px; }
    .wpf-feed-toolbar { gap: 6px; }
    .wpf-cp-row { grid-template-columns: 1fr; }
    .wpf-cp-symbol { justify-self: center; }
    .wpf-feed-name { font-size: 18px; }
    /* 内容区小屏间距与原版一致 */
    .wpf-feed-section { margin-bottom: 10px; }
    .wpf-feed-section:last-of-type { margin-bottom: 0; }
    .wpf-feed-label, .bio-marker { font-size: 11px; }
    .wpf-feed-bio { font-size: 14px; line-height: 1.6; padding: 10px 12px; }
    .wpf-page-title { padding: 20px 18px 18px; margin-bottom: 16px; }
    .wpf-toggle-area { margin-bottom: 20px; }
    .more-menu-body { padding: 0 14px 16px; }
    .more-menu-toggle { padding: 12px 14px; }
}