/* 编辑器页面样式 */

/* ========== 预览弹窗（直接渲染编辑区内容到手机框） ========== */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.modal.show {
    opacity: 1;
    visibility: visible;
}
.preview-modal .modal-box {
    width: auto;
    max-width: 90vw;
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
}
.preview-phone {
    width: 340px;
    height: 78vh;
    max-height: 760px;
    background: #fff;
    border-radius: 36px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    border: 8px solid #f0f0f0;
    display: flex;
    flex-direction: column;
}
.preview-phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 28px;
    background: #f0f0f0;
    border-radius: 0 0 16px 16px;
    z-index: 2;
}
.preview-phone-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 0;
    font-size: 13px;
    color: #333;
    font-weight: 500;
}
.preview-phone-status .status-right {
    display: flex;
    align-items: center;
    gap: 4px;
}
.preview-phone-status svg {
    width: 14px;
    height: 14px;
}
.preview-phone-content {
    flex: 1;
    overflow-y: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
}
/* 预览内容只读：禁止编辑/选中/点击交互（避免误改编辑区数据） */
.preview-phone-content .edit-content-blocks {
    pointer-events: none;
    user-select: none;
}
/* 预览里隐藏仅编辑用的 UI：插入正文占位、浮动工具条、选中蓝框、导航项工具条 */
.preview-phone-content .block-text-gap {
    display: none !important;
}
/* 预览里隐藏音视频免费提示条 */
.preview-phone-content .video-free-tip {
    display: none !important;
}
.preview-phone-content .block-toolbar {
    display: none !important;
}
.preview-phone-content .nav-item-toolbar {
    display: none !important;
}
.preview-phone-content .edit-block {
    cursor: default;
    border-color: transparent !important;
}
.preview-phone-content .edit-block.block-selected {
    border-color: transparent !important;
}
.preview-title {
    text-align: center;
    padding: 12px 16px 4px;
    font-size: 18px;
    font-weight: 600;
    color: #222;
    word-break: break-word;
    line-height: 1.4;
}
/* 预览二维码卡片（与 qrcode.html 一致） */
.preview-qrcode-card {
    width: 220px;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
    flex-shrink: 0;
    box-sizing: border-box;
}
.preview-qrcode-card img {
    width: 160px;
    height: 160px;
    border-radius: 8px;
    margin-bottom: 12px;
}
.preview-qrcode-tip {
    font-size: 12px;
    color: #999;
    line-height: 1.6;
    margin-bottom: 16px;
}
.btn-close-preview {
    width: 100%;
    margin-top: 0;
    padding: 10px 0;
    background: #4aa8ff;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-close-preview:hover {
    background: #3a9af5;
}

/* 扩展 header-inner 宽度以容纳工具栏 */
.edit-page-body .header-inner {
    width: 100%;
    padding: 0 20px;
}

.edit-page-body .header-inner .logo {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.edit-page-body .header-inner .nav-right {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.edit-page-body .header-inner .user-info {
    display: none;
}

.edit-page-body {
    background: #f4f4f4;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 79px;
    /* 避开固定头部 */
}

/* ========== Header 中的编辑器工具栏 ========== */
.edit-toolbar {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
    padding: 0 20px;
}

.tool-group {
    display: flex;
    align-items: center;
    margin: 10px;
    gap: 4px;
    border-radius: 8px;
    background: #fafafa;
}

.tool-divider {
    width: 1px;
    height: 40px;
    background: #e0e0e0;
    margin: 0 8px;
}

.tool-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #666;
    border-radius: 8px;
    transition: all 0.2s;
    min-width: 64px;
}

.tool-item:hover {
    color: #266fff;
    background: rgba(65, 105, 225, 0.05);
}

.tool-item.active {
    color: #266fff;
}

.tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.tool-icon img {
    width: 20px;
    height: 20px;
    filter: grayscale(100%) brightness(100%);
}

.tool-item:hover .tool-icon img,
.tool-item.active .tool-icon img {
    filter: brightness(0) saturate(100%) invert(25%) sepia(80%) saturate(2000%) hue-rotate(220deg) brightness(92%) contrast(96%);
}

.tool-label {
    font-size: 13px;
    white-space: nowrap;
}

/* ========== 编辑器主体三栏布局 ========== */
.edit-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    flex: 1;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.edit-content-blocks{
    padding-bottom: 24px;
    flex: 1;
    cursor: text;
}

/* ========== 左侧面板：样式库（绝对定位，定位在中间左侧） ========== */
.edit-panel-left {
    position: fixed;
    left: calc(50% - 300px - 20px - 400px);
    top: 99px;
    bottom: 20px;
    width: 400px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10;
}

/* Alpine 初始化前先隐藏，避免刷新瞬间闪现（如导航链接面板） */
[x-cloak] {
    display: none !important;
}

.navstyle-panel-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 20px;
}

.navstyle-panel-scroll::-webkit-scrollbar {
    width: 4px;
}

.navstyle-panel-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.navstyle-panel-scroll::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 2px;
}

.navstyle-panel-scroll .navstyle-section {
    margin-bottom: 16px;
}

.navstyle-panel-scroll .navstyle-section:last-child {
    margin-bottom: 0;
}

.navstyle-panel-scroll .navstyle-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.navstyle-panel-scroll .navstyle-section-label {
    font-size: 13px;
    font-weight: 600;
    color: #999;
    margin-bottom: 10px;
}

.panel-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 12px;
    background: #fafafa;
    border-bottom: 1px solid #e5e5e5;
}

.panel-color-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
}

.color-block {
    width: 22px;
    height: 22px;
    padding: 4px;
    cursor: pointer;
    border: 1px solid #ccc;
}

.color-picker {
    width: 100%;
    height: 100%;
}

.panel-close {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #737373;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    color: #fff;
}

.panel-tabs-bar {
    display: flex;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 16px;
    flex-shrink: 0;
}

.panel-tab {
    position: relative;
    padding: 14px 18px 12px;
    font-size: 14px;
    color: #888;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
    white-space: nowrap;
}

.panel-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: calc(100% - 24px);
    height: 2.5px;
    background: #266fff;
    border-radius: 2px;
}

.panel-tab:hover {
    color: #333;
}

.panel-tab.active {
    color: #266fff;
    font-weight: 500;
    background: transparent;
}

.panel-tab.active::after {
    transform: translateX(-50%) scaleX(1);
}

/* 样式列表 */
.style-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
}

.style-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    cursor: pointer;
    background: #fff;
    margin-bottom: 8px;
    transition: box-shadow 0.15s, background 0.15s;
}

.style-item:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

.style-thumb {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f5f5;
}

.style-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.style-title {
    flex: 1;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.style-arrow {
    font-size: 20px;
    color: #ccc;
    flex-shrink: 0;
}

/* ========== 中间编辑区 ========== */
.edit-center {
    flex: 1;
    width: 600px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 auto;
}

.edit-add-row {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

/* ========== 顶部操作栏 ========== */
.edit-top-bar {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* 深色背景下文字与图标反白 */
.edit-top-bar.top-bar-dark {
    color: #fff;
}

.edit-top-bar.top-bar-dark .top-bar-btn {
    color: #fff;
}

.edit-top-bar.top-bar-dark .top-bar-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.edit-top-bar.top-bar-dark .top-bar-icon {
    filter: brightness(0) invert(1);
}

.edit-top-bar.top-bar-dark .top-bar-btn:hover .top-bar-icon {
    filter: brightness(0) invert(1);
}



/* 操作按钮 */
.top-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #666;
    font-size: 13px;
    transition: all 0.2s;
    border-radius: 6px;
}

.top-bar-btn:hover {
    background: #f5f7fa;
    color: #333;
}

.top-bar-btn svg {
    flex-shrink: 0;
}

.top-bar-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    filter: grayscale(100%) brightness(0.6);
}

.top-bar-btn:hover .top-bar-icon {
    filter: brightness(0) invert(20%);
}

.top-bar-btn.danger:hover .top-bar-icon {
    filter: brightness(0) saturate(100%) invert(28%) sepia(100%) saturate(5000%) hue-rotate(345deg) brightness(100%) contrast(100%);
}

.top-bar-btn.danger {
    color: #999;
}

.top-bar-btn.danger:hover {
    color: #FF4D4F;
}

.edit-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #266fff;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.edit-add-btn:hover {
    background: #3457c5;
}

.add-icon {
    font-size: 18px;
    font-weight: 300;
}

.edit-title-input {
    display: block;
    width: 100%;
    padding: 16px 20px;
    font-size: 20px;
    color: #333;
    text-align: center;
    border: none;
    background: transparent;
    outline: none;
    box-sizing: border-box;
    height: 62px;
    word-break: break-word;
}

.edit-title-input:empty::before {
    content: attr(data-placeholder);
    color: #bbb;
    pointer-events: none;
}

/* 深色背景下标题文字反白 */
.edit-title-input.title-dark {
    color: #fff;
}

.edit-title-input.title-dark:empty::before {
    color: rgba(255, 255, 255, 0.6);
}

/* 块间正文占位：hover 手指光标，点击插入正文；拖拽时作为插入位置指示器容器 */
.block-text-gap {
    padding: 8px 16px;
    cursor: pointer;
}
.drag-indicator-line {
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    color: #266fff;
    font-size: 12px;
    white-space: nowrap;
}
/* 编辑态：鼠标 hover 到正文占位处显示插入虚线 */
.block-text-gap:hover .drag-indicator-line {
    visibility: visible;
}
.drag-indicator-line .drag-line-fill {
    flex: 1;
    height: 0;
    border-top: 1px dashed #266fff;
}
.drag-indicator-line .drag-arrow {
    font-size: 10px;
    line-height: 1;
}

/* 文本块编辑区 */
.edit-text-input {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font-size: 16px;
    color: #333;
    text-align: left;
    border: none;
    background: transparent;
    outline: none;
    box-sizing: border-box;
    word-break: break-word;
    cursor: text;
}
.edit-block {
    position: relative;
    cursor: pointer;
    border: 2px solid transparent;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

/* 选中态：蓝色边框 */
.edit-block.block-selected {
    border-color: #266fff;
}

/* 拖拽排序：源块半透明 + 目标位置上下蓝色指示线 */
.block-toolbar-drag {
    cursor: grab;
}
.block-toolbar-drag:active {
    cursor: grabbing;
}
.edit-block-wrap.drag-source > .edit-block {
    opacity: 0.4;
}

/* 默认：图片擑满宽度，无间距 */
.edit-block:not(.block-fit):not(.block-gap) .block-img {
    display: block;
    width: 100%;
    height: auto;
}

/* 留空：图片之间留间距 */
.edit-block.block-gap .block-img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 8px;
}

.edit-block.block-gap .block-img:last-child {
    margin-bottom: 0;
}

/* 留白：图片左右留 padding */
.edit-block.block-fit .block-img {
    display: block;
    width: 100%;
    height: auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ========== 音频块编辑区样式 ========== */
.block-audio-content {
    padding: 16px 20px;
}

.audio-block-list {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* 列表卡片内的免费提示条：换到下一行并占满整卡宽度 */
.audio-block-list .audio-free-tip {
    flex: 0 0 100%;
}

.audio-block-list-play {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.audio-block-list-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.audio-block-list-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.audio-block-list-title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.audio-block-list-size {
    flex-shrink: 0;
    font-size: 12px;
    color: #999;
}

.audio-block-progress {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.audio-block-progress-track {
    height: 4px;
    background: #e8e8e8;
    border-radius: 2px;
    position: relative;
}

.audio-block-progress-fill {
    height: 100%;
    background: #266fff;
    border-radius: 2px;
    width: 0;
}

.audio-block-progress-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #999;
}

/* 音频唱片块 */
.audio-block-disc {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.audio-block-disc-wrap {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-block-disc-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.audio-block-disc-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.audio-block-disc-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-align: center;
}

.audio-block-disc-size {
    font-size: 12px;
    color: #999;
}

.audio-block-disc-play {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

/* ====== 图片块浮动工具条 ====== */
.block-toolbar {
    position: absolute;
    top: -14px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    padding: 4px 6px;
    z-index: 10;
    transform: translateY(-100%);
}

.block-toolbar-drag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #266fff;
    cursor: grab;
    flex-shrink: 0;
    margin-right: 2px;
}

.block-toolbar-btn {
    padding: 4px 10px;
    font-size: 12px;
    color: #555;
    background: #f5f5f5;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.block-toolbar-btn:hover:not(:disabled) {
    background: #e8e8e8;
    color: #222;
}

.block-toolbar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.block-toolbar-btn-danger {
    background: #fff0f0;
    color: #e53935;
}

.block-toolbar-btn-danger:hover {
    background: #ffe0e0;
    color: #c62828;
}

/* ====== 导航项 hover 浮动工具条 ====== */
.nav-item-toolbar {
    position: absolute;
    top: 100%;
    margin-top: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    align-items: center;
    gap: 4px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 4px 8px;
    z-index: 20;
    white-space: nowrap;
}

/* 透明桥接区：填补按钮与浮层之间的 6px 间隙，避免 hover 经过时丢失 */
.nav-item-toolbar::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -12px;
    right: -12px;
    height: 6px;
}

.nav-item-wrap,
.ns-list-item,
.ns-grid-item,
.nav-card-wrap,
.ns-it-col {
    position: relative;
}

.edit-block.block-selected .nav-item-wrap:hover > .nav-item-toolbar,
.edit-block.block-selected .ns-list-item:hover > .nav-item-toolbar,
.edit-block.block-selected .ns-grid-item:hover > .nav-item-toolbar,
.edit-block.block-selected .nav-card-wrap:hover > .nav-item-toolbar,
.edit-block.block-selected .ns-it-col:hover > .nav-item-toolbar {
    display: flex;
}

.nav-tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: none;
    background: transparent;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    color: #555;
    font-size: 12px;
    line-height: 1;
}

.nav-tb-btn:hover:not(:disabled) {
    background: #f0f0f0;
}

.nav-tb-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.nav-tb-btn img {
    width: 16px;
    height: 16px;
    display: block;
}

.nav-tb-link {
    color: #266fff;
    font-weight: 500;
    padding: 4px 6px;
}

.nav-tb-link span {
    display: inline-block;
    min-width: 0;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* 链接已添加后的「修改 / 清除」操作 */
.nav-tb-link-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}


.nav-tb-clear {
    color: #266fff;
    font-weight: 500;
    padding: 4px 6px;
}

.nav-btn-wrap {
    display: inline-flex;
    vertical-align: middle;
}

/* 轮播容器（与 phone-content-carousel 同一套机制） */
.block-carousel {
    position: relative;
    width: 100%;
    transition: height 0.3s ease;
}

.block-carousel img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
    transform: translateX(100%);
}

.block-carousel img.active {
    position: relative;
    transform: translateX(0);
    transition: transform 0.35s ease;
}

.block-carousel img.prev {
    transform: translateX(-100%);
    transition: transform 0.35s ease;
}

/* ========== 文档内容样式 ========== */
/* 单文档卡片 */
.doc-single-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    background: #fff;
}

.doc-single-icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 12px;
}

.doc-single-name {
    font-size: 15px;
    color: #333;
    font-weight: 500;
    max-width: 100%;
    text-align: center;
    margin-bottom: 6px;
}

.doc-single-size {
    font-size: 13px;
    color: #999;
    margin-bottom: 16px;
}

.doc-view-btn {
    padding: 8px 32px;
    background: #266fff;
    color: #fff;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
}

/* 多文档列表 */
.doc-multi-list {
    background: #fff;
}

.doc-multi-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.doc-multi-item:last-child {
    border-bottom: none;
}

.doc-multi-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    margin-right: 12px;
    flex-shrink: 0;
}

.doc-multi-info {
    flex: 1;
    min-width: 0;
}

.doc-multi-name {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

.doc-multi-size {
    font-size: 12px;
    color: #999;
}

.lineclamp1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========== 视频内容样式 ========== */
.block-video-content {
    margin: 16px;
    background: #fff;
    padding: 0;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .14);
}

/* 免费版视频提示条 */
.video-free-tip {
    position: relative;
    display: flex;
    align-items: center;
    border-top: 1px solid #eee;
    border-radius: 0 0 6px 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 400;
    color: #999;
    background: #fff;
}

.video-free-tip-link {
    color: #266fff;
    text-decoration: none;
    white-space: nowrap;
    margin-left: auto;
}

.video-free-tip-link:hover {
    text-decoration: underline;
}

/* 音频免费提示条：位于卡片内，与视频区分——去掉上边框与背景，仅作卡片内一行提示 */
.video-free-tip.audio-free-tip {
    align-self: stretch;
    width: 100%;
    border-top: none;
    border-radius: 0;
    background: transparent;
    padding: 8px 0 0;
    color: #999;
}

/* 视频大卡片 */
.video-card-large {
    position: relative;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
}

/* 有免费版提示条时，取消大卡片底部圆角 */
.block-video-content:has(.video-free-tip:not([style*="display: none"])) .video-card-large {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.video-card-large.video-vertical {
    aspect-ratio: 9 / 10;
}

/* 模糊背景层 */
.video-card-blur-bg {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background-size: cover;
    background-position: center;
    filter: blur(10px);
    z-index: 1;
}

/* 封面图 */
.video-card-cover {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
}

/* 播放图标覆盖层 */
.video-card-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    background: rgba(0, 0, 0, 0.3);
}

/* 时长标签 */
.video-card-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    z-index: 4;
}

/* 视频中卡片 */
.video-card-medium {
    display: flex;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    padding: 12px;
    gap: 12px;
}

.video-card-thumb-md {
    position: relative;
    width: 160px;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f5f5;
}

.video-card-thumb-md img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-card-info-md {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.video-card-title-md {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-card-time-md {
    font-size: 12px;
    color: #999;
    margin-top: auto;
}

/* 视频小卡片 */
.video-card-small {
    display: flex;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px;
    gap: 10px;
}

.video-card-thumb-sm {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f5f5;
}

.video-card-thumb-sm img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-card-play-sm {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-card-info-sm {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.video-card-title-sm {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-card-time-sm {
    font-size: 11px;
    color: #999;
    margin-top: auto;
}

/* 底部升级提示 */
.edit-upgrade-tip {
    margin-top: auto;
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.upgrade-icon {
    width: 24px;
    height: 24px;
}

.upgrade-desc {
    font-size: 12px;
    color: #737373;
}

.upgrade-link {
    font-size: 12px;
    color: #266fff;
    text-decoration: none;
    flex-shrink: 0;
}

.upgrade-link:hover {
    text-decoration: underline;
}

/* ========== 右侧预览面板（绝对定位，定位在中间右侧） ========== */
.edit-panel-right {
    position: fixed;
    left: calc(50% + 300px + 20px);
    /* 中间居中后，右侧面板贴中间右边，间距20px */
    top: 99px;
    width: 330px;
}

/* 预览卡片 */
.preview-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 30px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* 二维码缩略图 */
.preview-qrcode {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    overflow: hidden;
}

.preview-qrcode-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 预览操作按钮 */
.btn-generate {
    width: 100%;
    padding: 10px 0;
    background: linear-gradient(268.5deg, rgba(38, 111, 255, 1) 1.98%, rgba(70, 179, 240, 1) 98.71%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.btn-generate:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(74, 144, 226, 0.4);
}

.btn-preview {
    width: 100%;
    padding: 10px 0;
    background: #fff;
    color: #333;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-preview:hover {
    border-color: #266fff;
    color: #266fff;
}

/* ===== 二维码结果卡片：标题 + 编辑图标（位于二维码下方） ===== */
.preview-qr-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.preview-qr-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.preview-qr-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-qr-edit {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 2px;
    line-height: 0;
}

.preview-qr-edit img {
    width: 16px;
    height: 16px;
    display: block;
}

/* 编辑态：整行变为输入框 */
.preview-qr-title-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    text-align: center;
    border: 1px solid #266fff;
    border-radius: 8px;
    outline: none;
}

/* 生成后操作按钮组 */
.preview-qr-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qr-actions-row {
    display: flex;
    gap: 10px;
}

.qr-actions-row .qr-btn {
    flex: 1;
}

.qr-btn {
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    padding: 10px 0;
    transition: all 0.15s;
}

.qr-btn-primary {
    background: linear-gradient(268.5deg, rgba(38, 111, 255, 1) 1.98%, rgba(70, 179, 240, 1) 98.71%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.qr-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(74, 144, 226, 0.4);
}

.qr-btn-default {
    background: #fff;
    color: #333;
    border: 1px solid #e0e0e0;
}

.qr-btn-default:hover {
    border-color: #266fff;
    color: #266fff;
}

/* 设置按钮：带向下箭头 */
.qr-btn-setting {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
}

.qr-btn-setting .arrow-icon {
    width: 12px;
    height: 12px;
    transition: transform 0.2s;
}

.qr-setting-menu-wrap {
    position: relative;
    flex: 1;
}

.qr-setting-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 100;
    width: 180px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #eee;
    padding: 8px 0;
}

.qr-setting-menu .more-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.qr-setting-menu .more-item:hover {
    background: #f5f7fa;
    color: #165dff;
}

.qr-setting-menu .more-item .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-setting-menu .more-item .icon svg {
    width: 16px;
    height: 16px;
}

.qr-setting-menu .more-item .text {
    flex: 1;
}

/* 二维码设置弹窗 */
.qr-setting-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.qr-setting-modal {
    width: 360px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.qr-setting-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.qr-setting-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.qr-setting-close {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #999;
    cursor: pointer;
}

.qr-setting-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qr-setting-field {
    display: flex;
    align-items: center;
    gap: 12px;
}

.qr-setting-field label {
    width: 72px;
    font-size: 14px;
    color: #666;
    flex-shrink: 0;
}

.qr-setting-field select {
    flex: 1;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    background: #fff;
    cursor: pointer;
}

.qr-setting-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
}

.qr-setting-cancel,
.qr-setting-save {
    flex: 1;
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    border: none;
}

.qr-setting-cancel {
    background: #f4f4f4;
    color: #666;
}

.qr-setting-cancel:hover {
    background: #e9e9e9;
}

.qr-setting-save {
    background: #266fff;
    color: #fff;
}

.qr-setting-save:hover {
    background: #3457c5;
}

/* ========== 选择图片弹窗 ========== */
.img-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.img-picker-modal {
    background: #fff;
    border-radius: 12px;
    width: 800px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.img-picker-header {
    height: 56px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.img-picker-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #333;
}

.img-picker-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: #999;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
}

.img-picker-close:hover {
    color: #333;
}

.img-picker-close svg {
    width: 18px;
    height: 18px;
}

.img-picker-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
}

.img-picker-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 20px;
    background: linear-gradient(268.5deg, rgba(38, 111, 255, 1) 1.98%, rgba(70, 179, 240, 1) 98.71%);
    color: #fff;
    border-radius: 100px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.img-picker-search {
    display: flex;
    align-items: center;
    margin-left: auto;
    border: 1px solid #e0e0e0;
    border-radius: 100px;
    overflow: hidden;
}

.img-picker-search input {
    border: none;
    outline: none;
    padding: 6px 12px;
    font-size: 14px;
    width: 200px;
}

.img-picker-search-btn {
    border: none;
    background: transparent;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.img-picker-search-btn:hover {
    background: #f5f5f5;
}

.img-picker-search-clear {
    display: flex;
    align-items: center;
    padding: 0 4px;
    cursor: pointer;
    color: #999;
}

.img-picker-search-clear:hover {
    color: #333;
}

/* 图片网格 */
.img-picker-grid {
    height: 382px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 16px;
    padding: 0 24px 24px;
    overflow-y: auto;
    overflow-x: hidden;
}

.img-picker-grid::-webkit-scrollbar {
    width: 6px;
}

.img-picker-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.img-picker-grid::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.img-picker-grid::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 加载时隐藏已有列表数据 */
.img-picker-grid.is-loading .img-picker-item {
    display: none;
}

.img-picker-item {
    width: calc((100% - 64px) / 5);
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border: 1px solid #b2b2b2;
    overflow: hidden;
    background: #fff;
}

.img-picker-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.img-picker-item.selected {
    border-color: #266fff;
}

.img-picker-item.selected .img-picker-item-name {
    background: #ebf2ff;
}

.img-picker-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.img-picker-doc-icon {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
}

.img-picker-doc-icon img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    aspect-ratio: auto;
}

/* 选择弹窗内上传进度 */
.picker-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.picker-upload-pct {
    font-size: 18px;
    font-weight: 600;
    color: #266fff;
}

.img-picker-item.is-uploading {
    pointer-events: none;
    opacity: 0.7;
}

.img-picker-item-name {
    padding: 8px;
    background: #fff;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.img-picker-empty,
.img-picker-loading {
    width: 100%;
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 0;
    color: #999;
    font-size: 14px;
}

/* 分页 */
.img-picker-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 16px 24px;
}

.img-picker-page {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all 0.15s;
}

.img-picker-page:hover {
    background: #f0f0f0;
}

.img-picker-page.active {
    background: #ebf2ff;
    color: #266fff;
}

.img-picker-page-dots {
    min-width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
}

/* 底部 */
.img-picker-footer {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.img-picker-count {
    font-size: 14px;
    color: #666;
}

.img-picker-count strong {
    color: #266fff;
}

.img-picker-actions {
    display: flex;
    gap: 12px;
}

.img-picker-btn {
    width: 106px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.img-picker-btn-cancel {
    border: 1px solid #266fff;
    background: #fff;
    color: #266fff;
}

.img-picker-btn-cancel:hover {
    background: #EBF2FF;
}

.img-picker-btn-confirm {
    border: none;
    background: linear-gradient(268.5deg, rgba(38, 111, 255, 1) 1.98%, rgba(70, 179, 240, 1) 98.71%);
    color: #fff;
}

.img-picker-btn-confirm:hover {
    opacity: 0.9;
}

/* ========== 图片设置弹窗 ========== */
.img-setting-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9100;
}

.img-setting-modal {
    background: #fff;
    border-radius: 12px;
    width: 1030px;
    height: 717px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.img-setting-header {
    height: 56px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.img-setting-title {
    font-size: 17px;
    font-weight: 600;
    color: #333;
}

.img-setting-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: #999;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
}

.img-setting-close:hover {
    color: #333;
}

.img-setting-close svg {
    width: 18px;
    height: 18px;
}

.img-setting-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* 左侧手机预览 */
.img-setting-preview {
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 20px 60px;
}

.img-setting-phone {
    width: 300px;
    aspect-ratio: 400 / 817;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.img-setting-phone .iphone-head {
    position: relative;
}

.img-setting-phone .iphone-head img {
    display: block;
    width: 100%;
    pointer-events: none;
}

.img-setting-phone .iphone-head-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    max-width: 45%;
    margin: 0 auto;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    font-weight: bold;
    color: #333;
}

.phone-content {
    position: relative;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.phone-content::-webkit-scrollbar {
    width: 6px;
}

.phone-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.phone-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.phone-content::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.phone-content img {
    width: 100%;
    display: block;
}

/* 留白模式：图片两侧加间距 */
.phone-content-fit {
    padding: 0 16px;
}

/* 留空模式：图片之间加间距 */
.phone-content-gap img {
    margin-bottom: 8px;
}

/* 轮播模式 - 容器高度跟随当前图片 */
.phone-content-carousel {
    position: relative;
    overflow: hidden;
    transition: height 0.3s ease;
}

.phone-content-carousel img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    transform: translateX(100%);
}

.phone-content-carousel img.active {
    transform: translateX(0);
    transition: transform 0.3s;
}

.phone-content-carousel img.prev {
    transform: translateX(-100%);
    transition: transform 0.3s;
}

/* 轮播指示器 */
.carousel-indicator {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
    z-index: 10;
    pointer-events: none;
}

/* 轮播过渡动画 */
.transition {
    transition-property: opacity, transform;
}

.duration-300 {
    transition-duration: 300ms;
}

.ease-out {
    transition-timing-function: ease-out;
}

.ease-in {
    transition-timing-function: ease-in;
}

.translate-x-full {
    transform: translateX(100%);
}

.-translate-x-full {
    transform: translateX(-100%);
}

.translate-x-0 {
    transform: translateX(0);
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

/* 右侧设置面板 */
.img-setting-panel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 面板内部滚动容器 */
.panel-scroll-wrap {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 20px 40px;
}

.panel-scroll-wrap::-webkit-scrollbar {
    width: 6px;
}

.panel-scroll-wrap::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.panel-scroll-wrap::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.panel-scroll-wrap::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.img-setting-section {
    margin-bottom: 28px;
}

.img-setting-label {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

/* 缩略图列表 */
.img-setting-thumbs {
    max-width: 100%;
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
}

.img-setting-thumbs::-webkit-scrollbar {
    height: 6px;
}

.img-setting-thumbs::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.img-setting-thumbs::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.img-setting-thumbs::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.img-setting-thumb {
    position: relative;
    width: 100px;
    height: 100px;
    min-width: 100px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e4e4e4;
    cursor: pointer;
    transition: border-color 0.2s;
}

.img-setting-thumb.active {
    border-color: #266fff;
}

.img-setting-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.img-setting-thumb-del {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
}

.img-setting-thumb-del:hover {
    background: rgba(0, 0, 0, 0.7);
}

.img-setting-thumb-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #f8f9fa;
    border: 1px dashed #ccc;
    color: #999;
    font-size: 12px;
    cursor: pointer;
}

.img-setting-thumb-add:hover {
    background: #f0f0f0;
    border-color: #999;
}

/* 上传进度遮罩 */
.img-setting-thumb-uploading {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-setting-thumb-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 12px;
    width: 80%;
}

.img-setting-thumb-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.img-setting-thumb-fill {
    height: 100%;
    background: #266fff;
    border-radius: 2px;
    transition: width 0.2s;
}

/* 上传完成文件名 */
.img-setting-thumb-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3px 6px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 样式按钮组 */
.img-setting-btns {
    display: flex;
    gap: 24px;
}

.img-setting-btn {
    width: 120px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #f4f4f4;
    background: #f4f4f4;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.img-setting-btn.active {
    background: #ebf2ff;
    border-color: currentColor;
    color: #266fff;
}

/* 复选框 */
.img-setting-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

.img-setting-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #266fff;
}

/* 单选按钮组 */
.img-setting-radios {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.img-setting-radios-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

/* 原生 radio 样式（参考 index.html 单码/批量） */
.radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
}

.radio-option input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #a2a4a5;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.radio-option input[type="radio"]:hover {
    border-color: #266fff;
}

.radio-option input[type="radio"]:checked {
    border-color: #266fff;
    background: #266fff;
}

.radio-option input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
}

.radio-option:has(input:checked) {
    color: #266fff;
}

.radio-label {
    font-size: 14px;
    color: inherit;
}

.img-setting-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.2s;
}

.img-setting-radio:hover {
    background: #f8f9fa;
}

.radio-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #ccc;
    flex-shrink: 0;
    position: relative;
}

.img-setting-radio.active .radio-dot,
.img-setting-quality-card.active .radio-dot {
    border-color: #266fff;
    background: #266fff;
}

.img-setting-radio.active .radio-dot::after,
.img-setting-quality-card.active .radio-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

.img-setting-carousel-input {
    width: 50px;
    padding: 4px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    outline: none;
}

.img-setting-carousel-input:focus {
    border-color: #266fff;
}

/* 画质卡片 */
.img-setting-quality-cards {
    display: flex;
    gap: 16px;
}

.img-setting-quality-card {
    flex: 1;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

.img-setting-quality-card:hover {
    border-color: #b0c4ff;
}

.img-setting-quality-card.active {
    border-color: #266fff;
    background: #EBF2FF;
}

.img-setting-quality-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.img-setting-quality-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.img-setting-quality-desc {
    font-size: 12px;
    color: #999;
}

.img-setting-quality-tag {
    font-size: 11px;
    color: #fff;
    background: linear-gradient(135deg, #FF9800, #FF5722);
    padding: 2px 8px;
    border-radius: 4px;
}

/* 底部 */
.img-setting-footer {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: auto;
    margin-bottom: 0;
    padding: 0 24px;
    flex-shrink: 0;
}

.img-setting-footer-text {
    flex: 1;
    color: #737373;
}

/* ========== 文档设置弹窗 ========== */
.doc-setting-modal {
    background: #fff;
    border-radius: 12px;
    width: 800px;
    height: 600px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* 主体（单列，无预览） */
.doc-setting-body {
    flex: 1;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* 文件列表 */
.doc-setting-file-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 8px;
}

.doc-setting-file-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fafafa;
    border-radius: 6px;
    border: 1px dashed #b2b2b2;
    padding: 14px 18px;
    user-select: none;
    position: relative;
    transition: opacity 0.15s, border-color 0.15s;
    cursor: default;
}

.doc-setting-file-row:hover {
    border-color: #266fff;
    border-style: solid;
}

/* 正在被拖动的行 */
.doc-setting-file-row.is-dragging {
    opacity: 0.35;
}

/* 拖拽指示线（插入位置） */
.doc-setting-file-row.drag-over-top::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 10px;
    right: 10px;
    height: 2px;
    background: #266fff;
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
}

.doc-setting-file-row.drag-over-bottom::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 10px;
    right: 10px;
    height: 2px;
    background: #266fff;
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
}

.doc-file-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.doc-file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.doc-file-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-file-size {
    font-size: 12px;
    color: #aaa;
}

/* 上传进度条 */
.doc-file-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-top: 4px;
}

.doc-file-progress-bar {
    width: 100%;
    height: 6px;
    background: #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
}

.doc-file-progress-fill {
    height: 100%;
    background: #266fff;
    border-radius: 6px;
    transition: width 0.2s ease;
}

.doc-file-progress-text {
    font-size: 11px;
    color: #266fff;
    font-weight: 500;
}

.doc-file-download {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
}

.doc-file-download input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #266fff;
    cursor: pointer;
}

.doc-file-del {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #737373;
    border: none;
    color: #fff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

/* 添加文件按钮 */
.doc-setting-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border: 1px dashed #b2b2b2;
    border-radius: 6px;
    cursor: pointer;
    color: #888;
    font-size: 14px;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.doc-setting-add:hover {
    border-color: #266fff;
    border-style: solid;
    color: #266fff;
}

/* 扫码直达区 */
.doc-setting-scan-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.doc-setting-scan-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.doc-setting-scan-label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.doc-setting-vip-tag {
    font-size: 11px;
    color: #266fff;
    background: #ebf2ff;
    padding: 2px 8px;
    font-weight: 500;
}

.doc-setting-switch {
    position: relative;
    margin-left: 16px;
    cursor: pointer;
}

.doc-setting-switch input {
    display: none;
}

.doc-setting-switch-text {
    color: #666;
}

.doc-setting-switch-track {
    display: block;
    width: 42px;
    height: 22px;
    background: #ddd;
    border-radius: 22px;
    position: relative;
    transition: background 0.2s;
}

.doc-setting-switch input:checked+.doc-setting-switch-track {
    background: #266fff;
}

.doc-setting-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.doc-setting-switch input:checked+.doc-setting-switch-track .doc-setting-switch-thumb {
    transform: translateX(20px);
}

.doc-setting-scan-desc {
    font-size: 12px;
    color: #aaa;
}

/* 扫码直达禁用态（多文件或其他组件时） */
.doc-setting-scan-row.scan-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.doc-setting-scan-row.scan-disabled .doc-setting-switch {
    cursor: not-allowed;
}

/* ========== 视频设置弹窗 ========== */
.video-setting-modal {
    background: #fff;
    border-radius: 12px;
    width: 680px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.video-setting-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.video-setting-body::-webkit-scrollbar {
    width: 6px;
}

.video-setting-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.video-setting-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.video-setting-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 视频预览区 */
.video-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #fafafa;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 大卡片预览：视频播放器占满 */
.video-preview-large {
    position: relative;
    width: 100%;
    border-radius: 6px;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 模糊背景层 */
.video-preview-blur-bg {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background-size: cover;
    background-position: center;
    filter: blur(10px);
    z-index: 1;
}

/* 视频上传进度覆盖层 */
.video-upload-progress {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5;
}

.video-upload-bar {
    width: 60%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    overflow: hidden;
}

.video-upload-fill {
    height: 100%;
    background: #266fff;
    border-radius: 6px;
    transition: width 0.2s ease;
}

.video-upload-text {
    font-size: 13px;
    color: #fff;
    font-weight: 500;
}

.video-preview-player {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
}

.video-preview-empty {
    color: #666;
    font-size: 14px;
}

.video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 3;
}

.video-play-overlay svg {
    padding: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
}

.video-duration {
    position: absolute;
    bottom: 10px;
    right: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
}

/* 更换视频 / 上传封面 */
.video-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.video-action-btn {
    width: 100px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #b2b2b2;
    border-radius: 100px;
    font-size: 14px;
    cursor: pointer;
}

.video-action-btn:hover {
    border-color: #266fff;
    color: #266fff;
}

/* 表单字段 */
.video-field {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.video-field-label {
    width: 70px;
    font-size: 14px;
    color: #737373;
}

.video-field-input {
    flex: 1;
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.video-field-input:focus {
    border-color: #266fff;
}

/* Radio */
.video-radio-group {
    display: flex;
    gap: 20px;
    margin-bottom: 4px;
}

/* 视频中卡片预览（横排，缩略图 16:9） */
.video-card-medium-inner {
    display: flex;
    gap: 14px;
    width: 100%;
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    border: 1px solid #e8e8e8;
}

.video-card-thumb-empty {
    width: 100%;
    height: 100%;
    background: #e0e0e0;
}

/* 视频小卡片预览（横排） */
.video-card-small-inner {
    display: flex;
    gap: 12px;
    width: 100%;
    background: #f5f5f5;
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid #e8e8e8;
}

/* Checkbox */
.video-check-group {
    display: flex;
    gap: 24px;
}

.video-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
}

.video-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #266fff;
}

/* ========== 音频设置弹窗 ==========  */
.audio-setting-modal {
    background: #fff;
    border-radius: 12px;
    width: 1030px;
    height: 717px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* 主体：左右分栏 */
.audio-setting-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* 左侧手机预览 */
.audio-setting-preview {
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 20px 60px;
}

/* 手机内音频列表样式 */
.audio-phone-list {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 14px 16px;
    margin: 12px 16px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.audio-phone-list-play {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    overflow: hidden;
}

.audio-phone-list-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.audio-phone-list-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.audio-phone-list-title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 20px;
}

.audio-phone-list-size {
    flex-shrink: 0;
    font-size: 12px;
    color: #999;
    line-height: 20px;
}

.audio-phone-progress-track {
    height: 4px;
    background: #e8e8e8;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    padding: 8px 0;
    background-clip: content-box;
    box-sizing: content-box;
}

.audio-phone-progress-fill {
    height: 100%;
    background: #266fff;
    border-radius: 2px;
}

.audio-phone-progress-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #266fff;
    box-shadow: 0 1px 4px rgba(38, 111, 255, 0.4);
    cursor: grab;
}

.audio-phone-progress-handle:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.3);
}

.audio-phone-progress-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #999;
    padding: 0 2px;
}

/* 唱片进度条容器 */
.audio-phone-disc-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

/* 手机内唱片样式 */
.audio-phone-disc {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 20px 16px;
    margin: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.audio-phone-disc-play {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 2;
}

.audio-phone-disc-play:hover {
    box-shadow: 0 2px 12px rgba(38, 111, 255, 0.3);
}

.audio-phone-list-play svg,
.audio-phone-disc-play svg,
.audio-phone-disc-inner svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.audio-phone-disc-wrap {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-phone-disc-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.audio-phone-disc-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.audio-phone-disc-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.audio-phone-disc-size {
    font-size: 12px;
    color: #999;
}

.audio-phone-empty {
    color: #999;
    font-size: 13px;
    text-align: center;
    padding: 40px 0;
}

/* 右侧设置面板 */
.audio-setting-panel {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.audio-section {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
    gap: 16px;
}

.audio-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* 音频字段 */
.audio-field {
    display: flex;
    align-items: center;
    gap: 16px;
}

.audio-field-label {
    color: #555;
}

.audio-field-input {
    flex: 1;
    height: 32px;
    padding: 0 16px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.audio-field-input:focus {
    border-color: #266fff;
}

/* 音频操作按钮 */
.audio-actions {
    flex: 1;
    display: flex;
    gap: 12px;
}

.audio-action-btn {
    flex: 1;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9d9d9;
    border-radius: 100px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s;
}

.audio-action-btn:hover {
    border-color: #266fff;
    color: #266fff;
}

.audio-action-btn-danger {
    border-color: #ff4d4f;
    color: #ff4d4f;
}

.audio-action-btn-danger:hover {
    background: #fff1f0;
    border-color: #ff4d4f;
    color: #ff4d4f;
}

/* 音频样式切换 */
.audio-style-group {
    display: flex;
    gap: 12px;
    width: fit-content;
}

.audio-style-btn {
    padding: 10px 28px;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all 0.15s;
}

.audio-style-btn.active {
    background: #266fff;
    color: #fff;
    border-color: #266fff;
}

.audio-style-btn:not(.active):hover {
    background: #f0f5ff;
    border-color: #266fff;
}

/* ========== 表单选择弹窗 ========== */
.form-picker-modal {
    background: #fff;
    border-radius: 12px;
    width: 800px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.form-picker-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.form-picker-search {
    position: relative;
    width: 300px;
}

.form-picker-search-input {
    width: 100%;
    height: 32px;
    padding: 0 36px 0 12px;
    border: 1px solid #d9d9d9;
    border-radius: 100px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.form-picker-search-input:focus {
    border-color: #266fff;
}

.form-picker-search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.form-picker-create-btn {
    margin-left: auto;
    margin-right: 0;
    flex-shrink: 0;
    height: 32px;
    padding: 0 16px;
    background: #266fff;
    color: #fff;
    border: none;
    border-radius: 100px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.form-picker-create-btn:hover {
    background: #1a5fe8;
}

.form-picker-table-wrap {
    height: 380px;
    padding: 0 24px;
}

.form-picker-table {
    width: 100%;
    border-collapse: collapse;
}

.form-picker-table thead th {
    font-size: 13px;
    font-weight: 500;
    color: #999;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.form-picker-table tbody tr {
    cursor: pointer;
    transition: background 0.1s;
}

.form-picker-table tbody tr:hover {
    background: #f7f9fc;
}

.form-picker-table tbody tr.is-selected {
    background: #eef4ff;
}

.form-picker-table tbody td {
    padding: 14px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
    color: #333;
    vertical-align: middle;
}

.form-picker-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid #d9d9d9;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.form-picker-checkbox.checked {
    background: #266fff;
    border-color: #266fff;
}

.form-picker-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-picker-name-text {
    font-weight: 500;
    color: #333;
}

.form-picker-name-no {
    font-size: 12px;
    color: #999;
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 4px;
}

.form-picker-preview-link {
    color: #266fff;
    font-size: 13px;
    cursor: pointer;
}

.form-picker-preview-link:hover {
    text-decoration: underline;
}

.form-picker-empty {
    text-align: center;
    color: #999;
    padding: 40px 0 !important;
    font-size: 13px;
}

.form-picker-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 24px;
}

.form-picker-page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: all 0.15s;
}

.form-picker-page-btn:hover:not(:disabled):not(.active) {
    border-color: #266fff;
    color: #266fff;
}

.form-picker-page-btn.active {
    background: #266fff;
    border-color: #266fff;
    color: #fff;
}

.form-picker-page-btn:disabled {
    color: #ccc;
    cursor: not-allowed;
}

.form-picker-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
}

/* ========== 设置链接弹窗 ========== */
.link-picker-toolbar {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px;
    border-bottom: 1px solid #f0f0f0;
}

.link-picker-tabs {
    display: flex;
    align-items: center;
    gap: 24px;
}

.link-picker-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: color 0.15s;
    user-select: none;
}

.link-picker-tab:hover {
    color: #333;
}

.link-picker-tab.active {
    color: #266fff;
    font-weight: 500;
}

.link-picker-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #a2a4a5;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
}

.link-picker-tab:hover .link-picker-radio {
    border-color: #266fff;
}

.link-picker-tab.active .link-picker-radio {
    border-color: #266fff;
    background: #266fff;
}

.link-picker-radio-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    display: none;
}

.link-picker-tab.active .link-picker-radio-dot {
    display: block;
}

.link-picker-table-wrap {
    height: 400px;
    overflow-y: auto;
    padding: 0 24px;
}

.link-picker-table-wrap::-webkit-scrollbar {
    width: 6px;
}

.link-picker-table-wrap::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.link-picker-table-wrap::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.link-picker-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.link-picker-table {
    width: 100%;
    border-collapse: collapse;
}

.link-picker-table thead th {
    font-size: 13px;
    font-weight: 500;
    color: #999;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.link-picker-table tbody tr {
    cursor: pointer;
    transition: background 0.1s;
}

.link-picker-table tbody tr:hover {
    background: #f7f9fc;
}

.link-picker-table tbody tr.is-selected {
    background: #eef4ff;
}

.link-picker-table tbody td {
    padding: 14px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
    color: #333;
    vertical-align: middle;
}

.link-picker-table .col-radio {
    width: 44px;
}

.link-picker-table .col-time {
    width: 180px;
}

.link-picker-radio-cell {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    position: relative;
}

.link-picker-table tr.is-selected .link-picker-radio-cell {
    border-color: #266fff;
    background: #266fff;
}

.link-picker-radio-cell::after {
    content: "";
    position: absolute;
    top: 40%;
    left: 50%;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: 0;
    border-left: 0;
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.15s;
}

.link-picker-table tr.is-selected .link-picker-radio-cell::after {
    opacity: 1;
}

.link-picker-radio-cell-dot {
    display: none;
}

.link-picker-empty {
    text-align: center;
    color: #999;
    padding: 60px 0;
    font-size: 13px;
}

.link-picker-url-panel {
    height: 400px;
    display: flex;
    justify-content: center;
    padding: 40px 24px;
}

.link-picker-url-input {
    width: 100%;
    max-width: 520px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.link-picker-url-input:focus {
    border-color: #266fff;
}

/* ========== 联系方式设置弹窗 ========== */
.contact-setting-modal {
    background: #fff;
    border-radius: 12px;
    width: 1030px;
    height: 680px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.contact-setting-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* 左侧组件列表 */
.contact-setting-left {
    width: 360px;
    border-right: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    background: #f4f4f4;
    overflow-y: auto;
    overflow-x: hidden;
}

.contact-setting-left::-webkit-scrollbar {
    width: 6px;
}

.contact-setting-left::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.contact-setting-left::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.contact-setting-left::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.contact-left-title {
    padding: 16px 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    flex-shrink: 0;
}

.contact-component-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-component-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
    background: #fff;
}

.contact-component-item.active {
    border-color: #266fff;
    box-shadow: 0 2px 8px rgba(38, 111, 255, 0.15);
}

/* 中间编辑区域的联系方式组件：外间距 + 卡片阴影（不影响设置弹窗内的 .contact-component-list） */
.contact-block-render .contact-component-item {
    margin: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.contact-component-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.contact-component-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.contact-component-name {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-component-hours {
    font-size: 12px;
    color: #999;
}

.contact-component-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.contact-component-icon-img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    padding: 4px;
    box-sizing: content-box;
    filter: grayscale(100%);
}

/* 样式1：紧凑横排 */
.contact-comp-s1 {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

/* 样式2：展开竖排卡片 */
.contact-comp-wide {
    padding: 16px;
}

.contact-comp-s2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-comp-s2-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.contact-comp-s2-top .contact-component-avatar {
    border-radius: 4px;
}

.contact-comp-s2-divider {
    height: 1px;
    background: #eee;
    width: 100%;
}

.contact-comp-s2-bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 0;
}

.contact-comp-s2-row {
    display: flex;
    align-items: center;
    padding: 9px 0;
    border-top: 1px solid #f0f0f0;
}

.contact-comp-s2-row:first-child {
    border-top: 0;
}

.contact-comp-s2-row .contact-component-icon-img {
    width: 18px;
    height: 18px;
    margin-right: 10px;
}

.contact-comp-s2-row-value {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.contact-comp-s2-row-action {
    font-size: 13px;
    color: #266fff;
}

.contact-comp-s2-addr {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #333;
    min-width: 0;
}

.contact-comp-s2-addr span {
    word-break: break-word;
}

.contact-comp-s2-addr .contact-component-icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: 1px;
    border: 0;
    padding: 0;
    filter: none;
}

.contact-comp-s2-icons {
    display: flex;
    gap: 16px;
}

.contact-comp-s2-icons .contact-component-icon-img {
    filter: none;
    border: 0;
    padding: 0;
    width: 16px;
    height: 16px;
}

.contact-comp-s2-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    color: #333;
}

.contact-comp-s2-icon {
    width: 20px;
    height: 20px;
}

.contact-comp-s2-icon img {
    display: block;
    width: 100%;
}

/* 样式3：列表带操作 */
.contact-comp-s3 {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.contact-comp-s3-header {
    margin-bottom: 8px;
}

.contact-comp-s3-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.contact-comp-s3-hours {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.contact-comp-s3-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid #f0f0f0;
}

.contact-comp-s3-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    filter: grayscale(100%);
}

.contact-comp-s3-value {
    flex: 1;
    font-size: 13px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-comp-s3-action {
    flex-shrink: 0;
    font-size: 13px;
    color: #266fff;
    cursor: pointer;
}

/* 样式4：居中头像卡片 */
.contact-comp-s4 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
}

.contact-comp-s4-avatar {
    width: 64px;
    height: 64px;
    object-fit: cover;
    margin-bottom: 10px;
}

.contact-comp-s4-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.contact-comp-s4-hours {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
    margin-bottom: 14px;
}

.contact-comp-s4-icons {
    display: flex;
    gap: 16px;
}

.contact-comp-s4-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.contact-comp-s4-btn img {
    width: 18px;
    height: 18px;
    filter: grayscale(100%);
}

.contact-component-check {
    position: absolute;
    right: -1px;
    top: -1px;
    width: 16px;
    height: 16px;
    background: #266fff;
    border-radius: 0 8px 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 右侧配置面板 */
.contact-setting-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.contact-setting-right .panel-scroll-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px;
}

.contact-field-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.contact-field-label {
    width: 40px;
    height: 36px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 14px;
}

.contact-field-input {
    width: 514px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.contact-field-input:focus {
    border-color: #266fff;
}

.contact-avatar-upload {
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e8e8e8;
}

.contact-avatar-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.contact-avatar-overlay {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.contact-avatar-wrap:hover .contact-avatar-overlay {
    opacity: 1;
}

.contact-avatar-overlay-upload {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-avatar-overlay-icon {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(1);
}

.contact-avatar-overlay-del {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}

.contact-avatar-overlay-del:hover {
    background: rgba(255, 77, 79, 0.8);
}

.contact-upload-box {
    width: 80px;
    height: 80px;
    border: 1px dashed #d0d0d0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    color: #999;
    font-size: 12px;
    transition: border-color 0.15s, color 0.15s;
}

.contact-upload-box:hover {
    border-color: #266fff;
    color: #266fff;
}

.contact-upload-box:hover .contact-upload-box-icon {
    filter: none;
    opacity: 1;
}

.contact-upload-box-icon {
    width: 28px;
    height: 28px;
    filter: grayscale(100%);
    opacity: .8;
}

.contact-multi-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-multi-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-multi-item .contact-field-input {
    flex: 1;
}

.contact-multi-del {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #999;
    font-size: 18px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-multi-del svg {
    opacity: .5;
}

.contact-multi-del:hover {
    color: #ff4d4f;
}

.contact-multi-del:hover svg {
    opacity: 1;
}

/* 输入框内嵌链接容器 */
.contact-input-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
}

.contact-input-wrap .contact-field-input {
    display: block;
    width: 100%;
    padding-right: 110px;
}

.contact-input-link {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #266fff;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    background: none;
    border: none;
    padding: 4px 8px;
}

.contact-input-link:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* 添加按钮组 */
.contact-add-btn-group {
    display: flex;
    justify-content: center;
    padding-top: 8px;
    margin-top: 8px;
}

.contact-add-action {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: #266fff;
    cursor: pointer;
    padding: 0 20px;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.contact-add-action+.contact-add-action {
    border-left: 1px solid #e0e0e0;
}

.contact-add-action-icon {
    width: 16px;
    height: 16px;
}

/* 置灰不可点击 */
.contact-add-action.disabled {
    color: #bbb;
}

.contact-add-action.disabled .contact-add-action-icon {
    opacity: 0.4;
}

.contact-add-action.disabled:hover {
    opacity: 1;
}

/* hover 提示 */
.contact-add-action {
    position: relative;
}

.contact-add-action[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}

.contact-setting-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 32px;
    border-top: 1px solid #f0f0f0;
}

/* ========== 表单块编辑区样式 ========== */
.block-form-content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
}

.block-table-content {
    margin: 16px;
    background: transparent;
    cursor: default;
    outline: none;
    user-select: none;
}

.block-table-content table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

/* 表格数据行/卡片/宫格/模块：hover 蓝色虚线 + 行级工具条（上移/下移/复制/删除） */
.block-table-content tbody tr:hover,
.block-table-content .tpl-card:hover,
.block-table-content .tpl-cell:hover,
.block-table-content .tpl-mod:hover {
    outline: 1px dashed #266fff;
    outline-offset: -1px;
}
/* 行工具条容器定位基准：标准表格行与模板 6~11 的卡片/宫格/模块均相对定位 */
.block-table-content tbody tr,
.block-table-content .tpl-card,
.block-table-content .tpl-cell,
.block-table-content .tpl-mod {
    position: relative;
}
/* 仅在组件被选中后，hover 元素才显示工具条（对齐导航交互） */
.edit-block.block-selected .block-table-content tbody tr:hover .tpl-row-toolbar,
.edit-block.block-selected .block-table-content .tpl-card:hover .tpl-row-toolbar,
.edit-block.block-selected .block-table-content .tpl-cell:hover .tpl-row-toolbar,
.edit-block.block-selected .block-table-content .tpl-mod:hover .tpl-row-toolbar {
    display: flex;
}
.tpl-row-toolbar {
    display: none;
    position: absolute;
    top: 100%;
    margin-top: 6px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    align-items: center;
    gap: 4px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 4px 8px;
    z-index: 20;
    white-space: nowrap;
}
/* 透明桥接区：填补按钮与浮层之间的 6px 间隙，避免 hover 经过时丢失 */
.tpl-row-toolbar::before {
    content: "";
    position: absolute;
    top: -6px;
    left: -12px;
    right: -12px;
    height: 6px;
}
.tpl-rbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
}
.tpl-rbtn img {
    width: 16px;
    height: 16px;
    display: block;
}
.tpl-rbtn:hover:not(:disabled) {
    background: #f0f0f0;
}
.tpl-rbtn-danger:hover:not(:disabled) {
    background: #ffe0e0;
}

.block-table-content td,
.block-table-content th {
    border: 1px solid #e0e0e0;
    padding: 8px 12px;
    text-align: center;
    font-size: 13px;
    color: #555;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    cursor: text;
    user-select: text;
}

/* 覆盖 .tpl-table 的 white-space:nowrap（优先级更高），使编辑区表格内容自动换行 */
.block-table-content table.tpl-table th,
.block-table-content table.tpl-table td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* 编辑区深色背景下：表格文案与边框反白，表头背景 10% 白 */
.block-table-content.table-dark td,
.block-table-content.table-dark th {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.8);
}
.block-table-content.table-dark table.tpl-table thead th {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.form-block-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #eef4ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-block-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-block-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.form-block-no {
    font-size: 12px;
    color: #999;
}

/* ========== 表格样式选择弹窗 ========== */
.table-picker-modal {
    background: #fff;
    border-radius: 12px;
    width: 1030px;
    height: 668px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.table-picker-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-content: start;
}

.table-picker-create {
    cursor: pointer;
}

.table-picker-create-inner {
    width: 100%;
    height: 100%;
    border: 2px dashed #d9d9d9;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 14px;
    color: #266fff;
    transition: all 0.15s;
}

.table-picker-create:hover .table-picker-create-inner {
    border-color: #266fff;
    background: #f5f9ff;
}

/* ========== 新建表格 8×8 网格选择悬浮层 ========== */
.table-picker-create {
    position: relative;
}

.tpl-grid-popup {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    z-index: 200;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    padding: 16px;
    min-width: 280px;
}

.tpl-grid-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tpl-grid-popup-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.tpl-grid-popup-close {
    width: 24px;
    height: 24px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 14px;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tpl-grid-popup-close:hover {
    background: #eee;
}

.tpl-grid-popup-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tpl-grid-popup-row {
    display: flex;
    gap: 4px;
}

.tpl-grid-cell {
    width: 28px;
    height: 28px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: all 0.08s;
}

.tpl-grid-cell:hover {
    border-color: #bbb;
}

.tpl-grid-cell.is-active {
    background: #eef2ff;
    border-color: #266fff;
}

.table-picker-card {
    min-width: 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.table-picker-card:hover .table-picker-card-table-wrap {
    border-color: #266fff;
}

.table-picker-card-table-wrap {
    width: 100%;
    height: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed transparent;
    border-radius: 10px;
    transition: all 0.15s;
}

.table-picker-card-table {
    display: block;
    width: 100%;
}

/* 模板内真实表格样式 */
.tpl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    color: #555;
    line-height: 1.5;
}

.tpl-table th,
.tpl-table td {
    border: 1px solid #e0e0e0;
    padding: 6px;
    text-align: center;
    white-space: nowrap;
    min-width: 0;
}

.tpl-table thead th {
    background: #f4f4f4;
    color: #333;
    font-weight: 600;
    font-size: 13px;
}

/* id 6：2×2 卡片网格（每个卡片含标题+内容） */
.tpl-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    height: 100%;
}

.tpl-card {
    background: #f7f8fa;
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tpl-card-label {
    font-size: 12px;
    color: #999;
    cursor: text;
}

.tpl-card-value {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: text;
}

/* ========== 统一：标题与内容字号（6~11 一致） ========== */
.tpl-clabel {
    font-size: 12px;
    color: #999;
    cursor: text;
}

.tpl-cval {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: text;
}

/* ========== id 7/8：2×2 网格 ========== */
.tpl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100%;
}

.tpl-cell {
    min-width: 0;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* id 7：仅中间横向分割线
   规则：所有 cell 默认有下边框；最后一个 cell 永远无（奇数总数→仅末个无）；
   当最后一个 cell 位于偶数位（即总数为偶数）时，再去掉倒数第二个（末行整行无） */
.tpl-grid-h .tpl-cell {
    border-bottom: 1px solid #eee;
}
.tpl-grid-h .tpl-cell:last-child {
    border-bottom: none;
}
.tpl-grid-h:has(.tpl-cell:last-child:nth-child(even)) .tpl-cell:nth-last-child(2) {
    border-bottom: none;
}

/* id 8：中间横竖两条分割线（横：同上；竖：第一列右侧贯穿所有行） */
.tpl-grid-hv .tpl-cell {
    border-bottom: 1px solid #eee;
}
.tpl-grid-hv .tpl-cell:last-child {
    border-bottom: none;
}
.tpl-grid-hv:has(.tpl-cell:last-child:nth-child(even)) .tpl-cell:nth-last-child(2) {
    border-bottom: none;
}
.tpl-grid-hv .tpl-cell:nth-child(odd) {
    border-right: 1px solid #eee;
}

/* ========== id 9/10/11：纵向模块列表 ========== */
.tpl-stack {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tpl-stack-bg {
    border-radius: 8px;
    background: #f7f8fa;
}

.tpl-mod {
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px solid #eee;
}

.tpl-mod:last-child {
    border-bottom: none;
}

/* id 10/11：模块内标题与内容同一行 */
.tpl-mod-line {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
}

.tpl-mod-line .tpl-clabel {
    flex: 1;
}

.tpl-mod-line .tpl-cval {
    flex: 3;
}

/* id 11：无分割线 + 左右两端对齐 */
.tpl-stack-nodiv .tpl-mod {
    border-bottom: none;
}

/* 编辑区深色背景下：表格卡片/九宫格底色改为 10% 透明白，文案反白 */
.block-table-content.table-dark .tpl-card,
.block-table-content.table-dark .tpl-stack-bg {
    background: rgba(255, 255, 255, 0.1);
}
.block-table-content.table-dark .tpl-card-value,
.block-table-content.table-dark .tpl-cval,
.block-table-content.table-dark .tpl-clabel,
.block-table-content.table-dark .tpl-card-label {
    color: #fff;
}
.block-table-content.table-dark .tpl-card-label,
.block-table-content.table-dark .tpl-clabel {
    color: rgba(255, 255, 255, 0.5);
}

.tpl-stack-nodiv .tpl-mod-line {
    justify-content: space-between;
}

.tpl-stack-nodiv .tpl-mod-line .tpl-cval {
    text-align: right;
}

.table-picker-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
}

/* ========== 地图导航设置弹窗 ========== */
.location-picker-modal {
    background: #fff;
    border-radius: 12px;
    width: 860px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 步骤指示条 */
.location-step-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px 8px;
    gap: 0;
}

.location-step-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #999;
    font-size: 14px;
    transition: color 0.2s;
}

.location-step-item.active {
    color: #266fff;
    font-weight: 600;
}

.location-step-item.done {
    color: #999;
}

.location-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
}

.location-step-item.active .location-step-num {
    background: #266fff;
    color: #fff;
    border-color: #266fff;
}

.location-step-item.done .location-step-num {
    background: transparent;
    color: #999;
    border-color: #e0e0e0;
}

.location-step-line {
    width: 80px;
    height: 2px;
    background: #e0e0e0;
    margin: 0 12px;
    transition: background 0.2s;
}

.location-step-line.done {
    background: #e0e0e0;
}

/* 步骤内容区 */
.location-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 24px 16px;
    min-height: 0;
}

.location-body::-webkit-scrollbar {
    width: 6px;
}

.location-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.location-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.location-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 搜索行 */
.location-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.location-search-box {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.location-search-input {
    width: 300px;
    height: 38px;
    padding: 0 36px 0 14px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.location-search-input:focus {
    border-color: #266fff;
}

.location-search-icon {
    position: absolute;
    right: 12px;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.location-search-btn {
    height: 38px;
    padding: 0 24px;
    background: #266fff;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.location-search-btn:hover {
    background: #1558e0;
}

.location-hint {
    margin-left: auto;
    margin-right: 0;
    font-size: 13px;
    color: #999;
    white-space: nowrap;
}

/* 地图容器 */
.location-map-wrap {
    width: 100%;
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    background: #f5f5f5;
}

.location-error-tip {
    margin-top: 8px;
    padding: 8px 12px;
    background: #fff2f0;
    border: 1px solid #ffccc7;
    border-radius: 6px;
    color: #ff4d4f;
    font-size: 13px;
}

/* 步骤2：设置展示样式 */
.location-style-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 20px;
}

.location-style-field {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 0 60px;
}

.location-style-label {
    width: 64px;
    font-size: 14px;
    color: #333;
    flex-shrink: 0;
    line-height: 38px;
    font-weight: 500;
}

.location-style-input {
    flex: 1;
    height: 38px;
    padding: 0 14px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}

.location-style-input:focus {
    border-color: #266fff;
}

/* 样式选项容器 */
.location-style-options {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 单个样式选项卡片 */
.loc-style-card {
    cursor: pointer;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 4px;
    transition: all 0.2s;
    background: #fff;
}

.loc-style-card:hover {
    border-color: #a0c4ff;
}

.loc-style-card.active {
    border-color: #266fff;
    box-shadow: 0 0 0 3px rgba(38, 111, 255, 0.1);
}

/* 样式预览区域 */
.loc-style-preview {
    width: 100%;
}

/* ===== 样式1：卡片式预览 ===== */
.loc-style-card-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    background: #fff;
}

.loc-card-map-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e8f0fe, #d4e4fc);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.loc-card-map-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.loc-card-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.loc-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.loc-card-addr {
    font-size: 13px;
    color: #999;
}

.loc-card-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.loc-card-arrow svg {
    width: 26px;
    height: 26px;
}

/* ===== 样式2：纯地图预览 ===== */
.loc-style-map-preview {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.loc-map-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.loc-map-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.loc-map-addr {
    font-size: 13px;
    color: #999;
}

.loc-map-placeholder {
    width: 100%;
    height: 150px;
    border-radius: 8px;
    overflow: hidden;
    background: #e8f0fe;
    position: relative;
}

.loc-map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.loc-map-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #999;
}

.loc-map-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -100%);
    pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.loc-map-pin svg {
    width: 100%;
    height: 100%;
}

/* 底部按钮 */
.location-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
}

.location-btn-cancel {
    height: 36px;
    padding: 0 22px;
    border: 1px solid #d9d9d9;
    border-radius: 100px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
}

.location-btn-cancel:hover {
    border-color: #bbb;
    color: #333;
}

.location-btn-next,
.location-btn-confirm {
    height: 36px;
    padding: 0 22px;
    border: none;
    border-radius: 100px;
    background: #266fff;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.location-btn-next:hover,
.location-btn-confirm:hover {
    background: #1558e0;
}

.location-btn-prev {
    height: 36px;
    padding: 0 22px;
    border: 1px solid #d9d9d9;
    border-radius: 100px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
}

.location-btn-prev:hover {
    border-color: #bbb;
    color: #333;
}

/* ========== 编辑区：地图位置块 ========== */
.block-location-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
}

.block-location-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e8f0fe, #d4e4fc);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.block-location-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.block-location-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.block-location-address {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.block-location-coords {
    font-size: 13px;
    color: #999;
}

.block-location-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.block-location-arrow svg {
    width: 26px;
    height: 26px;
}

/* 地图位置块 - 样式2：纯地图式 */
.block-location-map {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.block-location-map-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.block-location-map-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.block-location-map-addr {
    font-size: 13px;
    color: #999;
}

.block-location-map-area {
    position: relative;
    height: 150px;
    border-radius: 8px;
    background: #e8eef5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23d3dce6' stroke-width='1'/%3E%3C/svg%3E");
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.block-location-map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
    z-index: 2;
}

.block-location-map-pin svg {
    width: 100%;
    height: 100%;
}

.block-location-map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ========== 背景设置弹窗 ========== */
.bg-setting-modal {
    background: #fff;
    border-radius: 12px;
    width: 1030px;
    height: 717px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bg-setting-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* 左侧手机预览 */
.bg-setting-preview {
    width: 360px;
    border-right: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 24px;
    flex-shrink: 0;
}

.bg-phone-mock {
    width: 260px;
    border-radius: 28px;
    border: 2px solid #ddd;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.bg-phone-inner {
    flex: 1;
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: background 0.2s, box-shadow 0.2s;
}

/* 左侧预览模拟内容 */
.bg-mock-body {
    margin: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.05);
}
.bg-mock-row3 {
    display: flex;
    gap: 8px;
}
.bg-mock-card {
    background: #f0f0f0;
    border-radius: 8px;
    flex: 1;
    height: 72px;
}
.bg-mock-wide {
    width: 60%;
    height: 10px;
    border-radius: 4px;
    flex: initial;
}
.bg-mock-divider {
    height: 1px;
    background: rgba(0,0,0,.1);
}

.bg-tab-bar {
    display: flex;
    margin: 14px 40px 14px;
    padding: 4px;
    gap: 4px;
    background: #f2f3f5;
    border-radius: 999px;
    flex-shrink: 0;
}

.bg-tab-btn {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    color: #666;
    background: none;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}

.bg-tab-btn.active {
    color: #266fff;
    font-weight: 500;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 推荐颜色网格（参考二维码美化弹窗样式） */
.bgc-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.bgc-swatch {
    width: 40px;
    height: 40px;
    padding: 2px;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    transition: all 0.2s;
}
.bgc-swatch-inner {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.bgc-swatch:hover {
    border-color: #c0c4cc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.bgc-swatch.active {
    border: 1px solid #165dff;
    box-shadow: 0 0 0 2px rgba(22,93,255,0.12);
}

/* 自定义颜色选择器 */
.bgc-custom-row {
    display: flex;
    align-items: center;
}
.bgc-picker-trigger {
    width: 40px;
    height: 40px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    padding: 3px;
    background: #fff;
    transition: all 0.2s;
}
.bgc-picker-trigger:hover {
    border-color: #c0c4cc;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.bgc-picker-preview {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

/* 颜色选择器浮层 */
.bgc-picker-modal {
    position: fixed;
    display: none;
    visibility: hidden;
    z-index: 10000;
}
.bgc-picker-modal.show {
    display: block;
}
.bgc-picker-dialog {
    background: #fff;
    border-radius: 8px;
    width: 360px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}
.bgc-picker-body {
    padding: 20px;
}
.bgc-picker-main {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.bgc-picker-saturation {
    flex: 1;
    height: 200px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
.bgc-picker-saturation-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.bgc-picker-saturation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, #fff, transparent);
}
.bgc-picker-saturation-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, #000);
}
.bgc-picker-pointer {
    position: absolute;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.bgc-picker-pointer-inner {
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0,0,0,0.6);
}
.bgc-picker-hue {
    width: 24px;
    display: flex;
    flex-direction: column;
}
.bgc-picker-hue-slider {
    width: 24px;
    height: 200px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to bottom,
        hsl(0, 100%, 50%),
        hsl(60, 100%, 50%),
        hsl(120, 100%, 50%),
        hsl(180, 100%, 50%),
        hsl(240, 100%, 50%),
        hsl(300, 100%, 50%),
        hsl(360, 100%, 50%)
    );
    border-radius: 12px;
    cursor: pointer;
    writing-mode: bt-lr;
    -webkit-writing-mode: vertical-lr;
    transform: rotate(180deg);
}
.bgc-picker-hue-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 2px rgba(0,0,0,0.6);
    cursor: pointer;
}
.bgc-picker-hue-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 2px rgba(0,0,0,0.6);
    cursor: pointer;
}
.bgc-picker-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
}
.bgc-picker-input {
    flex: 1;
    height: 36px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 14px;
    font-family: monospace;
    outline: none;
    transition: border-color 0.2s;
}
.bgc-picker-input:focus {
    border-color: #165dff;
}
.bgc-picker-btn {
    height: 36px;
    padding: 0 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.bgc-picker-btn-clear {
    background: transparent;
    border: none;
    color: #165dff;
}
.bgc-picker-btn-clear:hover {
    background: #f0f5ff;
}
.bgc-picker-btn-confirm {
    background: #165dff;
    border: 1px solid #165dff;
    color: #fff;
}
.bgc-picker-btn-confirm:hover {
    background: #1252e0;
    border-color: #1252e0;
}


/* ========== 背景图面板 ========== */

/* 本地上传 */
.bg-upload-section .img-setting-label {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.bg-upload-hint {
    font-size: 12px;
    color: #bbb;
    font-weight: normal;
}
.bg-upload-box {
    width: 109px;
    height: 109px;
    border: 2px dashed #d9d9d9;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, border-style 0.15s;
    overflow: hidden;
}
.bg-upload-box:hover {
    border-color: #266fff;
    background: #fafcff;
}
.bg-upload-box.has-img {
    border: none;
}
.bg-upload-box-icon {
    width: 28px;
    height: 28px;
    filter: grayscale(100%);
    opacity: .8;
}
.bg-upload-box:hover .bg-upload-box-icon {
    filter: none;
    opacity: 1;
}

/* 已上传图片预览 */
.bg-upload-preview {
    position: relative;
    width: 100%;
    height: 100%;
}
.bg-upload-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
    display: block;
}
/* hover 遮罩层 */
.bg-upload-overlay {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}
.bg-upload-box.has-img:hover .bg-upload-overlay {
    opacity: 1;
}
/* 中间重新上传图标 */
.bg-overlay-reupload {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bg-overlay-reupload-icon {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(1);
}
/* 右上角删除按钮 */
.bg-overlay-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* 图库 */
.bg-gallery-section {
    position: relative;
}
.bg-gallery-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.bg-gallery-size-hint {
    font-size: 12px;
    color: #266fff;
    font-weight: normal;
}
.bg-gallery-wrap {
    position: relative;
}
.bg-gallery-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 0 8px;
}
.bg-gallery-scroll::-webkit-scrollbar { display: none; }
.bg-gallery-item {
    flex-shrink: 0;
    width: 80px;
    height: 154px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.15s;
    position: relative;
}
.bg-gallery-item:hover {
    transform: translateY(-2px);
}
.bg-gallery-item.active {
    border-color: #266fff;
}
.bg-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bg-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: all 0.15s;
    color: #666;
}
.bg-gallery-arrow:hover {
    background: #f5f5f5;
    border-color: #ccc;
}
.bg-gallery-arrow.left { left: -14px; }
.bg-gallery-arrow.right { right: -14px; }
.bg-gallery-arrow svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
}

/* 背景模糊 */
.bg-blur-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.bg-blur-item {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    user-select: none;
}
.bg-blur-radio {
    width: 16px;
    height: 16px;
    border: 1.5px solid #d9d9d9;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.15s;
}
.bg-blur-item:hover .bg-blur-radio,
.bg-blur-item.active .bg-blur-radio {
    border-color: #266fff;
}
.bg-blur-item.active .bg-blur-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #266fff;
}

/* 延伸颜色 */
.bg-extend-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bg-extend-swatches {
    display: flex;
    gap: 10px;
}
.bg-extend-swatch {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s, border-color 0.15s;
}
.bg-extend-swatch:hover {
    transform: scale(1.08);
}
.bg-extend-swatch.active {
    border-color: #266fff;
}
.bg-extend-custom-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #999;
    cursor: pointer;
    padding-left: 10px;
    border-left: 1px solid #e5e7eb;
}

/* ========== 状态设置弹窗 ========== */
.status-setting-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.status-setting-modal {
    width: 1000px;
    max-width: 92vw;
    background: #fff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
.status-setting-header {
    height: 56px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.status-setting-title {
    font-size: 17px;
    font-weight: 600;
    color: #333;
}
.status-setting-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: #999;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
}
.status-setting-close:hover { color: #333; }
.status-setting-close svg { width: 18px; height: 18px; }
.status-setting-body {
    padding: 0 24px 24px;
    background: #f4f5f7;
}
.status-setting-tip {
    font-size: 13px;
    color: #999;
    line-height: 1.6;
    margin: 16px 0;
}
.status-setting-tip a {
    color: #266fff;
    text-decoration: none;
}
.status-style-section {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 16px 20px;
    background: #fafbfc;
    border-radius: 10px;
    margin-bottom: 20px;
}
.status-style-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}
.status-style-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color .15s;
}
.status-style-option.active { color: #266fff; }
.status-radio-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #a2a4a5;
    position: relative;
    flex-shrink: 0;
    transition: border-color .15s, background .15s;
}
.status-style-option:hover .status-radio-dot {
    border-color: #266fff;
}
.status-style-option.active .status-radio-dot {
    border-color: #266fff;
    background: #266fff;
}
.status-radio-dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    display: none;
}
.status-style-option.active .status-radio-dot::after {
    display: block;
}

/* 样式选项 hover 浮层预览 */
.status-style-preview {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: 180px;
    padding: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s, transform .15s;
    z-index: 20;
}
.status-style-preview-title {
    font-size: 12px;
    color: #333;
    text-align: center;
    padding: 2px 0 6px;
}
.status-style-preview img {
    width: 100%;
    display: block;
    border-radius: 4px;
}
.status-style-option:hover .status-style-preview {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* 时间线区域 */
.status-timeline-area {
    position: relative;
    height: 300px;
    background: #fff;
    border-radius: 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

.status-timeline-area::-webkit-scrollbar {
    width: 6px;
}

.status-timeline-area::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.status-timeline-area::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.status-timeline-area::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.status-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 120px auto 0;
    padding: 7px 18px;
    border: 1px solid #266fff;
    border-radius: 6px;
    background: #fff;
    color: #266fff;
    font-size: 13px;
    cursor: pointer;
}

.status-add-btn:hover {
    background: #eef3ff;
}

/* 状态列表表格 */
.status-table {
    width: 100%;
    border: 1px solid #f0f0f0;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    font-size: 13px;
}
.status-table-head {
    display: grid;
    grid-template-columns: 200px 1fr 150px 70px;
    align-items: center;
    padding: 16px;
    background: #fafafa;
    color: #666;
    font-weight: 500;
    border-bottom: 1px solid #f0f0f0;
}
.status-table-row {
    display: grid;
    grid-template-columns: 200px 1fr 150px 70px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #f5f5f5;
}
.status-table-row:last-child { border-bottom: none; }
.status-td-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #333;
    font-weight: 500;
}
.status-td-items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.status-td-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #333;
}
.status-td-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-td-setting { color: #333; }
.status-td-set-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.status-exchange-icon {
    width: 20px;
    height: 20px;
    margin-left: 6px;
    cursor: pointer;
    transform: rotate(90deg);
    filter: brightness(0) saturate(100%) invert(43%) sepia(93%) saturate(2000%) hue-rotate(200deg) brightness(100%) contrast(101%);
    opacity: .85;
    transition: opacity .15s;
}
.status-exchange-icon:hover { opacity: 1; }
.status-remove-btn {
    border: none;
    background: none;
    color: #266fff;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
}
.status-remove-btn:hover { color: #0052cc; }

.status-setting-footer {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: auto;
    padding: 0 24px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.status-btn {
    width: 106px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 100px;
    cursor: pointer;
    transition: all .15s;
}
.status-btn-cancel {
    border: 1px solid #266fff;
    background: #fff;
    color: #266fff;
}
.status-btn-cancel:hover { background: #EBF2FF; }
.status-btn-confirm {
    border: none;
    background: linear-gradient(268.5deg, rgba(38, 111, 255, 1) 1.98%, rgba(70, 179, 240, 1) 98.71%);
    color: #fff;
    font-weight: 500;
}
.status-btn-confirm:hover { opacity: 0.9; }

/* ========== 选择状态弹窗 ========== */
.status-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.status-picker-modal {
    background: #fff;
    border-radius: 12px;
    width: 800px;
    height: 600px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
.status-picker-body {
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

/* 搜索栏 */
.status-picker-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.status-picker-input-wrap {
    position: relative;
    width: 40%;
}
.status-picker-input {
    width: 100%;
    height: 32px;
    padding: 0 36px 0 14px;
    border: 1px solid #e5e7eb;
    border-radius: 100px;
    font-size: 13px;
    color: #333;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s;
}
.status-picker-input:focus { border-color: #266fff; }
.status-picker-input::placeholder { color: #bbb; }
.status-picker-search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
}
.status-picker-new-btn {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 0;
    gap: 4px;
    padding: 0 14px;
    height: 32px;
    border: none;
    border-radius: 100px;
    background: linear-gradient(268.5deg, rgba(38, 111, 255, 1) 1.98%, rgba(70, 179, 240, 1) 98.71%);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s;
}
.status-picker-new-btn:hover { opacity: .9; }

/* 表头 */
.status-picker-head {
    display: grid;
    grid-template-columns: 28px 45% 1fr;
    align-items: center;
    column-gap: 10px;
    padding: 10px 6px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}
.status-col-check { }
.status-col-name { }
.status-col-items { }

/* 列表 */
.status-picker-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 160px;
    max-height: 320px;
    overflow-y: auto;
}
.status-picker-item {
    display: grid;
    grid-template-columns: 28px 45% 1fr;
    align-items: center;
    column-gap: 10px;
    padding: 12px 6px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background .15s;
}
.status-picker-item:hover { background: #fafbff; }
.status-check-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #d9d9d9;
    position: relative;
    transition: all .2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.status-picker-item.active .status-check-circle {
    border-color: #266fff;
    background: #266fff;
}
.status-check-icon {
    width: 14px;
    height: 14px;
    display: none;
}
.status-picker-item.active .status-check-icon {
    display: block;
}
.status-info { min-width: 0; }
.status-info-name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.status-info-code {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
    white-space: nowrap;
}
.status-options {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}
.status-opt-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}
.status-opt-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-picker-empty {
    text-align: center;
    color: #bbb;
    font-size: 13px;
    padding: 32px 0;
}

/* 空态引导（无状态时） */
.status-picker-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 30px 16px;
}
.sp-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}
.sp-empty-desc {
    font-size: 12px;
    color: #999;
    line-height: 1.8;
    text-align: center;
    margin-bottom: 18px;
}
.sp-empty-placeholder {
    width: 100%;
    flex: 1;
    background: #f7f8fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.sp-empty-placeholder span {
    font-size: 18px;
    color: #e02020;
    letter-spacing: 2px;
}
.sp-empty-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 22px;
    height: 36px;
    border: none;
    border-radius: 100px;
    background: linear-gradient(268.5deg, rgba(38, 111, 255, 1) 1.98%, rgba(70, 179, 240, 1) 98.71%);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: opacity .15s;
}
.sp-empty-create-btn:hover { opacity: .9; }


/* ========== 品牌标识弹窗 ========== */
.brand-picker-modal {
    background: #fff;
    border-radius: 12px;
    width: 800px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.brand-desc {
    padding: 16px 28px 12px;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    text-align: center;
}

.brand-preview {
    flex: 1;
    overflow-y: auto;
    padding: 10px 28px 20px;
    display: flex;
    justify-content: center;
}

.brand-preview-img {
    display: block;
    width: auto;
    height: 300px;
    margin: 0 auto;
    object-fit: contain;
}

.brand-footer {
    padding: 12px 24px 20px;
    display: flex;
    justify-content: center;
}

.brand-btn-go {
    height: 42px;
    padding: 0 56px;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    background: #266fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.brand-btn-go:hover {
    opacity: 0.9;
}

/* ========== 导航链接样式选择弹窗 ========== */
.navstyle-picker-modal {
    background: #fff;
    border-radius: 20px;
    width: 1060px;
    height: 717px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

/* 标签栏 */
.navstyle-tabs {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 4px 28px 0;
    border-bottom: 1px solid #f0f0f0;
}

.navstyle-tab {
    position: relative;
    padding: 14px 2px;
    font-size: 15px;
    color: #666;
    cursor: pointer;
    white-space: nowrap;
}

.navstyle-tab:hover {
    color: #333;
}

.navstyle-tab.active {
    color: #266fff;
    font-weight: 600;
}

.navstyle-tab.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: #266fff;
    border-radius: 3px 3px 0 0;
}

/* 内容区 */
.navstyle-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 28px 20px;
    background: #f4f4f4;
}

.navstyle-body::-webkit-scrollbar {
    width: 6px;
}

.navstyle-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.navstyle-body::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.navstyle-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 样式卡片网格 */
.navstyle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.navstyle-card {
    min-width: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    background: #fff;
}

.navstyle-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    background: #ebf2ff;
}

.navstyle-card-inner {
    height: 100%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px;
}

.navstyle-card-inner.imgtext {
    min-height: 200px;
}

/* 按钮预览 */
.navstyle-btn-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    box-sizing: border-box;
    font-size: 14px;
    border-radius: 22px;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

.navstyle-btn-fill {
    background: #266fff;
    color: #fff;
    padding: 0 30px;
    border: none;
    width: 120px;
}

.navstyle-btn-outline {
    background: transparent;
    color: #266fff;
    padding: 0 29px;
    border: 1.5px solid #266fff;
    width: 120px;
}

.navstyle-btn-lg {
    width: 100%;
    border-radius: 25px;
    padding: 0 40px;
}

.navstyle-btn-md {
    width: 100%;
    max-width: 180px;
    border-radius: 23px;
    padding: 0 26px;
}

.navstyle-btn-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.navstyle-btn-block {
    width: 100%;
    max-width: none;
}

/* 分区标题 */
.navstyle-section {
    margin-bottom: 8px;
}

.navstyle-section-label {
    padding: 16px 0;
    font-size: 13px;
    color: #999;
}

.navstyle-grid-empty {
    text-align: center;
    color: #ccc;
    padding: 40px 0;
    font-size: 14px;
}

/* ===== 列表预览模拟 ===== */
.navstyle-list-mock {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    background: #fff;
}

/* 列表项通用 */
.ns-list-item {
    border: 1px solid transparent;
    padding: 12px 14px;
    font-size: 14px;
    color: #333;
    user-select: none;
    transition: border-color .15s;
}

.block-nav-render .ns-list-item:hover {
    border: 1px dashed #266fff;
}

.block-nav-render .ns-grid-item:hover {
    border-color: #266fff;
    border-style: dashed;
}

/* 图文样式 item hover 虚线（与列表/宫格一致，默认透明边框防抖动） */
.block-nav-render .ns-it-col:hover,
.block-nav-render .ns-imgtext-sq-center-2 .ns-it-overlay-wrap:hover,
.block-nav-render .ns-imgtext-overlay-2 .ns-it-overlay-wrap:hover,
.block-nav-render .ns-imgtext-article-wrap:hover,
.block-nav-render .ns-it-mix-left:hover,
.block-nav-render .ns-it-mix-top:hover,
.block-nav-render .ns-it-mix-bottom-item:hover {
    border-color: #266fff;
    border-style: dashed;
}

/* item 之间的分割线（第5个产品左图除外） */
.ns-list-text:not(:last-child),
.ns-list-img-row:not(:last-child),
.ns-list-card-row:not(:last-child),
.ns-list-faq-row:not(:last-child),
.ns-list-prod-right:not(:last-child) {
    border-bottom: 1px solid #eee;
}

/* 列表1：纯文本导航 */
.ns-list-text {
    display: flex;
    align-items: center;
}

.ns-list-text .ns-list-text-label {
    flex: 1;
    min-width: 0;
    margin-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 列表2：左图右文+箭头 */
.ns-list-img-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ns-list-thumb {
    width: 44px;
    height: 32px;
    border-radius: 4px;
    background: linear-gradient(135deg, #e0e7ef, #c5d4e3);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.ns-list-thumb-r {
    width: 72px;
    height: 54px;
}

.ns-list-info {
    flex: 1;
    min-width: 0;
}

.ns-list-title {
    font-size: 14px;
    color: #333;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ns-list-desc {
    font-size: 12px;
    color: #aaa;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 列表3：卡片式 */
.ns-list-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ns-list-view-btn {
    font-size: 14px;
    color: #266fff;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 4px;
    padding: 4px 10px;
    background: #f2f2f2;
}

/* 列表4：FAQ/常见问题 */
.ns-faq-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #266fff;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ns-faq-label {
    font-size: 14px;
    font-weight: 600;
    color: #266fff;
}

.ns-list-faq-row {
    font-size: 14px;
    color: #333;
}

/* 列表5：产品列表左图 */
.ns-prod-header {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.ns-list-prod-row {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    gap: 10px;
}

.ns-prod-name {
    flex: 1;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ns-prod-footer {
    padding: 10px 0;
    border-top: 1px solid #eee;
    text-align: center;
    font-size: 14px;
    color: #266fff;
}

/* 列表6：产品列表右图 */
.ns-list-prod-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* ===== 宫格样式 ===== */
.ns-grid-mock {
    width: 100%;
    display: grid;
    border-radius: 8px;
    background: #fff;
    gap: 16px;
    padding: 12px;
}

.ns-grid-2col {
    grid-template-columns: repeat(2, 1fr);
}

.ns-grid-2col .ns-grid-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
}

.ns-grid-3col {
    grid-template-columns: repeat(3, 1fr);
}

.ns-grid-4col {
    grid-template-columns: repeat(4, 1fr);
}

.ns-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 11px;
    color: #333;
    text-align: center;
    user-select: none;
    border: 1px solid transparent;
    transition: border-color .15s;
}

.ns-grid-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #e0e7ef, #c5d4e3);
    background-size: cover;
    background-position: center;
}

/* 宫格图标已统一使用图文渐变背景（.ns-grid-icon），彩色类 ns-gi-* 弃用 */

/* 编辑区空状态提示：标题下方未添加内容时显示 */
.edit-empty-tip {
    text-align: center;
    color: #999;
    font-size: 14px;
    margin: 18px 0 6px;
    padding: 0 16px;
}
.edit-empty-tip-link {
    color: #266fff;
    text-decoration: none;
    cursor: pointer;
}
.edit-empty-tip-link:hover {
    text-decoration: underline;
}


/* ===== 导航：非卡片样式去掉最外层白底与圆角（内部元素圆角保留） ===== */
/* 仅作用于编辑区实际渲染，样式选择弹窗的预览缩略图不受影响 */
.block-nav-render .navstyle-list-mock,
.block-nav-render .ns-grid-mock {
    background: none;
    border-radius: 0;
}

/* ===== 导航：页面背景为深色时文字反白（卡片样式自带底色，不参与） ===== */
.block-nav-render.nav-dark .ns-list-item,
.block-nav-render.nav-dark .ns-list-text-label,
.block-nav-render.nav-dark .ns-list-title,
.block-nav-render.nav-dark .ns-list-faq-row,
.block-nav-render.nav-dark .ns-prod-header,
.block-nav-render.nav-dark .ns-prod-name,
.block-nav-render.nav-dark .ns-grid-item,
.block-nav-render.nav-dark .ns-it-col {
    color: #fff;
}

.block-nav-render.nav-dark .ns-list-desc,
.block-nav-render.nav-dark .ns-it-title,
.block-nav-render.nav-dark .ns-it-desc {
    color: #bbb;
}

.block-nav-render.nav-dark .ns-list-text:not(:last-child),
.block-nav-render.nav-dark .ns-list-img-row:not(:last-child),
.block-nav-render.nav-dark .ns-list-card-row:not(:last-child),
.block-nav-render.nav-dark .ns-list-faq-row:not(:last-child),
.block-nav-render.nav-dark .ns-list-prod-right:not(:last-child) {
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

.block-nav-render.nav-dark .ns-prod-footer {
    border-top-color: rgba(255, 255, 255, 0.18);
}

/* hover 虚线框优先级需高于上面的深色分割线，否则底边被覆盖 */
.block-nav-render.nav-dark .ns-list-item:hover {
    border: 1px dashed #266fff;
}

/* 卡片1/卡片2 改为透明白底后，需随页面背景深浅自适应文案颜色 */
.block-nav-render.nav-dark .ns-card-fill .ns-card-title,
.block-nav-render.nav-dark .ns-card-outline-thumb .ns-card-title {
    color: #fff;
}
.block-nav-render.nav-dark .ns-card-fill .ns-card-desc,
.block-nav-render.nav-dark .ns-card-outline-thumb .ns-card-desc {
    color: #bbb;
}

/* ===== 卡片样式 ===== */
.ns-card-mock {
    width: 100%;
    display: flex;
    align-items: center;
    border-radius: 6px;
    background: #fff;
}

/* 卡片1：白底+边框+实心按钮 */
.ns-card-fill {
    justify-content: space-between;
    padding: 16px 14px;
    border: 1px solid #e8e8e8;
}

.ns-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.ns-card-btn {
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 4px;
    padding: 2px 10px;
    cursor: default;
}

.ns-cb-fill {
    background: #266fff;
    color: #fff;
}

.ns-cb-outline {
    background: transparent;
    color: #266fff;
    border: 1px solid #266fff;
}

/* 卡片2：白底+缩略图+描边按钮 */
.ns-card-outline-thumb {
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e8e8e8;
}

.ns-card-thumb {
    width: 48px;
    height: 34px;
    border-radius: 4px;
    background: linear-gradient(135deg, #e0e7ef, #c5d4e3);
    flex-shrink: 0;
}

.ns-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.ns-card-desc {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 卡片3：蓝底+箭头 */
.ns-card-solid-arrow {
    gap: 10px;
    padding: 20px 16px;
    background: #266fff;
}

.ns-card-solid-arrow .ns-card-title,
.ns-card-solid-arrow .ns-card-desc {
    color: #fff;
}

/* ========== 导航弹窗：图文样式预览 ========== */
/* 竖向图片：固定高度，配合 .ns-it-col 使用 */
.ns-it-v {
    aspect-ratio: 5 / 6;
}

/* 图文1：2竖图+标题（每行2个，超出换行） */
.ns-imgtext-v2 {
    flex-wrap: wrap;
}
.ns-imgtext-v2 .ns-it-col {
    flex: 0 0 calc(50% - 5px);
}

/* 图文2：3竖图+标题（每行3个，超出换行） */
.ns-imgtext-v3 {
    flex-wrap: wrap;
}
.ns-imgtext-v3 .ns-it-col {
    flex: 0 0 calc(33.333% - 6.67px);
}

/* 图文5：2正方图+标题居中图内（每行2个，超出换行） */
.ns-imgtext-sq-center-2 {
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    background: none;
    border: 0;
}

.ns-imgtext-sq-center-2 .ns-it-overlay-wrap {
    flex: 0 0 calc(50% - 5px);
    position: relative;
    border-radius: 6px;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition: border-color .15s;
}

.ns-imgtext-sq-center-2 .ns-it-overlay-text {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
}

/* ===== 图文样式 ===== */
.ns-imgtext-mock {
    width: 100%;
    display: flex;
    gap: 10px;
}

.ns-it-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #333;
    user-select: none;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition: border-color .15s;
}

/* 图文1：双大图横排 */
.ns-imgtext-large-2 {
    padding: 10px 14px;
}

.ns-imgtext-large-2 .ns-it-col {
    flex: 1;
    min-width: 0;
}

.ns-it-img {
    width: 100%;
    background: linear-gradient(135deg, #e0e7ef, #c5d4e3);
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.ns-it-label {
    position: absolute;
    left: 6px;
    bottom: 4px;
    font-size: 14px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    line-height: 1;
}

.ns-it-lg {
    height: 80px;
}

.ns-it-sq {
    aspect-ratio: 1;
}

.ns-it-wide {
    height: 70px;
}

.ns-it-half {
    height: 85px;
}

.ns-it-full {
    width: 100%;
}

/* 图文3：三张正方图横排（每行3个，超出换行） */
.ns-imgtext-square-3 {
    flex-wrap: wrap;
}
.ns-imgtext-square-3 .ns-it-col {
    flex: 0 0 calc(33.333% - 6.67px);
}

/* 图文3：图标+文字三列 */
.ns-imgtext-icon-3 {
    gap: 16px;
    padding: 16px 20px;
    justify-content: center;
}

.ns-it-icon {
    width: 52px;
    height: 38px;
    border-radius: 8px;
    flex-shrink: 0;
}

.ns-iti-white {
    background: linear-gradient(135deg, #f0f0f0, #ddd);
}

.ns-iti-gray {
    background: linear-gradient(135deg, #eaeaea, #ccc);
}

.ns-iti-round {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eee, #ccc);
}

/* 图文4：单图+标题+描述 */
.ns-imgtext-article {
    flex: 1;
    height: 100%;
    flex-direction: column;
    gap: 8px;
}

.ns-it-earth {
    flex: 1;
}

.ns-it-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ns-it-title {
    font-size: 12px;
    color: #999;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ns-it-desc {
    font-size: 12px;
    color: #999;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 图文5：两张图带文字遮罩 */
.ns-imgtext-overlay-2 {
    gap: 10px;
    padding: 10px;
}

.ns-imgtext-overlay-2 .ns-it-overlay-wrap {
    flex: 1;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition: border-color .15s;
}

.ns-it-overlay-text {
    position: absolute;
    bottom: 8px;
    left: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* 图文6：瀑布流多图 */
.ns-imgtext-masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: max-content;
    gap: 6px;
    padding: 8px;
}

.ns-it-ms-item {
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.ns-it-ms-tall {
    grid-row: span 2;
}

.ns-it-room {
    height: 100%;
    background: linear-gradient(160deg, #d4cdb8, #b8ad96);
    min-height: 100px;
}

.ns-it-yellow {
    background: linear-gradient(150deg, #e8d86a, #c9b84a);
    height: 48px;
}

.ns-it-piano {
    background: linear-gradient(155deg, #f0e8c8, #dcc898);
    height: 48px;
}

.ns-it-green2 {
    background: linear-gradient(165deg, #7db85a, #5a9938);
    min-height: 100px;
}

.ns-it-still {
    background: linear-gradient(145deg, #a8c088, #88a868);
    height: 56px;
    position: relative;
}

.ns-it-ms-label {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.25);
    padding: 1px 5px;
    border-radius: 3px;
}

.ns-it-ms-caption {
    grid-column: 1 / -1;
    font-size: 11px;
    color: #266fff;
    margin-top: 2px;
}

/* 图文6：左1正方+右3(上横下2竖) */
.ns-imgtext-mix > .ns-it-img.ns-it-sq {
    flex: 1;
    aspect-ratio: 270 / 245;
}

.ns-it-mix-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ns-it-mix-bottom {
    flex: 1;
    display: flex;
    gap: 6px;
}

.ns-it-mix-bottom>.ns-it-img {
    flex: 1;
    min-width: 0;
}

.ns-imgtext-mix {
    gap: 6px;
}

.block-nav-render {
    margin: 16px;
}

/* 按钮样式不需要外边距要内边距 */
.block-nav-render:has(.nav-render-btn-group) {
    margin: 0;
    padding: 16px;
}

.nav-render-btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

/* 编辑区：除 sm 外按钮撑满（sm 固定 120px 由基础样式保持） */
.block-nav-render .nav-btn-wrap:has(.navstyle-btn-md),
.block-nav-render .nav-btn-wrap:has(.navstyle-btn-lg),
.block-nav-render .nav-btn-wrap:has(.navstyle-btn-block) {
    flex: 1 1 0;
    min-width: 0;
}

.block-nav-render .nav-btn-wrap:has(.navstyle-btn-md) .navstyle-btn-preview,
.block-nav-render .nav-btn-wrap:has(.navstyle-btn-lg) .navstyle-btn-preview,
.block-nav-render .nav-btn-wrap:has(.navstyle-btn-block) .navstyle-btn-preview {
    width: 100%;
    max-width: none;
}

.block-nav-render .navstyle-list-mock {
    border: none;
    padding: 0;
}

.block-nav-render .ns-grid-mock {
    padding: 0;
}

.block-nav-render .ns-card-mock {
    margin: 0;
    display: block;
}

/* 编辑区卡片项：对齐左侧卡片样式（取消 ns-card-mock 容器级 padding/border/背景，
   改由每一项 .nav-card-wrap 承担，避免中间多一层包裹导致内部 flex 失效） */
.block-nav-render .ns-card-fill,
.block-nav-render .ns-card-outline-thumb,
.block-nav-render .ns-card-solid-arrow {
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
}

.block-nav-render .nav-card-wrap {
    display: flex;
    align-items: center;
}

.block-nav-render .ns-card-fill > .nav-card-wrap {
    justify-content: space-between;
    padding: 16px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #e8e8e8;
    border-radius: 8px;
}

.block-nav-render .ns-card-outline-thumb > .nav-card-wrap {
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #e8e8e8;
    border-radius: 8px;
}

.block-nav-render .ns-card-solid-arrow > .nav-card-wrap {
    gap: 10px;
    padding: 20px 16px;
    background: #266fff;
    border-radius: 8px;
}

.block-nav-render .ns-card-solid-arrow > .nav-card-wrap .ns-card-title,
.block-nav-render .ns-card-solid-arrow > .nav-card-wrap .ns-card-desc {
    color: #fff;
}

/* ========== 清空内容确认弹窗 ========== */
.confirm-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.confirm-dialog-box {
    background: #fff;
    border-radius: 12px;
    width: 380px;
    padding: 28px 24px 20px;
    position: relative;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.confirm-dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.15s;
}

.confirm-dialog-close:hover {
    background: #f5f5f5;
}

.confirm-dialog-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.confirm-dialog-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #faad14;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.confirm-dialog-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.confirm-dialog-body {
    font-size: 14px;
    color: #555;
    padding-left: 38px;
    margin-bottom: 24px;
}

.confirm-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.confirm-dialog-btn {
    height: 36px;
    padding: 0 24px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
}

.confirm-dialog-btn-cancel {
    background: #fff;
    border: 1px solid #266fff;
    color: #266fff;
}

.confirm-dialog-btn-cancel:hover {
    background: #f5f9ff;
}

.confirm-dialog-btn-confirm {
    background: #266fff;
    color: #fff;
}

.confirm-dialog-btn-confirm:hover {
    background: #1a5fe8;
}

/* ===== 富文本格式工具栏浮层 ===== */
.text-format-toolbar {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: auto;
    user-select: none;
    transition: .3s;
}

.tf-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

.tf-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
    padding: 0;
}

.tf-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    pointer-events: none;
}

.tf-btn:hover {
    background: #f0f2f5;
}

.tf-btn.active {
    background: #e8f0fe;
    color: #266fff;
}

.tf-divider {
    width: 1px;
    height: 20px;
    background: #e5e5e5;
    margin: 0 4px;
    flex-shrink: 0;
}

.tf-fontsize {
    height: 34px;
    padding: 0 8px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    font-size: 13px;
    color: #444;
    background: #fff;
    cursor: pointer;
    outline: none;
    min-width: 66px;
}

.tf-fontsize:hover {
    border-color: #266fff;
}

.tf-color-wrap {
    position: relative;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.tf-color-btn {
    width: 34px;
    height: 34px;
    position: relative;
    flex-direction: column;
    gap: 0;
}

.tf-color-bar {
    display: block;
    width: 16px;
    height: 3px;
    border-radius: 1px;
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.tf-color-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

/* ===== 导航链接可编辑区域 ===== */

/* 导航可编辑元素样式 */
.block-nav-render .navstyle-btn-preview {
    pointer-events: auto;
    display: inline-block;
    text-align: center;
    line-height: 32px;
}

.block-nav-render [contenteditable="true"] {
    user-select: text;
    cursor: text;
}

/* 编辑区图文：可编辑项容器定位，供工具条 absolute 定位 */
.block-nav-render .nav-item-wrap {
    position: relative;
}

/* 编辑区图文图片：补齐高度来源 */
/* 让图片在列内撑满宽度（align-self:stretch 不影响文字居中），
   aspect-ratio 才能基于宽度算出高度；min-height 作兜底 */
.block-nav-render .ns-it-img {
    align-self: stretch;
}

/* 图文1-3 列列表 */
.block-nav-render .ns-imgtext-v2 .ns-it-img,
.block-nav-render .ns-imgtext-v3 .ns-it-img,
.block-nav-render .ns-imgtext-square-3 .ns-it-img {
    aspect-ratio: 1;
    min-height: 80px;
}

.block-nav-render .ns-imgtext-v3 .ns-it-img {
    aspect-ratio: 5 / 6;
}

/* 图文4 article：单图+标题描述，图片撑满容器 */
.block-nav-render .ns-imgtext-article-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 6px;
    transition: border-color .15s;
}

.block-nav-render .ns-imgtext-article-wrap > .ns-it-img {
    flex: 1;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
}

/* 图文5 sq-center-2：遮罩文字居中，overlay-wrap 自身撑出正方形 */
.block-nav-render .ns-imgtext-sq-center-2 .ns-it-overlay-wrap {
    aspect-ratio: 1;
}

/* 图文6 mix：编辑区专用拼图布局 */
.block-nav-render .ns-imgtext-mix-edit {
    display: flex;
    flex: 1;
    gap: 6px;
    aspect-ratio: 1.9;
}

.block-nav-render .ns-imgtext-mix-edit .ns-it-mix-left,
.block-nav-render .ns-imgtext-mix-edit .ns-it-mix-right {
    flex: 1;
    min-width: 0;
}

.block-nav-render .ns-imgtext-mix-edit .ns-it-mix-left,
.block-nav-render .ns-imgtext-mix-edit .ns-it-mix-right > .nav-item-wrap,
.block-nav-render .ns-imgtext-mix-edit .ns-it-mix-bottom > .nav-item-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.block-nav-render .ns-imgtext-mix-edit .ns-it-mix-left > .ns-it-img,
.block-nav-render .ns-imgtext-mix-edit .ns-it-mix-right > .nav-item-wrap > .ns-it-img,
.block-nav-render .ns-imgtext-mix-edit .ns-it-mix-bottom > .nav-item-wrap > .ns-it-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* 编辑区工具条 hover：.nav-item-wrap 已在 796 行统一处理 */

.block-nav-render .ns-list-thumb,
.block-nav-render .ns-card-thumb,
.block-nav-render .ns-grid-icon,
.block-nav-render .ns-it-img {
    cursor: pointer;
    position: relative;
}

.block-nav-render .ns-list-thumb:hover::after,
.block-nav-render .ns-card-thumb:hover::after,
.block-nav-render .ns-grid-icon:hover::after,
.block-nav-render .ns-it-img:hover::after {
    content: "\66F4\6362";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 12px;
    pointer-events: none;
}

/* 宫格自定义图标：通过 background-image 展示（与 ns-it-img 一致） */

/* ========== 状态块样式 ========== */
.block-status-content {
    padding: 0;
    margin: 16px;
}

/* 通用卡片元素 */
.status-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.status-card-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    line-height: 1.5;
}

.status-card-time {
    font-size: 12px;
    color: #999;
}

/* 列表样式：一行一个 */
.status-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.status-list-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: rgba(54, 54, 54, 0.1) 0px 1px 13px 0px;
    user-select: none;
}

.status-list-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 双列样式：一行两个 */
.status-grid-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.status-grid-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    background: #fff;
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: rgba(54, 54, 54, 0.1) 0px 1px 13px 0px;
    user-select: none;
}

/* 按钮卡片：一行一个带更新按钮 */
.status-card-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.status-btn-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: rgba(54, 54, 54, 0.1) 0px 1px 13px 0px;
    user-select: none;
}

.status-btn-card-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-update-btn {
    flex-shrink: 0;
    padding: 6px 16px;
    border: none;
    border-radius: 6px;
    background: #f0f5ff;
    color: #266fff;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}

.status-update-btn:hover {
    background: #dce8ff;
}