* { margin: 0; padding: 0; box-sizing: border-box; }

body, html {
    width: 100%; height: 100%; overflow: hidden;
    background: #111;
    display: flex; justify-content: center; align-items: center;
    font-family: "MiSans", -apple-system, "PingFang SC", sans-serif;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body::-webkit-scrollbar,
html::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* 与 script 中 DESIGN 尺寸一致；缩放原点在左上，由 #app-stage 承担布局宽高 */
.app-stage {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    line-height: 0;
}

#app {
    width: 2880px;
    height: 1620px;
    position: relative;
    transform-origin: top left;
    overflow: hidden;
    flex-shrink: 0;
    scrollbar-width: none;
}
#app::-webkit-scrollbar {
    display: none;
}

/* ========== Design Tokens ========== */
:root {
    /* Label/Text_Positive_T1 */
    --text-positive-t1: rgba(14, 15, 18, 0.98);
    /* Label/Text_Positive_T2 */
    --text-positive-t2: rgba(14, 15, 18, 0.6);
    /* Outher/quick_control_Button_off */
    --card-bg-off: rgba(38, 38, 44, 0.1);
    /* Title/Title_3 */
    --font-title3-size: 42px;
    --font-title3-weight: 500;
    --font-title3-lineheight: 56px;
    /* Text/Text_2 */
    --font-text2-size: 34px;
    --font-text2-weight: 500;
    --font-text2-lineheight: 46px;
    /* MasterGo 12:07300 全屏画板裁切与分区 */
    --mg-common-artboard-h: 1620px;
    --mg-common-status-h: 102px;
    --mg-common-tab-h: 164px;
    --mg-common-dock-h: 120px;
    /* DSL TabBar_L1 y=100；独立 StatusBar 高 102，与画板对齐用 102 */
    --mg-tabbar-top: 102px;
    --mg-tabbar-x: 216px;
    --mg-tabbar-w: 2448px;
    /* 内容区起点：状态栏 + Tab（与 DSL 266≈102+164 一致） */
    --mg-panel-body-top: calc(var(--mg-common-status-h) + var(--mg-common-tab-h));
    /* Secondary/Secondary_Text_1 */
    --font-secondary1-size: 24px;
    --font-secondary1-weight: 500;
    --font-secondary1-lineheight: 32px;
    /* Fill/Fill_Positive_F5 — 编辑按钮（资源 SVG 内已含底） */
    --fill-positive-f5: rgba(206, 210, 219, 0.72);
    /* Fill/Fill_Positive_F1 — 沉浸二级 Segmented 选中底 */
    --fill-positive-f1: rgba(255, 255, 255, 0.98);
    /* 沉浸二级底板（MasterGo 36:43307） */
    --mg-immersive-plate-w: 1132px;
    --mg-immersive-seg-slot: 172px;
    --mg-immersive-seg-pad: 4px;
    --mg-immersive-seg-gap: 4px;
    /* Primary_index_1/Primary — DesignPalette.brandPrimary */
    --brand-primary: #27AF6E;
    /* 画板底色 paint_2:1311 */
    --mg-panel-canvas-gray: #AFAFAF;
    /* 可添加区顶边距画板顶 810px（编辑态 #page-common 自 StatusBar 下起，故用 calc） */
    --mg-edit-tray-top-from-artboard: 868px;
    /* 可选区：卡片区相对面板顶下移（对齐 常用-编辑.png） */
    --mg-edit-tray-cards-offset-y: 48px;
    /* 可选区双行高度：236×2 + 行间距 36 */
    --mg-edit-tray-grid-two-row-h: calc(236px + 36px + 236px);
    /* 编辑态：常用堆叠整体上移，使 #cards-grid 与原先「已添加」区对齐（72+236+36+236+36 − 120） */
    --mg-edit-browse-stack-lift: -496px;
    --mg-edit-main-cards-offset-y: 93px;
    --mg-edit-tray-cards-extra-offset-y: 0px;
    /* 编辑态：常用卡片区上滑与可选区进场同一节奏 — 600ms, Default 曲线 (10-1.3-1.5) */
    --mg-edit-motion-duration: 0.6s;
    --mg-edit-motion-ease: var(--ease-edit-motion);
    --token-text-negative-t4: rgba(255, 255, 255, 0.2);
    --toggle-square-bg-duration: 220ms; /* ToggleSquareButton MotionSpec 默认 */
}

/* ========== StatusBar & Dock (fixed, using images) ========== */
.status-bar {
    position: absolute; top: 0; left: 0; right: 0;
    height: 102px; z-index: 110;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.status-bar-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.dock-bar {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 120px; z-index: 110;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.dock-bar-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* 快控面板 Dock 热区（仅 QuickSettings #app 内嵌占位，勿影响合并版 cockpit-dock） */
#app #dock-panel-btn {
    position: absolute;
    left: calc(25.6% - 30px);
    width: calc(4% + 30px);
    top: 0;
    height: 100%;
    cursor: pointer;
    z-index: 10;
}

/* ========== P档 Background ========== */
.background-p {
    position: absolute; inset: 0;
    background: url('P档.png') center/cover no-repeat;
    z-index: 1;
}

/* ========== Pull indicator（定位在 Dock 栏位置，由 resizeApp() 动态设置 top/left/width/height） ========== */
.pull-indicator {
    position: fixed;
    /* top / left / width / height 由 JS resizeApp() 实时写入 */
    z-index: 10000;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    background: transparent;
}
.pull-indicator:active {
    cursor: grabbing;
}

/* 面板打开时顶部热区仍可点击关闭面板，但禁止拖拽手势 */

/* ========== Panel ========== */
.panel {
    position: absolute;
    inset: 0;
    transform: translateY(-100%);
    z-index: 50;
    will-change: transform, opacity;
    transition: transform 0.6s var(--ease-panel-reveal, linear), opacity 0.4s var(--ease-gentle, linear);
    display: block;
    /* 关闭时整块面板仍在布局层，会挡住下层；禁止命中才能让顶部手势落到 .pull-indicator */
    pointer-events: none;
}
.panel.open {
    transform: translateY(0);
    pointer-events: auto;
}
.panel.closing {
    pointer-events: none;
}
/* 常用面板底：固定在 #app 画板内；opacity 由 JS 与面板位移进度同步 */
.panel-scene {
    position: absolute;
    inset: 0;
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s 0.6s;
}
.panel-scene.is-active {
    visibility: visible;
    transition: visibility 0s 0s;
}
.panel-scene__overlay {
    position: absolute;
    inset: 0;
    /* 初始无模糊无底色，由 JS syncPanelSceneProgress 随面板进度驱动 */
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

/* Tab Bar：DSL TabBar_L1 2448×164 @ (216,100)；顶 102 对齐 StatusBar */
.tab-bar {
    position: absolute;
    left: var(--mg-tabbar-x);
    top: var(--mg-tabbar-top);
    width: var(--mg-tabbar-w);
    height: var(--mg-common-tab-h);
    z-index: 15;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 48px;
    padding: 20px 0 0 0;
    box-sizing: border-box;
    opacity: 1;
    transition: opacity 0.38s var(--ease-gentle, linear);
}
.panel.edit-mode .tab-bar {
    opacity: 1;
    pointer-events: auto;
}
.panel.edit-mode .tab-items {
    opacity: 0;
    pointer-events: none;
}
.panel.edit-mode .tab-back {
    pointer-events: auto;
}
.panel.edit-mode #edit-btn-container {
    width: 80px;
    pointer-events: auto;
}
.edit-tips {
    position: absolute;
    left: 50%;
    top: 60px;
    transform: translateX(-50%);
    width: 446px;
    height: 64px;
    border-radius: 32px;
    background: var(--card-bg-off);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 24px 16px 18px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease-gentle, linear);
}
.edit-tips__icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
}
.edit-tips__text {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    color: var(--text-positive-t2);
    white-space: nowrap;
}
.panel.edit-mode .edit-tips {
    opacity: 1;
}

/* ========== 编辑态 Tab 区渐变批贵（将 Tab区内卡片逐渐淡出） ========== */

.tab-back, .tab-edit, .tab-done {
    width: 80px; height: 80px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-positive-t2);
    flex-shrink: 0;
}
.tab-back {
    background: var(--fill-positive-f5);
    border-radius: 20px;
    color: var(--text-positive-t2);
    transition: opacity 0.2s, transform 0.15s;
}
.tab-back:hover { opacity: 0.92; }
.tab-back:active { transform: scale(0.92); }

.tab-edit {
    background: transparent;
    /* 圆角由资源 path 控制；此处略放大可点区域 */
    border-radius: 24px;
    transition: opacity 0.2s, transform 0.15s;
}
.tab-edit__svg {
    display: block;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    overflow: visible;
}
.tab-edit:hover { opacity: 0.92; }
.tab-edit:active { transform: scale(0.92); }

.tab-done {
    position: absolute;
    top: 0;
    right: 0;
    width: 172px;
    height: 80px;
    padding: 0;
    border-radius: 20px;
    background: var(--fill-positive-f5);
    color: var(--text-positive-t1);
    font-family: "MiSans", -apple-system, "PingFang SC", sans-serif;
    font-size: 29px;
    font-weight: 500;
    line-height: 40px;
    opacity: 1;
    transition: opacity 0.35s var(--ease-gentle, linear), transform 0.15s;
}
.tab-done:hover { opacity: 0.92; }
.tab-done:active { transform: scale(0.96); }

.tab-right-placeholder {
    width: 80px; height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    margin-left: auto;
    position: relative;
    overflow: visible;
}

.tab-items {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    min-width: 0;
    position: relative;
}

.tab-item {
    width: 200px;
    border: none; background: none; cursor: pointer;
    font-family: inherit;
    font-size: var(--font-title3-size);
    font-weight: var(--font-title3-weight);
    line-height: var(--font-title3-lineheight);
    color: var(--text-positive-t2);
    padding: 0;
    position: relative;
    transition: color 0.3s;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.tab-item::after {
    content: '';
    display: block;
    width: 80px; height: 4px; border-radius: 2px;
}
.tab-item.active {
    color: var(--text-positive-t1);
    font-weight: var(--font-title3-weight);
}
.tab-indicator {
    position: absolute;
    width: 80px; height: 4px; border-radius: 2px;
    background: var(--brand-primary);
    pointer-events: none;
    top: 0; left: 0;
    /* 500ms, Default spring curve (10-1.3-1.5) — JS 会通过 spring 动画驱动 */
}
.tab-item:active { transform: scale(0.95); }

.tab-edit.is-hidden { opacity: 0; pointer-events: none; display: none; }
.tab-done.is-hidden { opacity: 0; pointer-events: none; }
.tab-edit.hidden { opacity: 0; pointer-events: none; display: none; }
.tab-done.hidden { opacity: 0; pointer-events: none; display: none; }

/* ========== Pages：位于 StatusBar+Tab 之下、Dock 之上（与画板中间层对齐） ========== */
.page {
    flex: none;
    position: absolute;
    top: var(--mg-panel-body-top);
    left: 0;
    right: 0;
    bottom: var(--mg-common-dock-h);
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transform-origin: center center;
}
#page-common.page {
    overflow: hidden;
}
.page.active {
    opacity: 1;
    pointer-events: auto;
}
/* Tab 切换横向滑动进场由 JS _animatePageSlide 控制 */

.page-bg-container {
    position: relative;
    width: 100%;
    height: 100%;
}
.page-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.page-content-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transform-origin: center center;
    will-change: transform;
}

.panel.edit-mode #page-common.page {
    top: var(--mg-common-status-h);
    /* 可选区背景需延伸到画板底（Dock 下），子层 bottom 为负时不可再裁切 */
    overflow: visible;
    /* Tab 区透明度遮罩由 JS 动态控制（showTabMask / scheduleTabMaskFadeOut） */
}

/* ========== Page background（空调 / 座椅：全幅铺满 #panel，顶至底） ========== */
.page-bg-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.page-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 仅「常用」等标准内容区自 Tab 下缘起；空调/座椅全幅见 .page--fullbleed */
.page--fullbleed {
    top: 0;
    bottom: 0;
    overflow: hidden;
}

/* ========== Common：12:07300 容器 729227 / 729254 + 729536 卡片区 ========== */
/* 注意：勿写 #page-common { position: relative }，否则会覆盖 .page 的 position:absolute，
   导致常用页在流内高度塌为 0（子层均为 absolute），卡片与装饰条全部不可见。 */

/* 浏览层：铺满常用页，编辑态叠在 dismiss 之上、可选区之下 */
#page-common > .common-browse {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
}

/* 浏览态：两行装饰图 + 两行卡片（超出不展示） */
.common-browse {
    width: 100%;
    height: 100%;
    transition: transform var(--mg-edit-motion-duration) var(--mg-edit-motion-ease);
}
.panel.edit-mode .common-browse {
    opacity: 1;
    pointer-events: none;
    transform: translateY(var(--mg-edit-browse-stack-lift));
}
.panel.edit-mode .common-browse .cards-grid--common {
    transform: translateY(var(--mg-edit-main-cards-offset-y));
}
.panel.edit-mode .common-browse .card,
.panel.edit-mode .common-browse .card-badge {
    pointer-events: auto;
}
/* 编辑模式主网格卡片：在 touch 开始前就通过 CSS 禁用手势识别
   （在 pointerdown 里用 JS 设置 touch-action 无效，浏览器在派发 pointerdown 之前
   就已读取了 touch-action，因此 Android 500ms 长按仍会触发 pointercancel）*/
.panel.edit-mode .common-browse .card {
    touch-action: none;
}

.page-common-stack {
    width: var(--mg-tabbar-w);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
    /* DSL：装饰条 y=338，内容区自 y=266 起 → padding-top 72 */
    padding-top: 72px;
    padding-bottom: 40px;
    box-sizing: border-box;
}

.page-common-strip {
    display: block;
    width: 2448px;
    height: 236px;
    object-fit: fill;
    flex-shrink: 0;
    pointer-events: none;
    opacity: 1;
    /* 沉浸渐隐/渐显由 JS 控制（缩放 400ms / 透明度 300ms Default），勿用 CSS transition */
    transition: none;
}
.panel.edit-mode .page-common-strip {
    opacity: 0;
}

/* ─── 切图行 ─── */
.strip-row {
    display: flex;
    gap: 36px;
    width: 2448px;
    height: 236px;
    flex-shrink: 0;
    opacity: 1;
    transition: none;
}
.strip-card {
    flex: 0 0 378px;
    height: 236px;
    position: relative;
    border-radius: 0;
    overflow: visible;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
}
.strip-card--wide {
    flex: 0 0 792px;
}
.strip-card--third {
    flex: 0 0 792px;
}
.strip-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* ─── 状态卡片覆盖层（后视镜/车门锁/后备箱）─── */
.strip-card-state-overlay {
    position: absolute;
    inset: 0;
    padding: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
    z-index: 2;
}
.strip-card-state-overlay__title {
    padding-left: 6px;
    font-family: "MiSans", -apple-system, "PingFang SC", sans-serif;
    font-size: 34px;
    font-weight: 380;
    line-height: 46px;
    color: rgba(255, 255, 255, 0.96);
}
.strip-card-state-overlay__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 16px;
    border-radius: 20px;
    background: transparent;
    border: 2px solid rgba(229, 229, 229, 0.6);
    font-family: "MiSans", -apple-system, "PingFang SC", sans-serif;
    font-size: 24px;
    font-weight: 380;
    line-height: 32px;
    color: rgba(255, 255, 255, 0.98);
    align-self: flex-start;
    white-space: nowrap;
    min-height: 40px;
}
.strip-card[data-card-id="mirror"] .strip-card-state-overlay__status {
    min-width: 172px;
    min-height: 80px;
    padding: 18px 28px;
    border: 0;
    border-radius: 20px;
    background: rgba(9, 9, 10, 0.2);
    font-size: 29px;
    line-height: 38px;
    pointer-events: auto;
    cursor: pointer;
    transform-origin: center center;
    will-change: transform;
}
.strip-card[data-card-id="mirror"],
.strip-card[data-card-id="door-lock"],
.strip-card[data-card-id="trunk"] {
    border-radius: 20px;
    overflow: hidden;
}
.strip-card-drill-badge {
    position: absolute;
    right: 24px;
    top: 24px;
    width: 52px;
    height: 52px;
    z-index: 3;
    pointer-events: none;
}
.strip-card-drill-badge svg {
    display: block;
    width: 52px;
    height: 52px;
}

/* ─── Dock 音乐文字覆盖（英文版用）─── */
.dock-music-text-overlay {
    position: absolute;
    left: 128px;
    width: 520px;
    top: 0;
    height: 100%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
    background: rgba(210, 218, 224, 0.97);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}
.dock-music-text-overlay__line {
    font-family: "MiSans", -apple-system, "PingFang SC", sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    white-space: nowrap;
}
.dock-music-text-overlay__title {
    color: rgba(14, 15, 18, 0.88);
}
.dock-music-text-overlay__sep,
.dock-music-text-overlay__artist {
    font-weight: 400;
    color: rgba(14, 15, 18, 0.5);
}
.dock-music-text-overlay__progress {
    width: 100%;
    max-width: 420px;
    height: 4px;
    border-radius: 2px;
    background: rgba(14, 15, 18, 0.12);
    overflow: hidden;
}
.dock-music-text-overlay__progress-fill {
    width: 38%;
    height: 100%;
    border-radius: 2px;
    background: #2db55a;
}

/* 二排三张（驾驶模式/大灯调节/屏幕亮度）上层内容，像素对齐 792x236 底图 */
.strip-overlay-card {
    position: absolute;
    inset: 0;
    padding: 24px;
    box-sizing: border-box;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.strip-overlay-card__header {
    width: 744px;
    height: 52px;
    padding-left: 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.strip-overlay-card__title {
    font-size: var(--font-text2-size);
    font-weight: var(--font-text2-weight);
    line-height: var(--font-text2-lineheight);
    color: rgba(255, 255, 255, 0.98); /* Static_Color/White_S1 */
}
.strip-overlay-card__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.strip-overlay-card__row {
    width: 744px;
    height: 112px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.strip-overlay-card__side-btn {
    width: 130px;
    height: 112px;
    border-radius: 20px;
    background: rgba(9, 9, 10, 0.2); /* Static_Color/Black_S4 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.strip-overlay-card__side-btn--text {
    font-size: var(--font-text2-size);
    font-weight: var(--font-text2-weight);
    line-height: var(--font-text2-lineheight);
    color: rgba(255, 255, 255, 0.98);
}
.strip-segmented {
    --strip-seg-slot: 144px;
    --strip-seg-pad: 4px;
    --strip-seg-gap: 4px;
    --strip-seg-count: 4;
    --strip-seg-index: 0;
    position: relative;
    height: 112px;
    border-radius: 20px;
    padding: var(--strip-seg-pad);
    box-sizing: border-box;
    background: rgba(9, 9, 10, 0.2);
    overflow: hidden;
}
.strip-segmented--five {
    --strip-seg-slot: 144px;
    --strip-seg-count: 5;
    width: 744px;
}
.strip-segmented--four {
    --strip-seg-slot: 144px;
    --strip-seg-count: 4;
    width: 598px;
}
.strip-segmented__thumb {
    position: absolute;
    top: var(--strip-seg-pad);
    left: var(--strip-seg-pad);
    width: var(--strip-seg-slot);
    height: calc(112px - var(--strip-seg-pad) * 2);
    border-radius: 16px;
    background: rgba(229, 229, 229, 0.4); /* Static_Color/White_S3, 38:41547 */
    transition: transform 170ms var(--ease-standard, linear);
    will-change: transform;
}
.strip-segmented__items {
    position: relative;
    display: flex;
    gap: var(--strip-seg-gap);
    z-index: 1;
    height: 100%;
}
.strip-segmented__item {
    width: var(--strip-seg-slot);
    height: 104px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: rgba(255, 255, 255, 0.98);
    font-size: var(--font-text2-size);
    font-weight: var(--font-text2-weight);
    line-height: var(--font-text2-lineheight);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 170ms var(--ease-standard, linear), color 170ms var(--ease-standard, linear);
    padding: 0;
}
.strip-segmented__item svg {
    width: 48px;
    height: 48px;
}
.strip-segmented__item.is-active {
    color: rgba(255, 255, 255, 0.98);
}
.strip-segmented__item:active {
    transform: scale(0.96);
}
.strip-slider {
    position: relative;
    width: 598px;
    height: 112px;
    border-radius: 20px;
    background: rgba(9, 9, 10, 0.2);
    cursor: pointer;
    overflow: hidden;
    touch-action: none;
}
.strip-slider__fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 132px;
    height: 112px;
    border-radius: 20px 0 0 20px;
    background: rgba(229, 229, 229, 0.4);
    transition: width 170ms var(--ease-standard, linear);
    will-change: width;
}
.strip-slider__icon {
    position: absolute;
    left: 42px;
    top: 32px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.panel.edit-mode .strip-row {
    opacity: 0;
}
.panel.immersive-active .strip-row {
    pointer-events: none;
}

/* ─── 弹窗 ─── */
.popup-overlay {
    position: absolute;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 500ms var(--ease-panel-reveal, linear);
}
.popup-overlay.is-active {
    pointer-events: auto;
    opacity: 1;
}
.popup-mask {
    position: absolute;
    inset: 0;
    background: rgba(114, 114, 114, 0.4);
}
.popup-content {
    position: relative;
    z-index: 1;
    transform: scale(0.8);
    transition: transform 500ms var(--ease-panel-reveal, linear);
}
.popup-overlay.is-active .popup-content {
    transform: scale(1);
}
.popup-content img {
    max-width: 2304px;
    max-height: 1134px;
    border-radius: 36px;
    display: block;
}

/* DSL 容器 729536：2448 宽、gap 36、卡片 378×236 */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(6, 378px);
    gap: 24px;
    padding: 40px 120px 60px;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.cards-grid--common {
    width: 2448px;
    margin: 0;
    padding: 0;
    gap: 36px;
    grid-template-columns: repeat(6, 378px);
    grid-template-rows: repeat(2, 236px);
    grid-auto-rows: 0;
    overflow: visible;
}

/* ─── MG 2:1356 编辑层 ─── */
.edit-dismiss-zone {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: transparent;
    touch-action: none;
}

.common-edit-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.28s var(--ease-gentle, linear);
}
.panel.edit-mode .common-edit-layer {
    opacity: 1;
    pointer-events: auto;
}

/* 可添加区：顶边距画板顶 810px；#page-common 在编辑态自 y=StatusBar 起，故 top = 810−102 */
/* 非编辑态 z-index 须低于 .common-browse(2)，否则 opacity:0 仍可能挡住整页内容绘制 */
#page-common > .edit-tray-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--mg-edit-tray-top-from-artboard) - var(--mg-common-status-h));
    /* 延伸进 Dock 占位区，底色铺到画板底，由 Dock 图层盖住 */
    bottom: calc(-1 * var(--mg-common-dock-h));
    height: auto;
    z-index: 0;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(14, 15, 18, 0.06);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 100%, 0);
    transition:
        transform var(--mg-edit-motion-duration) var(--mg-edit-motion-ease),
        opacity var(--mg-edit-motion-duration) var(--mg-edit-motion-ease);
    will-change: transform;
}
.panel.edit-mode #page-common > .edit-tray-panel {
    z-index: 3;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
}

.edit-tray-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* 基于面板底色（60%白+blur450）叠加 20% 纯白 */
    background: rgba(255, 255, 255, 0.2);
    pointer-events: none;
}

.edit-tray-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    box-sizing: border-box;
    pointer-events: auto;
    min-height: 0;
}

.edit-tray-scroll {
    flex: 1 1 auto;
    min-height: calc(var(--mg-edit-tray-cards-offset-y) + var(--mg-edit-tray-grid-two-row-h) + 120px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* 卡片相对面板顶下移 85px；底侧加大留白，避免第二行被 Dock 视觉裁切 */
    padding: var(--mg-edit-tray-cards-offset-y) 0 120px 0;
    box-sizing: border-box;
    pointer-events: auto;
    touch-action: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.edit-tray-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* 双行 + grid 纵向优先换列 → 稳定 scrollWidth，配合 overflow-x 横向滑动 */
.edit-tray-grid {
    display: grid;
    grid-template-rows: 236px 236px;
    grid-auto-flow: column;
    grid-auto-columns: 378px;
    column-gap: 36px;
    row-gap: 36px;
    width: max-content;
    height: var(--mg-edit-tray-grid-two-row-h);
    margin-left: var(--mg-tabbar-x);
    padding-right: 120px;
    box-sizing: border-box;
    pointer-events: auto;
    transform: translateY(var(--mg-edit-tray-cards-extra-offset-y));
}
.edit-tray-grid .card {
    pointer-events: auto;
    touch-action: none;
}

/* ========== Card ========== */
.card {
    width: 378px; height: 236px;
    border-radius: 20px;
    background: rgba(255,255,255,0.98);
    padding: 24px;
    display: flex; flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    position: relative;
    touch-action: manipulation;
    transform-origin: center center;
    will-change: transform;
    transition:
        background-color var(--toggle-square-bg-duration) var(--ease-standard, linear);
}

/* 可进二级卡片角标：容器内 left 302 / top 24（52×52 SVG） */
.card-drill-badge {
    position: absolute;
    left: 302px;
    top: 24px;
    width: 52px;
    height: 52px;
    z-index: 2;
    pointer-events: none;
}
.card-drill-badge svg {
    display: block;
    width: 52px;
    height: 52px;
}

/* ─── 沉浸二级（MasterGo 36:43307 容器 729528） ─── */
.common-immersive {
    position: absolute;
    inset: 0;
    z-index: 12;
    pointer-events: none;
    opacity: 0;
}
.common-immersive.is-active {
    pointer-events: auto;
    opacity: 1;
}
.common-immersive__panel {
    position: absolute;
    opacity: 0;
    transform: scale(0.8);
    transform-origin: left bottom; /* 默认值，由 JS 根据象限动态覆盖 */
    pointer-events: auto;
}
/* 底板：1132×auto，Outher/quick_control_Button_off，圆角 20 */
.common-immersive__plate {
    border-radius: 20px;
    background: var(--card-bg-off);
    overflow: hidden;
}
.immersive-block {
    padding: 0 36px 40px;
    box-sizing: border-box;
}
.immersive-block__label {
    margin: 0;
    padding: 40px 0;
    min-height: 126px;
    box-sizing: border-box;
    font-size: var(--font-text2-size);
    font-weight: var(--font-text2-weight);
    line-height: var(--font-text2-lineheight);
    color: var(--text-positive-t1);
    white-space: nowrap;
}
.panel.immersive-active .strip-row,
.panel.immersive-active .cards-grid--common .card {
    pointer-events: none;
    transition: none;
}

/* 多项选择器：高 112，padding/gap 4，外圆角 20 / 拇指 16 */
.segmented {
    --seg-pad: var(--mg-immersive-seg-pad);
    --seg-gap: var(--mg-immersive-seg-gap);
    --seg-slot: var(--mg-immersive-seg-slot);
    --seg-count: 4;
    --seg-index: 0;
    position: relative;
    width: calc(
        var(--seg-count) * var(--seg-slot)
        + (var(--seg-count) - 1) * var(--seg-gap)
        + var(--seg-pad) * 2
    );
    height: 112px;
    padding: var(--seg-pad);
    box-sizing: border-box;
    border-radius: 20px;
    background: var(--card-bg-off);
}
.segmented__thumb {
    position: absolute;
    top: var(--seg-pad);
    left: var(--seg-pad);
    width: var(--seg-slot);
    height: calc(112px - var(--seg-pad) * 2);
    border-radius: 16px;
    background: var(--fill-positive-f1);
    transition: transform 170ms var(--ease-standard, linear);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}
.segmented__items {
    position: relative;
    z-index: 1;
    display: flex;
    gap: var(--seg-gap);
    height: 100%;
}
.segmented__item {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--font-text2-size);
    font-weight: var(--font-text2-weight);
    line-height: var(--font-text2-lineheight);
    color: var(--text-positive-t1);
    padding: 16px 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}
.segmented__item:active {
    transform: scale(0.96);
}

/* 投影大灯沉浸二级：双按钮行（36:89260） */
.immersive-button-row {
    width: 644px;
    height: 112px;
    display: flex;
    gap: 32px;
    margin: 0 auto;
}
.immersive-button-row__item {
    width: 306px;
    height: 112px;
    border: none;
    border-radius: 20px;
    padding: 27px 36px;
    box-sizing: border-box;
    background: var(--card-bg-off);
    color: var(--text-positive-t1);
    font-family: inherit;
    font-size: var(--font-text2-size);
    font-weight: var(--font-text2-weight);
    line-height: var(--font-text2-lineheight);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}
.immersive-button-row__item.is-active {
    background: var(--fill-positive-f1);
}

.card-header {
    display: flex; align-items: center;
    justify-content: space-between;
    padding-left: 6px;
}
.card-name {
    font-size: var(--font-text2-size);
    font-weight: var(--font-text2-weight);
    line-height: var(--font-text2-lineheight);
    color: var(--text-positive-t1);
}
.card-status {
    font-size: var(--font-secondary1-size);
    font-weight: var(--font-secondary1-weight);
    line-height: var(--font-secondary1-lineheight);
    color: var(--text-positive-t1);
}

.card-icon {
    width: 60px; height: 60px;
    display: flex; align-items: flex-end; justify-content: flex-start;
}
.card-icon svg {
    display: block;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}
.card-icon img {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
}

/* MasterGo 12:07667 等：底部容器 729538 + 线/禁用 tag（2:4603，高 40） */
.card-footer {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    min-height: 80px;
    flex-shrink: 0;
}
.card-footer--tag {
    /* 与 .card-header 标题左对齐（padding-left 6px） */
    padding-left: 6px;
    box-sizing: border-box;
}
.card-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 1px 17px;
    box-sizing: border-box;
    border-radius: 19px;
    border: 2px solid rgba(14, 15, 18, 0.6);
    background: transparent;
    /* Label/Text_Positive_T1 */
    font-size: var(--font-secondary1-size);
    font-weight: var(--font-secondary1-weight);
    line-height: var(--font-secondary1-lineheight);
    color: var(--text-positive-t1);
}

/* Card disabled/off state - matches MasterGo: Outher/quick_control_Button_off */
.card.disabled {
    background: var(--card-bg-off);
}
.card.disabled .card-name {
    color: var(--text-positive-t1);
}
.card.disabled .card-tag {
    opacity: 0.88;
}

/* Edit mode card badge — 48×48；中心对齐容器右上角顶点 */
.card-badge {
    position: absolute;
    top: -24px;
    right: -24px;
    width: 48px; height: 48px;
    border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    cursor: pointer; z-index: 5;
    transition: transform 0.15s;
    background: transparent;
}

/* 占位符样式 — 空槽位：fill #26262C 10%, 整体叠加 50% opacity */
.card-placeholder {
    width: 378px; height: 236px;
    border-radius: 20px;
    background: rgba(38, 38, 44, 0.1);
    opacity: 0.5;
    box-sizing: border-box;
}
/* 浏览态空槽位占位：保持网格位置但不显示任何视觉元素 */
.card-empty-spacer {
    width: 378px; height: 236px;
    box-sizing: border-box;
    visibility: hidden;
}
/* 拖拽中目标插槽 — 仅渐显过渡，无描边动画 */
.card-placeholder.slot-target {
    background: rgba(38, 38, 44, 0.1);
    box-shadow: inset 0 0 0 4px rgba(14, 15, 18, 0.4);
}

/* 拖拽幽灵节点样式 */
.card-ghost {
    position: absolute;
    z-index: 9999;
    pointer-events: none;
    transform-origin: center center;
    will-change: left, top, transform;
    margin: 0 !important;
    /* blur 由 JS 动画驱动，不使用 CSS transition */
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}
/* 吸附回归态：blur 渐出由 JS 驱动 */
.card-ghost.ghost-settling {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}
.card-badge svg {
    display: block;
    width: 48px;
    height: 48px;
}
.card-badge.remove,
.card-badge.add {
    background: transparent;
}