.mxavt-stage-wrap { display: flex; justify-content: center; margin: 8px 0 16px; }
.mxavt-stage { position: relative; width: 260px; height: 260px; --mx-level: 0; }
.mxavt-stage-ring { position: absolute; inset: -6px; border-radius: 50%; border: 3px solid transparent; transition: border-color .3s; }
.mxavt-stage-ring::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--mx-amber); opacity: calc(var(--mx-level) * .9); transform: scale(calc(1 + var(--mx-level) * .06)); transition: opacity .08s; }
.mxavt-stage-img, .mxavt-stage-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: var(--mx-sky); box-shadow: var(--mx-shadow); }
.mxavt-stage-img.is-behind { opacity: 0; }
.mxavt-stage-video { z-index: 2; }
.mxavt-stage.is-empty .mxavt-stage-img { visibility: hidden; }
.mxavt-stage.is-empty::before { content: '🙂'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 96px; background: var(--mx-sky); border-radius: 50%; }
.mxavt-stage[data-emotion=happy] .mxavt-stage-ring { border-color: #F7D774; }
.mxavt-stage[data-emotion=sad] .mxavt-stage-ring, .mxavt-stage[data-emotion=concerned] .mxavt-stage-ring { border-color: #9DB4D9; }
.mxavt-stage[data-emotion=surprised] .mxavt-stage-ring { border-color: #F2A93B; }
.mxavt-stage-status { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); white-space: nowrap; font-size: .85rem; color: var(--mx-ink-soft); background: #fff; border: 1px solid var(--mx-line); border-radius: 999px; padding: 3px 12px; z-index: 3; }
.mxavt-avatar-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 12px 0; }
.mxavt-avatar-card { display: flex; gap: 12px; border: 1px solid var(--mx-line); border-radius: 14px; padding: 10px; background: #fff; }
.mxavt-avatar-card.is-active { border-color: var(--mx-amber); box-shadow: 0 0 0 2px #FBE3B2; }
.mxavt-avatar-card img { width: 80px; height: 80px; object-fit: cover; border-radius: 50%; flex: none; }
.mxavt-avatar-cardbody { flex: 1; min-width: 0; }
.mxavt-avatar-cardbody input[type=text] { margin-bottom: 8px; padding: 7px 10px; }
.mxavt-avatar-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mxavt-avatar-actions label.mxavt-btn { cursor: pointer; }
.mxavt-avatar-add { display: block; cursor: pointer; margin: 10px 0; }
.mxavt-avatar-add small { display: block; color: var(--mx-ink-soft); margin-top: 6px; }
.mxavt-avatar-mode { display: block; margin-top: 12px; padding: 12px; border: 1px dashed var(--mx-line); border-radius: 12px; }
.mxavt-avatar-mode small { display: block; color: var(--mx-ink-soft); margin-top: 4px; }
@media (max-width: 480px) { .mxavt-stage { width: 200px; height: 200px; } }
.mxavt-stage.is-live .mxavt-stage-video { display: block; }
.mxavt-stage.is-live .mxavt-stage-ring { border-color: var(--mx-mint); }
.mxavt-avatar-mode label { display: block; margin: 6px 0; }


/* Live2D stage */
.mxavt-stage-l2d{position:relative;background:transparent}
.mxavt-stage-canvas{display:block;width:100%;height:100%;min-height:220px}
.mxavt-stage-l2d .mxavt-stage-status{position:absolute;left:50%;bottom:8px;transform:translateX(-50%)}