.studio-booking-page .header-icon {
    margin-right: 9px;
}

.studio-booking-page .header-icon svg {
    width: 36px;
    height: 36px;
}

.studio-booking-page .header-left h1 {
    font-size: 16px;
}

.preview-floor-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    width: 116px;
    padding: 2px;
    border-radius: var(--radius-sm);
}

.preview-floor-tabs .studio-category-tab {
    min-height: 24px;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    font-size: 12px;
}

.preview-floor-tabs .studio-category-tab.active {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}

.preview-category-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    width: 142px;
    padding: 2px;
    border-radius: var(--radius-sm);
}

.preview-category-tabs .studio-category-tab {
    min-height: 24px;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    font-size: 12px;
}

.preview-category-tabs .studio-category-tab.active {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}

.preview-category-tabs .studio-category-tab:disabled {
    color: #B5BCC5;
    cursor: not-allowed;
}

.preview-single-floor-map {
    grid-template-columns: minmax(0, 1fr);
}

.preview-single-floor-map .studio-map-zone-seventh-floor {
    grid-column: 1;
    padding: 14px;
    border: 0;
    background: #F8FAFC;
}

.preview-single-floor-map .studio-map-zone-sixth-floor {
    grid-column: 1;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.studio-booking-page .list-view.preview-cyclorama-active {
    display: flex;
    flex-direction: column;
}

.studio-booking-page .list-view.preview-cyclorama-active #studioGroups {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.studio-booking-page .list-view.preview-cyclorama-active .preview-single-floor-map {
    flex: 1;
    min-height: 450px;
}

.studio-booking-page .list-view.preview-cyclorama-active .studio-map-zone-seventh-floor,
.studio-booking-page .list-view.preview-cyclorama-active .studio-map-zone-seventh-floor .studio-floor-zones,
.studio-booking-page .list-view.preview-cyclorama-active .studio-map-zone-seventh-floor .studio-floor-zones > .studio-map-zone {
    height: 100%;
}

.studio-booking-page .list-view.preview-cyclorama-active .studio-map-zone-seventh-floor .studio-map-cards {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    align-content: stretch;
}

.studio-booking-page .list-view.preview-cyclorama-active .studio-map-zone-seventh-floor .studio-overview-card[data-studio-group="large"] {
    min-height: 0;
}

.studio-booking-page .list-view.preview-sixth-floor-active .studio-map-zone-sixth-floor,
.studio-booking-page .list-view.preview-sixth-floor-active .studio-map-zone-sixth-floor .studio-map-cards,
.studio-booking-page .list-view.preview-sixth-floor-active .studio-overview-card[data-studio-group="sixth-floor"] {
    height: 100%;
}

.studio-booking-page .list-view.preview-sixth-floor-active .studio-map-zone-sixth-floor .studio-map-cards {
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
}

.preview-single-floor-map .studio-overview-card[data-studio-group="sixth-floor"],
.preview-single-floor-map .studio-overview-card[data-studio-group="sixth-floor"].studio-fully-booked {
    border-color: #DDE4EC;
    background: #F8FAFC;
    box-shadow: none;
}

.preview-single-floor-map .studio-overview-card[data-studio-group="sixth-floor"] .studio-summary-booking.ongoing {
    border-color: #B7CCF8;
    background: #E6F0FF;
}

.preview-single-floor-map .studio-overview-card[data-studio-group="sixth-floor"] .studio-summary-booking.upcoming {
    border-color: #D4E1FB;
    background: #F0F5FF;
}

.preview-single-floor-map .studio-floor-zones > .studio-map-zone {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.preview-single-floor-map .studio-floor-zones > .studio-map-zone-small {
    padding-left: 14px;
    border-left: 1px solid #E1E7ED;
}

.preview-single-floor-map .studio-map-zone-large .studio-map-zone-header h3,
.preview-single-floor-map .studio-map-zone-small .studio-map-zone-header h3,
.preview-single-floor-map .studio-map-zone-seventh-floor .studio-card-location {
    color: var(--accent-ink);
}

.preview-single-floor-map .studio-map-zone-seventh-floor .studio-map-cards {
    gap: 0;
}

.preview-single-floor-map .studio-map-zone-seventh-floor .studio-overview-card {
    border: 0;
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.3);
}

.preview-single-floor-map .studio-map-zone-seventh-floor .studio-map-zone-large .studio-overview-card + .studio-overview-card,
.preview-single-floor-map .studio-map-zone-seventh-floor .studio-map-zone-small .studio-overview-card:nth-child(n + 3) {
    border-top: 1px solid #E1E7ED;
}

.preview-single-floor-map .studio-map-zone-seventh-floor .studio-map-zone-small .studio-overview-card:nth-child(even) {
    border-left: 1px solid #E1E7ED;
}

.preview-single-floor-map .studio-map-zone-seventh-floor .studio-overview-card:hover,
.preview-single-floor-map .studio-map-zone-seventh-floor .studio-overview-card:focus {
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.36);
    transform: none;
}

.preview-single-floor-map .studio-map-zone-seventh-floor .studio-overview-card.studio-frozen {
    background: rgba(226, 232, 240, 0.52);
}

.preview-single-floor-map .studio-map-zone-seventh-floor .studio-overview-card.studio-partially-booked {
    background: rgba(255, 255, 255, 0.38);
}

.preview-single-floor-map .studio-map-zone-seventh-floor .studio-overview-card.studio-fully-booked {
    background: rgba(226, 232, 240, 0.7);
}

.studio-booking-page .list-view.studio-layout-active {
    padding: 18px 28px 16px;
}

@media (min-width: 769px) {
    .studio-booking-page .list-view.real-scene-active {
        overflow: hidden;
        padding: 8px 6px 0;
    }

    .studio-booking-page .list-view.real-scene-active #studioGroups,
    .studio-booking-page .list-view.real-scene-active .preview-workspace {
        height: 100%;
        min-height: 0;
    }

    .studio-booking-page .list-view.real-scene-active .preview-workspace {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 22px 0 4px;
    }

    .studio-booking-page .list-view.real-scene-active .preview-workspace-6f {
        padding: 0 0 4px;
    }

    /* 7F 实景卡片内容高度小于工作区时，向可用区域中线收拢，避免底部留白过重。 */
    .studio-booking-page .list-view.real-scene-active .preview-workspace-7f {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .studio-booking-page .list-view.real-scene-active .preview-workspace-7f .preview-content {
        flex: 0 1 auto;
    }

    .studio-booking-page .list-view.real-scene-active .preview-content-6f {
        flex: 1;
        min-height: 0;
    }

    .studio-booking-page .list-view.real-scene-active .preview-status-legend {
        top: 8px;
        right: 0;
    }

}

.studio-booking-page .list-view.real-scene-active .preview-workspace-6f .preview-status-legend {
    top: 8px;
    right: 8px;
    box-sizing: border-box;
    width: 152px;
    height: 23px;
    justify-content: center;
    flex-wrap: nowrap;
}

.preview-workspace {
    position: relative;
    padding: 30px 0 8px;
}

.preview-workspace-header {
    display: grid;
    grid-template-columns: minmax(180px, 1fr);
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
    padding: 0 12px;
}

.preview-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.preview-heading h3 {
    margin: 0;
    color: #20252B;
    font-size: 19px;
    font-weight: 500;
}

.preview-date-label {
    color: #7A818A;
    font-size: 12px;
}

.preview-status-legend {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 40;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    width: max-content;
    max-width: calc(100% - 16px);
    padding: 3px 6px;
    border: 1px solid #E3E7EC;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(42, 51, 61, 0.06);
}

.preview-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #636B75;
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
}

.preview-legend-swatch {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    box-shadow: none;
}

.preview-legend-swatch.available {
    border-color: #D8DEE5;
    background: #F4F6F8;
}

.preview-legend-swatch.partial {
    border-color: #FF805C;
    background: linear-gradient(145deg, #FF716B 0%, #FFA45D 62%, #FFC154 100%);
}

.preview-legend-swatch.full {
    border-color: #17181A;
    background: linear-gradient(145deg, rgba(34, 34, 36, 1) 0%, rgba(25, 26, 29, 1) 100%);
}

.preview-floor-map {
    display: grid;
    grid-template-columns: repeat(16, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(0, 1fr));
    gap: 16px;
    width: min(1500px, 100%);
    height: calc(100vh - 294px);
    height: calc(100dvh - 294px);
    min-height: 420px;
    margin: 0 auto;
    padding: 14px 20px 22px;
}

.preview-floor-map-sixth-floor {
    display: block;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.preview-floor-map-sixth-floor::before {
    content: none;
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: start;
    padding: 3px 8px;
    color: #8A6A43;
    font-size: 11px;
    letter-spacing: 0.08em;
    pointer-events: none;
}

/* 实景棚画布底色。
   原来画布是 #F8FAFC、卡片实际画出来是 #FCFCFD~#F5F7F9，两者对比只有 1.02:1，
   边框还是 rgba(255,255,255,.8)——比背景更亮，等于没有边框，
   整块画面的层次全挤在 1.02~1.18 之间，看久了就是一片发灰、找不到边。
   这里把底压深，让接近纯白的卡片能浮起来。 */
.studio-booking-page .list-view.real-scene-active,
.sixth-floor-canvas-viewport {
    background: #E9EEF4;
}

.sixth-floor-canvas-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.sixth-floor-canvas {
    position: absolute;
    left: 50%;
    top: calc(50% + 28px);
    transform-origin: center center;
    background: transparent;
}

@media (max-width: 768px) {
    .sixth-floor-canvas {
        top: calc(50% + 92px);
    }
}

.sixth-floor-layout-card {
    position: absolute;
    left: var(--card-x);
    top: var(--card-y);
    width: var(--card-width);
    height: var(--card-height);
    min-height: 0;
    margin: 0;
    z-index: 2;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}

.sixth-floor-layout-card .preview-scene-card-top { pointer-events: none; }

.preview-floor-map-sixth-floor .sixth-floor-layout-card {
    position: absolute;
}

.preview-floor-map-sixth-floor .preview-scene-card {
    min-height: 0;
    padding: 12px;
    /* 跟着 --card-border 走，不要写死颜色：写死会让 6F 画布上的
       "部分预约 / 已约满" 卡片丢掉自己的天青边框。 */
    border-color: var(--card-border);
    /* 画布坐标里的圆角：画布整体缩到约 47%，所以要按画布尺度给一个大值。
       16px 的 xl 缩到屏幕上只剩约 7.6px，在这么大的卡上看着接近直角。

       32px 是按参考图的比例定的：用"圆角缺失面积"量参考图，四张卡的等效
       半径都是 10.4~10.8px、卡高 120~125px，比值 0.086；我们的卡在屏幕上
       高约 166px，按同一比值需要屏幕上约 14px 圆角，换算回画布即约 30px。
       取 32px 后实测 r/卡高 = 0.088，与参考图 0.086 只差 2%——同一把尺子量
       出来的，不是眼估的。

       参考图的圆角不随卡片大小变化（大卡小卡都是同一个固定值），所以这里
       也给固定像素值，而不是按卡片尺寸算——和小卡同比例、大卡更收敛，
       和参考图的做法一致。 */
    border-radius: var(--radius-canvas-xl);
}

/* 实拍封面。照片说明"这是哪个景"，但它是背景不是主角——景名才是。

   照片铺满整张卡（inset: 0），上面盖一层高不透明度的浅色罩，把照片压成
   一层隐约的底纹。这样三件事同时成立：
     1. 照片不再抢视觉，扫一眼先读到的是景名；
     2. 所有卡结构一致——照片永远在底层，文字永远居中，不存在"有的在
        右边、有的在下面"；
     3. 文字压在可控的浅色罩上而不是照片上，可读性不依赖照片明暗。

   罩层不透明度 0.78：按最暗的照片（酒吧、黑色台面厨房，暗部约 rgb(28)）
   算，合成后景名 #16202C 仍有 9.5:1 以上，远超 AA。

   不限定楼层：6F 是绝对定位画布、7F 是 CSS grid，但两边共用
   renderRealSceneCard，封面样式也共用一套，两个楼层观感才一致。 */
.preview-scene-cover {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    /* 横排后照片窗口自己是竖高的一块，给个下限免得在矮卡里被压成一条 */
    min-height: 46px;
    border-radius: var(--radius-lg);
    /* 窗口比例和素材构图不一定吻合，只能裁切填满；center 保证主体居中不被切掉 */
    object-fit: cover;
    object-position: center;
    /* 弱化：照片是"这是哪个景"的说明，不是主角，所以降饱和 + 提亮往后退。
       退到"还认得出是什么景"为止就停——上一版把整张卡冲成白色，
       照片等于白放了。 */
    filter: saturate(0.6) brightness(1.1) contrast(0.94);
    opacity: 0.82;
    /* 窗口自己的描边 + 落影，把照片压进卡面里，不至于像贴上去的一块 */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.72),
        0 1px 3px rgba(24, 34, 48, 0.12);
    pointer-events: none;
}

.preview-scene-cover-group {
    display: flex;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: stretch;
    min-width: 0;
    min-height: 46px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.72),
        0 1px 3px rgba(24, 34, 48, 0.12);
}

.preview-scene-cover-group .preview-scene-cover {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 0;
    box-shadow: none;
}

/* 有封面时撤掉身份色柔光——照片已经把身份说清楚了，再叠色斑只会脏。 */
.preview-scene-card.has-scene-cover::after {
    background: none;
}

/* 有照片的卡：照片在左（卡内的一块窗口），景名在右，进度条紧跟景名下面。
   所有卡都是这一种结构，不按卡高分支——同一屏里出现两种排版反而更乱。

   用 grid 而不是 flex：照片要跨两行占满左列高度，景名和进度条堆在右列，
   flex 做不到这种"一列跨行、另一列内部再分行"的关系。

   grid-template-rows 的 auto + 1fr 让景名按内容取高、贴着照片顶部对齐，
   进度条落在它正下方；剩余空间归第二行，卡变高时进度条不会被推到底。 */
.preview-scene-card.has-scene-cover {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    justify-content: initial;
    align-items: start;
    gap: 4px 9px;
    padding: 9px;
}

/* 照片占左列、跨满两行 */
.preview-scene-card.has-scene-cover .preview-scene-cover {
    /* 单图封面由外层 cover-group 占据左列；保留规则兼容旧缓存 DOM。 */
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: stretch;
}

/* 景名和进度条依次落在右列，都左对齐——横排时右列是一个左对齐的文字块，
   继续沿用竖排那套居中会让景名和进度条各自找中线，两者对不齐。 */
.preview-scene-card.has-scene-cover .preview-scene-card-top,
.preview-scene-card.has-scene-cover.has-progress .preview-scene-card-top {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
}

.preview-scene-card.has-scene-cover .preview-scene-progress {
    grid-column: 2;
    grid-row: 2;
    /* 覆盖基类的 72% + auto 居中：右列本来就窄，进度条撑满才够长 */
    width: 100%;
    margin: 0;
}

.preview-scene-info {
    display: contents;
}


/* 照片回到卡内窗口后，不再需要盖住整卡的白罩层——它会把卡面渐变一起冲白。
   基类的 ::before 是卡片顶沿那道白色高光线，在有色卡面上会显脏，一并撤掉。 */
.preview-scene-card.has-scene-cover::before {
    content: none;
}

/* 景名和进度条浮在罩层之上。
   注意别给角标加 relative：它是 absolute 定位在右上角，
   改成 relative 会让它脱不了流、被拉成整行宽，横贯整张卡。

   height: auto 是必须的：基类给 .preview-scene-card-top 写了 height: 100%，
   它会吃掉整张卡的高度，把进度条挤出卡外。 */
.preview-scene-card.has-scene-cover .preview-scene-card-top,
.preview-scene-card.has-scene-cover .preview-scene-progress {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}

.preview-scene-card.has-scene-cover .preview-scene-card-top {
    height: auto;
}

/* 角标保持 absolute，只抬层级 */
.preview-scene-card.has-scene-cover .preview-scene-full-label,
.preview-scene-card.has-scene-cover .preview-scene-expired-label {
    z-index: 2;
}


/* 立体感走"弥散光晕"而不是硬投影：多层大半径、低透明度的阴影叠起来，
   而且阴影染一点冷色（#C4CCD6 这类蓝灰）而不是纯灰。这一条是整个观感的
   关键——同样的模糊半径，灰阴影看着像廉价的 drop-shadow，带一点冷调的才有
   参考图那种"卡片浮在光晕上"的高级感。

   color-mix 把冷色往深里调再压透明度：直接用原色太浅，在浅色画布上等于没有阴影。
   这里的 #C4CCD6 早先是"每个景一个身份色"的兜底值；6F 改成统一卡面后身份色
   整体退场，兜底值就成了唯一的取值，所以直接写死。 */
.preview-scene-card.has-scene-cover {
    border-color: color-mix(in srgb, #C4CCD6, #3E4A5C 68%);
    box-shadow:
        0 1px 2px color-mix(in srgb, #C4CCD6, transparent 62%),
        0 6px 14px color-mix(in srgb, #C4CCD6, transparent 58%),
        0 16px 32px color-mix(in srgb, #C4CCD6, transparent 66%),
        0 28px 56px color-mix(in srgb, #C4CCD6, transparent 74%);
}

@media (hover: hover) and (pointer: fine) {
    /* 悬停时抬起来：光晕同步加浓拉长，位移才有"浮起"而不是"变大"的感觉 */
    .preview-scene-card.has-scene-cover:hover,
    .preview-scene-card.has-scene-cover:focus-visible {
        box-shadow:
            0 2px 4px color-mix(in srgb, #C4CCD6, transparent 54%),
            0 10px 20px color-mix(in srgb, #C4CCD6, transparent 50%),
            0 24px 44px color-mix(in srgb, #C4CCD6, transparent 58%),
            0 40px 76px color-mix(in srgb, #C4CCD6, transparent 66%);
        transform: translateY(-4px) scale(1.012);
    }
}

/* 卡面：冷色往白里调的柔和渐变（7F 实拍封面卡用，色值走兜底的 #C4CCD6）。
   撤掉基类的玻璃磨砂（backdrop-filter）——那套是给"白色玻璃卡"调的，
   放在有色面上会把色一起糊掉。 */
.preview-scene-card.has-scene-cover {
    background: linear-gradient(
        152deg,
        #FFFFFF 0%,
        color-mix(in srgb, #C4CCD6, #FFFFFF 72%) 46%,
        color-mix(in srgb, #C4CCD6, #FFFFFF 38%) 100%
    );
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 景名统一在文件末尾声明（要排在 .full h4 / .ended h4 之后才生效）。 */

/* 卡面已经是铺满整张的玻璃层，不再需要基类那团右下角色斑；把 ::after 让给
   "棱光"——玻璃的立体感主要就来自这一层，撤掉它半透明卡看着像一片塑料膜。
   顶/左是受光边（亮），底/右是背光边（暗），中间再走一层内侧明暗渐变，
   用来补"顶面亮、底面沉"的体积感。 */
.preview-floor-map-sixth-floor .preview-scene-card.partial::after,
.preview-floor-map-sixth-floor .preview-scene-card.full::after,
.preview-floor-map-sixth-floor .preview-scene-card.ended::after,
.preview-floor-map-sixth-floor .preview-scene-card.available::after {
    background: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 1px 0 0 rgba(255, 255, 255, 0.62),
        inset 0 -1px 0 rgba(116, 132, 154, 0.18),
        inset -1px 0 0 rgba(116, 132, 154, 0.10),
        inset 0 24px 32px -20px rgba(255, 255, 255, 0.90),
        inset 0 -30px 38px -24px rgba(96, 116, 142, 0.16);
}

/* 黑色满约卡不再叠冷灰内棱光，否则会在纯黑卡面四周形成一圈灰边。 */
.preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card.full::before,
.preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card.full::after {
    background: none;
    box-shadow: none;
}

.preview-floor-map-sixth-floor .preview-scene-card h4 {
    color: #252B33;
}

/* 6F 画布会整体缩放到视口里（桌面约 42%），19px 的景名最终只剩约 8px，
   所以要在画布坐标系里给一个明显更大的字号。7F 是 1:1 渲染，不受影响。
   字号统一成一个固定值：卡片有大小之分，景名不能跟着变大变小。 */
.preview-floor-map-sixth-floor .preview-scene-card h4 {
    /* 34px 缩到屏幕上约 14px，接近正文大小——这是按参考图"卡片大、字小巧"
       的比例定的。仍然单行且留白充足：实测到 52px 都不换行，34px 只是更收。 */
    font-size: 34px;
    /* 参考图用的是常规字重（按同字高下的墨迹覆盖率比对，400 最接近）；
       粗黑体压不出那种干净的观感。 */
    font-weight: 400;
    line-height: 1.2;
}

/* 卡面：22 张卡同一套透明毛玻璃，状态只作为一层薄色调叠上去。

   画布是平涂的 #E9EEF4，所以这里要说清一件事：**"透"必须靠卡片自己撑起来**。
   backdrop-filter 的模糊在这种纯色背影上其实是看不太出来的（没有细节可糊），
   真正让卡读起来像玻璃的是下面四件事，缺一件就退回普通白卡：

     1. 斜向高光扫过（左上那片柔白反光）——玻璃最强的识别线索；
     2. 半透明本体：透出底色的冷调，卡片不是"糊了一层白漆"；
     3. 棱光：顶/左受光、底/右背光（在 ::after 里）；
     4. 磨砂颗粒：毛面质感，只有模糊没颗粒会像一层干净的白膜。

   层序（上 → 下）：
     --state-wash      状态色。放在最上，四种状态才不会被高光冲淡；
     高光扫过          左上角的柔白反光；
     玻璃本体          半透明白渐变，左上最亮、右下偏冷；
     feTurbulence      磨砂颗粒，压在最底层被上面两层自然衰减。

   透明度是按"卡片必须还看得出是卡片"定的，不是随手取的：画布 #E9EEF4 = rgb(233,238,244)，
   alpha 越低，合成出来的卡面就越接近画布色。实测过三档（0.90 / 0.78 / 0.64 起手），
   0.90 那档太实、读起来就是一张白卡、看不出玻璃；0.64 那档最透、玻璃感最强，
   但右下角已经快和背景连成一片。取 0.82 起手是两者的折中：透得出来，又还立得住。

   （结构上还有个兜底：卡片有自己的边框和棱光，形状不全靠填色撑。所以这里允许
   填色比画布只亮一点点，而不会真的"糊掉"。）

   选择器三层（画布 + 布局卡 + 场景卡）是为了稳压基类的 .has-progress /
   .has-scene-cover 系列，以及 .preview-scene-card.partial 那些实色状态卡。 */
.preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card {
    background:
        linear-gradient(145deg, var(--state-wash)),
        /* 高光扫过：从左上角斜着铺下来的一片柔白，模拟光源在玻璃面上的反射。
           只占左上约四成，不给满——铺满就成了"更白的卡"，反而不像玻璃。 */
        linear-gradient(
            126deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 255, 255, 0.42) 16%,
            rgba(255, 255, 255, 0.08) 30%,
            rgba(255, 255, 255, 0) 44%
        ),
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.82) 0%,
            rgba(251, 253, 255, 0.70) 50%,
            rgba(243, 248, 255, 0.58) 100%
        ),
        /* 细颗粒。磨砂玻璃是"毛面"，只有模糊、没有颗粒会像一层干净的白膜。
           SVG 的 feTurbulence 现生成噪声，内联成 data URI，不多一次请求；
           颗粒压在最后（= 最底层），上面两层半透明渐变自然把它衰减到很淡，
           所以这里 opacity 给 0.5 也不会显脏。
           频率 0.9 是"细砂"不是"噪点"：再高像屏幕坏点，再低像颗粒噪。 */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23g)' opacity='0.5'/></svg>");
    backdrop-filter: blur(26px) saturate(170%) brightness(1.05);
    -webkit-backdrop-filter: blur(26px) saturate(170%) brightness(1.05);
    /* 玻璃靠"弥散光晕"浮起来，不能用基类那条 0 2px 0 的硬投影——
       硬投影是纸质卡片的语言，放在透明玻璃上会显得又薄又假。 */
    box-shadow:
        0 1px 2px rgba(38, 52, 68, 0.05),
        0 5px 12px rgba(38, 52, 68, 0.08),
        0 18px 34px rgba(38, 52, 68, 0.11),
        0 36px 64px rgba(38, 52, 68, 0.07);
}

/* 状态色调。只改 --state-wash，玻璃配方本身不动——四种状态共用同一套质感。 */
/* 部分已约：满饱和的珊瑚橙渐变，不留透明度。
   之前是 0.78 alpha 叠在玻璃白层上，实测合成出来只有 #FFB9B4 → #FEC47C，
   比参考稿淡了一整档——橙色在高明度区本来就容易发粉发浊，一掺白就散。
   参考的就是场地总览那张卡，色标本来就是同一组（#FF716B / #FFA45D / #FFC154，
   采样得到的 #FF6F6B → #FEC757 只是 145deg 插值偏差）；差别只在它是实色铺满。
   这里改成不透明的同一条线，玻璃质感由边框、棱光和投影继续撑住。 */
.preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card.partial {
    --state-wash:
        #FF716B 0%,
        #FFA45D 62%,
        #FFC154 100%;
    /* 实色暖橙卡不能继续继承基类的天青蓝描边，否则缩放后会混成一圈灰边。 */
    --card-edge: #E86B4E;
    --card-border: #FF805C;
    --card-shadow: rgba(180, 75, 43, 0.16);
    border-color: #FF805C;
    box-shadow:
        0 1px 2px rgba(180, 75, 43, 0.04),
        0 5px 12px rgba(180, 75, 43, 0.07),
        0 18px 34px rgba(180, 75, 43, 0.10),
        0 36px 64px rgba(180, 75, 43, 0.06);
}

/* 顶/左保留玻璃高光，底/右改成低透明度暖色棱光，避免冷灰内描边污染橙色。 */
.preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card.partial::after {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 1px 0 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(190, 76, 42, 0.14),
        inset -1px 0 0 rgba(190, 76, 42, 0.08),
        inset 0 24px 32px -20px rgba(255, 255, 255, 0.62),
        inset 0 -30px 38px -24px rgba(166, 62, 32, 0.12);
}

/* 满饱和橙底上，原来那套深色字和深蓝进度条（配浅雾橙调的）对比度全部掉档：
   深墨 #252B33 只剩 3.9:1，深蓝 #14496F 更是 3.2:1，都过不了 AA。
   参考稿的做法是全部走白：景名和已填充段纯白，底槽用一层压深的半透明橙棕。
   白字压在最亮那段 #FEC757 上是 1.72:1 —— 单靠颜色不够，所以给一层
   贴合橙底的暖色描边把字托起来（参考稿里也是这么处理的）。 */
.preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card.partial h4 {
    color: #FFFFFF;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(150, 62, 24, 0.42);
}

.preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card.partial .preview-scene-progress-track {
    background: rgba(158, 71, 30, 0.30);
}

.preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card.partial .preview-scene-progress-track i {
    background: #FFFFFF;
}

.preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card.partial .preview-scene-progress small {
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(150, 62, 24, 0.42);
}

.preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card.full {
    /* 已约满使用近黑实色，和还能预约的浅色卡形成明确的不可选信号。 */
    --state-wash: rgba(34, 34, 36, 1) 0%, rgba(25, 26, 29, 1) 100%;
    --card-edge: #101113;
    --card-border: #17181A;
    --card-shadow: rgba(20, 21, 24, 0.22);
}

/* 已约满卡把景名和状态胶囊作为一组居中，不再把角标单独挂在右上角。 */
.preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card.full .preview-scene-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: 100%;
}

.preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card.full .preview-scene-card-top {
    height: auto;
}

.preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card.full h4 {
    color: #F7F7F8;
    font-weight: 500;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.34);
}

.preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card.full .preview-scene-full-label {
    position: static;
    min-width: 0;
    padding: 6px 16px;
    border: 0;
    border-radius: var(--radius-pill);
    background: #4A4D52;
    color: #F0F1F3;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card.ended {
    --state-wash: rgba(150, 157, 173, 0.26) 0%, rgba(150, 157, 173, 0.26) 100%;
}

/* 悬停：光晕加深拉长，是"玻璃抬起来"，不是"卡片变厚"。
   基类的 .preview-scene-card:hover 只有两层选择器，压不过上面那条玻璃规则，
   所以这里必须自己再写一份（三层），否则悬停时投影会被玻璃规则顶回去、毫无变化。 */
@media (hover: hover) and (pointer: fine) {
    .preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card:hover,
    .preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card:focus {
        z-index: 12;
        border-color: color-mix(in srgb, var(--card-border), #FFFFFF 38%);
        box-shadow:
            0 2px 4px rgba(38, 52, 68, 0.06),
            0 9px 20px rgba(38, 52, 68, 0.10),
            0 28px 50px rgba(38, 52, 68, 0.15),
            0 50px 88px rgba(38, 52, 68, 0.10);
        transform: translateY(-4px) scale(1.012);
    }
}

.preview-floor-map-sixth-floor .preview-scene-progress {
    width: 78%;
    margin-top: 12px;
}

/* 竖排景名：只用在细高的竖列卡片上（阈值由 JS 按卡片宽高判断）。
   竖排后 inline 轴变成纵向，所以这里用 height 撑满卡高、width 交给内容，
   再靠 .preview-scene-card-top 的居中把整列字放在卡片正中。 */
.preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card.is-vertical-title h4 {
    width: auto;
    height: 100%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.08em;
    /* 字号沿用上面统一的固定值，竖排卡片不再单独放大。 */
}

/* 满约卡的竖排景名如果继续撑满卡高，会把后面的"已约满"胶囊挤出卡片。
   这里只覆盖满约状态，让景名按内容取高，和标签一起完整居中。 */
.preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card.full.is-vertical-title h4 {
    height: auto;
}

.preview-floor-map-sixth-floor .preview-scene-progress-track {
    height: 14px;
    border-radius: var(--radius-xs);
}

.preview-floor-map-sixth-floor .preview-scene-progress small {
    margin-top: 6px;
    font-size: 22px;
}

.preview-floor-map-sixth-floor .preview-scene-full-label,
.preview-floor-map-sixth-floor .preview-scene-expired-label {
    padding: 6px 14px;
    font-size: 22px;
}

.preview-scene-card {
    --scene-base: #F1F4F7;
    --state-wash: rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%;
    --card-edge: color-mix(in srgb, var(--scene-base), #70808C 30%);
    /* 实色边框：对画布底 3.01:1、对卡片 3.51:1，达到 WCAG 对非文字 UI 边界的 3:1 要求。
       原来是半透明白，比背景还亮，边界完全靠投影撑。 */
    --card-border: #7C8A9E;
    --card-shadow: rgba(44, 58, 68, 0.11);
    --card-depth: 2px;
    --card-hover-depth: 3px;
    --card-shadow-y: 10px;
    --card-shadow-blur: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: 16px 17px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-xl);
    /* 卡片提到接近纯白，只在底部留一点场景固有色。
       原来顶部是 72% 白覆盖，画出来和画布底几乎同色。 */
    background:
        linear-gradient(145deg, var(--state-wash)),
        linear-gradient(
            138deg,
            #FFFFFF 0%,
            color-mix(in srgb, var(--scene-base), #FFFFFF 82%) 55%,
            color-mix(in srgb, var(--scene-base), #FFFFFF 58%) 100%
        );
    backdrop-filter: blur(14px) saturate(108%);
    -webkit-backdrop-filter: blur(14px) saturate(108%);
    box-shadow:
        0 var(--card-depth) 0 var(--card-edge),
        0 var(--card-shadow-y) var(--card-shadow-blur) var(--card-shadow),
        inset 1px 1px 0 rgba(255, 255, 255, 0.86),
        inset -1px -1px 0 rgba(74, 86, 94, 0.055);
    cursor: pointer;
    /* backwards 只保留入场前的初始态；动画结束后释放 transform，悬停位移才能生效。 */
    animation: preview-card-enter 320ms ease backwards;
    animation-delay: calc(var(--preview-index) * 24ms);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.preview-scene-card::before {
    content: "";
    position: absolute;
    inset: 1px 10% auto 2px;
    height: 1px;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.preview-scene-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 8px 0 18px rgba(255, 255, 255, 0.1),
        inset -8px -8px 18px rgba(66, 79, 88, 0.025);
    pointer-events: none;
}

.preview-scene-card[data-map-area="service-laundry"] {
    --scene-base: #EDF3F6;
}

.preview-scene-card[data-map-area="service-bathroom"] {
    --scene-base: #EAF3F1;
}

.preview-scene-card[data-map-area="service-black-kitchen"] {
    --scene-base: #F0EEF2;
}

.preview-scene-card[data-map-area="main-cabin"] {
    --scene-base: #F5EEE9;
}

.preview-scene-card[data-map-area="main-bedroom"] {
    --scene-base: #EFEDF4;
}

.preview-scene-card[data-map-area="main-bar"] {
    --scene-base: #F3EAED;
}

.preview-scene-card[data-map-area="main-study"] {
    --scene-base: #EAF0F5;
}

.preview-scene-card[data-map-area="main-living"] {
    --scene-base: #EAF2ED;
}

.preview-scene-card[data-map-area="main-workbench"] {
    --scene-base: #F3EFE3;
}

.preview-scene-card[data-map-area="main-wood-kitchen"] {
    --scene-base: #F3ECE6;
}

.preview-scene-card[data-map-area="main-kids-tea"] {
    --scene-base: #E9F2F0;
}

.preview-scene-card.available {
    --scene-base: #F4F6F8;
}

/* 状态色走天青蓝。橙色系的饱和区就落在偏黄浊的地带，怎么调都难通透；
   蓝在高明度下天然干净，而且和应用主色同族，整页更统一。
   "蓝=可用"的直觉风险由角标和进度条兜住——纯色卡本身就是"约不了"的信号，
   不依赖颜色的冷暖去表达。 */
.preview-scene-card.partial {
    --state-wash: rgba(255, 255, 255, 0);
    --card-edge: #7FB4DE;
    --card-border: #A6CDEA;
    --card-shadow: rgba(58, 112, 158, 0.16);
    background: linear-gradient(145deg, #F4FAFE 0%, #E4F1FA 52%, #D2E7F6 100%);
}

/* 已约满：必须和 partial 的浅蓝拉开一档明度，否则两个状态看着一样。
   三段渐变而不是纯色，卡面才有层次不至于发平。
   深蓝字 #0E3352 在最亮那段上 5.43:1 过 AA；
   边框 #3F84BB 对画布 3.44:1，过非文字 UI 的 3:1。 */
.preview-scene-card.full {
    --card-edge: #3F84BB;
    --card-border: #3F84BB;
    --card-shadow: rgba(38, 92, 138, 0.22);
    background: linear-gradient(138deg, #BEDDF5 0%, #93C5E8 56%, #6FAEDC 100%);
}

.preview-scene-card.ended {
    --card-edge: #D3D6DA;
    --card-border: #D9DCE0;
    --card-shadow: rgba(48, 55, 63, 0.055);
    --card-depth: 2px;
    --card-hover-depth: 3px;
    --card-shadow-y: 6px;
    --card-shadow-blur: 13px;
    background: linear-gradient(145deg, #F5F6F7, #E8EAED);
}

.preview-scene-card[data-map-area="main-cabin"] {
    grid-column: 5 / 8;
    grid-row: 1 / 4;
}

.preview-scene-card[data-map-area="main-bedroom"] {
    grid-column: 8 / 11;
    grid-row: 1 / 3;
}

.preview-scene-card[data-map-area="main-bar"] {
    grid-column: 11 / 16;
    grid-row: 1 / 4;
}

.preview-scene-card[data-map-area="main-study"] {
    grid-column: 6 / 10;
    grid-row: 4 / 7;
}

@media (min-width: 1181px) {
    .preview-scene-card[data-map-area="main-study"] {
        left: -6px;
    }
}

.preview-scene-card[data-map-area="main-living"] {
    grid-column: 10 / 16;
    grid-row: 4 / 7;
}

.preview-scene-card[data-map-area="main-workbench"] {
    grid-column: 5 / 8;
    grid-row: 7 / 9;
}

.preview-scene-card[data-map-area="main-wood-kitchen"] {
    grid-column: 8 / 12;
    grid-row: 7 / 9;
}

.preview-scene-card[data-map-area="main-kids-tea"] {
    grid-column: 12 / 16;
    grid-row: 7 / 9;
}

.preview-scene-card[data-map-area="service-laundry"] {
    grid-column: 2 / 5;
    grid-row: 1 / 3;
}

.preview-scene-card[data-map-area="service-bathroom"] {
    grid-column: 2 / 5;
    grid-row: 3 / 6;
}

.preview-scene-card[data-map-area="service-black-kitchen"] {
    grid-column: 2 / 5;
    grid-row: 6 / 9;
}

.preview-scene-card-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding-bottom: 0;
}

.preview-scene-card.has-progress .preview-scene-card-top {
    align-items: center;
    justify-content: center;
    height: auto;
    padding-bottom: 0;
}

.preview-scene-card.has-progress {
    justify-content: center;
}

.preview-scene-card.has-progress h4 {
    width: 100%;
    text-align: center;
}

.preview-scene-card h4 {
    width: 100%;
    min-width: 0;
    margin: 0;
    color: #252B33;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
}

.preview-scene-progress {
    position: static;
    width: 72%;
    margin: 10px auto 0;
    pointer-events: none;
}

.preview-scene-progress-track {
    position: relative;
    display: block;
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-xs);
    background: #DCE2E8;
}

.preview-scene-progress-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #8EA4B8;
}

.preview-scene-progress small {
    display: block;
    margin-top: 4px;
    color: #65717D;
    font-size: 8px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
}

.preview-scene-full-label {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    padding: 3px 7px;
    border: 1px solid rgba(22, 74, 118, 0.18);
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.9);
    color: #10527F;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.preview-scene-expired-label {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    padding: 3px 7px;
    border: 1px solid #D1D5DB;
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.88);
    color: #6B7280;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.preview-scene-card.partial .preview-scene-progress-track,
.preview-scene-card.full .preview-scene-progress-track {
    background: rgba(20, 73, 111, 0.2);
}

.preview-scene-card.partial .preview-scene-progress-track i,
.preview-scene-card.full .preview-scene-progress-track i {
    background: #FFFFFF;
}

.preview-scene-card.partial .preview-scene-progress small {
    color: #14496F;
}

.preview-scene-card.full .preview-scene-progress-track {
    background: rgba(20, 73, 111, 0.26);
}

/* full 底色是中蓝，白色进度条只有 2.4:1 分不出来，改用近白的冷调 #F2F8FD */
.preview-scene-card.full .preview-scene-progress-track i {
    background: #F2F8FD;
}

.preview-scene-card.full .preview-scene-progress small {
    /* 进度文字压在渐变最深那段 #6FAEDC 上，深蓝 #0E3352 得 5.43:1 过 AA。
       原来那个深棕 #6B3212 是配旧橙底的，落在蓝底上只有 4.19:1，还发脏。 */
    color: #0E3352;
}

.preview-scene-card.ended .preview-scene-progress-track {
    background: #D2D6DB;
}

.preview-scene-card.ended .preview-scene-progress-track i {
    background: #AAB0B7;
}

.preview-scene-card.full h4 {
    /* 天青蓝渐变最亮那段是 #BEDDF5，深蓝字 5.43:1 过 AA */
    color: #0E3352;
}

.preview-scene-card.ended h4 {
    color: #595F67;
}

/* 景名做成"立体墙"：字本身是深色，靠三层阴影撑起厚度和发光。
   必须放在 .full h4 / .ended h4 之后：同等特指度下后写的赢。

   三层各司其职，缺一层就塌：
     1. 上方 1px 的白色高光——模拟光从上面打下来，字的上沿被照亮，
        这是"凸起"感的来源；
     2. 下方 1px 的深色暗边——字的下沿投在墙面上的接触阴影，
        和上沿的高光一起把字"顶"出平面；
     3. 一圈大半径的浅色辉光——字周围的一片亮，让景名从照片底纹里
        浮出来，也是用户要的"发光"。

   顺序不能反：CSS 的 text-shadow 是先写的画在上层，辉光必须写在最后
   才不会盖掉前两层的高光和暗边。

   字色 #16202C 比原来的 #252B33 更深，因为照片底纹仍会让背景比纯面板略脏，
   加深一档保证对比度余量。

   关键：文字坐在自己的发光底板上（下面的 background + backdrop-filter），
   而不是靠罩层整体压白照片。上一版为了让纯白辉光生效把整张照片冲成了白色，
   等于用牺牲照片来换文字——底板把这两件事解耦了。 */
.preview-scene-card.has-scene-cover h4 {
    width: auto;
    max-width: 100%;
    padding: 3px 11px;
    border-radius: var(--radius-pill);
    /* 底板比卡面亮一档（近白），四周再发一圈白光——景名靠这块板从
       卡面上"浮"起来。纯透明底板在浅色卡面上看不出边界，立体感会塌。 */
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 1px 2px rgba(48, 64, 84, 0.16),
        0 0 16px rgba(255, 255, 255, 0.9);
    color: #16202C;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    /* 横排时右列是一个左对齐的文字块，景名和进度条共用同一条左边线 */
    text-align: left;
    text-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.9),
        0 1px 0 rgba(86, 104, 126, 0.3),
        0 2px 3px rgba(70, 88, 110, 0.16);
}

/* 基类给 .has-progress h4 写了 width: 100%（纯色卡靠它撑满）。
   特指度比上面那条高，会把自适应宽度改回整行，底板就横贯整卡了。
   单独压掉，其余属性继承上面一条。 */
.preview-scene-card.has-scene-cover.has-progress h4 {
    width: auto;
}

/* 进度条紧跟在景名下方，和景名同宽同层级——它也是要突出的信息，
   不该缩在角落。轨道用实色 + 内阴影做出"凹槽"，填充做成带高光的
   凸条，和景名的立体感是同一套语言。 */
.preview-scene-card.has-scene-cover .preview-scene-progress {
    align-items: center;
    /* 不写 width：横排的宽度由上面那条 grid 规则给（撑满右列）。
       这里再写 auto 会把它压回内容宽，右列窄的时候进度条就只剩一小截。 */
    max-width: 100%;
    /* 和景名共用一块发光底板的视觉语言，两者才像同一套系统里的东西 */
    padding: 4px 10px 3px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.74);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 1px 2px rgba(48, 64, 84, 0.12),
        0 0 14px rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(3px);
}

/* 轨道跟着底板走满，不用固定像素宽——右列的宽度取决于卡宽，
   写死 108px 会在窄卡里溢出底板。 */
.preview-scene-card.has-scene-cover .preview-scene-progress-track {
    width: 100%;
    background: rgba(96, 116, 140, 0.26);
    box-shadow:
        inset 0 1px 2px rgba(48, 64, 84, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.86);
}

.preview-scene-card.has-scene-cover .preview-scene-progress-track i {
    background: linear-gradient(180deg, #FFFFFF 0%, #E8EFF7 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.preview-scene-card.has-scene-cover .preview-scene-progress small {
    color: #2B3948;
    font-weight: 600;
    text-align: left;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 10px rgba(255, 255, 255, 0.85);
}

.preview-scene-card.has-scene-reference {
    overflow: visible;
}

/* 部分预约 + 有照片：照片同样被压成底纹，状态色落在罩层上——
   罩层从中性浅色换成浅天青，整张卡的色调就变了，"还剩多少可约"
   一眼看得出来，而照片本身不用被状态色染脏。 */
.preview-scene-card.partial.has-scene-cover {
    background: linear-gradient(
        152deg,
        #FFFFFF 0%,
        #E4F1FA 46%,
        #D2E7F6 100%
    );
}

.preview-scene-card.partial.has-scene-cover::before {
    background: linear-gradient(
        152deg,
        rgba(234, 244, 252, 0.44) 0%,
        rgba(220, 237, 249, 0.48) 48%,
        rgba(210, 231, 246, 0.52) 100%
    );
}

/* 照片保持本色、全不透明，弱化交给上面的罩层。不要用
   mix-blend-mode: luminosity——它会把照片的颜色全抽掉只剩明度，
   画面糊成一层褐色雾。 */
.preview-scene-card.partial.has-scene-cover .preview-scene-cover {
    opacity: 1;
    filter: saturate(0.82) contrast(0.96);
    mix-blend-mode: normal;
}

/* 底板换成天青调，和罩层同色系；
   最坏情况（最暗的照片 + 最浓那端罩层）深蓝字仍有 9.1:1。 */
.preview-scene-card.partial.has-scene-cover h4 {
    background: rgba(234, 244, 252, 0.82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 1px 2px rgba(40, 84, 124, 0.14),
        0 0 16px rgba(240, 249, 255, 0.75);
    color: #0E3352;
    text-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.92),
        0 1px 0 rgba(52, 96, 136, 0.28),
        0 2px 3px rgba(40, 84, 124, 0.16);
}

.preview-scene-card.partial.has-scene-cover .preview-scene-progress {
    background: rgba(234, 244, 252, 0.76);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 1px 2px rgba(40, 84, 124, 0.12),
        0 0 14px rgba(240, 249, 255, 0.65);
}

.preview-scene-card.partial.has-scene-cover .preview-scene-progress-track {
    background: rgba(20, 73, 111, 0.28);
    box-shadow:
        inset 0 1px 2px rgba(12, 52, 84, 0.32),
        0 1px 0 rgba(255, 255, 255, 0.88);
}

.preview-scene-card.partial.has-scene-cover .preview-scene-progress-track i {
    background: linear-gradient(180deg, #FFFFFF 0%, #E2F0FB 100%);
}

.preview-scene-card.partial.has-scene-cover .preview-scene-progress small {
    /* 罩层最浓那端 + 最暗照片上，深蓝 #14496F 仍过 AA */
    color: #14496F;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 0 10px rgba(240, 249, 255, 0.9);
}

.preview-scene-reference-popover {
    position: absolute;
    top: 0;
    left: calc(100% + 12px);
    z-index: 20;
    display: grid;
    width: clamp(220px, 21vw, 300px);
    margin: 0;
    padding: 5px;
    gap: 5px;
    visibility: hidden;
    opacity: 0;
    border: 1px solid #D8E0E7;
    border-radius: var(--radius-md);
    background: #FFFFFF;
    box-shadow: 0 16px 36px rgba(28, 39, 49, 0.2);
    pointer-events: none;
    transform: translateX(-6px) scale(0.985);
    transform-origin: left top;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.preview-scene-reference-popover img {
    display: block;
    width: 100%;
    max-height: min(52vh, 400px);
    border-radius: var(--radius-xs);
    object-fit: contain;
}

@media (hover: hover) and (pointer: fine) {
    .preview-scene-card:hover,
    .preview-scene-card:focus {
        z-index: 2;
        border-color: #8EA4BC;
        box-shadow:
            0 var(--card-hover-depth) 0 var(--card-edge),
            0 16px 30px color-mix(in srgb, var(--card-shadow), transparent 8%),
            inset 1px 1px 0 rgba(255, 255, 255, 0.9),
            inset -1px -1px 0 rgba(54, 63, 72, 0.05);
        transform: translateY(-3px) scale(1.006);
    }

    .preview-scene-card.has-scene-reference:hover,
    .preview-scene-card.has-scene-reference:focus-visible {
        z-index: 30;
    }

    .preview-scene-card.has-scene-reference:hover .preview-scene-reference-popover,
    .preview-scene-card.has-scene-reference:focus-visible .preview-scene-reference-popover {
        visibility: visible;
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.preview-scene-card:active {
    box-shadow:
        0 1px 0 var(--card-edge),
        0 5px 10px color-mix(in srgb, var(--card-shadow), transparent 18%),
        inset 1px 1px 0 rgba(255, 255, 255, 0.7),
        inset -1px -1px 0 rgba(54, 63, 72, 0.08);
    transform: translateY(2px);
    transition-duration: 80ms;
}

.preview-scene-card:focus-visible {
    outline: 2px solid #5E82BF;
    outline-offset: 2px;
}

@keyframes preview-card-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1180px) and (min-width: 769px) {
    .preview-floor-map {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: repeat(6, minmax(0, 1fr));
        gap: 10px;
        padding-inline: 4px;
    }

    .preview-scene-card[data-map-area="main-cabin"] {
        grid-column: 2;
        grid-row: 1 / 3;
    }

    .preview-scene-card[data-map-area="main-bedroom"] {
        grid-column: 3 / 5;
        grid-row: 1 / 3;
    }

    .preview-scene-card[data-map-area="main-bar"] {
        grid-column: 5 / 7;
        grid-row: 1 / 3;
    }

    .preview-scene-card[data-map-area="main-study"] {
        grid-column: 2 / 4;
        grid-row: 3 / 5;
    }

    .preview-scene-card[data-map-area="main-living"] {
        grid-column: 4 / 7;
        grid-row: 3 / 5;
    }

    .preview-scene-card[data-map-area="main-workbench"] {
        grid-column: 2;
        grid-row: 5 / 7;
    }

    .preview-scene-card[data-map-area="main-wood-kitchen"] {
        grid-column: 3 / 5;
        grid-row: 5 / 7;
    }

    .preview-scene-card[data-map-area="main-kids-tea"] {
        grid-column: 5 / 7;
        grid-row: 5 / 7;
    }

    .preview-scene-card[data-map-area="service-laundry"] {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .preview-scene-card[data-map-area="service-bathroom"] {
        grid-column: 1;
        grid-row: 3 / 5;
    }

    .preview-scene-card[data-map-area="service-black-kitchen"] {
        grid-column: 1;
        grid-row: 5 / 7;
    }

    .preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card {
        padding: 8px;
    }

    .preview-scene-card h4 {
        font-size: 12px;
    }

}

@media (max-width: 768px) {
    .studio-booking-page .list-view.studio-layout-active {
        padding: 12px;
    }

    .studio-booking-page .list-view.preview-cyclorama-active,
    .studio-booking-page .list-view.preview-cyclorama-active #studioGroups {
        display: block;
    }

    .studio-booking-page .list-view.preview-cyclorama-active .preview-single-floor-map {
        min-height: 0;
        flex: none;
    }

    .studio-booking-page .list-view.preview-cyclorama-active .studio-map-zone-seventh-floor,
    .studio-booking-page .list-view.preview-cyclorama-active .studio-map-zone-seventh-floor .studio-floor-zones,
    .studio-booking-page .list-view.preview-cyclorama-active .studio-map-zone-seventh-floor .studio-floor-zones > .studio-map-zone,
    .studio-booking-page .list-view.preview-sixth-floor-active .studio-map-zone-sixth-floor,
    .studio-booking-page .list-view.preview-sixth-floor-active .studio-map-zone-sixth-floor .studio-map-cards,
    .studio-booking-page .list-view.preview-sixth-floor-active .studio-overview-card[data-studio-group="sixth-floor"] {
        height: auto;
    }

    .studio-booking-page .list-view.preview-cyclorama-active .studio-map-zone-seventh-floor .studio-map-cards,
    .studio-booking-page .list-view.preview-sixth-floor-active .studio-map-zone-sixth-floor .studio-map-cards {
        grid-template-rows: none;
        grid-auto-rows: auto;
        align-content: start;
    }

    .studio-booking-page .list-view.preview-cyclorama-active .studio-map-zone-small .studio-map-cards {
        grid-template-columns: 1fr;
    }

    .preview-single-floor-map .studio-floor-zones > .studio-map-zone-small {
        padding-top: 12px;
        padding-left: 0;
        border-top: 1px solid #E1E7ED;
        border-left: 0;
    }

    .preview-single-floor-map .studio-map-zone-seventh-floor .studio-map-cards {
        gap: 10px;
    }

    .preview-single-floor-map .studio-map-zone-seventh-floor .studio-overview-card {
        height: auto;
    }

    .preview-workspace {
        padding: 30px 0 8px;
    }

    .preview-workspace-header {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .preview-floor-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 10px;
        height: auto;
        padding: 0;
    }

    .preview-floor-map-sixth-floor {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 540px;
        aspect-ratio: 2 / 1;
    }

    .preview-content-6f {
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .preview-scene-card {
        --card-depth: 2px;
        --card-hover-depth: 3px;
        --card-shadow-y: 7px;
        --card-shadow-blur: 15px;
        grid-column: auto !important;
        grid-row: auto !important;
        min-height: 132px;
        padding: 15px;
    }

    .preview-scene-card.has-scene-reference {
        overflow: hidden;
    }

    .preview-scene-reference-popover {
        display: none;
    }
}

@media (max-width: 480px) {
    .preview-floor-map:not(.preview-floor-map-sixth-floor) {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .preview-scene-card {
        animation: none;
        transition: none;
    }

    .preview-scene-card:hover,
    .preview-scene-card:focus,
    .preview-scene-card:active {
        transform: none;
    }

    .preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card:hover,
    .preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card:focus,
    .preview-floor-map-sixth-floor .sixth-floor-layout-card.preview-scene-card:active {
        transform: none;
    }
}

/* 7F 实景棚统一卡片内部结构：
   照片使用同一套裁切；标题、状态和进度收进同一个右侧信息栏。 */
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.has-scene-cover {
    grid-template-columns: minmax(0, 1fr) 76px;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    padding: 8px;
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-cover-group {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    border-radius: var(--radius-md);
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-cover {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
    filter: saturate(0.82) contrast(0.96);
    opacity: 1;
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-info {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.has-scene-cover .preview-scene-card-top,
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.has-scene-cover.has-progress .preview-scene-card-top {
    display: block;
    width: 100%;
    height: auto;
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.has-scene-cover h4,
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.has-scene-cover.has-progress h4 {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-height: 36px;
    padding: 6px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-shadow: none;
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card[data-map-area="main-bar"] .preview-scene-cover,
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card[data-map-area="main-living"] .preview-scene-cover,
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card[data-map-area="main-study"] .preview-scene-cover {
    object-position: center;
}

@media (max-width: 1180px) and (min-width: 769px) {
    .preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.has-scene-cover {
        grid-template-columns: minmax(0, 1fr) 70px;
        gap: 8px;
    }

    .preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.has-scene-cover h4,
    .preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.has-scene-cover.has-progress h4 {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.has-scene-cover {
        grid-template-columns: minmax(0, 1fr) 72px;
    }
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-title-line {
    display: block;
    max-width: 100%;
    white-space: nowrap;
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.has-scene-cover .preview-scene-progress,
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-full-label,
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-expired-label {
    position: static;
    box-sizing: border-box;
    width: 100%;
    min-height: 28px;
    margin: 0;
    padding: 5px 7px;
    border: 1px solid #C7D1DD;
    border-radius: var(--radius-md);
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(31, 45, 61, 0.11);
    color: #243247;
    font-weight: 600;
}

/* 7F 实景总览视觉收束：以 Bento 网格为骨架，但让每张卡拥有一致的
   内边距、照片窗口和信息栏节奏，减少截图中“拼贴感过重”的断裂。 */
.preview-floor-map:not(.preview-floor-map-sixth-floor) {
    gap: 12px;
    padding: 16px 24px 24px;
    background:
        radial-gradient(circle at 72% 12%, rgba(255,255,255,.78), transparent 34%),
        #EAF0F6;
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card {
    border: 1px solid #AEBCCC;
    border-radius: var(--radius-xl);
    box-shadow:
        0 1px 2px rgba(36, 52, 70, .08),
        0 8px 18px rgba(36, 52, 70, .10);
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.has-scene-cover {
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 12px;
    padding: 9px;
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-cover-group {
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(23, 38, 56, .16);
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-info {
    gap: 8px;
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.has-scene-cover h4,
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.has-scene-cover.has-progress h4 {
    min-height: 38px;
    padding: 6px 7px;
    font-size: 13px;
    line-height: 1.25;
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.has-scene-cover .preview-scene-progress,
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-full-label,
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-expired-label {
    min-height: 27px;
    border-color: #C3CEDB;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(31, 45, 61, .08);
    font-size: 11px;
}

@media (max-width: 1180px) and (min-width: 769px) {
    .preview-floor-map:not(.preview-floor-map-sixth-floor) {
        gap: 10px;
        padding-inline: 12px;
    }

    .preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.has-scene-cover {
        grid-template-columns: minmax(0, 1fr) 82px;
        gap: 9px;
    }
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-full-label,
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-expired-label {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.has-scene-cover .preview-scene-progress small {
    margin-top: 4px;
    text-align: center;
}

/* 7F 的可预约、部分预约和已约满状态复用 6F 的卡面配色。
   实拍照片和 7F 的网格布局保持不变，只统一卡面、边框和状态文字颜色。 */
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.available {
    --card-border: #7C8A9E;
    border-color: var(--card-border);
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.partial {
    --state-wash:
        #FF716B 0%,
        #FFA45D 62%,
        #FFC154 100%;
    --card-edge: #E86B4E;
    --card-border: #FF805C;
    --card-shadow: rgba(180, 75, 43, 0.16);
    border-color: var(--card-border);
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.full {
    --state-wash: rgba(34, 34, 36, 1) 0%, rgba(25, 26, 29, 1) 100%;
    --card-edge: #101113;
    --card-border: #17181A;
    --card-shadow: rgba(20, 21, 24, 0.22);
    border-color: var(--card-border);
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.available,
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.partial,
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.full {
    background:
        linear-gradient(145deg, var(--state-wash)),
        linear-gradient(
            126deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(255, 255, 255, 0.42) 16%,
            rgba(255, 255, 255, 0.08) 30%,
            rgba(255, 255, 255, 0) 44%
        ),
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.82) 0%,
            rgba(251, 253, 255, 0.70) 50%,
            rgba(243, 248, 255, 0.58) 100%
        ),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23g)' opacity='0.5'/></svg>");
    backdrop-filter: blur(26px) saturate(170%) brightness(1.05);
    -webkit-backdrop-filter: blur(26px) saturate(170%) brightness(1.05);
    box-shadow:
        0 1px 2px rgba(38, 52, 68, 0.05),
        0 5px 12px rgba(38, 52, 68, 0.08),
        0 18px 34px rgba(38, 52, 68, 0.11),
        0 36px 64px rgba(38, 52, 68, 0.07);
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.available.has-scene-cover h4,
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.available.has-scene-cover.has-progress h4 {
    color: #252B33;
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.partial.has-scene-cover h4,
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.partial.has-scene-cover.has-progress h4 {
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(150, 62, 24, 0.42);
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.partial .preview-scene-progress {
    background: rgba(158, 71, 30, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 1px 2px rgba(148, 63, 30, 0.10);
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.partial .preview-scene-progress-track {
    background: rgba(158, 71, 30, 0.30);
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.partial .preview-scene-progress-track i {
    background: #FFFFFF;
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.partial .preview-scene-progress small {
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(150, 62, 24, 0.42);
}

/* 7F 进度条直接落在卡面上，不再套一层圆角底板。 */
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.has-scene-cover .preview-scene-progress {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.full.has-scene-cover h4,
.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.full.has-scene-cover.has-progress h4 {
    color: #F7F7F8;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.34);
}

.preview-floor-map:not(.preview-floor-map-sixth-floor) .preview-scene-card.full .preview-scene-full-label {
    border-color: transparent;
    background: #4A4D52;
    color: #F0F1F3;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}