/* base.css — 主题令牌、重置、手机壳、共用导航与控件 */
:root {
    --bg: #000000;
    --bg2: #0b0b0e;
    --surface: #121216;
    --text: #ffffff;
    --sub: #8e8e93;
    --weak: rgba(255, 255, 255, .35);
    --line: #1c1c1e;
    /* 自定义聊天壁纸时顶底发丝边：暗色保持原先半透明白，不改成实色 --line */
    --chat-shell-line: rgba(255, 255, 255, 0.08);
    --chat-shell-line-soft: rgba(255, 255, 255, 0.06);
    /* 壁纸态毛玻璃：暗色保持原先深色半透与浅色字，不改主色盘 */
    --chat-shell-glass: rgba(10, 10, 12, 0.52);
    --chat-shell-panel: rgba(8, 8, 10, 0.35);
    --chat-shell-ink: #ececf0;
    --chat-shell-ink-ok: #ffffff;
    --chat-shell-field: rgba(255, 255, 255, 0.12);
    --chat-shell-field-ink: #f2f2f5;
    --chat-shell-placeholder: rgba(242, 242, 245, 0.4);
    --chat-shell-time: rgba(242, 242, 245, 0.55);
    /* 输入框聚焦：不画描边环，只在底上罩一层很淡的字色 */
    --composer-focus-wash: rgba(255, 255, 255, 0.07);
    /* 消息流时间条：无壁纸用实色底；壁纸态底与顶底栏同一 --chat-shell-glass */
    --chat-time-sep-bg: var(--chip);
    --chat-time-sep-fg: rgba(236, 236, 240, 0.92);
    --chat-time-sep-fg-wallpaper: #f2f2f5;
    --chat-time-sep-radius: 8px;
    --chat-time-sep-pad-x: 10px;
    --chat-time-sep-pad-y: 3px;
    --chat-time-sep-gap-top: 14px;
    --chat-time-sep-gap-bottom: 6px;
    --chat-time-sep-inset: 16px;
    --ai: #1f222b;
    --ai-border: transparent;
    --ai-glass: rgba(31, 34, 43, .8);
    --user: #2b57c6;
    --user-glass: rgba(43, 87, 198, .8);
    --select: #1a2d52;
    --red: #e23d3d;
    --warn: #c9a227;
    --green: #3d9a62;
    --icon: #cfcfd2;
    --input: #161618;
    --nav-h: 52px;
    --accent: #2b57c6;
    --accent-soft: rgba(43, 87, 198, .35);
    --accent-hi: #3d6fd4;
    --on-accent: #ffffff;
    --link: #3d6fd4;
    --profile-bg: #121216;
    --profile-line: #222;
    --profile-chev: rgba(255, 255, 255, .55);
    --chrome: #111113;
    --chrome-2: #1c1c1e;
    --chrome-3: #19191c;
    --field: #1c1c1e;
    --field-border: #222;
    --chip: #2c2c2e;
    --sheet: #1c1c1e;
    --dialog: #2c2c2e;
    --bar: #111;
    --quote-bar: #0a0a0c;
    --press: #151517;
    --switch-off: #39393d;
    --check-border: #666;
    --check-ring: #000;
    --ghost-border: #3a3a3c;
    --nav-btn: #ececf0;
    --nav-ok: #2b57c6;
    --avatar-from: #1e3a8c;
    --avatar-to: #2b57c6;
    --group-av-bg: #2c2c2e;
    --group-av-cell: #3a3a3c;
    --group-av-ink: #eee;
    --rec-bg: #2a2a2e;
    --rec-pill: #3a3a40;
    --rec-pill-ink: #ddd;
    --panel-border: rgba(255, 255, 255, .16);
    --panel-bg: rgba(255, 255, 255, .03);
    --panel-ink: rgba(255, 255, 255, .86);
    --panel-ink-sub: rgba(255, 255, 255, .62);
    --track: #2a2a2e;
    --thumb: #2b57c6;
    /* 角色卡 / 头像框 / 哄睡：暗色深蓝，与 --accent 同族 */
    --card-blue: #2b57c6;
    --card-blue-soft: rgba(43, 87, 198, .35);
    --card-hi: #4a7ae8;
    --card-glow: rgba(43, 87, 198, .45);
    --card-glow-soft: rgba(43, 87, 198, .35);
    --card-wash: rgba(43, 87, 198, .08);
    --card-wash-strong: rgba(43, 87, 198, .1);
    --card-watermark: rgba(43, 87, 198, .05);
    --card-ring: rgba(43, 87, 198, .2);
    --card-ring-dim: rgba(43, 87, 198, .12);
    --card-inset: rgba(43, 87, 198, .15);
    --card-edge: rgba(43, 87, 198, .25);
    --card-top: #161618;
    --card-bot: #0e0e10;
    --card-ink: #ececf0;
    --card-ink-soft: #e0e0e6;
    --card-ink-dim: #b8b8c0;
    --card-muted: #5a5a62;
    --card-label: #6a6a72;
    --card-meta: #9aa0ab;
    --card-line: #2e2e34;
    --card-line-2: #2a2a30;
    --card-split: #252528;
    --card-panel: #0c0c0e;
    --card-media: #1a1a1c;
    --card-well: #141416;
    --card-sheet: #121214;
    --card-fallback-a: #1c1c20;
    --card-fallback-b: #101012;
    --card-bar: #3a3a42;
    --card-cell: #3a3a3c;
    --card-lyric: rgba(236, 236, 240, .38);
    --card-lyric-mid: rgba(236, 236, 240, .72);
    --card-track: rgba(255, 255, 255, .1);
    --av-line: rgba(74, 122, 232, .55);
    --av-line-dim: rgba(36, 58, 130, .38);
    --av-ball: #4a7ae8;
    --av-ball-dim: #243a82;
    --av-star-field: linear-gradient(180deg, rgba(38, 68, 118, .62) 0%, rgba(20, 36, 62, .48) 100%);
    --av-bar-1: #1a2d52;
    --av-bar-2: #152444;
    --av-bar-3: #1e3258;
    --av-bar-4: #172948;
    --lull-accent: #2b57c6;
    --lull-accent-soft: rgba(43, 87, 198, .35);
    --lull-hi: #4a7ae8;
    --lull-ribbon: rgba(74, 122, 232, .65);
    --lull-reel-edge: rgba(74, 122, 232, .55);
    --tape-body: #121214;
    --tape-face: #1a1a1e;
    --tape-label: #0e0e10;
    --tape-ink: #ececf0;
    --tape-hub: #0e0e12;
    --tape-reel: #1a1a20;
    /* 语音通话光晕 / 星芒：暗色锚定 Stage7 深蓝 #2b57c6 */
    --call-accent: #2b57c6;
    --call-halo: rgba(147, 176, 245, 0.42);
    --call-halo-soft: rgba(43, 87, 198, 0.32);
    --call-ring: rgba(176, 201, 255, 0.48);
    --call-ring-hi: rgba(186, 210, 255, 0.55);
    --call-ring-fade: rgba(176, 201, 255, 0);
    --call-ripple-glow: rgba(43, 87, 198, 0.34);
    --call-speak-edge: rgba(198, 216, 255, 0.62);
    --call-speak-glow: rgba(90, 140, 235, 0.62);
    --call-speak-wide: rgba(43, 87, 198, 0.48);
    --call-star: #c5d7ff;
    --call-star-glow: rgba(74, 122, 232, 0.8);
    --call-star-glow-hot: rgba(168, 196, 255, 0.95);
    --call-pip-halo: rgba(147, 176, 245, 0.36);
    --call-pip-ripple-glow: rgba(43, 87, 198, 0.3);
    --call-pip-star-glow: rgba(74, 122, 232, 0.75);
    --call-pip-speak-glow: rgba(90, 140, 235, 0.58);
    --call-pip-speak-wide: rgba(43, 87, 198, 0.42);
}

[data-theme="light"] {
    --bg: #EDEBE6;
    --bg2: #F5F2EC;
    --surface: #F8F5F0;
    --text: #3A3835;
    --sub: #8A857C;
    --weak: rgba(58, 56, 53, .35);
    --line: #DDD8CF;
    /* 亮色壁纸态顶/底/引用与中间交界不描边；暗色发丝线留在 :root。无图边框仍走 --line */
    --chat-shell-line: transparent;
    --chat-shell-line-soft: transparent;
    /* 亮色壁纸态：浅色毛玻璃，透明度与暗色同级（0.52）+ 深色字 */
    /* 输入条 / 表情加号面板 alpha 与暗色同控件实测对齐：field 0.12、panel 0.35 */
    --chat-shell-glass: rgba(245, 242, 236, 0.52);
    --chat-shell-panel: rgba(248, 245, 240, 0.35);
    --chat-shell-ink: var(--text);
    --chat-shell-ink-ok: var(--nav-ok);
    --chat-shell-field: rgba(255, 253, 248, 0.12);
    --chat-shell-field-ink: var(--text);
    --chat-shell-placeholder: var(--weak);
    --chat-shell-time: var(--sub);
    --composer-focus-wash: rgba(58, 56, 53, 0.06);
    --chat-time-sep-bg: rgba(58, 56, 53, 0.10);
    --chat-time-sep-fg: var(--text);
    --chat-time-sep-fg-wallpaper: var(--text);
    --ai: #F0EDE7;
    --ai-border: #E4DFD6;
    --ai-glass: rgba(240, 237, 231, .92);
    --user: #D4C9B0;
    --user-glass: rgba(212, 201, 176, .92);
    --select: #E7E0D2;
    --green: #6F8F76;
    --warn: #8F6430;
    --icon: #6E6960;
    --input: #FFFdf8;
    --accent: #A8956B;
    --accent-soft: rgba(168, 149, 107, .28);
    --accent-hi: #C4B48A;
    --on-accent: #FFFFFF;
    --link: #6F5E3A;
    --profile-bg: #F5F2EC;
    --profile-line: #DDD8CF;
    --profile-chev: rgba(58, 56, 53, .35);
    --chrome: #F5F2EC;
    --chrome-2: #F8F5F0;
    --chrome-3: #F5F2EC;
    --field: #FFFdf8;
    --field-border: #DDD8CF;
    --chip: #F8F5F0;
    --sheet: #F5F2EC;
    --dialog: #F8F5F0;
    --bar: #F5F2EC;
    --quote-bar: #F5F2EC;
    --press: rgba(58, 56, 53, .05);
    --switch-off: #E4DFD6;
    --check-border: #C4BBAE;
    --check-ring: transparent;
    --ghost-border: #DDD8CF;
    --nav-btn: #3A3835;
    --nav-ok: #6F5E3A;
    --avatar-from: #C4B48A;
    --avatar-to: #A8956B;
    --group-av-bg: #E4DFD6;
    --group-av-cell: #DDD8CF;
    --group-av-ink: #3A3835;
    --rec-bg: #F5F2EC;
    --rec-pill: #F8F5F0;
    --rec-pill-ink: #3A3835;
    --panel-border: #DDD8CF;
    --panel-bg: #F8F5F0;
    --panel-ink: #3A3835;
    --panel-ink-sub: #8A857C;
    --track: #DDD8CF;
    --thumb: #A8956B;
    /* 亮色头像框 / 角色卡 / 哄睡：灰金浅底，不沿用暗色深蓝 */
    --card-blue: #A8956B;
    --card-blue-soft: rgba(168, 149, 107, .35);
    --card-hi: #C4B48A;
    --card-glow: rgba(168, 149, 107, .40);
    --card-glow-soft: rgba(168, 149, 107, .35);
    --card-wash: rgba(168, 149, 107, .10);
    --card-wash-strong: rgba(168, 149, 107, .14);
    --card-watermark: rgba(168, 149, 107, .12);
    --card-ring: rgba(168, 149, 107, .22);
    --card-ring-dim: rgba(168, 149, 107, .16);
    --card-inset: rgba(168, 149, 107, .18);
    --card-edge: rgba(168, 149, 107, .28);
    --card-top: #F5F1E8;
    --card-bot: #EBE6DB;
    --card-ink: #3A3835;
    --card-ink-soft: #4A463F;
    --card-ink-dim: #6E6960;
    --card-muted: #8A857C;
    --card-label: #8A857C;
    --card-meta: #8A857C;
    --card-line: #DDD8CF;
    --card-line-2: #DDD8CF;
    --card-split: #E4DFD4;
    --card-panel: #EBE6DB;
    --card-media: #F8F5F0;
    --card-well: #FFFdf8;
    --card-sheet: #F8F5F0;
    --card-fallback-a: #F5F1E8;
    --card-fallback-b: #EBE6DB;
    --card-bar: #C4B48A;
    --card-cell: #E4DFD6;
    --card-lyric: rgba(58, 56, 53, .38);
    --card-lyric-mid: rgba(58, 56, 53, .72);
    --card-track: rgba(58, 56, 53, .12);
    --av-line: rgba(168, 149, 107, .55);
    --av-line-dim: rgba(168, 149, 107, .35);
    --av-ball: #A8956B;
    --av-ball-dim: #C4B48A;
    --av-star-field: linear-gradient(180deg, rgba(168, 149, 107, .42) 0%, rgba(196, 180, 138, .26) 100%);
    --av-bar-1: #C4B48A;
    --av-bar-2: #A8956B;
    --av-bar-3: #B7A888;
    --av-bar-4: #8F815C;
    --lull-accent: #A8956B;
    --lull-accent-soft: rgba(168, 149, 107, .35);
    --lull-hi: #C4B48A;
    --lull-ribbon: rgba(168, 149, 107, .7);
    --lull-reel-edge: rgba(168, 149, 107, .55);
    --tape-body: #EBE6DB;
    --tape-face: #F5F1E8;
    --tape-label: #F8F5F0;
    --tape-ink: #3A3835;
    --tape-hub: #E4DFD4;
    --tape-reel: #F5F1E8;
    /* 亮色通话光晕 / 星芒保持原来的暖金，不跟暗色深蓝走 */
    --call-halo: rgba(255, 245, 230, 0.36);
    --call-halo-soft: rgba(255, 230, 200, 0.16);
    --call-ring: rgba(255, 250, 240, 0.4);
    --call-ring-hi: rgba(255, 250, 240, 0.45);
    --call-ring-fade: rgba(255, 250, 240, 0);
    --call-ripple-glow: rgba(255, 240, 220, 0.16);
    --call-speak-edge: rgba(255, 250, 240, 0.5);
    --call-speak-glow: rgba(255, 236, 210, 0.6);
    --call-speak-wide: rgba(255, 210, 170, 0.32);
    --call-star: #fff8eb;
    --call-star-glow: rgba(255, 236, 210, 0.75);
    --call-star-glow-hot: rgba(255, 240, 220, 0.95);
    --call-pip-halo: rgba(255, 245, 230, 0.28);
    --call-pip-ripple-glow: rgba(255, 240, 220, 0.14);
    --call-pip-star-glow: rgba(255, 236, 210, 0.7);
    --call-pip-speak-glow: rgba(255, 236, 210, 0.55);
    --call-pip-speak-wide: rgba(255, 210, 170, 0.28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* 宽屏页底沿用主题：暗色 #111、亮色暖灰。窄屏改与壳同色，避免左右漏边 */
html, body {
    height: 100%;
    height: 100dvh;
    background: #111;
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    overflow: hidden;
}
body { overscroll-behavior: none; }
html[data-theme="light"],
html[data-theme="light"] body { background: #D4CFC6; }
@media (max-width: 430px) {
    html, body,
    html[data-theme="light"],
    html[data-theme="light"] body { background: var(--bg); }
}
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);
}

/* ≤430 铺满可视区；更宽则居中壳，高度仍满。左右安全区留给横屏刘海，竖屏一般为 0 */
#phone {
    width: 100%;
    max-width: 430px;
    height: 100%;
    margin: 0 auto;
    background: var(--bg);
    position: relative;
    overflow: hidden;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}
.boot-note { padding: 20px; }
#app { height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; color: var(--text); }
#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: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: env(safe-area-inset-top, 0px) 6px 0;
    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; }
/* 没有底栏的页面：末尾留出 Home 条，不改已有 padding */
.screen > .scroll:last-child::after {
    content: "";
    display: block;
    width: 100%;
    height: env(safe-area-inset-bottom, 0px);
    flex: 0 0 auto;
    min-height: 0;
}
.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: var(--field);
    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: var(--weak); 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, var(--avatar-from), var(--avatar-to));
    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: var(--group-av-bg);
    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: var(--group-av-cell);
    color: var(--group-av-ink);
}
.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: var(--group-av-cell);
    color: var(--group-av-ink);
}
.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;
}

.nav-text-btn {
    min-width: 52px;
    height: 36px;
    padding: 0 10px;
    font-size: 15px;
    color: var(--nav-btn);
    justify-self: start;
}
.nav-text-btn.ok {
    color: var(--nav-ok);
    font-weight: 600;
    justify-self: end;
}

.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(--link); 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: var(--switch-off);
    flex-shrink: 0;
    transition: background .22s ease;
}
.ios-switch.on { background: var(--accent); }
.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: var(--weak); 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; }

.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;
}

.scroll.scroll-lock {
    overflow: hidden !important;
    touch-action: none;
}

#avatar-layer { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
#avatar-layer:not(:empty) { pointer-events: auto; }