/* ==========================================================================
   720云全景 · 场景编辑器样式（前后台共用）
   ========================================================================== */

.scene-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.scene-editor-head .title {
    font-size: 14px;
    font-weight: 600;
}
.scene-editor-head .title em {
    font-style: normal;
    color: #16baaa;
    margin: 0 3px;
}

.scene-empty {
    border: 1.5px dashed #d8dfe8;
    border-radius: 10px;
    padding: 34px 20px;
    text-align: center;
    color: #9aa6b8;
    font-size: 13px;
    background: #fbfcfe;
}

.scene-item {
    display: flex;
    gap: 14px;
    padding: 12px;
    border: 1px solid #e6eaf0;
    border-radius: 10px;
    margin-bottom: 10px;
    background: #fff;
    transition: .18s;
}
.scene-item:hover { border-color: #c9e9e3; box-shadow: 0 2px 10px rgba(22, 186, 170, .07); }

.scene-thumb {
    position: relative;
    flex: 0 0 132px;
    height: 66px;
    border-radius: 7px;
    overflow: hidden;
    background: #eef1f5;
}
.scene-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene-no {
    position: absolute;
    left: 5px; top: 5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(0, 0, 0, .58);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

.scene-form { flex: 1; min-width: 0; }

.scene-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.scene-title {
    flex: 1;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #e6eaf0;
    border-radius: 7px;
    font-size: 13px;
    outline: none;
    transition: .15s;
    min-width: 0;
}
.scene-title:focus { border-color: #16baaa; }

.scene-del {
    flex: 0 0 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #9aa6b8;
    transition: .15s;
}
.scene-del:hover { background: #ffeceb; color: #d3372b; }

/* 自绘 × 图标（不依赖 layui 字体，前后台表现一致） */
.scene-ic {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
}
.scene-ic::before,
.scene-ic::after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 1.6px;
    border-radius: 2px;
    background: currentColor;
}
.scene-ic::before { transform: rotate(45deg); }
.scene-ic::after  { transform: rotate(-45deg); }

/* ---------------- 上传中的占位卡片 ---------------- */
.scene-item-uploading {
    border-style: dashed;
    border-color: #b9e6df;
    background: #f7fdfc;
}
.scene-item-uploading:hover { border-color: #16baaa; }

.scene-thumb-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(120deg, #e6f7f4, #d3efe9);
    overflow: hidden;
}
.scene-up-pct {
    position: relative;
    z-index: 2;
    font-size: 15px;
    font-weight: 700;
    color: #0f9c8f;
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
}
/* 扫光动效：无进度事件时也能看出"正在处理" */
.scene-up-wave {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, .75) 50%,
        rgba(255, 255, 255, 0) 70%);
    transform: translateX(-100%);
    animation: scene-up-wave 1.6s linear infinite;
}
@keyframes scene-up-wave {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.scene-up-name {
    flex: 1;
    min-width: 0;
    height: 32px;
    line-height: 30px;
    padding: 0 10px;
    border: 1px dashed #cfe9e4;
    border-radius: 7px;
    font-size: 13px;
    color: #4d5b6e;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.scene-up-bar {
    height: 6px;
    border-radius: 4px;
    background: #e3f0ee;
    overflow: hidden;
    margin-bottom: 7px;
}
.scene-up-bar > i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, #16baaa, #3ad6c6, #16baaa);
    background-size: 200% 100%;
    animation: scene-up-flow 1.4s linear infinite;
    transition: width .2s ease;
}
@keyframes scene-up-flow {
    0%   { background-position: 0 0; }
    100% { background-position: -200% 0; }
}

.scene-up-cancel:hover { background: #ffeceb; color: #d3372b; }

.scene-params {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 12px;
    color: #7a8699;
}
.scene-params label {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.scene-params input {
    width: 62px;
    height: 26px;
    padding: 0 6px;
    border: 1px solid #e6eaf0;
    border-radius: 6px;
    font-size: 12px;
    outline: none;
}
.scene-params input:focus { border-color: #16baaa; }

.scene-meta {
    font-size: 11.5px;
    color: #a5b0c0;
    margin-top: 2px;
}

/* ---------------- 场景工具行：全景标注 + 尺寸信息 ---------------- */

.scene-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.scene-tools .scene-meta { margin-top: 0; }

.scene-hotspot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border: 1px solid #cfe9e4;
    border-radius: 7px;
    background: #f4fbfa;
    color: #0f9c8e;
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: .15s;
}
.scene-hotspot:hover {
    border-color: #16baaa;
    background: #e8f8f5;
}
.scene-hotspot .scene-ic {
    width: 11px;
    height: 11px;
}
.scene-hotspot .scene-ic::before,
.scene-hotspot .scene-ic::after {
    top: 4.6px;
    width: 11px;
    height: 1.7px;
}
/* 标注按钮用一个小圆点 + 圆环图标，而不是 × */
.scene-ic.hs-ic::before {
    left: 0.5px;
    top: 0;
    width: 10px;
    height: 10px;
    border: 1.7px solid currentColor;
    border-radius: 50%;
    background: transparent;
    transform: none;
}
.scene-ic.hs-ic::after {
    left: 3.6px;
    top: 3.1px;
    width: 3.8px;
    height: 3.8px;
    border-radius: 50%;
    background: currentColor;
    transform: none;
}

.scene-hs-num {
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: 9px;
    background: #16baaa;
    color: #fff;
    font-size: 11px;
    font-style: normal;
    line-height: 17px;
    text-align: center;
}
.scene-hs-num:empty { display: none; }

/* 拖拽区 */
.scene-drop {
    border: 1.5px dashed #cfd8e3;
    border-radius: 10px;
    padding: 26px;
    text-align: center;
    color: #8d99aa;
    background: #fbfcfe;
    cursor: pointer;
    transition: .18s;
    font-size: 13px;
}
.scene-drop:hover, .scene-drop.drag-over {
    border-color: #16baaa;
    background: #f2fcf9;
    color: #16baaa;
}
.scene-drop i {
    display: block;
    font-size: 26px;
    margin-bottom: 8px;
    color: #b9c4d2;
}
.scene-drop:hover i, .scene-drop.drag-over i { color: #16baaa; }

/* ==========================================================================
   作品封面选择器（浅色浮层，前后台通用）
   ========================================================================== */
.cover-picker { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cover-preview {
    position: relative;
    flex: 0 0 220px;
    width: 220px;
    height: 124px;
    border: 1.5px dashed #d3dbe6;
    border-radius: 10px;
    overflow: hidden;
    background: #f7f9fc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cover-preview.has-cover { border-style: solid; border-color: #cfe9e4; }
.cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-empty { text-align: center; color: #9aa6b8; font-size: 12.5px; line-height: 1.7; padding: 0 12px; }
.cover-empty i { display: block; font-size: 22px; font-style: normal; margin-bottom: 5px; opacity: .8; }
.cover-flag {
    position: absolute; left: 8px; top: 8px;
    padding: 2px 8px;
    border-radius: 9px;
    background: rgba(22, 186, 170, .92);
    color: #fff;
    font-size: 11.5px;
}
.cover-actions { display: flex; flex-direction: column; gap: 8px; min-width: 150px; }
.cover-actions .scene-tip { font-size: 12px; color: #8d99aa; line-height: 1.7; }

/* 场景选择浮层 */
.cp-mask {
    position: fixed; inset: 0; z-index: 20000002;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10, 18, 28, .55);
    opacity: 0; transition: opacity .2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.cp-mask.cp-in { opacity: 1; }
.cp-dialog {
    width: 720px; max-width: calc(100vw - 40px);
    max-height: 78vh;
    display: flex; flex-direction: column;
    background: #fff; border-radius: 14px;
    box-shadow: 0 24px 60px rgba(12, 26, 44, .32);
    overflow: hidden;
    transform: scale(.97); transition: transform .2s cubic-bezier(.2, .9, .3, 1.2);
}
.cp-mask.cp-in .cp-dialog { transform: scale(1); }
.cp-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 20px; border-bottom: 1px solid #eef1f5;
}
.cp-head b { font-size: 15px; color: #22303f; }
.cp-close { color: #9aa6b8; font-size: 15px; }
.cp-body { padding: 16px 20px; overflow-y: auto; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cp-cell { display: block; text-decoration: none; }
.cp-thumb {
    position: relative; display: block;
    height: 84px; border-radius: 9px; overflow: hidden;
    border: 2px solid transparent; background: #eef1f5;
    transition: .15s;
}
.cp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-cell:hover .cp-thumb { border-color: #16baaa; }
.cp-cell.active .cp-thumb { border-color: #16baaa; box-shadow: 0 0 0 3px rgba(22, 186, 170, .16); }
.cp-check {
    position: absolute; right: 6px; top: 6px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #16baaa; color: #fff; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
}
.cp-name { display: block; margin-top: 6px; font-size: 12.5px; color: #3d4b5c;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-meta { display: block; font-size: 11.5px; color: #a5b0c0; }
.cp-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 20px; border-top: 1px solid #eef1f5; background: #fbfcfe;
}
.cp-tip { font-size: 12px; color: #9aa6b8; }
.cp-btn { display: inline-block; padding: 7px 16px; border-radius: 8px; font-size: 13px;
    background: #f3f6fa; color: #4d5b6e; text-decoration: none; }
.cp-btn:hover { background: #e9eef5; }

/* ==========================================================================
   全景标注编辑器（深色专业工具风，前后台通用）
   ========================================================================== */
.he-mask {
    position: fixed; inset: 0; z-index: 20000005;
    display: flex; align-items: center; justify-content: center;
    background: rgba(4, 8, 13, .72);
    opacity: 0; transition: opacity .2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.he-mask.he-in { opacity: 1; }
.he-dialog {
    display: flex; flex-direction: column;
    width: 1140px; max-width: calc(100vw - 40px);
    height: 720px; max-height: calc(100vh - 60px);
    background: #0f1720; border: 1px solid #223040; border-radius: 14px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
    overflow: hidden; color: #e8eef6;
    transform: scale(.98); transition: transform .22s cubic-bezier(.2, .9, .3, 1.15);
}
.he-mask.he-in .he-dialog { transform: scale(1); }

.he-head {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 18px; border-bottom: 1px solid #1d2a38;
    background: #121b25;
}
.he-head b { font-size: 14.5px; }
.he-hint { flex: 1; font-size: 12.5px; color: #6f8093; }
.he-close { color: #8b9aad; font-size: 15px; }
.he-close:hover { color: #fff; }

.he-body { flex: 1; display: flex; min-height: 0; }
.he-stage { position: relative; flex: 1; min-width: 0; background: #060a0f; }
.he-viewer { width: 100%; height: 100%; }
.he-picking-tip {
    position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
    padding: 7px 16px; border-radius: 20px;
    background: rgba(22, 186, 170, .95); color: #fff;
    font-size: 13px; display: none; pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}
.he-mask.he-picking .he-picking-tip { display: block; }
.he-mask.he-picking .he-stage { cursor: crosshair; }
.he-mask.he-picking .he-stage::after {
    content: ''; position: absolute; inset: 0;
    border: 2px solid rgba(22, 186, 170, .8);
    pointer-events: none;
}

.he-side {
    flex: 0 0 380px; width: 380px;
    display: flex; flex-direction: column;
    border-left: 1px solid #1d2a38;
    background: #101922;
    min-height: 0;
}
.he-side-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid #1d2a38;
}
.he-count { font-size: 12.5px; color: #6f8093; }
.he-count em { font-style: normal; color: #16baaa; }

.he-list { flex: 0 0 auto; max-height: 200px; overflow-y: auto; padding: 8px; }
.he-list::-webkit-scrollbar, .he-form::-webkit-scrollbar { width: 6px; }
.he-list::-webkit-scrollbar-thumb, .he-form::-webkit-scrollbar-thumb { background: #22303f; border-radius: 3px; }

.he-item {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: 9px; margin-bottom: 5px;
    text-decoration: none; color: #cbd6e2; transition: .15s;
    border: 1px solid transparent;
}
.he-item:hover { background: rgba(255, 255, 255, .05); }
.he-item.is-active { background: rgba(22, 186, 170, .12); border-color: rgba(22, 186, 170, .5); color: #fff; }
.he-ico {
    flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-style: normal;
    background: rgba(255, 255, 255, .08);
}
.he-item.is-active .he-ico { background: rgba(22, 186, 170, .28); }
.he-item-main { flex: 1; min-width: 0; }
.he-item-name { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.he-item-sub { display: block; font-size: 11.5px; color: #6f8093; }
.he-del { font-style: normal; font-size: 12px; color: #6f8093; padding: 0 3px; }
.he-del:hover { color: #ff7568; }
.he-empty { padding: 22px 10px; text-align: center; color: #6f8093; font-size: 12.5px; line-height: 1.9; }
.he-empty span { font-size: 11.5px; color: #4f5f72; }

.he-form { flex: 1; overflow-y: auto; padding: 12px 14px 18px; border-top: 1px solid #1d2a38; }
.he-form-head { font-size: 12.5px; color: #6f8093; margin-bottom: 10px; }
.he-form-empty { padding: 20px 0; text-align: center; color: #4f5f72; font-size: 12.5px; }
.he-field { margin-bottom: 13px; }
.he-field > label { display: block; font-size: 12.5px; color: #8b9aad; margin-bottom: 6px; }
.he-input {
    width: 100%; box-sizing: border-box;
    padding: 8px 10px; border-radius: 8px;
    background: #0b131b; border: 1px solid #22303f; color: #e8eef6;
    font-size: 13px; outline: none; font-family: inherit;
}
.he-input:focus { border-color: #16baaa; }
textarea.he-input { resize: vertical; line-height: 1.6; }
.he-inline { display: flex; gap: 8px; align-items: center; }
.he-inline .he-input { flex: 1; min-width: 0; }
.he-tip { font-size: 11.5px; color: #5f7285; margin-top: 5px; line-height: 1.6; }

.he-radios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.he-radio {
    position: relative; cursor: pointer;
    border: 1px solid #22303f; border-radius: 9px;
    padding: 8px 10px; font-size: 12.5px; color: #b9c7d6;
    transition: .15s; text-align: center;
}
.he-radio:hover { border-color: #2f4356; }
.he-radio.is-on { border-color: #16baaa; background: rgba(22, 186, 170, .12); color: #fff; }
.he-radio input { position: absolute; opacity: 0; pointer-events: none; }

.he-img-preview { margin-top: 8px; border-radius: 9px; overflow: hidden; border: 1px solid #22303f; }
.he-img-preview img { width: 100%; display: block; max-height: 130px; object-fit: cover; }

.he-form-foot { display: flex; justify-content: flex-end; margin-top: 4px; }

.he-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 16px; border: 1px solid #2b3a4b; border-radius: 9px;
    background: transparent; color: #cbd6e2; font-size: 13px; cursor: pointer;
    transition: .15s; font-family: inherit; white-space: nowrap;
}
.he-btn:hover { border-color: #3d5266; color: #fff; }
.he-btn-primary { background: #16baaa; border-color: #16baaa; color: #fff; font-weight: 600; }
.he-btn-primary:hover { background: #19cdbb; border-color: #19cdbb; }
.he-btn-sm { padding: 7px 12px; font-size: 12.5px; }
.he-btn-danger { border-color: #6b2a26; color: #ff7568; }
.he-btn-danger:hover { background: rgba(255, 117, 104, .14); border-color: #ff7568; color: #ff8f85; }

.he-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px; border-top: 1px solid #1d2a38;
    background: #121b25;
}
.he-foot-tip { flex: 1; font-size: 12px; color: #5f7285; }

/* 预览器内的标注标记 */
.he-hotspot {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 4px 14px rgba(0, 0, 0, .5);
}
.he-hotspot.is-active { box-shadow: 0 0 0 3px #16baaa, 0 4px 16px rgba(0, 0, 0, .6); }

@media (max-width: 1000px) {
    /* 窄屏（含后台弹窗 iframe）改为上下堆叠：上方预览、下方标注列表与表单 */
    .he-dialog { width: calc(100vw - 24px); height: calc(100vh - 40px); max-height: none; }
    .he-body { flex-direction: column; }
    .he-stage { flex: none; height: 40vh; }
    .he-side {
        flex: 1; width: auto; min-height: 0;
        border-left: 0; border-top: 1px solid #1d2a38;
    }
    .he-list { max-height: 150px; }
    .he-head .he-hint { display: none; }
}

/* ==========================================================================
   场景背景音乐选择器（浅色浮层，前后台通用）
   ========================================================================== */
.mp-mask {
    position: fixed; inset: 0; z-index: 20000003;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10, 18, 28, .55);
    opacity: 0; transition: opacity .2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.mp-mask.mp-in { opacity: 1; }
.mp-dialog {
    width: 520px; max-width: calc(100vw - 40px);
    max-height: 80vh;
    display: flex; flex-direction: column;
    background: #fff; border-radius: 14px;
    box-shadow: 0 24px 60px rgba(12, 26, 44, .32);
    overflow: hidden;
    transform: scale(.97); transition: transform .2s cubic-bezier(.2, .9, .3, 1.2);
}
.mp-mask.mp-in .mp-dialog { transform: scale(1); }
.mp-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 20px; border-bottom: 1px solid #eef1f5;
}
.mp-head b { font-size: 15px; color: #22303f; }
.mp-close { color: #9aa6b8; font-size: 15px; }
.mp-body { padding: 16px 20px; overflow-y: auto; }

.mp-upload {
    position: relative;
    text-align: center;
    padding: 22px 16px;
    border: 1.5px dashed #d3dbe6;
    border-radius: 11px;
    background: #f7f9fc;
    cursor: pointer;
    transition: .15s;
}
.mp-upload:hover, .mp-upload.drag-over { border-color: #16baaa; background: #f2fbf9; }
.mp-upload.busy { cursor: progress; }
.mp-upload i { display: block; font-style: normal; font-size: 26px; margin-bottom: 6px; }
.mp-upload b { display: block; font-size: 13.5px; color: #3d4b5c; }
.mp-upload span { display: block; margin-top: 4px; font-size: 12px; color: #9aa6b8; line-height: 1.6; }
.mp-up-bar {
    margin: 10px auto 0; max-width: 360px;
    height: 6px; border-radius: 4px;
    background: #e6ebf2; overflow: hidden;
}
.mp-up-bar i { display: block; height: 100%; width: 0; border-radius: 4px;
    background: linear-gradient(90deg, #16baaa, #22d3c5); transition: width .2s; }
.mp-up-text { margin-top: 6px; font-size: 12px; color: #16baaa; min-height: 16px; }

.mp-list-head { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: #3d4b5c; }
.mp-list { display: flex; flex-direction: column; gap: 8px; }
.mp-loading, .mp-empty { text-align: center; font-size: 12.5px; color: #9aa6b8; padding: 22px 0; }
.mp-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border: 1px solid #eef1f5; border-radius: 10px;
    background: #fbfcfe;
}
.mp-item.active { border-color: #16baaa; box-shadow: 0 0 0 2px rgba(22, 186, 170, .12); }
.mp-ico { font-style: normal; font-size: 17px; }
.mp-info { flex: 1; min-width: 0; }
.mp-info b { display: block; font-size: 13px; color: #3d4b5c;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-info span { font-size: 11.5px; color: #a5b0c0; }

.mp-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 20px; border-top: 1px solid #eef1f5; background: #fbfcfe;
}
.mp-tip { font-size: 12px; color: #9aa6b8; }
.mp-foot-btns { display: flex; gap: 8px; }
.mp-btn { display: inline-block; padding: 6px 14px; border-radius: 8px; font-size: 12.5px;
    background: #f3f6fa; color: #4d5b6e; text-decoration: none; }
.mp-btn:hover { background: #e9eef5; }
.mp-danger { background: #fdf0ef; color: #d9534f; }
.mp-danger:hover { background: #fbe4e2; }

/* ---------------- 场景工具行：背景音乐按钮 ---------------- */

.scene-music {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border: 1px solid #dbe3ee;
    border-radius: 7px;
    background: #f7f8fb;
    color: #7a6bd6;
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: .15s;
}
.scene-music:hover { border-color: #a99ef0; background: #f3f1fd; }
.scene-music .mu-ic { font-style: normal; font-size: 12px; line-height: 1; }
.scene-music.has-music { color: #16baaa; border-color: #cfe9e4; background: #f4fbfa; }
.scene-music.has-music .scene-hs-num { background: #16baaa; }

.scene-music-name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #8d99aa;
}
.scene-music-name:empty { display: none; }