:root {
    --bg: #000000;
    --bg2: #0b0b0e;
    --text: #ffffff;
    --sub: #8e8e93;
    --line: #1c1c1e;
    --ai: #1f222b;
    --user: #1f4d2a;
    --select: #3a1c1c;
    --red: #e23d3d;
    --green: #34c759;
    --icon: #cfcfd2;
    --input: #161618;
    --nav-h: 52px;
    --accent: #2b57c6;
    --accent-soft: rgba(43, 87, 198, .35);
    --profile-bg: #121216;
    --profile-line: #222;
}

[data-theme="light"] {
    --bg: #faf6ee;
    --bg2: #fff9f0;
    --text: #1c1c1e;
    --sub: #6b6558;
    --line: #e8e0d0;
    --ai: #f0ebe0;
    --user: #d8ead8;
    --select: #f5e8d8;
    --icon: #5c574d;
    --input: #fffdf8;
    --accent: #c9a227;
    --accent-soft: rgba(201, 162, 39, .35);
    --profile-bg: #fff9f0;
    --profile-line: #e8e0d0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #111; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
button, input, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
img { display: block; }

/* 全局滚动条：无轨道外框，仅保留较淡的滑块 */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 120, 128, 0.35) transparent;
}
*::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-corner,
*::-webkit-scrollbar-button {
    background: transparent;
    border: none;
    box-shadow: none;
    width: 0;
    height: 0;
}
*::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 128, 0.35);
    border-radius: 4px;
    border: none;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(140, 140, 148, 0.5);
}

#phone {
    width: min(430px, 100%);
    height: 100%;
    margin: 0 auto;
    background: var(--bg);
    position: relative;
    overflow: hidden;
}
#app { height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; }
#overlay { position: absolute; inset: 0; z-index: 15; pointer-events: none; }
#overlay:not(:empty) { pointer-events: auto; }

/* 固定舞台：页面始终铺满同尺寸，切换只做 translateX，避免 flex↔absolute 尺寸跳动 */
.nav-stage {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: var(--bg);
}
.nav-stage > .screen {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg);
    transform: none;
}
.nav-stage > .screen-enter { z-index: 3; }
.nav-stage > .screen-leave { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
    .nav-stage > .screen {
        transition: none !important;
    }
}
.nav {
    height: var(--nav-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 6px;
    flex-shrink: 0;
}
.nav-title {
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    justify-self: center;
    max-width: 70vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-back, .nav-side {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
}
.nav-back svg, .nav-side svg { width: 22px; height: 22px; }
.nav-right {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    align-items: center;
    padding-right: 4px;
    justify-self: end;
    min-width: 0;
}

.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    min-height: 64px;
    text-align: left;
    width: 100%;
}
.row .titles { flex: 1; min-width: 0; }
.row .t { font-size: 16px; }
.row .d { font-size: 12px; color: var(--sub); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .right { color: var(--sub); font-size: 13px; flex-shrink: 0; }
.row-static { cursor: default; }
.inline-num {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.inline-num-x { color: var(--sub); font-size: 13px; }
.inline-num-input {
    width: 40px;
    text-align: center;
    background: #1c1c1e;
    border-radius: 6px;
    padding: 4px 2px;
    font-size: 13px;
    color: var(--text);
    -moz-appearance: textfield;
}
.inline-num-input::-webkit-outer-spin-button,
.inline-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.chev { color: #555; font-size: 18px; }
.danger .t { color: var(--red); }

.ico {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.ico svg { width: 24px; height: 24px; }

.avatar, .avatar-fallback {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
}
.avatar-fallback {
    background: linear-gradient(135deg, #5a2a2a, #8a4a3a);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 600;
}
.avatar-lg { width: 96px; height: 96px; font-size: 36px; }
.nav .avatar, .nav .avatar-fallback { width: 32px; height: 32px; font-size: 13px; }

/* 微信风格群头像拼贴 */
.group-av {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    background: #2c2c2e;
    display: grid;
    gap: 1px;
    flex-shrink: 0;
    box-sizing: border-box;
}
.group-av img,
.group-av span,
.group-av .avatar-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    background: #3a3a3c;
    color: #eee;
}
.group-av-cell {
    position: relative;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}
.group-av-cell img.group-av-img {
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    object-fit: none;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
.group-av-cell span,
.group-av-cell .avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    background: #3a3a3c;
    color: #eee;
}
.group-av-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.group-av-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.group-av-3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.group-av-3 > :first-child { grid-column: 1 / -1; }
.group-av-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.group-av-empty { display: flex; align-items: center; justify-content: center; }
.group-av-empty .avatar-fallback {
    width: 100%;
    height: 100%;
    border-radius: 0;
    font-size: 14px;
}

/* 发起群聊选人 */
.group-create-screen { display: flex; flex-direction: column; min-height: 0; }
.group-pick-list { padding: 0 0 88px; }
.group-pick-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    color: var(--text);
}
.group-pick-row .titles { flex: 1; min-width: 0; }
.group-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid #666;
    flex-shrink: 0;
    box-sizing: border-box;
}
.group-check.on {
    border-color: #07c160;
    background: #07c160;
    box-shadow: inset 0 0 0 2px #000;
    position: relative;
}
.group-check.on::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.group-create-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #111;
    border-top: 1px solid var(--line);
}
.group-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    align-items: center;
    min-height: 44px;
}
.group-chips-hint { color: var(--sub); font-size: 13px; padding-left: 4px; }
.group-chip { padding: 0; flex-shrink: 0; }
.group-chip-av,
.group-chip .avatar,
.group-chip .avatar-fallback {
    width: 40px;
    height: 40px;
    font-size: 14px;
}
.nav-text-btn.disabled,
.nav-text-btn:disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* 群聊气泡：昵称在气泡上方 */
.bubble-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 72%;
    min-width: 0;
}
.chat-row.me .bubble-col { align-items: flex-end; }
.bubble-col .bubble { max-width: 100%; }
.speaker-name {
    font-size: 12px;
    color: var(--sub);
    margin: 0 0 4px 2px;
    line-height: 1.2;
}

.list-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 8px;
}
.list-head-main {
    flex: 1;
    min-width: 0;
    text-align: left;
    padding: 0;
}
.list-head .name {
    font-size: 15px;
    font-weight: 600;
    text-align: left;
}
.list-head-name-input {
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: 6px;
    border: 1px solid var(--accent);
    background: var(--input);
    color: var(--text);
    outline: none;
}
.list-head .list-status {
    margin-top: 3px;
    font-size: 11px;
}
.list-head .user-av { padding: 0; border-radius: 50%; flex-shrink: 0; }
.list-av {
    position: relative;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
    line-height: 0;
}
.chat-row-list {
    align-items: flex-start;
}
.chat-row-list .list-av {
    margin-top: 2px;
}
.list-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--sub);
    margin-top: 2px;
    line-height: 1.2;
}
.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot.red { background: #e53935; }
.status-dot.yellow { background: #f0c14a; }
.status-dot.green { background: #3dcf70; }
.unread-badge {
    position: absolute;
    top: -3px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #e53935;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
    z-index: 1;
}
.list-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
}
.chat-row-list .list-main .right {
    font-size: 10px;
    line-height: 1.2;
}
.chat-row-list .list-main .d {
    font-size: 10px;
    margin-top: 2px;
}
.search-wrap {
    position: relative;
    margin: 4px 16px 10px;
}
.search-wrap .search {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    caret-color: var(--text);
}
.search-wrap:not(.has-val):not(:focus-within) .search {
    color: transparent;
}
.search-wrap.has-val .search,
.search-wrap:focus-within .search {
    text-align: left;
}
.search-deco {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #666;
    font-size: 14px;
    pointer-events: none;
}
.search-wrap.has-val .search-deco,
.search-wrap:focus-within .search-deco {
    display: none;
}
.search-ico {
    width: 15px;
    height: 15px;
    opacity: 0.75;
    flex-shrink: 0;
}
.search {
    margin: 4px 16px 10px;
    background: #1c1c1e;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--text);
    width: calc(100% - 32px);
}
.search::placeholder { color: #666; }

.chat-row { padding: 10px 16px; }
.chat-row .meta { display: flex; gap: 10px; align-items: flex-start; }
.chat-row.me .meta { flex-direction: row-reverse; }
.chat-time-sep {
    text-align: center;
    padding: 14px 16px 6px;
    font-size: 12px;
    line-height: 1.2;
    color: var(--sub);
    user-select: none;
}
.nav-stage > .screen.chat-has-bg .chat-time-sep {
    color: rgba(242, 242, 245, 0.55);
}
.bubble {
    position: relative;
    max-width: 72%;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.chat-row.them .bubble { background: var(--ai); cursor: pointer; }
.chat-row.me .bubble { background: var(--user); }
/* 气泡小三角：贴近气泡顶部，与头像中部对齐 */
.chat-row.them .bubble:not(.media)::before,
.chat-row.me .bubble:not(.media)::before {
    content: "";
    position: absolute;
    top: 14px;
    width: 0;
    height: 0;
    border-style: solid;
    pointer-events: none;
}
.chat-row.them .bubble:not(.media)::before {
    left: -6px;
    border-width: 6px 6px 6px 0;
    border-color: transparent var(--ai) transparent transparent;
}
.chat-row.me .bubble:not(.media)::before {
    right: -6px;
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent var(--user);
}

/* ===== 聊天背景：深色半透毛玻璃顶底栏 + 半透气泡 ===== */
.nav-stage > .screen.chat-has-bg {
    background: transparent !important;
}
.chat-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #000;
}
.chat-bg-img {
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}
.nav-stage > .screen.chat-has-bg > .nav {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    background: rgba(10, 10, 12, 0.52) !important;
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-stage > .screen.chat-has-bg > .scroll {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    background: transparent !important;
    /* 底栏改为绝对定位叠在背景上，消息区预留高度由 JS 同步（无 transition，避免落后于面板） */
    padding-bottom: var(--chat-dock-pad, 58px);
    box-sizing: border-box;
}
.nav-stage > .screen.chat-has-bg > .quote-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--chat-dock-pad, 58px);
    z-index: 4;
    background: rgba(10, 10, 12, 0.52) !important;
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/*
 * 底栏叠在背景图之上（与顶栏同一层叠逻辑），否则在文档流底部时
 * backdrop-filter 采不到壁纸，看起来像实心黑条。
 */
.nav-stage > .screen.chat-has-bg > .chat-dock {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background: rgba(10, 10, 12, 0.52) !important;
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-stage > .screen.chat-has-bg > .chat-dock .input-bar {
    background: transparent !important;
    border-top: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.nav-stage > .screen.chat-has-bg > .chat-dock .emoji-panel,
.nav-stage > .screen.chat-has-bg > .chat-dock .plus-panel,
.nav-stage > .screen.chat-has-bg > .chat-dock .chat-panel-drawer {
    background: rgba(8, 8, 10, 0.35) !important;
}
.nav-stage > .screen.chat-has-bg > .chat-dock .chat-panel-drawer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-stage > .screen.chat-has-bg > .nav .nav-title,
.nav-stage > .screen.chat-has-bg > .nav .icon-btn,
.nav-stage > .screen.chat-has-bg > .nav .nav-back,
.nav-stage > .screen.chat-has-bg > .nav .nav-text-btn,
.nav-stage > .screen.chat-has-bg > .chat-dock .icon-btn {
    color: #ececf0;
}
.nav-stage > .screen.chat-has-bg > .nav .nav-text-btn.ok {
    color: #ffffff;
}
.nav-stage > .screen.chat-has-bg > .chat-dock .composer,
.nav-stage > .screen.chat-has-bg > .chat-dock .hold-talk {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #f2f2f5;
}
.nav-stage > .screen.chat-has-bg > .chat-dock .composer::placeholder {
    color: rgba(242, 242, 245, 0.4);
}
.nav-stage > .screen.chat-has-bg .chat-row .avatar,
.nav-stage > .screen.chat-has-bg .chat-row .avatar-fallback {
    opacity: 1 !important;
}
/* 气泡约 80% 不透明 */
.nav-stage > .screen.chat-has-bg .chat-row.them .bubble:not(.media),
.nav-stage > .screen.chat-has-bg .chat-row .bubble.them-bubble:not(.media) {
    background: rgba(31, 34, 43, 0.8) !important;
}
.nav-stage > .screen.chat-has-bg .chat-row.me .bubble:not(.media) {
    background: rgba(31, 77, 42, 0.8) !important;
}
.nav-stage > .screen.chat-has-bg .chat-row.them .bubble:not(.media)::before {
    border-color: transparent rgba(31, 34, 43, 0.8) transparent transparent;
}
.nav-stage > .screen.chat-has-bg .chat-row.me .bubble:not(.media)::before {
    border-color: transparent transparent transparent rgba(31, 77, 42, 0.8);
}
.chat-bg-gestures {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--nav-h);
    bottom: 0;
    z-index: 6;
    touch-action: none;
    cursor: grab;
}
.chat-bg-gestures:active { cursor: grabbing; }
.nav-text-btn {
    min-width: 52px;
    height: 36px;
    padding: 0 10px;
    font-size: 15px;
    color: #ececf0;
    justify-self: start;
}
.nav-text-btn.ok {
    color: #ffffff;
    font-weight: 600;
    justify-self: end;
}
.chat-bg-nav .nav-right {
    display: flex;
    justify-content: flex-end;
}
.chat-dock-preview {
    pointer-events: none;
}
.chat-row .avatar, .chat-row .avatar-fallback { width: 36px; height: 36px; font-size: 13px; }
.bubble.playing { outline: 1px solid #8a4a3a; }
.chat-row.flash .bubble { outline: 1px solid #c45c5c; }

.search-msg-row {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid #1c1c1e;
    cursor: pointer;
    color: inherit;
}
.search-msg-row:active {
    background: #151517;
}
.search-msg-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}
.search-msg-name {
    font-size: 14px;
    font-weight: 600;
}
.search-msg-time {
    font-size: 11px;
    color: var(--sub);
    flex-shrink: 0;
}
.search-msg-text {
    font-size: 13px;
    color: #b8b8bc;
    line-height: 1.45;
    word-break: break-word;
}
.search-hit {
    background: rgba(43, 87, 198, .35);
    color: #fff;
    border-radius: 2px;
    padding: 0 1px;
}
.quote-card, .quote-bar-body {
    background: rgba(255,255,255,.06);
    border-left: 2px solid #8a4a3a;
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 6px;
}
.quote-name { font-size: 12px; color: #d7a0a0; }
.quote-text { font-size: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.quote-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px 0;
    border-top: 1px solid var(--line);
    background: #0a0a0c;
}
.quote-bar-body { flex: 1; margin-bottom: 0; }

.input-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    min-height: 52px;
    border-top: 1px solid var(--line);
    background: #111113;
    box-sizing: border-box;
}
.composer {
    flex: 1;
    min-width: 0;
    height: 36px;
    min-height: 36px;
    max-height: 96px;
    background: #1c1c1e;
    border-radius: 6px;
    padding: 0 12px;
    resize: none;
    font-size: 15px;
    line-height: 36px;
    overflow-y: auto;
}
.hold-talk {
    flex: 1;
    min-width: 0;
    height: 36px;
    min-height: 36px;
    background: #1c1c1e;
    border-radius: 6px;
    color: #eee;
    font-size: 15px;
    line-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    touch-action: none;
}
.icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ddd;
    padding: 0;
    flex-shrink: 0;
    line-height: 0;
}
.icon-btn svg {
    width: 22px;
    height: 22px;
    display: block;
    flex-shrink: 0;
}
/* 通话图标路径偏满，略缩小以与返回/更多视觉对齐 */
.nav-right .icon-btn[data-act="open-call"] svg {
    width: 18px;
    height: 18px;
}
/* 覆盖 .icon-btn 的 display:flex，否则 hidden 无效导致发送与加号同时出现 */
.icon-btn[hidden],
.send-btn[hidden] {
    display: none !important;
}
/* 加号/发送同一槽位，宽度固定为「发送」按钮，避免文本框被挤缩 */
.chat-trail {
    width: 52px;
    height: 36px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    align-self: center;
}
.chat-trail > .send-btn,
.chat-trail > .icon-btn {
    grid-area: 1 / 1;
}
.send-btn {
    background: var(--user);
    color: #fff;
    border-radius: 6px;
    padding: 0;
    font-size: 14px;
    width: 52px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* 底栏弹窗：纵向开合；表情/加号横向滑动，高度不变 */
.chat-panel-drawer {
    height: 0;
    overflow: hidden;
    background: #19191c;
    border-top: 1px solid transparent;
    box-sizing: border-box;
    transition: height 280ms cubic-bezier(0.25, 0.1, 0.25, 1),
                border-color 280ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.chat-panel-drawer.open {
    height: 210px;
    border-top-color: var(--line);
}
.chat-panel-track {
    display: flex;
    width: 200%;
    height: 210px;
    transform: translateX(0);
    transition: transform 280ms cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
}
/* 顺序：表情 | 加号 */
.chat-panel-track.show-plus {
    transform: translateX(-50%);
}
.chat-panel-track.no-slide {
    transition: none !important;
}
.emoji-panel {
    width: 50%;
    height: 210px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #19191c;
    box-sizing: border-box;
    overflow: hidden;
}
.emoji-tabs {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.emoji-tab {
    width: 36px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    color: #888;
}
.emoji-tab.on { background: #2c2c2e; color: #fff; }
.emoji-tab svg { width: 18px; height: 18px; }
.emoji-scroll { flex: 1; overflow-y: auto; padding: 8px 10px 40px; min-height: 0; }
.emoji-sec { font-size: 12px; color: #888; margin: 8px 4px 6px; }
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}
.emoji-cell {
    font-size: 22px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.emoji-foot {
    position: relative;
    height: 0;
}
.emoji-del {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 48px;
    height: 32px;
    border-radius: 8px;
    background: #2c2c2e;
    color: #ddd;
}
.plus-panel {
    width: 50%;
    height: 210px;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px 8px;
    padding: 18px 16px 22px;
    overflow-y: auto;
    background: #19191c;
    box-sizing: border-box;
}
.plus-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #9a9aa0;
    font-size: 12px;
}
.plus-tile {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #2c2c2e;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #eee;
}
.plus-tile svg { width: 26px; height: 26px; }
.bubble.media { background: transparent; padding: 0; }
.bubble-img { max-width: 180px; border-radius: 8px; display: block; }
.file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 160px;
    background: #1c1c1e;
    border-radius: 8px;
    padding: 10px 12px;
}
.file-ico { width: 28px; color: #ddd; }
.file-ico svg { width: 24px; height: 24px; }
.file-name { font-size: 14px; }
.file-size { font-size: 12px; color: var(--sub); margin-top: 2px; }
.rec-mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    flex-direction: column;
    pointer-events: none;
}
.rec-wave {
    margin: auto auto 24px;
    width: 168px;
    height: 88px;
    background: #07c160;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.rec-wave::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    margin-left: -7px;
    border: 7px solid transparent;
    border-top-color: #07c160;
}
.rec-wave.warn { background: #c45c5c; }
.rec-wave.warn::after { border-top-color: #c45c5c; }
.rec-bars { display: flex; align-items: center; gap: 3px; height: 36px; }
.rec-bars i {
    display: block;
    width: 4px;
    height: 12px;
    background: #2a2a2a;
    border-radius: 2px;
    animation: recbar 0.7s ease-in-out infinite;
}
.rec-bars i:nth-child(2) { animation-delay: .08s; }
.rec-bars i:nth-child(3) { animation-delay: .16s; }
.rec-bars i:nth-child(4) { animation-delay: .24s; }
.rec-bars i:nth-child(5) { animation-delay: .1s; }
.rec-bars i:nth-child(6) { animation-delay: .2s; }
.rec-bars i:nth-child(7) { animation-delay: .05s; }
.rec-bars i:nth-child(8) { animation-delay: .18s; }
@keyframes recbar {
    0%, 100% { height: 10px; }
    50% { height: 32px; }
}
.rec-bottom {
    background: #2a2a2e;
    border-radius: 24px 24px 0 0;
    padding: 18px 16px 12px;
}
.rec-pills {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
}
.rec-pill {
    padding: 8px 14px;
    border-radius: 16px;
    background: #3a3a40;
    color: #ddd;
    font-size: 13px;
}
.rec-pill.on { background: #555; color: #fff; }
.rec-send {
    text-align: center;
    padding: 16px 0 8px;
    color: #111;
    background: #d8d8d8;
    border-radius: 80px 80px 0 0;
    font-size: 15px;
}
.rec-send.on { background: #ececec; }

.gear {
    position: absolute; left: 14px; bottom: 18px;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #ddd; z-index: 5; padding: 0;
}
.gear svg { width: 22px; height: 22px; }

.dash-btn {
    margin: 18px 16px 28px;
    border: 1px dashed #3a3a3c;
    border-radius: 12px;
    padding: 14px;
    color: var(--sub);
    width: calc(100% - 32px);
}

.char-card-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px 14px 28px;
}
.char-card {
    --card-blue: #2b57c6;
    --card-blue-soft: rgba(43, 87, 198, .35);
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 85% 20%, rgba(43, 87, 198, .08), transparent 55%),
        linear-gradient(180deg, #161618 0%, #0e0e10 100%);
    border: 1px solid var(--card-blue);
    box-shadow: inset 0 0 0 1px rgba(43, 87, 198, .45);
    display: flex;
    flex-direction: column;
    text-align: left;
    color: inherit;
    padding: 0;
    cursor: pointer;
    width: 100%;
}
.char-card.active {
    border-color: var(--card-blue);
    box-shadow: inset 0 0 0 1px rgba(43, 87, 198, .45);
}
.char-card-accent {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--card-blue), #4a7ae8 55%, transparent);
    pointer-events: none;
    z-index: 2;
}
.char-card-mark {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid var(--card-blue-soft);
    pointer-events: none;
    z-index: 2;
}
.char-card-mark-tl {
    top: 8px;
    left: 8px;
    border-right: none;
    border-bottom: none;
}
.char-card-mark-br {
    right: 8px;
    bottom: 8px;
    border-left: none;
    border-top: none;
}
.char-card-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 4px;
    border-bottom: 1px dashed #2e2e34;
}
.char-card-head-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--card-blue);
    box-shadow: 0 0 0 2px rgba(43, 87, 198, .2);
    flex-shrink: 0;
}
.char-card-head-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--card-blue);
}
.char-card-head-meta {
    margin-left: auto;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: #5a5a62;
    font-variant-numeric: tabular-nums;
}
.char-card-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: row;
}
.char-card-left {
    flex: 0 0 38%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #252528;
    background: #0c0c0e;
    padding: 8px;
}
.char-card-media {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #1a1a1c;
    border: 1px solid #2a2a30;
    border-radius: 2px;
}
.char-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(43, 87, 198, .2);
    pointer-events: none;
}
.char-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.char-card-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: #555;
    background: linear-gradient(160deg, #1c1c20, #101012);
}
.char-card-right {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 6px 12px 16px;
    overflow: hidden;
}
.char-card-name-block {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.char-card-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    flex-shrink: 0;
}
.char-card-label-row .char-card-label {
    margin-bottom: 0;
    flex-shrink: 0;
}
.char-card-meta-inline {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #6a6a72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    text-align: right;
}
.char-card-body-fields {
    flex: 2;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.char-card-body-fields .char-card-field {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.char-card-watermark {
    position: absolute;
    right: -10px;
    top: 20%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 28px solid rgba(43, 87, 198, .05);
    pointer-events: none;
}
.char-card-watermark::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px dashed rgba(43, 87, 198, .12);
    border-radius: 50%;
}
.char-card-field {
    position: relative;
    z-index: 1;
    min-width: 0;
}
.char-card-label {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #6a6a72;
    margin-bottom: 0;
    text-transform: uppercase;
    flex-shrink: 0;
}
.char-card-name {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: #ececf0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.char-card-val {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    color: #ececf0;
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
}
.char-card-identity {
    font-size: 16px;
    color: #ececf0;
}
.char-card-trait {
    font-size: 14px;
    color: #e0e0e6;
    letter-spacing: 0.02em;
}
.char-card-rule {
    height: 0;
    border-top: 1px dashed #2a2a30;
    margin: 0;
    flex-shrink: 0;
}
.char-card-barcode {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 8px;
    width: auto;
    background: repeating-linear-gradient(
        90deg,
        #3a3a42 0 1px,
        transparent 1px 2px,
        #3a3a42 2px 3px,
        transparent 3px 5px,
        #3a3a42 5px 6px,
        transparent 6px 7px,
        #3a3a42 7px 9px,
        transparent 9px 11px
    );
    opacity: .55;
    pointer-events: none;
    z-index: 1;
}
.char-card-new {
    border: 1px dashed #3a3a3e;
    box-shadow: none;
    background: transparent;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--sub);
}
.char-card-new .char-card-accent,
.char-card-new .char-card-mark,
.char-card-new .char-card-head,
.char-card-new .char-card-main {
    display: none;
}
.char-card-new-plus {
    font-size: 28px;
    line-height: 1;
    color: #777;
}
.char-card-new-label {
    font-size: 13px;
}
.char-card-drag-zone {
    cursor: grab;
    touch-action: none;
}
.char-card-drag-zone:active {
    cursor: grabbing;
}
.char-card-media {
    cursor: pointer;
    position: relative;
    z-index: 2;
}
.char-card [data-act="edit-char"] {
    cursor: pointer;
    position: relative;
    z-index: 2;
}
.char-card-watermark.char-card-drag-zone,
.char-card-barcode.char-card-drag-zone {
    pointer-events: auto;
    z-index: 1;
}
.char-card.is-dragging {
    box-shadow: 0 12px 32px rgba(0,0,0,.55);
    will-change: transform;
}
.char-card.is-shift {
    will-change: transform;
}
.char-card-grid.char-dragging {
    user-select: none;
    -webkit-user-select: none;
}

.char-edit-panel {
    --card-blue: #2b57c6;
    position: relative;
    margin: 12px 14px 4px;
    border-radius: 8px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 85% 20%, rgba(43, 87, 198, .08), transparent 55%),
        linear-gradient(180deg, #161618 0%, #0e0e10 100%);
    border: 1px solid var(--card-blue);
    box-shadow: inset 0 0 0 1px rgba(43, 87, 198, .45);
}
.char-edit-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 4px;
    border-bottom: 1px dashed #2e2e34;
}
.char-edit-body {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px 12px;
}
.char-edit-av {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-right: 4px;
    border-right: 1px solid #252528;
}
.char-edit-av button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.char-edit-av-hint {
    font-size: 9px;
    letter-spacing: 0.04em;
    color: #6a6a72;
    text-align: center;
    line-height: 1.3;
    max-width: 72px;
}
.char-edit-form {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}
.char-edit-row-basic {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.62fr) minmax(0, 0.62fr) minmax(0, 1fr);
    column-gap: 6px;
    row-gap: 3px;
    align-items: stretch;
}
.char-edit-row-basic .char-edit-label:nth-of-type(1),
.char-edit-row-basic input:nth-of-type(1) { grid-column: 1; }
.char-edit-row-basic .char-edit-label:nth-of-type(2),
.char-edit-row-basic input:nth-of-type(2) { grid-column: 2; }
.char-edit-row-basic .char-edit-label:nth-of-type(3),
.char-edit-row-basic input:nth-of-type(3) { grid-column: 3; }
.char-edit-row-basic .char-edit-label:nth-of-type(4),
.char-edit-row-basic input:nth-of-type(4) { grid-column: 4; }
.char-edit-row-basic .char-edit-label { grid-row: 1; }
.char-edit-row-basic input { grid-row: 2; min-width: 0; }
.char-edit-label,
.char-edit-row-rel label {
    display: block;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #6a6a72;
    margin: 0;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.char-edit-row-basic input,
.char-edit-row-rel textarea {
    width: 100%;
    background: #141416;
    border: 1px solid #2a2a30;
    border-radius: 4px;
    padding: 7px 8px;
    font-size: 13px;
    color: #ececf0;
    line-height: 1.35;
    box-sizing: border-box;
}
.char-edit-input-name {
    font-size: 15px;
    font-weight: 700;
}
.char-edit-row-rel textarea {
    min-height: 48px;
    resize: vertical;
    margin-top: 0;
}
.char-edit-divider {
    height: 0;
    border-top: 1px dashed #2a2a30;
}

.card-crop-panel {
    width: min(78vw, 280px);
    background: #121214;
    border-radius: 14px;
    padding: 14px;
    border: 1px solid #2a2a2e;
}
.card-crop-title {
    font-size: 14px;
    margin-bottom: 10px;
    text-align: center;
}
/* 与角色卡左侧封面区一致（竖向约 3:4），保证裁切预览=卡片效果 */
.card-crop-stage {
    width: min(100%, calc(60vh * 3 / 4));
    aspect-ratio: 3 / 4;
    max-height: 60vh;
    margin: 0 auto;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
    touch-action: none;
    cursor: grab;
    border: 1px solid #2a2a30;
}
.card-crop-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}
.card-crop-hint {
    font-size: 11px;
    color: var(--sub);
    text-align: center;
    margin: 10px 0 4px;
}

.field { padding: 10px 16px 0; }
.field label { display: block; font-size: 12px; color: var(--sub); margin-bottom: 6px; }
.field input, .field textarea {
    width: 100%;
    background: var(--input);
    border: 1px solid #222;
    border-radius: 10px;
    padding: 10px 12px;
}
.field textarea { min-height: 88px; line-height: 1.5; }

/* 人设 / 规则编辑：文本框占满导航下方剩余高度 */
.scroll.fill-editor {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 12px;
}
.fill-editor-field {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}
.fill-editor-field textarea {
    flex: 1;
    min-height: 0;
    height: 100%;
    resize: none;
}

.persona-editor .persona-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.persona-editor .persona-label-row label {
    margin-bottom: 0;
}
.persona-hint {
    font-size: 12px;
    color: var(--sub);
    line-height: 1.4;
    margin: -2px 0 8px;
}
.persona-ai-btn {
    flex-shrink: 0;
    font-size: 13px;
    color: #07c160;
    padding: 4px 10px;
    border-radius: 14px;
    background: rgba(7, 193, 96, 0.12);
}
.persona-ai-btn:disabled {
    opacity: 0.5;
}
.persona-editor #c-basic-persona {
    min-height: 72px;
    width: 100%;
    background: var(--input);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text);
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}

.voice-edit-tune { padding-bottom: 4px; }
.voice-edit-tune label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.voice-edit-val {
    font-size: 12px;
    color: #6e6e73;
    font-variant-numeric: tabular-nums;
}
.voice-edit-tune input[type="range"] {
    width: 100%;
    height: 4px;
    margin: 10px 0 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #2a2a2e;
    border-radius: 2px;
    outline: none;
}
.voice-edit-tune input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #7a7a80;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.voice-edit-tune input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #7a7a80;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.voice-edit-tune input[type="range"]::-moz-range-track {
    height: 4px;
    background: #2a2a2e;
    border-radius: 2px;
}
.voice-edit-tune input[type="range"]:active::-webkit-slider-thumb {
    background: #94949a;
}
.voice-edit-tune input[type="range"]:active::-moz-range-thumb {
    background: #94949a;
}
.trio { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; padding: 10px 16px 0; }
.hint { font-size: 12px; color: var(--sub); padding: 8px 16px 14px; }
.hint a, .hint .link { color: var(--sub); text-decoration: none; }
.section { font-size: 12px; color: var(--sub); padding: 16px 16px 6px; }

.ios-switch {
    position: relative;
    width: 51px;
    height: 31px;
    border-radius: 16px;
    background: #39393d;
    flex-shrink: 0;
    transition: background .22s ease;
}
.ios-switch.on { background: #34c759; }
.ios-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.28);
    transition: transform .22s ease;
}
.ios-switch.on .ios-switch-knob { transform: translateX(20px); }
.switch-btn {
    flex-shrink: 0;
    padding: 8px 2px;
    margin: -8px -2px;
    border: 0;
    background: transparent;
    color: inherit;
    display: flex;
    align-items: center;
}

.eye {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    color: #777; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
}
.eye svg { width: 18px; height: 18px; }
.wrap-input { position: relative; }
.wrap-input input { padding-right: 40px; }

.status-mini { font-size: 11px; color: var(--sub); margin-top: 2px; }
.call-green {
    display: flex; align-items: center; gap: 4px;
    background: #1f4d2a; color: #9dffb0;
    border-radius: 14px; padding: 6px 10px; font-size: 13px;
}
.call-green svg { width: 16px; height: 16px; }

.swipe-row {
    position: relative;
    overflow: hidden;
}
.swipe-del {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 76px;
    background: #c23a3a;
    color: #fff;
    font-size: 14px;
    z-index: 0;
}
.swipe-front {
    position: relative;
    z-index: 1;
    background: var(--bg);
}
.swipe-front.is-swiping {
    will-change: transform;
}
.voice-lib-front.selected { background: var(--select); }
.char-name {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.chat-who svg { width: 14px; height: 14px; }

.voice-preview {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ddd;
    border-radius: 10px;
    margin: -4px 0;
}
.voice-preview svg,
.voice-preview .speaker-ico {
    width: 22px;
    height: 22px;
    display: block;
}
.voice-preview:active { background: rgba(255,255,255,.08); }
.voice-preview .speaker-wave {
    transform-box: fill-box;
    transform-origin: 20% 50%;
    opacity: 1;
    transform: none;
}
.voice-preview:not(.playing) .speaker-wave-1,
.voice-preview:not(.playing) .speaker-wave-2 {
    animation: none;
    opacity: 1;
    transform: none;
}
/* 参考 iOS / 微信：无声 → 内圈 → 双圈 → 外圈 → 循环 */
.voice-preview.playing .speaker-wave-1 {
    animation: spk-wave-1 1.05s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
}
.voice-preview.playing .speaker-wave-2 {
    animation: spk-wave-2 1.05s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
}
@keyframes spk-wave-1 {
    0%, 100% { opacity: 0; transform: scale(0.88); }
    18%, 48% { opacity: 1; transform: scale(1); }
    68% { opacity: 0; transform: scale(1.02); }
}
@keyframes spk-wave-2 {
    0%, 18% { opacity: 0; transform: scale(0.88); }
    48%, 78% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
    .voice-preview.playing .speaker-wave-1,
    .voice-preview.playing .speaker-wave-2 {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.voice-lib-table { border-bottom: 1px solid var(--line); }
.voice-tune-head {
    display: grid;
    grid-template-columns: 40px 1fr 52px 52px 22px;
    gap: 8px;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 1px solid var(--line);
    color: var(--sub);
    font-size: 12px;
    background: #0a0a0c;
    position: sticky;
    top: 0;
    z-index: 2;
}
.voice-head-name { text-align: left; }
.voice-head-num { text-align: center; font-variant-numeric: tabular-nums; }
.voice-head-slot { width: 22px; }

.voice-lib-front {
    min-height: 64px;
    align-items: center;
    display: grid;
    grid-template-columns: 40px 1fr 52px 52px 22px;
    gap: 8px;
    width: 100%;
}
.voice-main {
    min-width: 0;
    text-align: left;
    background: transparent;
    color: inherit;
    padding: 0;
}
.voice-main .t {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.voice-tune-num {
    text-align: center;
    font-size: 13px;
    color: var(--sub);
    font-variant-numeric: tabular-nums;
    padding: 6px 4px;
    border-radius: 8px;
    cursor: ns-resize;
    user-select: none;
    outline: none;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.voice-tune-num:hover,
.voice-tune-num:focus {
    color: #fff;
    background: rgba(126, 200, 255, .14);
    box-shadow: 0 0 0 1px rgba(126, 200, 255, .35);
}
.reply-max-num {
    flex-shrink: 0;
    min-width: 40px;
    text-align: center;
    font-size: 14px;
    color: var(--sub);
    font-variant-numeric: tabular-nums;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: ns-resize;
    user-select: none;
    outline: none;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.reply-max-num:hover,
.reply-max-num:focus {
    color: #fff;
    background: rgba(126, 200, 255, .14);
    box-shadow: 0 0 0 1px rgba(126, 200, 255, .35);
}
#reply-rule-list {
    display: flex;
    flex-direction: column;
}
.reply-rule-row {
    touch-action: pan-y;
    background: var(--bg);
}
.reply-rule-row.is-dragging {
    box-shadow: 0 10px 28px rgba(0,0,0,.55);
    border-radius: 10px;
    background: #1a1a1c;
    will-change: transform;
}
#reply-rule-list.reply-dragging {
    user-select: none;
    -webkit-user-select: none;
}
#reply-rule-list.reply-dragging .reply-rule-row:not(.is-dragging) {
    will-change: transform;
}
.voice-lib-front .chev,
.voice-pick-mark {
    justify-self: end;
    text-align: right;
    min-width: 18px;
    color: var(--text);
    font-size: 15px;
}
.voice-pick-row {
    background: var(--bg);
}
.voice-pick-front {
    cursor: pointer;
}
.voice-lib-row {
    touch-action: pan-y;
    background: var(--bg);
}
.voice-lib-row.is-dragging {
    box-shadow: 0 10px 28px rgba(0,0,0,.55);
    border-radius: 10px;
    background: #1a1a1c;
    will-change: transform;
}
.voice-lib-row.is-dragging .swipe-front {
    border-bottom-color: transparent;
}
#voice-lib-list.voice-dragging {
    user-select: none;
    -webkit-user-select: none;
}
#voice-lib-list.voice-dragging .voice-lib-row:not(.is-dragging) {
    will-change: transform;
}
.scroll.scroll-lock {
    overflow: hidden !important;
    touch-action: none;
}

.call-screen {
    background: #000 !important;
    position: relative;
    overflow: hidden;
}
.call-screen > .call-back {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 5;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0.85;
}
.call-screen > .call-back svg { width: 22px; height: 22px; }
.call-top-title {
    position: absolute;
    left: 52px;
    right: 52px;
    top: 0;
    height: var(--nav-h, 52px);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}
.call-screen > .call-pip-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 5;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0.85;
}
.call-screen > .call-pip-btn svg { width: 20px; height: 20px; }
.call-video-plane {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #000;
    overflow: hidden;
    pointer-events: none;
}
.call-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.call-screen.is-video .call-video-plane,
.call-screen.is-voice .call-video-plane { display: block; }
/* 语音：头像毛玻璃背景（明暗中间态） */
.call-screen.is-voice .call-video-bg {
    filter: blur(52px) saturate(0.82) brightness(0.62);
    transform: scale(1.25);
    transform-origin: center center;
}
.call-screen.is-voice .call-video-plane::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.48);
    pointer-events: none;
}
.call-layout {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: visible;
}
.call-avatar-zone {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px 0;
    pointer-events: none;
    overflow: visible;
}
.call-avatar-aura {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    overflow: visible;
}
.call-avatar-core {
    position: relative;
    z-index: 3;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    /* 与涟漪错开间隔同步：4.8s / 4 圈 = 1.2s 发一圈 */
    animation: call-avatar-breathe 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    transform-origin: center center;
}
.call-avatar-core .avatar-call,
.call-avatar-core .avatar,
.call-avatar-core .avatar-fallback,
.call-avatar-zone .avatar-call,
.call-avatar-zone .avatar,
.call-avatar-zone .avatar-fallback {
    width: 120px;
    height: 120px;
    font-size: 44px;
    border-radius: 50%;
    display: block;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.28),
        0 0 22px rgba(255, 245, 230, 0.36),
        0 0 40px rgba(255, 230, 200, 0.16),
        0 10px 28px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.35s ease;
}
@keyframes call-avatar-breathe {
    /* 涟漪从边缘出发时头像轻推一下，再回落 */
    0% { transform: scale(1); }
    22% { transform: scale(1.055); }
    100% { transform: scale(1); }
}
/* 涟漪：细线圆环，外圈渐隐，范围更大 */
.call-ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    border: 1px solid rgba(255, 250, 240, 0.4);
    box-shadow: 0 0 16px rgba(255, 240, 220, 0.16);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    animation: call-ripple-pulse 4.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
.call-ripple.r2 { animation-delay: -1.2s; }
.call-ripple.r3 { animation-delay: -2.4s; }
.call-ripple.r4 { animation-delay: -3.6s; }
@keyframes call-ripple-pulse {
    0% {
        transform: scale(1);
        opacity: 0.58;
        border-color: rgba(255, 250, 240, 0.45);
    }
    70% { opacity: 0.1; }
    100% {
        transform: scale(2.45);
        opacity: 0;
        border-color: rgba(255, 250, 240, 0);
    }
}
.call-particles {
    position: absolute;
    inset: -56px;
    z-index: 2;
    pointer-events: none;
}
.call-particles i {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff8eb' stroke='%23fff8eb' stroke-width='1' stroke-linejoin='round' d='M12 6C12 8.2 8.2 12 6 12C8.2 12 12 15.5 12 18C12 15.5 15.5 12 18 12C15.5 12 12 8.2 12 6Z'/%3E%3C/svg%3E") center / contain no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 0 6px rgba(255, 236, 210, 0.75));
    opacity: 0;
    animation: call-particle-twinkle 3.6s ease-in-out infinite;
}
.call-particles i:nth-child(1) { left: 12%; top: 28%; animation-delay: 0s; }
.call-particles i:nth-child(2) { left: 82%; top: 22%; animation-delay: -0.5s; width: 9px; height: 9px; }
.call-particles i:nth-child(3) { left: 92%; top: 52%; animation-delay: -1.1s; }
.call-particles i:nth-child(4) { left: 78%; top: 78%; animation-delay: -1.7s; width: 9px; height: 9px; }
.call-particles i:nth-child(5) { left: 48%; top: 94%; animation-delay: -2.2s; }
.call-particles i:nth-child(6) { left: 14%; top: 76%; animation-delay: -2.8s; width: 9px; height: 9px; }
.call-particles i:nth-child(7) { left: 4%; top: 48%; animation-delay: -0.9s; }
.call-particles i:nth-child(8) { left: 38%; top: 6%; animation-delay: -1.9s; width: 9px; height: 9px; }
@keyframes call-particle-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    35% { opacity: 0.85; transform: scale(1); }
    55% { opacity: 0.35; transform: scale(0.9); }
    75% { opacity: 0.7; transform: scale(1.05); }
}
.call-avatar-aura.is-speaking .call-ripple {
    /* 仅加快频率，扩散范围与平时相同 */
    animation-duration: 2.2s;
}
.call-avatar-aura.is-speaking .call-ripple.r2 { animation-delay: -0.55s; }
.call-avatar-aura.is-speaking .call-ripple.r3 { animation-delay: -1.1s; }
.call-avatar-aura.is-speaking .call-ripple.r4 { animation-delay: -1.65s; }
.call-avatar-aura.is-speaking .call-avatar-core {
    /* 仅加快频率，缩放幅度不变 */
    animation-duration: 0.55s;
}
.call-avatar-aura.is-speaking .call-avatar-core .avatar-call,
.call-avatar-aura.is-speaking .call-avatar-core .avatar,
.call-avatar-aura.is-speaking .call-avatar-core .avatar-fallback {
    box-shadow:
        0 0 0 1.5px rgba(255, 250, 240, 0.5),
        0 0 32px rgba(255, 236, 210, 0.6),
        0 0 72px rgba(255, 210, 170, 0.32),
        0 10px 28px rgba(0, 0, 0, 0.4);
}
.call-avatar-aura.is-speaking .call-particles i {
    animation-duration: 1.8s;
    filter: drop-shadow(0 0 10px rgba(255, 240, 220, 0.95));
}
@media (prefers-reduced-motion: reduce) {
    .call-ripple,
    .call-particles i,
    .call-avatar-core {
        animation: none !important;
    }
    .call-ripple {
        transform: scale(1.45);
        opacity: 0.2;
    }
}
.call-footer {
    flex-shrink: 0;
    margin-top: auto;
    padding: 8px 24px calc(28px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}
/* 通话字幕：约在头像与底部控件之间偏上；毛玻璃底保证压在视频/头像上仍可读 */
.call-caption {
    position: absolute;
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: max-content;
    max-width: calc(100% - 48px);
    box-sizing: border-box;
    padding: 10px 18px;
    text-align: center;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    pointer-events: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    backdrop-filter: blur(18px) saturate(1.25);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.call-caption.is-empty {
    visibility: hidden;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.call-screen.is-video .call-footer {
    margin-top: auto;
    padding-top: 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
}
/* 隐藏控件：仅淡出，不收起占位，头像保持原位 */
.call-screen > .call-chrome,
.call-screen .call-chrome {
    transition: opacity 0.18s ease;
}
.call-screen.ui-hidden > .call-back.call-chrome,
.call-screen.ui-hidden > .call-pip-btn.call-chrome,
.call-screen.ui-hidden > .call-top-title.call-chrome,
.call-screen.ui-hidden .call-footer.call-chrome {
    opacity: 0;
    pointer-events: none;
}
.call-meta {
    text-align: center;
}
.call-timer {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.72);
    font-variant-numeric: tabular-nums;
}
.call-actions {
    width: 100%;
    max-width: 320px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
}
.call-act {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: transparent;
    padding: 0;
}
.call-act svg { width: 26px; height: 26px; }
.call-act.off { color: #ff453a; }
.call-act.call-hang {
    width: 68px;
    height: 68px;
    background: #ff3b30;
    color: #fff;
}
.call-act.call-hang svg { width: 28px; height: 28px; }

/* 通话浮窗：fixed，坐标按 #phone 矩形对齐（不贴浏览器黑边） */
.call-pip {
    display: none;
    position: fixed;
    z-index: 40;
    width: 108px;
    height: 162px;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    color: #fff;
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.call-pip.show { display: block; }
.call-pip.dragging { cursor: grabbing; }
.call-pip-plane {
    position: absolute;
    inset: 0;
    background: #000;
    pointer-events: none;
    overflow: hidden;
}
.call-pip:not(.is-video) .call-pip-plane {
    display: none;
}
.call-pip-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.call-pip.is-video .call-pip-stage { display: none; }
.call-pip.is-video .call-pip-plane { display: block; }
.call-pip-stage {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 28px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #121214;
    pointer-events: none;
}
.call-pip-aura {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}
.call-pip-core {
    position: relative;
    z-index: 3;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    animation: call-pip-breathe 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    transform-origin: center center;
}
.call-pip-core .call-pip-avatar,
.call-pip-core .avatar,
.call-pip-core .avatar-fallback {
    width: 56px;
    height: 56px;
    font-size: 22px;
    border-radius: 50%;
    display: block;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.28),
        0 0 12px rgba(255, 245, 230, 0.28),
        0 4px 12px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.35s ease;
}
.call-pip-ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 250, 240, 0.4);
    box-shadow: 0 0 10px rgba(255, 240, 220, 0.14);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    animation: call-pip-ripple-pulse 4.8s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
@keyframes call-pip-ripple-pulse {
    0% {
        transform: scale(1);
        opacity: 0.55;
        border-color: rgba(255, 250, 240, 0.45);
    }
    70% { opacity: 0.1; }
    100% {
        transform: scale(1.72);
        opacity: 0;
        border-color: rgba(255, 250, 240, 0);
    }
}
.call-pip-stars {
    position: absolute;
    inset: -6px;
    z-index: 2;
    pointer-events: none;
}
.call-pip-stars i {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff8eb' stroke='%23fff8eb' stroke-width='1' stroke-linejoin='round' d='M12 6C12 8.2 8.2 12 6 12C8.2 12 12 15.5 12 18C12 15.5 15.5 12 18 12C15.5 12 12 8.2 12 6Z'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 0 4px rgba(255, 236, 210, 0.7));
    opacity: 0;
    animation: call-particle-twinkle 3.6s ease-in-out infinite;
}
.call-pip-stars i:nth-child(1) { left: 46%; top: 4%; animation-delay: 0s; }
.call-pip-stars i:nth-child(2) { left: 86%; top: 32%; animation-delay: -0.6s; width: 6px; height: 6px; }
.call-pip-stars i:nth-child(3) { left: 72%; top: 82%; animation-delay: -1.4s; }
.call-pip-stars i:nth-child(4) { left: 16%; top: 78%; animation-delay: -2.1s; width: 6px; height: 6px; }
.call-pip-stars i:nth-child(5) { left: 6%; top: 34%; animation-delay: -2.8s; }
@keyframes call-pip-breathe {
    0% { transform: scale(1); }
    22% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.call-pip-aura.is-speaking .call-pip-ripple {
    animation-duration: 2.2s;
}
.call-pip-aura.is-speaking .call-pip-core {
    animation-duration: 0.55s;
}
.call-pip-aura.is-speaking .call-pip-core .call-pip-avatar,
.call-pip-aura.is-speaking .call-pip-core .avatar,
.call-pip-aura.is-speaking .call-pip-core .avatar-fallback {
    box-shadow:
        0 0 0 1.5px rgba(255, 250, 240, 0.5),
        0 0 18px rgba(255, 236, 210, 0.55),
        0 0 36px rgba(255, 210, 170, 0.28),
        0 4px 12px rgba(0, 0, 0, 0.35);
}
.call-pip-aura.is-speaking .call-pip-stars i {
    animation-duration: 1.8s;
    filter: drop-shadow(0 0 6px rgba(255, 240, 220, 0.95));
}
@media (prefers-reduced-motion: reduce) {
    .call-pip-ripple,
    .call-pip-stars i,
    .call-pip-core {
        animation: none !important;
    }
}
.call-pip-timer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    z-index: 2;
    text-align: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    pointer-events: none;
}
.call-pip:not(.is-video) .call-pip-timer {
    bottom: 0;
    padding: 0 0 10px;
    background: #0a0a0a;
}

.toast {
    position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%);
    background: rgba(30,30,32,.94); color: #fff;
    padding: 10px 16px; border-radius: 10px; font-size: 13px;
    max-width: 80%; z-index: 20; pointer-events: none;
}
.mask {
    position: absolute; inset: 0; background: rgba(0,0,0,.55);
    display: flex; align-items: flex-end; z-index: 15;
}
.mask:has(.dialog) {
    align-items: center;
    justify-content: center;
}
.sheet {
    width: 100%; background: #1c1c1e; border-radius: 16px 16px 0 0;
    padding: 8px 0 20px;
}
.sheet-item { width: 100%; padding: 14px 18px; text-align: left; font-size: 16px; }
.sheet-item.danger { color: var(--red); }
.dialog {
    margin: 0 24px; background: #2c2c2e; border-radius: 14px; padding: 18px;
    width: 100%; max-width: 320px;
}
.dialog h3 { font-size: 16px; margin-bottom: 8px; }
.dialog p { font-size: 13px; color: var(--sub); margin-bottom: 16px; }
.dialog .acts { display: flex; justify-content: flex-end; gap: 8px; }
.dialog .acts-three { flex-wrap: wrap; justify-content: stretch; }
.dialog .acts-three button { flex: 1 1 auto; min-width: 0; padding: 8px 10px; }
.dialog .ok { color: var(--red); padding: 6px 8px; }

.placeholder-note {
    margin: 20px 16px; color: var(--sub); font-size: 13px; line-height: 1.6;
}

.star { color: #888; width: 28px; flex-shrink: 0; }
.star.on { color: #e8c36a; }
.star svg { width: 22px; height: 22px; }

.mem-item { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mem-item .mem-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.mem-item .when {
    flex: 1;
    min-width: 0;
    color: var(--sub);
    font-size: 11px;
    line-height: 1.3;
}
.mem-item .mem-del {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--sub);
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.9;
}
.mem-item .mem-del svg {
    width: 16px;
    height: 16px;
    display: block;
}
.mem-item .mem-del:active { opacity: 0.55; }
.mem-item .tx {
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    cursor: text;
    border-radius: 6px;
    outline: none;
}
.mem-item .tx:focus {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.mem-item textarea.mem-edit {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 8px;
    font: inherit;
    font-size: 14px;
    line-height: 1.45;
    color: inherit;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 6px;
    resize: vertical;
    outline: none;
}

/* 记忆库：顶部工具栏 + 折叠分类 */
.mem-screen .mem-scroll {
    padding-bottom: 24px;
}
.mem-toolbar {
    display: flex;
    gap: 10px;
    padding: 14px 16px 10px;
    justify-content: space-between;
}
.mem-tool-btn {
    flex: 1;
    min-width: 0;
    min-height: 68px;
    padding: 8px 4px 6px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    color: rgba(255,255,255,.86);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: border-color .18s, background .18s;
}
.mem-tool-ico {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mem-tool-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}
.mem-tool-label {
    font-size: 10px;
    line-height: 1.2;
    color: rgba(255,255,255,.62);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.mem-tool-btn.on .mem-tool-label {
    color: rgba(180,200,255,.88);
}
.mem-tool-btn:active {
    opacity: 0.72;
}
.mem-tool-btn.on {
    border-color: rgba(99,130,255,.55);
    background: rgba(43,87,198,.14);
    box-shadow: inset 0 0 0 1px rgba(99,130,255,.18);
}
.mem-write-panel {
    padding: 0 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mem-write-panel textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 72px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    color: inherit;
    font-size: 14px;
    line-height: 1.45;
    resize: vertical;
    outline: none;
}
.mem-write-panel textarea:focus {
    border-color: rgba(99,130,255,.45);
    box-shadow: inset 0 0 0 1px rgba(99,130,255,.2);
}
.mem-write-submit {
    align-self: flex-end;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.88);
    font-size: 13px;
}
.mem-sections {
    border-top: 1px solid var(--line);
}
.mem-section {
    border-bottom: 1px solid var(--line);
}
.mem-section-hd {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: rgba(255,255,255,.025);
    border: 0;
    color: #f2f2f2;
    font-size: 14px;
    text-align: left;
}
.mem-section-title {
    flex: 1;
    min-width: 0;
    font-weight: 500;
}
.mem-section-count {
    color: var(--sub);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.mem-section-chev {
    width: 18px;
    height: 18px;
    color: var(--sub);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}
.mem-section-chev svg {
    width: 16px;
    height: 16px;
    display: block;
}
.mem-section.open .mem-section-chev {
    transform: rotate(90deg);
}
.mem-section-body {
    display: none;
}
.mem-section.open .mem-section-body {
    display: block;
}
.mem-empty {
    padding: 14px 16px 16px;
    color: var(--sub);
    font-size: 13px;
}

#avatar-layer { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
#avatar-layer:not(:empty) { pointer-events: auto; }
.av-mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.av-card {
    --card-blue: #2b57c6;
    --card-blue-soft: rgba(43, 87, 198, .35);
    --av-line: rgba(74, 122, 232, 0.55);
    --av-line-dim: rgba(36, 58, 130, 0.38);
    --av-ball: #4a7ae8;
    --av-ball-dim: #243a82;
    --av-star-cols: 8;
    --av-star-rows: 5;
    --av-star-tile: calc(280px / var(--av-star-cols));
    --av-star-tile-x: calc(var(--av-star-tile) + 6px);
    --av-star-tile-y: calc(var(--av-star-tile) + 6px);
    --av-body-pt: 10px;
    --av-portrait-zone-h: 224px;
    --av-portrait-size: 168px;
    --av-cover-w: 168px;
    --av-cover-h: 224px;
    --av-cover-pad: 11px;
    --av-orbit-mask-r: 109px;
    --av-orbit-mask-y: calc(var(--av-body-pt) + (var(--av-portrait-zone-h) - var(--av-portrait-size)) / 2 + var(--av-portrait-size) / 2);
    --av-star-corner-size: 17px;
    /* 背景星 grad 第1行 / 第3行（叠暗底后） */
    --av-star-bg-row1: #1e3151;
    --av-star-bg-row1-stroke: #3d628f;
    --av-star-bg-row3: #172339;
    --av-star-bg-scale: calc(1.73 * (var(--av-star-tile-x) - 3px) / var(--av-star-tile-x));
    --av-star-tr-col: 3;
    --av-card-head-pt: 11px;
    --av-card-head-pb: 11px;
    --av-card-head-inner: 13px;
    --av-card-head-h: calc(var(--av-card-head-pt) + var(--av-card-head-pb) + var(--av-card-head-inner));
    --av-star-tr-size: calc(var(--av-star-corner-size) + 2px);
    position: relative;
    width: 280px;
    overflow: visible;
    text-align: center;
}
.av-card-surface {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(180deg, #161618 0%, #0e0e10 100%);
    border: 1px solid var(--card-blue);
    box-shadow:
        inset 0 0 0 1px rgba(43, 87, 198, .45),
        0 16px 48px rgba(0, 0, 0, .55);
    display: flex;
    flex-direction: column;
}
.av-card-star-tr {
    position: absolute;
    z-index: 2;
    top: calc((var(--av-card-head-h) - var(--av-star-tr-size)) / 2);
    left: calc(50% + var(--av-star-tr-col) * var(--av-star-tile-x));
    transform: translateX(-50%);
    width: var(--av-star-tr-size);
    height: var(--av-star-tr-size);
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235a8ae8' stroke='%235a8ae8' stroke-width='1' stroke-linejoin='round' d='M12 6C12 8.2 8.2 12 6 12C8.2 12 12 15.5 12 18C12 15.5 15.5 12 18 12C15.5 12 12 8.2 12 6Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.av-card-head {
    position: relative;
    z-index: 1;
    text-align: left;
    flex-shrink: 0;
    padding: var(--av-card-head-pt) 12px var(--av-card-head-pb);
    line-height: var(--av-card-head-inner);
}
.av-card-head .char-card-head-title {
    flex: 1;
    min-width: 0;
}
.av-card-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--av-body-pt) 16px 30px;
    overflow: hidden;
}
.av-card-stars-bg {
    position: absolute;
    left: 50%;
    top: 0;
    width: 280px;
    transform: translateX(-50%);
    /* 5 行 8 列：顶行半切 + 4 整行 */
    height: calc(var(--av-star-tile-y) * (var(--av-star-rows) - 0.5));
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    background-image: linear-gradient(180deg, rgba(38, 68, 118, 0.62) 0%, rgba(20, 36, 62, 0.48) 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' transform='translate(12 12) scale(1.603) translate(-12 -12)' d='M12 5.5C12 8.3 8.3 12 5.5 12C8.3 12 12 15.2 12 18.5C12 15.2 15.2 12 18.5 12C15.2 12 12 8.3 12 5.5Z'/%3E%3C/svg%3E"),
        radial-gradient(
            circle at 50% var(--av-orbit-mask-y),
            transparent 0,
            transparent var(--av-orbit-mask-r),
            #000 var(--av-orbit-mask-r)
        );
    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' transform='translate(12 12) scale(1.603) translate(-12 -12)' d='M12 5.5C12 8.3 8.3 12 5.5 12C8.3 12 12 15.2 12 18.5C12 15.2 15.2 12 18.5 12C15.2 12 12 8.3 12 5.5Z'/%3E%3C/svg%3E"),
        radial-gradient(
            circle at 50% var(--av-orbit-mask-y),
            transparent 0,
            transparent var(--av-orbit-mask-r),
            #000 var(--av-orbit-mask-r)
        );
    -webkit-mask-size: var(--av-star-tile-x) var(--av-star-tile-y), 100% 100%;
    mask-size: var(--av-star-tile-x) var(--av-star-tile-y), 100% 100%;
    -webkit-mask-position: center calc(var(--av-star-tile-y) * -0.5), 0 0;
    mask-position: center calc(var(--av-star-tile-y) * -0.5), 0 0;
    -webkit-mask-repeat: repeat, no-repeat;
    mask-repeat: repeat, no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
.av-card-portrait-zone {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--av-portrait-zone-h);
    overflow: visible;
}
.av-card-info {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 100%;
    padding-top: 14px;
}
.av-card-barcode {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 13px;
    height: 8px;
    z-index: 1;
    background: repeating-linear-gradient(
        90deg,
        #1a2d52 0 1px,
        transparent 1px 3px,
        #152444 3px 4px,
        transparent 4px 6px,
        #1e3258 6px 7px,
        transparent 7px 9px,
        #172948 9px 10px,
        transparent 10px 12px
    );
    opacity: .62;
    pointer-events: none;
}
.av-card-stars-br {
    position: absolute;
    right: -18px;
    bottom: 25px;
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(2, auto);
    gap: 0;
    align-items: center;
    justify-items: center;
    pointer-events: none;
    z-index: 3;
    background: transparent;
}
.av-star-br {
    display: block;
    width: calc(var(--av-star-corner-size) + 2px);
    height: calc(var(--av-star-corner-size) + 2px);
    opacity: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231e3151' stroke='%233d628f' stroke-width='1' stroke-linejoin='round' d='M12 6C12 8.2 8.2 12 6 12C8.2 12 12 15.5 12 18C12 15.5 15.5 12 18 12C15.5 12 12 8.2 12 6Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.av-portrait {
    position: relative;
    width: var(--av-portrait-size);
    height: var(--av-portrait-size);
    margin: 0 auto;
    flex-shrink: 0;
    overflow: visible;
    z-index: 1;
}
.av-ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 0;
}
.av-ripple-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.av-ripple-orbit-1 {
    width: 192px;
    height: 192px;
    --orbit-r: 96px;
}
.av-ripple-orbit-2 {
    width: 218px;
    height: 218px;
    --orbit-r: 109px;
}
.av-ripple-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--av-line);
    box-shadow: none;
    pointer-events: none;
}
.av-ripple-orbit-2 .av-ripple-ring {
    border-color: var(--av-line-dim);
}
.av-orbit {
    position: absolute;
    inset: 0;
    animation: av-orbit-spin-1 26s linear infinite;
}
.av-orbit-2 {
    animation-name: av-orbit-spin-2;
    animation-duration: 38s;
}
.av-orbit-ball {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--ball-size, 6px);
    height: var(--ball-size, 6px);
    border-radius: 50%;
    background: var(--av-ball);
    opacity: 1;
    box-shadow: none;
    transform: translate(-50%, -50%) rotate(var(--ball-deg, -90deg)) translateY(calc(-1 * var(--orbit-r))) rotate(calc(-1 * var(--ball-deg, -90deg)));
}
.av-ripple-orbit-2 .av-orbit-ball {
    background: var(--av-ball-dim);
}
.av-orbit-ball.sz-s { --ball-size: 5px; }
.av-orbit-ball.sz-m { --ball-size: 6px; }
.av-orbit-ball.sz-l { --ball-size: 7px; }
@keyframes av-orbit-spin-1 {
    from { transform: rotate(150deg); }
    to { transform: rotate(510deg); }
}
@keyframes av-orbit-spin-2 {
    from { transform: rotate(60deg); }
    to { transform: rotate(420deg); }
}
@media (prefers-reduced-motion: reduce) {
    .av-orbit { animation: none !important; }
    .av-orbit-1 { transform: rotate(150deg); }
    .av-orbit-2 { transform: rotate(60deg); }
}
.av-card-group .av-card-stars-bg {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' transform='translate(12 12) scale(1.603) translate(-12 -12)' d='M12 5.5C12 8.3 8.3 12 5.5 12C8.3 12 12 15.2 12 18.5C12 15.2 15.2 12 18.5 12C15.2 12 12 8.3 12 5.5Z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 185'%3E%3Crect width='280' height='185' fill='%23fff'/%3E%3Crect x='45' y='27' width='190' height='190' rx='12' fill='%23000'/%3E%3C/svg%3E");
    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' transform='translate(12 12) scale(1.603) translate(-12 -12)' d='M12 5.5C12 8.3 8.3 12 5.5 12C8.3 12 12 15.2 12 18.5C12 15.2 15.2 12 18.5 12C15.2 12 12 8.3 12 5.5Z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 185'%3E%3Crect width='280' height='185' fill='%23fff'/%3E%3Crect x='45' y='27' width='190' height='190' rx='12' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: var(--av-star-tile-x) var(--av-star-tile-y), 100% 100%;
    mask-size: var(--av-star-tile-x) var(--av-star-tile-y), 100% 100%;
    -webkit-mask-position: center calc(var(--av-star-tile-y) * -0.5), 0 0;
    mask-position: center calc(var(--av-star-tile-y) * -0.5), 0 0;
    -webkit-mask-repeat: repeat, no-repeat;
    mask-repeat: repeat, no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
.av-card-group .av-card-portrait-zone::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--av-portrait-size) + 22px);
    height: calc(var(--av-portrait-size) + 22px);
    background: #0e0e10;
    border-radius: 12px;
    z-index: 0;
    pointer-events: none;
}
.av-card-group .av-portrait-group {
    position: relative;
    z-index: 2;
    overflow: visible;
}
.av-card-group .av-card-info {
    padding-top: 2px;
}
.av-portrait-group .av-big-group-wrap {
    position: relative;
    z-index: 2;
    width: calc(var(--av-portrait-size) + 22px);
    height: calc(var(--av-portrait-size) + 22px);
    margin: -11px;
    overflow: visible;
}
.av-portrait-group .av-group-star-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 12px;
    background: #0e0e10;
}
.av-portrait-group .av-group-frame {
    position: absolute;
    top: 11px;
    left: 11px;
    z-index: 2;
    width: var(--av-portrait-size);
    height: var(--av-portrait-size);
    border-radius: 8px;
    overflow: hidden;
    background: #0e0e10;
    border: 2px solid rgba(43, 87, 198, .35);
    box-shadow:
        0 0 0 1px rgba(43, 87, 198, .2),
        0 0 24px rgba(43, 87, 198, .12);
}
.av-portrait-group .group-av {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: #0e0e10;
}
.av-group-mark {
    position: absolute;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 3;
    background: center / contain no-repeat;
}
.av-group-mark-tl {
    top: calc((-11px + 6px) / 2);
    left: calc((-11px + 6px) / 2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%231e3151' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 16V5h11'/%3E%3C/svg%3E");
}
.av-group-mark-tr {
    top: calc((-11px + 6px) / 2);
    right: calc((-11px + 6px) / 2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%231e3151' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M4 5h11v11'/%3E%3C/svg%3E");
}
.av-group-mark-bl {
    bottom: calc((-11px + 6px) / 2);
    left: calc((-11px + 6px) / 2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%231e3151' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 4v11h11'/%3E%3C/svg%3E");
}
.av-group-mark-br {
    bottom: calc((-11px + 6px) / 2);
    right: calc((-11px + 6px) / 2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%231e3151' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M15 4v11H4'/%3E%3C/svg%3E");
}
.av-card-cover .av-card-stars-bg {
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' transform='translate(12 12) scale(1.603) translate(-12 -12)' d='M12 5.5C12 8.3 8.3 12 5.5 12C8.3 12 12 15.2 12 18.5C12 15.2 15.2 12 18.5 12C15.2 12 12 8.3 12 5.5Z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 185'%3E%3Crect width='280' height='185' fill='%23fff'/%3E%3Crect x='45' y='11' width='190' height='246' rx='12' fill='%23000'/%3E%3C/svg%3E");
    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' transform='translate(12 12) scale(1.603) translate(-12 -12)' d='M12 5.5C12 8.3 8.3 12 5.5 12C8.3 12 12 15.2 12 18.5C12 15.2 15.2 12 18.5 12C15.2 12 12 8.3 12 5.5Z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 185'%3E%3Crect width='280' height='185' fill='%23fff'/%3E%3Crect x='45' y='11' width='190' height='246' rx='12' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: var(--av-star-tile-x) var(--av-star-tile-y), 100% 100%;
    mask-size: var(--av-star-tile-x) var(--av-star-tile-y), 100% 100%;
    -webkit-mask-position: center calc(var(--av-star-tile-y) * -0.5), 0 0;
    mask-position: center calc(var(--av-star-tile-y) * -0.5), 0 0;
    -webkit-mask-repeat: repeat, no-repeat;
    mask-repeat: repeat, no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
.av-card-cover .av-card-portrait-zone::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--av-cover-w) + 2 * var(--av-cover-pad));
    height: calc(var(--av-cover-h) + 2 * var(--av-cover-pad));
    background: #0e0e10;
    border-radius: 12px;
    z-index: 0;
    pointer-events: none;
}
.av-card-cover .av-portrait-cover {
    position: relative;
    z-index: 2;
    width: var(--av-cover-w);
    height: var(--av-cover-h);
    overflow: visible;
}
.av-portrait-cover .av-cover-wrap {
    position: relative;
    z-index: 2;
    width: calc(var(--av-cover-w) + 2 * var(--av-cover-pad));
    height: calc(var(--av-cover-h) + 2 * var(--av-cover-pad));
    margin: calc(-1 * var(--av-cover-pad));
    overflow: visible;
}
.av-portrait-cover .av-cover-star-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 12px;
    background: #0e0e10;
}
.av-portrait-cover .av-cover-frame {
    position: absolute;
    top: var(--av-cover-pad);
    left: var(--av-cover-pad);
    z-index: 2;
    width: var(--av-cover-w);
    height: var(--av-cover-h);
    border-radius: 8px;
    overflow: hidden;
    background: #0e0e10;
    border: 2px solid rgba(43, 87, 198, .35);
    box-shadow:
        0 0 0 1px rgba(43, 87, 198, .2),
        0 0 24px rgba(43, 87, 198, .12);
}
.av-portrait-cover .av-cover-img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    display: block;
    cursor: pointer;
    border-radius: 0;
    background: #0e0e10;
}
.av-portrait-cover .av-cover-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    font-weight: 700;
    color: #9aa0ab;
    cursor: pointer;
}
.av-portrait-group .group-av span,
.av-portrait-group .group-av .avatar-fallback,
.av-portrait-group .group-av-cell span {
    font-size: 42px;
}
.av-portrait-group .group-av-cell:not(.group-av-fallback) {
    cursor: grab;
    touch-action: none;
}
.av-portrait-group .group-av-cell.grabbing {
    cursor: grabbing;
}
.av-portrait .av-big,
.av-portrait .av-big-fallback {
    position: relative;
    z-index: 1;
    width: var(--av-portrait-size);
    height: var(--av-portrait-size);
    border-radius: 50%;
    margin: 0;
    object-fit: cover;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    font-weight: 700;
    border: 2px solid rgba(43, 87, 198, .35);
    box-shadow:
        0 0 0 1px rgba(43, 87, 198, .2),
        0 0 24px rgba(43, 87, 198, .12);
}
.av-name {
    position: relative;
    z-index: 1;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
}
.av-meta {
    position: relative;
    z-index: 1;
    color: #9aa0ab;
    font-size: 13px;
    margin-top: 5px;
    letter-spacing: 0.02em;
    line-height: 1.2;
}
.av-crop-card {
    --card-blue: #2b57c6;
    width: 300px;
    padding: 16px 10px 18px;
    border-radius: 8px;
}
.crop-stage {
    width: 280px;
    height: 280px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
    touch-action: none;
    cursor: grab;
}
.crop-stage.grabbing { cursor: grabbing; }
.crop-stage img {
    position: absolute;
    max-width: none;
    max-height: none;
    object-fit: fill;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.crop-frost {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: rgba(6, 10, 18, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    -webkit-mask-image: radial-gradient(circle closest-side at center, transparent calc(100% - 1px), #000 100%);
    mask-image: radial-gradient(circle closest-side at center, transparent calc(100% - 1px), #000 100%);
}
.crop-ring {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.crop-ring::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(74, 122, 232, .55);
}
.av-crop-cover .crop-stage {
    width: 210px;
    height: 280px;
}
.av-crop-cover .crop-frost {
    background: rgba(6, 10, 18, .72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
    mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
    -webkit-mask-size: 100% 100%, calc(100% - 2px) calc(100% - 2px);
    mask-size: 100% 100%, calc(100% - 2px) calc(100% - 2px);
    -webkit-mask-position: center, center;
    mask-position: center, center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.av-crop-cover .crop-ring::after {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(74, 122, 232, .55);
}
.crop-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding: 0 12px;
}
.crop-actions button {
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 15px;
}
.av-ok { background: #5e2e2e; color: #fff; }
.av-crop-card .av-ok { background: var(--card-blue); color: #fff; }
.av-hit { padding: 0; line-height: 0; border-radius: 50%; flex-shrink: 0; }
.profile-screen { background: var(--profile-bg); }
.profile-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 2;
}
.profile-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 16px 18px;
}
.profile-hero .avatar-lg { width: 72px; height: 72px; font-size: 28px; pointer-events: none; }
.profile-name { font-size: 20px; font-weight: 700; }
.profile-meta { color: var(--sub); font-size: 13px; margin-top: 6px; }
.profile-menu { border-top: 1px solid var(--profile-line); }
/* 资料菜单：无副标题时标题垂直居中；图标/文字统一白色 */
.profile-screen .profile-menu .row {
    min-height: 52px;
    padding: 14px 16px;
    align-items: center;
}
.profile-screen .profile-menu .row .d { display: none; }
.profile-screen .profile-menu .row .t {
    color: var(--text);
    line-height: 1.25;
    margin: 0;
}
.group-members-panel {
    padding: 18px 12px 8px;
    border-bottom: 1px solid #222;
}
.group-members-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 10px;
}
.group-member-cell {
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.group-member-av,
.group-member-cell .avatar,
.group-member-cell .avatar-fallback {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    font-size: 18px !important;
}
.group-member-name {
    width: 100%;
    font-size: 12px;
    color: #bbb;
    text-align: center;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-row-val {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #888;
    font-size: 13px;
    margin-right: 4px;
}
.profile-screen .profile-menu .row.danger .t { color: #e86a6a; }
.dialog .field { margin: 12px 0 4px; }
.dialog .field input,
.dialog .field textarea {
    width: 100%;
    box-sizing: border-box;
}
.profile-screen .profile-menu .ico {
    color: var(--text);
}
.profile-screen .profile-menu .chev {
    color: rgba(255, 255, 255, 0.55);
}

/* ===== 哄睡磁带档案（配色对齐角色卡 CHARACTER I.D.） ===== */
:root {
    --lull-accent: #2b57c6;
    --lull-accent-soft: rgba(43, 87, 198, .35);
}
.lull-tape-list {
    padding: 16px 14px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.lull-tape-card {
    border: none;
    background: transparent;
    padding: 0;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    text-align: left;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.lull-tape {
    --tape-body: #121214;
    --tape-face: #1a1a1e;
    --tape-label: #0e0e10;
    --tape-ink: #ececf0;
    --tape-accent: var(--lull-accent);
    position: relative;
    width: 100%;
    aspect-ratio: 1.55 / 1;
    border-radius: 8px;
    background:
        radial-gradient(ellipse 80% 60% at 85% 20%, rgba(43, 87, 198, .1), transparent 55%),
        linear-gradient(180deg, #161618 0%, var(--tape-body) 40%, #0e0e10 100%);
    border: 1px solid var(--lull-accent);
    box-shadow: inset 0 0 0 1px rgba(43, 87, 198, .45);
    overflow: hidden;
    user-select: none;
    touch-action: none;
    flex-shrink: 0;
}
.lull-tape-accent {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lull-accent), #4a7ae8 55%, transparent);
    pointer-events: none;
    z-index: 3;
}
.lull-tape-mark {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid var(--lull-accent-soft);
    pointer-events: none;
    z-index: 3;
}
.lull-tape-mark-tl {
    top: 8px;
    left: 8px;
    border-right: none;
    border-bottom: none;
}
.lull-tape-mark-br {
    right: 8px;
    bottom: 8px;
    border-left: none;
    border-top: none;
}
.lull-tape-head {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 0;
    pointer-events: none;
}
.lull-tape-head-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lull-accent);
    box-shadow: 0 0 0 2px rgba(43, 87, 198, .2);
    flex-shrink: 0;
}
.lull-tape-head-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--lull-accent);
}
.lull-tape-head-meta {
    margin-left: auto;
    font-size: 8px;
    letter-spacing: 0.1em;
    color: #5a5a62;
}
.lull-tape-label {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 18%;
    height: 28%;
    background: var(--tape-label);
    border-radius: 2px;
    border: 1px solid rgba(43, 87, 198, .35);
    box-shadow: inset 0 0 0 1px rgba(43, 87, 198, .15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    color: var(--tape-ink);
    text-align: center;
}
.lull-tape-label .t-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.25;
    word-break: break-all;
    text-align: center;
    width: 100%;
    color: #ececf0;
}
.lull-tape-label .t-range {
    margin-top: 4px;
    font-size: 11px;
    opacity: 0.72;
    letter-spacing: 0.16em;
    font-variant-numeric: tabular-nums;
    text-align: center;
    width: 100%;
    color: #b8b8c0;
}
.lull-tape-window {
    --reel-size: 18%;
    --reel-period: 1.1s;
    --reel-period-rw: 0.55s;
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    height: 28%;
    background: #0c0c0e;
    border-radius: 2px;
    border: 1px solid rgba(43, 87, 198, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 39%;
    padding: 0 4%;
    container-type: inline-size;
    container-name: lull-window;
}
.lull-reel {
    width: var(--reel-size);
    aspect-ratio: 1;
    flex-shrink: 0;
    border-radius: 50%;
    background: #1a1a20;
    border: 2px solid rgba(74, 122, 232, .55);
    box-shadow: inset 0 0 0 4px #0e0e12;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.lull-reel-gear {
    width: 72%;
    height: 72%;
    display: block;
    flex-shrink: 0;
    color: #4a7ae8;
    opacity: .75;
}
.lull-tape.playing .lull-reel { animation: lull-reel-cw var(--reel-period) linear infinite; }
.lull-tape.rewinding .lull-reel { animation: lull-reel-ccw var(--reel-period-rw) linear infinite; }
@keyframes lull-reel-cw { to { transform: rotate(360deg); } }
@keyframes lull-reel-ccw { to { transform: rotate(-360deg); } }
/* 两卷盘之间的磁带虚线：线速度 = 卷盘外缘 πD / 周期
   不用 translate(-50%)，避免半像素导致上下线视觉粗细不一致 */
.lull-tape-ribbons {
    position: absolute;
    left: 33%;
    right: 33%;
    top: 26%;
    bottom: 26%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.lull-tape-ribbon {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 1px;
    box-sizing: border-box;
    background-color: transparent;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(74, 122, 232, 0.65) 0 9px,
        transparent 9px 12px
    );
    background-size: 12px 2px;
    background-repeat: repeat-x;
    background-position: 0 0;
    opacity: 1;
    transform: translateZ(0);
}
.lull-tape-ribbon.top { top: 0; }
.lull-tape-ribbon.bot { bottom: 0; top: auto; }
.lull-tape.playing .lull-tape-ribbon.top {
    animation: lull-ribbon-right var(--reel-period) linear infinite;
}
.lull-tape.playing .lull-tape-ribbon.bot {
    animation: lull-ribbon-left var(--reel-period) linear infinite;
}
.lull-tape.rewinding .lull-tape-ribbon.top {
    animation: lull-ribbon-left var(--reel-period-rw) linear infinite;
}
.lull-tape.rewinding .lull-tape-ribbon.bot {
    animation: lull-ribbon-right var(--reel-period-rw) linear infinite;
}
@keyframes lull-ribbon-right {
    to { background-position: 56px 0; }
}
@keyframes lull-ribbon-left {
    to { background-position: -56px 0; }
}
@supports (width: 1cqi) {
    @keyframes lull-ribbon-right {
        to { background-position: calc(3.14159 * 18cqi) 0; }
    }
    @keyframes lull-ribbon-left {
        to { background-position: calc(-3.14159 * 18cqi) 0; }
    }
}
/* 底边齿纹改为角色卡式条码 */
.lull-tape::after {
    display: none;
}
.lull-tape-barcode {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 5%;
    height: 7px;
    background: repeating-linear-gradient(
        90deg,
        #3a3a42 0 1px,
        transparent 1px 2px,
        #3a3a42 2px 3px,
        transparent 3px 5px,
        #3a3a42 5px 6px,
        transparent 6px 7px,
        #3a3a42 7px 9px,
        transparent 9px 11px
    );
    opacity: .55;
    pointer-events: none;
    z-index: 2;
}
/* 歌词区：角色卡面板风格 */
.lull-tape-dock {
    position: relative;
    margin-top: 10px;
    padding: 10px 12px 8px;
    border-radius: 8px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 50% at 90% 10%, rgba(43, 87, 198, .08), transparent 55%),
        linear-gradient(180deg, #161618 0%, #0e0e10 100%);
    border: 1px solid var(--lull-accent);
    box-shadow: inset 0 0 0 1px rgba(43, 87, 198, .35);
    color: #ececf0;
}
.lull-tape-card.is-active .lull-tape-dock {
    border-color: #4a7ae8;
    box-shadow: inset 0 0 0 1px rgba(74, 122, 232, .5);
}
.lull-dock-watermark {
    position: absolute;
    right: -16px;
    top: 18%;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 26px solid rgba(43, 87, 198, .05);
    pointer-events: none;
    z-index: 0;
}
.lull-dock-watermark::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px dashed rgba(43, 87, 198, .12);
    border-radius: 50%;
}
.lull-dock-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 6px;
    margin-bottom: 4px;
    border-bottom: 1px dashed #2e2e34;
}
.lull-dock-label {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: #6a6a72;
    text-transform: uppercase;
}
.lull-dock-meta {
    font-size: 8px;
    letter-spacing: 0.1em;
    color: var(--lull-accent);
    font-weight: 700;
}
.lull-lyric-wrap {
    --lyric-rows: 1;
    --lyric-lh: 18px;
    --lyric-fade: 6%;
    position: relative;
    z-index: 1;
    height: calc(var(--lyric-rows) * var(--lyric-lh));
    overflow: hidden;
    font-size: 11px;
    transition: height 0.22s ease;
}
.lull-lyric-wrap.is-compact {
    --lyric-rows: 1;
    --lyric-fade: 0%;
}
.lull-lyric-viewport {
    height: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 var(--lyric-fade),
        #000 calc(100% - var(--lyric-fade)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 var(--lyric-fade),
        #000 calc(100% - var(--lyric-fade)),
        transparent 100%
    );
}
.lull-lyric-viewport.is-vcenter {
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-mask-image: none;
    mask-image: none;
}
.lull-lyric-viewport.is-vcenter .lull-lyric-track {
    transform: none !important;
    width: 100%;
}
.lull-lyric-track {
    will-change: transform;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.lull-lyric-wrap.is-preview .lull-lyric-track {
    transition: none;
}
.lull-lyric-row {
    height: var(--lyric-lh);
    line-height: var(--lyric-lh);
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    color: rgba(236, 236, 240, 0.38);
    font-weight: 400;
    padding: 0 2px;
    box-sizing: border-box;
    cursor: pointer;
}
.lull-lyric-row.idle { cursor: default; }
.lull-lyric-row:not(.idle):hover {
    color: rgba(236, 236, 240, 0.72);
}
.lull-lyric-row.active {
    color: #ececf0;
    font-weight: 600;
    text-shadow: 0 0 12px rgba(43, 87, 198, .35);
}
.lull-lyric-row.idle {
    color: rgba(236, 236, 240, 0.72);
    font-weight: 400;
}
.lull-tape-progress {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    height: 3px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.1);
    touch-action: none;
}
.lull-tape-progress > i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--lull-accent);
    width: 0%;
    pointer-events: none;
}
.lull-tape-progress > b {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--lull-accent);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 2px rgba(43, 87, 198, .2);
    transform: translate(-50%, -50%);
    left: 0%;
    pointer-events: none;
}
.lull-dock-foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #5a5a62;
    text-transform: uppercase;
}
.lull-dock-barcode {
    display: block;
    flex: 1;
    max-width: 42%;
    height: 6px;
    background: repeating-linear-gradient(
        90deg,
        #3a3a42 0 1px,
        transparent 1px 2px,
        #3a3a42 2px 3px,
        transparent 3px 5px,
        #3a3a42 5px 6px,
        transparent 6px 7px,
        #3a3a42 7px 9px,
        transparent 9px 11px
    );
    opacity: .55;
}
.lull-tape-hint {
    text-align: center;
    font-size: 11px;
    color: var(--sub);
    margin-top: 8px;
    letter-spacing: 0.04em;
}

/* ===== 个人资料页（左滑进入） ===== */
.nav-stage > .profile-list-underlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    transform: translateX(100%);
    will-change: transform;
}
.nav-stage > .profile-screen-underlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    transform: translateX(-100%);
    will-change: transform;
}
.nav-stage > .list-screen {
    z-index: 1;
    will-change: transform;
}
.nav-stage > .me-profile-screen {
    z-index: 1;
    will-change: transform;
}
.me-profile-screen {
    background: var(--profile-bg);
    position: relative;
    overflow: hidden;
}
.me-profile-cover-hit {
    position: relative;
    width: 100%;
    height: 220px;
    z-index: 2;
    padding: 0;
    display: block;
    border: none;
    background: none;
    cursor: pointer;
}
.me-profile-cover-hit-preview {
    cursor: default;
}
.me-profile-cover-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 6;
    background: linear-gradient(180deg, rgba(0, 0, 0, .42), transparent);
    color: #fff;
}
.me-profile-cover-nav .nav-text-btn { color: #fff; }
.me-profile-cover-nav .nav-text-btn.ok { color: #7eb6ff; font-weight: 600; }
[data-theme="light"] .me-profile-cover-nav {
    background: linear-gradient(180deg, rgba(255, 255, 255, .72), transparent);
    color: var(--text);
}
[data-theme="light"] .me-profile-cover-nav .nav-text-btn { color: var(--text); }
[data-theme="light"] .me-profile-cover-nav .nav-text-btn.ok { color: var(--accent); }
.me-profile-cover-gestures {
    position: absolute;
    inset: 0;
    z-index: 3;
    cursor: grab;
    touch-action: none;
}
.me-profile-cover-gestures:active { cursor: grabbing; }
.me-profile-previewing .moments-junction,
.me-profile-previewing .moments-body {
    pointer-events: none;
    opacity: .35;
}
.me-profile-cover {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.me-profile-cover-inner {
    width: 100%;
    height: 100%;
    will-change: transform;
    overflow: hidden;
    position: relative;
}
.me-profile-cover-fallback {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 90% 80% at 50% 0%, var(--accent-soft), transparent 70%),
        linear-gradient(160deg, var(--accent) 0%, var(--bg2) 100%);
}
.me-profile-cover-img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    pointer-events: none;
    max-width: none;
}
.me-profile-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 1;
}
.me-profile-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px 14px;
    margin-top: 0;
}
.me-profile-hero-av {
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
    line-height: 0;
    border: 3px solid var(--profile-bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
.me-profile-hero-av .avatar-lg {
    width: 72px;
    height: 72px;
    font-size: 28px;
}
.me-profile-hero-text {
    flex: 1;
    min-width: 0;
    text-align: left;
    padding: 6px 0 0;
}
.me-profile-hero-back {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    color: var(--text);
    opacity: .82;
}
.me-profile-hero-back svg {
    width: 22px;
    height: 22px;
    transform: scaleX(-1);
}
.me-profile-hero-back:active {
    opacity: .55;
}
.me-profile-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    padding: 0;
    color: var(--text);
}
.me-profile-name-input {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: 6px;
    border: 1px solid var(--accent);
    background: var(--input);
    color: var(--text);
    outline: none;
}
.me-profile-hero .list-status {
    margin-top: 6px;
    font-size: 12px;
}
.me-profile-section {
    border-top: 1px solid var(--profile-line);
    padding: 0 0 8px;
}
.me-profile-sec-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border-top: 1px solid var(--profile-line);
    border-bottom: 1px solid var(--profile-line);
    text-align: left;
}
.me-profile-sec-chev {
    color: var(--sub);
    font-size: 18px;
    line-height: 1;
}
.me-profile-sec-hd {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.me-profile-sec-hd-static {
    padding: 14px 16px 8px;
    color: var(--sub);
}
.me-profile-scroll-pad { height: 56px; }
.me-profile-bar {
    position: absolute;
    left: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    background: none;
    border: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.me-profile-bar.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}
.me-profile-bar-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    color: var(--icon);
    padding: 0;
    background: none;
    border: none;
}
.me-profile-bar-btn svg { width: 21px; height: 21px; }
.me-profile-bar-btn:active { color: var(--accent); opacity: .85; }

.friend-list { padding-bottom: 4px; }
.friend-letter {
    padding: 6px 16px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sub);
    background: var(--bg2);
}
.friend-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line);
}
.friend-row .avatar,
.friend-row .avatar-fallback {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
}
.friend-name {
    font-size: 16px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 好友资料页底部操作 */
.friend-profile-screen .profile-body {
    display: flex;
    flex-direction: column;
}
.friend-profile-screen .profile-menu { flex-shrink: 0; }
.profile-actions {
    margin-top: auto;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.profile-act-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    background: var(--input);
    color: var(--text);
    border: 1px solid var(--line);
}
.profile-act-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.profile-act-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
[data-theme="light"] .profile-act-btn.primary { color: #fff; }
.profile-act-btn:active { opacity: .85; }

/* 朋友圈子页（用户） */
.user-moments-screen {
    background: var(--bg);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.moments-scroll {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.user-moments-screen .moments-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.moments-top {
    position: relative;
}
.moments-cover-wrap {
    position: relative;
    height: 220px;
}
.moments-cover-hit {
    display: block;
    width: 100%;
    height: 220px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    overflow: visible;
}
.moments-cover-wrap .me-profile-cover-hit {
    height: 100%;
}
.moments-cover-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-h);
    padding: 0 6px;
    background: none;
    border: none;
    color: #fff;
    pointer-events: none;
}
.moments-cover-nav .nav-back,
.moments-cover-nav .moments-camera-btn {
    pointer-events: auto;
    color: #fff;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5));
}
.moments-junction {
    position: relative;
    height: 36px;
    margin-top: -36px;
    padding-right: 48px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    z-index: 4;
    pointer-events: none;
}
.moments-junction-av {
    position: relative;
    pointer-events: auto;
    padding: 0;
    border-radius: 50%;
    line-height: 0;
    border: 3px solid #2b57c6;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    margin-bottom: -36px;
    overflow: visible;
}
.moments-junction-av .avatar-lg {
    width: 72px;
    height: 72px;
    font-size: 28px;
}
.moments-av-stars {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 60px;
    height: 60px;
    transform: translate(3px, 3px);
    pointer-events: none;
    z-index: 2;
}
.moments-av-star {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232b57c6' stroke='%232b57c6' stroke-width='1' stroke-linejoin='round' d='M12 7C12 8.6 9.4 11 8 11C9.4 11 12 13.4 12 15C12 13.4 14.6 11 16 11C14.6 11 12 8.6 12 7Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    animation:
        moments-star-float-a 3.4s ease-in-out infinite,
        moments-star-twinkle-a 2.6s ease-in-out infinite;
}
.moments-av-star-sm {
    position: absolute;
    right: -19px;
    bottom: 8px;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 3;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232b57c6' stroke='%232b57c6' stroke-width='1' stroke-linejoin='round' d='M12 7C12 8.6 9.4 11 8 11C9.4 11 12 13.4 12 15C12 13.4 14.6 11 16 11C14.6 11 12 8.6 12 7Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    animation:
        moments-star-float-b 4.6s ease-in-out infinite,
        moments-star-twinkle-b 3.5s ease-in-out infinite;
    animation-delay: -0.6s, -1.1s;
}
@keyframes moments-star-float-a {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@keyframes moments-star-float-b {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
@keyframes moments-star-twinkle-a {
    0%, 100% { filter: brightness(0.76) saturate(0.92); }
    42% { filter: brightness(0.9) saturate(1.02); }
    68% { filter: brightness(0.82) saturate(0.96); }
}
@keyframes moments-star-twinkle-b {
    0%, 100% { filter: brightness(1) saturate(1) hue-rotate(0deg); }
    28% { filter: brightness(1.72) saturate(1.45) hue-rotate(10deg); }
    52% { filter: brightness(0.92) saturate(0.88) hue-rotate(-8deg); }
    74% { filter: brightness(1.38) saturate(1.25) hue-rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
    .moments-av-star,
    .moments-av-star-sm {
        animation: none;
    }
}
.moments-body {
    min-height: calc(100dvh - 200px);
    padding-top: 44px;
}

/* 好友朋友圈子页 */
.moments-screen { background: var(--profile-bg); }
.moments-feed { min-height: 100%; }
.moments-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--profile-line);
}
.moments-head .avatar,
.moments-head .avatar-fallback {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
}
.moments-head-name {
    font-size: 16px;
    font-weight: 600;
}