/* cards.css — 角色卡、头像框、通话光晕、哄睡磁带 */
.char-card-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px 14px 28px;
}
.char-card {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 85% 20%, var(--card-wash), transparent 55%),
        linear-gradient(180deg, var(--card-top) 0%, var(--card-bot) 100%);
    border: 1px solid var(--card-blue);
    box-shadow: inset 0 0 0 1px var(--card-glow);
    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 var(--card-glow);
}
.char-card-accent {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--card-blue), var(--card-hi) 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 var(--card-line);
}
.char-card-head-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--card-blue);
    box-shadow: 0 0 0 2px var(--card-ring);
    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: var(--card-muted);
    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 var(--card-split);
    background: var(--card-panel);
    padding: 8px;
}
.char-card-media {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: var(--card-media);
    border: 1px solid var(--card-line-2);
    border-radius: 2px;
}
.char-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--card-ring);
    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, var(--card-fallback-a), var(--card-fallback-b));
}
.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: var(--card-label);
    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 var(--card-watermark);
    pointer-events: none;
}
.char-card-watermark::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px dashed var(--card-ring-dim);
    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: var(--card-label);
    margin-bottom: 0;
    text-transform: uppercase;
    flex-shrink: 0;
}
.char-card-name {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.04em;
    color: var(--card-ink);
    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: var(--card-ink);
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
}
.char-card-identity {
    font-size: 16px;
    color: var(--card-ink);
}
.char-card-trait {
    font-size: 14px;
    color: var(--card-ink-soft);
    letter-spacing: 0.02em;
}
.char-card-rule {
    height: 0;
    border-top: 1px dashed var(--card-line-2);
    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,
        var(--card-bar) 0 1px,
        transparent 1px 2px,
        var(--card-bar) 2px 3px,
        transparent 3px 5px,
        var(--card-bar) 5px 6px,
        transparent 6px 7px,
        var(--card-bar) 7px 9px,
        transparent 9px 11px
    );
    opacity: .55;
    pointer-events: none;
    z-index: 1;
}
.char-card-new {
    border: 1px dashed var(--card-line);
    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: var(--card-label);
}
.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 {
    position: relative;
    margin: 12px 14px 4px;
    border-radius: 8px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 85% 20%, var(--card-wash), transparent 55%),
        linear-gradient(180deg, var(--card-top) 0%, var(--card-bot) 100%);
    border: 1px solid var(--card-blue);
    box-shadow: inset 0 0 0 1px var(--card-glow);
}
.char-edit-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 4px;
    border-bottom: 1px dashed var(--card-line);
}
.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 var(--card-split);
}
.char-edit-av button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.char-edit-av-hint {
    font-size: 9px;
    letter-spacing: 0.04em;
    color: var(--card-label);
    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: var(--card-label);
    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: var(--card-well);
    border: 1px solid var(--card-line-2);
    border-radius: 4px;
    padding: 7px 8px;
    font-size: 13px;
    color: var(--card-ink);
    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 var(--card-line-2);
}

.card-crop-panel {
    width: min(78vw, 280px);
    background: var(--card-sheet);
    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 var(--card-line-2);
}
.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;
}

.call-screen {
    background: #000 !important;
    position: relative;
    overflow: hidden;
}
.call-screen > .call-back {
    position: absolute;
    left: 8px;
    top: calc(8px + env(safe-area-inset-top, 0px));
    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: env(safe-area-inset-top, 0px);
    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: calc(8px + env(safe-area-inset-top, 0px));
    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 var(--call-halo),
        0 0 40px var(--call-halo-soft),
        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 var(--call-ring);
    box-shadow: 0 0 16px var(--call-ripple-glow);
    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: var(--call-ring-hi);
    }
    70% { opacity: 0.1; }
    100% {
        transform: scale(2.45);
        opacity: 0;
        border-color: var(--call-ring-fade);
    }
}
.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-color: var(--call-star);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23000' 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");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23000' 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");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    box-shadow: none;
    filter: drop-shadow(0 0 6px var(--call-star-glow));
    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 var(--call-speak-edge),
        0 0 32px var(--call-speak-glow),
        0 0 72px var(--call-speak-wide),
        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 var(--call-star-glow-hot));
}
@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 var(--call-pip-halo),
        0 4px 12px rgba(0, 0, 0, 0.35);
    transition: box-shadow 0.35s ease;
}
.call-avatar-core .avatar-fallback,
.call-avatar-zone .avatar-fallback,
.call-pip-core .avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    line-height: 1;
    text-align: center;
}
.call-pip-ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    border: 1px solid var(--call-ring);
    box-shadow: 0 0 10px var(--call-pip-ripple-glow);
    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: var(--call-ring-hi);
    }
    70% { opacity: 0.1; }
    100% {
        transform: scale(1.72);
        opacity: 0;
        border-color: var(--call-ring-fade);
    }
}
.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-color: var(--call-star);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23000' 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");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23000' 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");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    filter: drop-shadow(0 0 4px var(--call-pip-star-glow));
    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 var(--call-speak-edge),
        0 0 18px var(--call-pip-speak-glow),
        0 0 36px var(--call-pip-speak-wide),
        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 var(--call-star-glow-hot));
}
@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;
}

.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:
        calc(20px + env(safe-area-inset-top, 0px))
        calc(20px + env(safe-area-inset-right, 0px))
        calc(20px + env(safe-area-inset-bottom, 0px))
        calc(20px + env(safe-area-inset-left, 0px));
}
.av-card:focus {
    outline: none;
}
.av-card:focus-visible {
    outline: 2px solid var(--card-hi);
    outline-offset: 3px;
}
.dialog button:focus-visible,
.sheet-item:focus-visible,
.nav-text-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.av-card {
    --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-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, var(--card-top) 0%, var(--card-bot) 100%);
    border: 1px solid var(--card-blue);
    box-shadow:
        inset 0 0 0 1px var(--card-glow),
        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='%234a7ae8' stroke='%234a7ae8' 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: var(--av-star-field);
    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,
        var(--av-bar-1) 0 1px,
        transparent 1px 3px,
        var(--av-bar-2) 3px 4px,
        transparent 4px 6px,
        var(--av-bar-3) 6px 7px,
        transparent 7px 9px,
        var(--av-bar-4) 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: var(--card-bot);
    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: var(--card-bot);
}
.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: var(--card-bot);
    border: 2px solid var(--card-blue-soft);
    box-shadow:
        0 0 0 1px var(--card-ring),
        0 0 24px var(--card-ring-dim);
}
.av-portrait-group .group-av {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: var(--card-bot);
}
.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: var(--card-bot);
    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: var(--card-bot);
}
.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: var(--card-bot);
    border: 2px solid var(--card-blue-soft);
    box-shadow:
        0 0 0 1px var(--card-ring),
        0 0 24px var(--card-ring-dim);
}
.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: var(--card-bot);
}
.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: var(--card-meta);
    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 var(--card-blue-soft);
    box-shadow:
        0 0 0 1px var(--card-ring),
        0 0 24px var(--card-ring-dim);
}
.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: var(--card-meta);
    font-size: 13px;
    margin-top: 5px;
    letter-spacing: 0.02em;
    line-height: 1.2;
}
.av-crop-card {
    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 var(--av-line);
}
.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 var(--av-line);
}
.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; }

/* ===== 哄睡磁带档案（配色对齐角色卡 CHARACTER I.D.） ===== */
.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-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%, var(--card-wash-strong), transparent 55%),
        linear-gradient(180deg, var(--card-top) 0%, var(--tape-body) 40%, var(--card-bot) 100%);
    border: 1px solid var(--lull-accent);
    box-shadow: inset 0 0 0 1px var(--card-glow);
    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), var(--lull-hi) 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 var(--card-ring);
    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: var(--card-muted);
}
.lull-tape-label {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 18%;
    height: 28%;
    background: var(--tape-label);
    border-radius: 2px;
    border: 1px solid var(--card-glow-soft);
    box-shadow: inset 0 0 0 1px var(--card-inset);
    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: var(--card-ink);
}
.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: var(--card-ink-dim);
}
.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: var(--card-panel);
    border-radius: 2px;
    border: 1px solid var(--card-edge);
    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: var(--tape-reel);
    border: 2px solid var(--lull-reel-edge);
    box-shadow: inset 0 0 0 4px var(--tape-hub);
    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: var(--lull-hi);
    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,
        var(--lull-ribbon) 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,
        var(--card-bar) 0 1px,
        transparent 1px 2px,
        var(--card-bar) 2px 3px,
        transparent 3px 5px,
        var(--card-bar) 5px 6px,
        transparent 6px 7px,
        var(--card-bar) 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%, var(--card-wash), transparent 55%),
        linear-gradient(180deg, var(--card-top) 0%, var(--card-bot) 100%);
    border: 1px solid var(--lull-accent);
    box-shadow: inset 0 0 0 1px var(--card-glow-soft);
    color: var(--card-ink);
}
.lull-tape-card.is-active .lull-tape-dock {
    border-color: var(--lull-hi);
    box-shadow: inset 0 0 0 1px var(--lull-reel-edge);
}
.lull-dock-watermark {
    position: absolute;
    right: -16px;
    top: 18%;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 26px solid var(--card-watermark);
    pointer-events: none;
    z-index: 0;
}
.lull-dock-watermark::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px dashed var(--card-ring-dim);
    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 var(--card-line);
}
.lull-dock-label {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--card-label);
    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: var(--card-lyric);
    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: var(--card-lyric-mid);
}
.lull-lyric-row.active {
    color: var(--card-ink);
    font-weight: 600;
    text-shadow: 0 0 12px var(--card-blue-soft);
}
.lull-lyric-row.idle {
    color: var(--card-lyric-mid);
    font-weight: 400;
}
.lull-tape-progress {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    height: 3px;
    border-radius: 99px;
    background: var(--card-track);
    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 var(--card-ring);
    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: var(--card-muted);
    text-transform: uppercase;
}
.lull-dock-barcode {
    display: block;
    flex: 1;
    max-width: 42%;
    height: 6px;
    background: repeating-linear-gradient(
        90deg,
        var(--card-bar) 0 1px,
        transparent 1px 2px,
        var(--card-bar) 2px 3px,
        transparent 3px 5px,
        var(--card-bar) 5px 6px,
        transparent 6px 7px,
        var(--card-bar) 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;
}

/* 头像框 / 角色卡 / 哄睡记录跟随主题令牌：暗色深蓝深底，亮色灰金浅底 */
.av-card,
.av-crop-card {
    color: var(--card-ink);
}
.av-card .group-av {
    background: var(--card-bot);
}
.av-card .group-av span,
.av-card .group-av .avatar-fallback,
.av-card .group-av-cell span,
.av-card .group-av-cell .avatar-fallback {
    background: var(--card-cell);
    color: var(--card-ink);
}
.char-card,
.char-edit-panel,
.lull-tape-card {
    color: var(--card-ink);
}
.char-card-new {
    background: var(--card-top);
    color: var(--sub);
}
[data-theme="light"] .av-card-star-tr {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23A8956B' stroke='%23A8956B' 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");
}
[data-theme="light"] .av-star-br {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C4B48A' stroke='%23A8956B' 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");
}