:root {
    --primary-color: #171717;
    --primary-hover: #36393e;
    --secondary-color: #718096;
    --brand-beak: #e5332a;
    --brand-amber: #f6c748;
    --brand-moss: #2f6f58;
    --success-color: #80c808;
    --warning-color: #D69E2E;
    --danger-color: #f34242;
    --light-bg: #f5f6fa;
    --card-bg: #FFFFFF;
    --sidebar-bg: #f9fafb;
    --border-color: #E2E8F0;
    --text-primary: #171717;
    --text-secondary: #4A5568;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
}

textarea {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

textarea::placeholder {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    Font-weight: normal;
    color: rgba(0,0,0,0.25);
}

button i {
    font-size: 20px;
}

button:focus,
button:focus-visible {
    Outline: none;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: #191c29;
    color: var(--text-primary);
    /* line-height: 1.6; */
}

.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    /* background-color: #000; */
}

/* 把视窗和滑杆打包的容器 */
.canvas-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    /* border: 1px solid var(--border-color); */
    border-radius: 6px;
    /* background-color: #f8f9fa; */
}

/* 左侧栏样式 */
.left-sidebar {
    width: 350px;
    /* background-color: var(--sidebar-bg); */
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    overflow-y: auto;
    /* border-right: 1px solid var(--border-color); */
}

/* 中间区域样式 */
.main-content {
    flex: 1;
    /* background-color: #edf2f7; */
    padding: 16px 16px 16px 0px;
    overflow: hidden;
}

.right-sidebar {
    position: relative;
    width: 360px;
    overflow-y: hidden;  /* 改为hidden，让内部处理滚动 */
    display: flex;
    flex-direction: column;
    height: 100vh;  /* 确保高度是完整的视口高度 */
}

/* 卡片通用样式 */
.card {
    background-color: var(--card-bg);
    border-radius: 20px;
    padding: 16px;
    /* box-shadow: var(--shadow-sm); */
    /* border: 1px solid var(--border-color); */
}

.card h3 {
    color: var(--text-primary);
    /* margin-bottom: 16px; */
    Height: 24px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card h3 i {
    color: var(--primary-color);
}

/* 上传模块样式 */
.upload-module {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 开始按钮 */
.start-btn {
    width: 200px;
    height: 40px;
}

.upload-area {
    width: 290px;
    height: 390px;
    border: 2px dashed var(--border-color);
    border-radius: 24px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.upload-area:hover {
    border-color: var(--primary-color);
    background-color: rgba(43, 108, 176, 0.05);
    transform: translateY(-2px);
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.upload-placeholder i {
    font-size: 32px;
    color: var(--secondary-color);
}

.upload-placeholder p {
    font-weight: 600;
    color: var(--text-primary);
}

.upload-hint {
    font-size: 12px;
    color: var(--text-secondary);
}

.preview-container {
    display: none;
    width: 100%;
    margin-top: 12px;
}

.preview-container.active {
    display: block;
}

.preview-image {
    position: relative;
    display: inline-flex;        /* 改为 inline-flex，宽度自适应内容 */
    justify-content: center;
    align-items: center;
    max-height: 150px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #f5f5f5;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);  /* 投影在容器上 */
}

.preview-image img {
    max-height: 150px;           /* 限制最大高度 */
    width: auto;                 /* 宽度自适应 */
    height: auto;                /* 高度自适应 */
    display: block;
    border-radius: 8px;          /* 图片圆角 */
}

.image-info {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.image-info .filename {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 操作控制模块样式 */
.control-module {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 叠加透明度控制组 */
.control-group {
    position: absolute;
    bottom: 18px;
    left: 80px;
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.opacity-control {
    /* display: none; */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    display: flex;
}

.opacity-control.active {
    /* display: flex; */
    visibility: visible;
    opacity: 1;
}

.control-group label {
    font-weight: 400;
    font-size: 14px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.mode-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mode-btn {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    background: white;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.mode-btn:hover {
    border-color: var(--primary-color);
    background-color: rgba(43, 108, 176, 0.05);
}

.mode-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* 叠加值滑块样式 - 完整版 */
#opacity-slider {
  flex: 1;
  width: 100px;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-color);
  border-radius: 3px;
  outline: none;
}

/* WebKit 浏览器 (Chrome, Safari, Edge) - 滑块轨道 */
#opacity-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
}

/* WebKit 浏览器 - 滑块按钮 */
#opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  margin-top: -7px; /* 垂直居中 */
}

#opacity-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: var(--primary-hover);
}

/* Firefox 浏览器 - 滑块轨道 */
#opacity-slider::-moz-range-track {
  width: 100%;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
}

/* Firefox 浏览器 - 滑块按钮 */
#opacity-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

#opacity-slider::-moz-range-thumb:hover {
  transform: scale(1.15);
  background: var(--primary-hover);
}

/* Firefox 浏览器 - 进度条填充（可选） */
#opacity-slider::-moz-range-progress {
  background: var(--primary-color);
  height: 6px;
  border-radius: 3px;
}

/* 移除聚焦时的默认轮廓 */
#opacity-slider:focus {
  outline: none;
}

#opacity-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.3);
}

/* 滑块容器样式优化 */
.slider-container {
  display: flex;
  align-items: center;
  gap: 12px;
  height:40px;
}

#opacity-value {
  min-width: 45px;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  padding: 4px 0px;
}

.width-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.width-btn {
    /* padding: 8px; */
    height: 40px;
    border: 1px solid var(--border-color);
    background: white;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.width-btn:hover {
    border-color: var(--primary-color);
}

.width-btn.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.custom-width {
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-width input {
    flex: 1;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
}

.custom-width input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.unit {
    font-size: 14px;
    color: var(--text-secondary);
}

/* 按钮样式 */
.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.btn-primary, .btn-secondary, .btn-danger {
    padding: 0px 12px;
    height: 44px;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.btn-primary {
    background-color: #a0ed1e;
    color: #171717;
    height: 44px;
}

.btn-primary:hover:not(:disabled) {
    background-color: #8eda0d;
    transform: scale(1.05);
    color: #171717;
}

.btn-primary:disabled {
    background-color: var(--border-color);
    cursor: not-allowed;
    opacity: 0.4;
}

.btn-secondary {
    background-color: var(--primary-color);
    color: #FFF;
}

.btn-secondary:disabled {
    background-color: var(--border-color);
    cursor: not-allowed;
    color: #171717;
    opacity: 0.4;
}

.btn-secondary:hover:not(:disabled) {
    transform: scale(1.05);
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

.btn-danger:disabled {
    background-color: var(--danger-color);
    color: white;
    cursor: not-allowed;
    opacity: 0.4;
}

.btn-danger:hover:not(:disabled) {
    background-color: #e53f3f;
    transform: scale(1.05);
}

/* 视检区域样式 */
.inspection-area {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0px 0px;
}

.inspection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.inspection-info {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: var(--text-secondary);
}

.inspection-view {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 24px;
}

.empty-upload-row {
    display: flex;
    flex-direction: row;
    gap: 24px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.comparison-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;  /* 👈 添加这行，让内部绝对定位元素相对它定位 */
}

/* 标注绘制状态时，滑杆完全穿透（包括内部图标） */
.comparison-container.annotating.drawing .slider-handle,
.comparison-container.annotating.drawing .slider-handle::after,
.comparison-container.annotating.drawing .slider-handle .slider-handle-bg {
    pointer-events: none;
}

/* 新增：禁用滑竿的 hover 效果 */
.comparison-container.annotating.drawing .slider-handle:hover {
    width: 2px;  /* 保持原始宽度，不变宽 */
    background-color: var(--primary-color);  /* 保持原始颜色 */
}

.comparison-container.annotating.drawing .slider-handle:hover .slider-handle-bg {
    background-color: var(--primary-color);  /* 保持原始颜色 */
    transform: none;  /* 取消 hover 时的缩放 */
}

.canvas-wrapper {
    flex: 1;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;  /* 改为auto，允许滚动 */
    /* border: 1px solid var(--border-color); */
    border-radius: 6px;
    /* background-color: #f8f9fa; */
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    /* 移除display: block; 如果存在的话 */
}

#design-canvas, #dev-canvas {
    pointer-events: none;
}

#design-canvas {
    z-index: 1;
}

#dev-canvas {
    z-index: 2; /* 滑杆模式时在上层 */
}

#annotation-canvas {
    z-index: 3; /* 问题标注画布 */
    pointer-events: auto;
    cursor: crosshair;
}

#plugin-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 4; /* 插件标注画布 */
            pointer-events: none;
}

.slider-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background-color: var(--primary-color);
    cursor: ew-resize;
    transform: translateX(-50%);
    z-index: 10;
    transition: width 0.2s ease;  /* 添加过渡 */
    /* 扩大热区的伪元素 */
    --hit-area-width: 32px;  /* 自定义属性，方便调整 */
}

/* 透明热区层 */
.slider-handle::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% - var(--hit-area-width) / 2);
    width: var(--hit-area-width);
    height: 100%;
    background: transparent;
    pointer-events: auto;    /* 接收鼠标事件 */
    z-index: 5;              /* 在 handle 之下，在 bg 之上 */
}

.slider-handle:hover {
    width: 4px;
    background-color: var(--primary-hover);
}

/* 关键：父级 hover 时改变 bg */
.slider-handle:hover .slider-handle-bg {
    background-color: #346fe6;
}

.slider-handle-bg {
    position: absolute;
    width: 32px;
    height: 32px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: all 0.2s ease;  /* 添加过渡 */
}

.slider-handle-bg i {
    color: white;
    font-size: 20px;
    /* 移除 position: absolute 和 transform，用 flex 居中 */
}

.zoom-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 16px;
    /* justify-content: flex-end; */
}

.zoom-controls button {
    /* padding: 6px 12px; */
    color: #000000;  /* zoom操控区图标颜色控制 */
    width: 40px;
    height: 40px;
    border: 1px solid #eef2f5;
    background: #eef2f5;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.zoom-controls button:hover {
    background-color: var(--light-bg);
    border-color: var(--primary-color);
}

#zoom-level {
    width: 60px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    padding: 0 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#zoom-level:hover {
    background-color: #eff2f5;
}

/* 标注模块样式 */
.annotation-module {
    display: flex;
    flex-direction: column;
    min-height: 0;  /* 重要：允许flex子项缩小 */
    overflow: hidden;  /* 防止溢出 */
}

.annotation-header {
    align-items: center; /* 确保这是center */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-shrink: 0; /* 防止被压缩 */
}

.toggle-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    /* width: 120px; */
    height: 44px;
    border: none;
    box-shadow: 0 8px 40px rgba(18, 20, 29, 0.1);
    border-radius: 14px;
    padding: 0 10px;
    transition: all 0.2s ease;
}

.toggle-switch:hover {
    transform: scale(1.05);
}

.auto-mark-btn {
    height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 14px;
    background: #171717;
    color: #ffffff;
    box-shadow: 0 8px 40px rgba(18, 20, 29, 0.1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.auto-mark-btn i {
    font-size: 18px;
}

.auto-mark-btn:hover:not(:disabled) {
    transform: scale(1.05);
    background: #36393e;
}

.auto-mark-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    background: var(--border-color);
    color: #171717;
}

.auto-mark-btn.is-running {
    pointer-events: none;
}

.h5-compare-btn {
    background: #ffffff;
    color: var(--text-primary);
}

.h5-compare-btn:hover:not(:disabled) {
    background: #f1f3f5;
}

.member-btn {
    height: 44px;
    padding: 0 10px 0 12px;
    border: none;
    border-radius: 14px;
    background: #171717;
    color: #ffffff;
    box-shadow: 0 10px 34px rgba(20, 17, 15, 0.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

.member-btn:hover {
    transform: translateY(-1px);
}

.member-btn.is-pro {
    background: var(--brand-moss);
}

.member-btn i {
    font-size: 18px;
}

.member-badge {
    min-width: 34px;
    height: 24px;
    padding: 0 7px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-amber);
    color: #171717;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
}

.member-text {
    font-size: 14px;
    font-weight: 700;
}

.member-btn.is-pro .member-badge {
    background: #ffffff;
    color: var(--brand-moss);
}

body.is-free-user .mode-option[data-mode="overlay"]::after,
body.is-free-user .mode-option[data-mode="tile"]::after,
body.is-free-user .mode-option[data-mode="invert"]::after,
body.is-free-user .auto-mark-btn::after,
body.is-free-user .h5-compare-btn::after {
    content: "会员";
    margin-left: 2px;
    padding: 2px 5px;
    border-radius: 6px;
    background: rgba(23, 23, 23, 0.08);
    color: #4a5568;
    font-size: 10px;
    font-weight: 700;
}

.commerce-modal-content {
    width: min(520px, calc(100vw - 32px));
}

#purchase-modal .commerce-modal-content {
    width: min(760px, calc(100vw - 32px));
}

.commerce-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.commerce-modal-header h3 {
    margin-bottom: 6px;
}

.commerce-modal-header p,
.commerce-tip {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.commerce-panel {
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #f9fafb;
    margin-bottom: 12px;
}

.commerce-panel .setting-field {
    margin-bottom: 12px;
}

.commerce-wide-btn {
    width: 100%;
    height: 42px;
    justify-content: center;
}

.commerce-link-btn {
    width: 100%;
    margin-top: 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 13px;
    text-align: center;
}

.commerce-link-btn:hover {
    color: var(--text-primary);
}

.commerce-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 14px;
}

.account-row span {
    color: var(--text-secondary);
}

.purchase-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.purchase-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    background: #ffffff;
    min-height: 142px;
    cursor: pointer;
    outline: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.purchase-card.pro {
    border-color: #171717;
    box-shadow: inset 0 0 0 1px #171717;
}

.purchase-card:hover,
.purchase-card:focus-visible {
    transform: translateY(-2px);
    border-color: #171717;
    box-shadow: 0 14px 32px rgba(18, 20, 29, 0.12);
}

.purchase-card.is-selected {
    border-color: #171717;
    background: linear-gradient(180deg, #ffffff, #f8fbfa);
    box-shadow: inset 0 0 0 2px #171717, 0 18px 34px rgba(18, 20, 29, 0.12);
}

.purchase-card.is-selected .plan-kicker {
    background: #171717;
    color: #ffffff;
}

.purchase-card h4 {
    margin: 6px 0 6px;
    font-size: 15px;
}

.purchase-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 20px;
    line-height: 1;
}

.purchase-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.plan-kicker {
    display: inline-flex;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eff4f2;
    color: #2f6f58;
    font-size: 11px;
    font-weight: 800;
}

.payment-box {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border-radius: 14px;
    background: #171717;
    color: #ffffff;
    margin-bottom: 12px;
}

.purchase-request-box {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
    padding: 16px;
    border: 1px solid #dfe6ee;
    border-radius: 14px;
    background: #ffffff;
}

.payment-copy span,
.payment-copy small {
    display: block;
    color: rgba(255, 255, 255, 0.72);
}

.payment-copy span {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 800;
}

.payment-copy strong {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
}

.payment-copy small {
    line-height: 1.6;
}

.payment-qr {
    width: 150px;
    height: 150px;
    border-radius: 12px;
    object-fit: cover;
    background: #ffffff;
    border: 6px solid #ffffff;
}

.service-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    background: #f1f3f5;
    margin-bottom: 12px;
}

.qr-service-box {
    align-items: stretch;
}

.service-qr {
    width: 108px;
    height: 108px;
    border-radius: 12px;
    object-fit: cover;
    background: #ffffff;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.service-contact {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.service-box span {
    display: block;
    color: var(--text-secondary);
    font-size: 12px;
    margin-bottom: 4px;
}

.service-box strong {
    font-size: 16px;
    word-break: break-all;
}

.service-box small {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
}

.auto-settings-content {
    width: min(520px, calc(100vw - 32px));
}

.auto-settings-grid,
.h5-input-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.setting-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: left;
}

.setting-field input,
.setting-field select {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: #f6f7fa;
    color: var(--text-primary);
    padding: 0 12px;
    font-size: 14px;
    outline: none;
}

.auto-settings-grid .setting-field:first-child {
    grid-column: 1 / -1;
}

.setting-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    color: var(--text-primary);
    font-size: 14px;
    text-align: left;
}

.setting-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

.h5-compare-content {
    width: min(980px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
}

.h5-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.h5-preview-grid iframe {
    width: 100%;
    height: 360px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #ffffff;
}

.h5-compare-result {
    width: 100%;
    min-height: 150px;
    border: none;
    border-radius: 12px;
    background: #f6f7fa;
    color: var(--text-primary);
    padding: 12px;
    resize: vertical;
    outline: none;
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .auto-settings-grid,
    .h5-input-grid,
    .h5-preview-grid {
        grid-template-columns: 1fr;
    }

    .h5-preview-grid iframe {
        height: 280px;
    }
}

.toggle-switch input {
    display: none;
}

.toggle-label {
    font-size: 14px;
    color: var(--text-primary);
    vertical-align: middle; /* 添加这个 */
    line-height: 24px; /* 与滑块高度一致 */
    height: 24px; /* 与滑块高度一致 */
    display: inline-flex; /* 改为inline-flex */
    align-items: center; /* 垂直居中内容 */
}

.toggle-slider {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
    background-color: var(--border-color);
    border-radius: 34px;
    cursor: pointer;
    transition: background-color 0.2s;
    vertical-align: middle; /* 确保这个存在 */
}

.toggle-slider:before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle-switch input:checked + label .toggle-slider {
    background-color: var(--primary-color);
}

.toggle-switch input:checked + label .toggle-slider:before {
    transform: translateX(16px);
}

.annotation-hint {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    background-color: rgb(239 244 254);
    border-radius: 10px;
    margin-bottom: 16px;
    display: none;
}

.annotation-hint.active {
    display: flex;
}

.annotation-hint i {
    color: #346fe6;
    font-size: 18px;
}

.annotation-hint p {
    font-size: 14px;
    color: var(--text-secondary);
}


.empty-annotations {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    color: #FFF;
    gap: 12px;
    font-size: 14px;
}

.empty-annotations i {
    font-size: 40px;
    opacity: 1;
}

/* 标注项悬停样式 */
.annotation-item:hover {
    background-color: #3f4252;
}

/* 标注项悬停输入框样式 */
.annotation-item:hover textarea {
    /* color: var(--primary-color); */
}

/* 标注项激活样式 */
.annotation-item.active {
    border-color: #ff4444;
    background-color: rgba(255, 68, 68, 0.05);
}

/* 标注项激活输入框样式 */
.annotation-item.active textarea {
    /* color: var(--primary-color); */
}


/* 序号容器 - 确保菜单正确对齐 */
.annotation-number-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    overflow: visible;  /* 确保内容不被裁剪 */
}


/* 序号徽章样式 */
.badge {
    width: 20px;
    height: 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: bold;
    transition: all 0.2s ease;
    line-height: 1;
    flex-shrink: 0;
    margin: 4px; 
}

.badge:hover {
    transform: scale(1.1);
    z-index: 10;  /* 提高层级，避免被其他元素覆盖 */
}

/* 状态颜色类 */
.badge.pending {
    background-color: #ff4444;
}

.badge.keep {
    background-color: #f5a623;
}

.badge.fixed {
    background-color: #80c808;
}

/* 标注描述区域 */
.annotation-desc-container {
    flex: 1;
    min-width: 0; /* 防止flex溢出 */
}

.annotation-semantic-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    color: #ffffff;
}

.annotation-semantic-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.annotation-element {
    min-width: 0;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
    color: #ffffff;
}

.annotation-severity {
    flex-shrink: 0;
    min-width: 34px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.annotation-severity.high {
    color: #ffffff;
    background: #ef4444;
}

.annotation-severity.medium {
    color: #1f2937;
    background: #facc15;
}

.annotation-severity.low {
    color: #ffffff;
    background: #22c55e;
}

.annotation-type-line {
    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
}

.annotation-detail-line,
.annotation-color-line,
.annotation-region-line {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}

/* 删除按钮容器 */
.delete-annotation {
    background: none;
    width: 24px;
    height: 24px;
    border: none;
    color: var(--secondary-color);
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.delete-annotation i {
    Font-size: 16px;
}

/* 删除按钮悬停颜色 */
.delete-annotation:hover {
    color: #ff4444;
    background-color: rgba(255, 68, 68, 0.1);
}



/* 标注序号样式
.annotation-number {
    background-color: #ff4444;
    color: white;
    font-size: 12px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
*/

/* 标注输入框 */
.annotation-desc {
    width: 100%;
    padding: 4px 0px;
    outline: none;
    border: none;
    background-color: rgba(255,255,255,0.0);
    color: rgba(255,255,255,1);
    /* border-color: #f4f7fa; */
    border-radius: 10px;
    font-size: 14px;
    resize: none;  /* 👈 去掉右下角调整手柄 */
    overflow-y: hidden;  /* 👈 隐藏滚动条，允许自动扩展 */
    min-height: 60px;
}

/* 标注输入框文字样式 */
.annotation-desc textarea {
    color: rgba(255,255,255,1);
}

.annotation-desc::placeholder {
    color: rgba(255,255,255,0.2);
}

.annotation-desc:hover {
    /* border-color: var(--primary-color); */
    /* background-color: #eff3f7; */
    /* ransition: all 0.2s ease;  */
}

.annotation-desc:focus {
    outline: none;
    border: none;
}

/* 标注列表 */
.annotations-list {
    display: flex;
    min-height: 0;
    overflow-y: auto;
    gap: 16px;
    flex-direction: column;
    padding: 16px 16px 76px 16px;
}

/* 标注项整体样式 */
.annotation-item {
    background: #272b3c;
    /* border: 1px solid var(--border-color); */
    border-radius: 20px;
    padding: 16px;
    transition: all 0.3s ease;
    overflow: visible;
}

.annotation-header-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    overflow: visible;  /* 允许内容溢出，用于显示菜单 */
}

.annotation-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    margin-top: auto;  /* 推到flex容器底部 */
    flex-shrink: 0;    /* 防止被压缩 */
}

.annotation-btn-group {
    display: flex;
    gap: 12px;
}

.clear-all-annotation {
    z-index: 6;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
    backdrop-filter: blur(2px);
    /* margin-top: 16px;   推到flex容器底部 */
    flex-shrink: 0;    /* 防止被压缩 */
}

.clear-all-btn {
    Width: 44px;
}

/* 标注显示/隐藏切换按钮 */
.toggle-visibility {
    width: 40px;
    height: 40px;
    background-color: #eff2f5;
    border: 1px solid #eff2f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border 0.2s ease;
    flex-shrink: 0; /* 防止被压缩 */
}

.toggle-visibility:hover {
    background-color: #eff2f5;
    border: 1px solid #000;
}

.toggle-visibility i {
    color: var(--text-primary);
    font-size: 20px;
}

#toggle-visibility.hidden {
    display: none !important;
}

/* 标注隐藏状态时的图标颜色 */
.toggle-visibility.hidden-active i {
    color: var(--secondary-color);
}

/* 模态框样式 */
.modal {
    display: flex;              /* 始终 flex，不再用 none */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);  /* 默认透明 */
    z-index: 1000;
    align-items: center;
    justify-content: center;

    /* 关键：用 opacity 和 visibility 控制显示 */
    opacity: 0;
    visibility: hidden;

    /* 过渡设置 */
    transition: 
    opacity 0.3s ease,
    visibility 0.3s ease,
    background-color 0.3s ease;
}

.modal.active {
    opacity: 1;
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.3);  /* 显示时变半透明 */
    backdrop-filter: blur(4px) brightness(0.7);
}

.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    box-shadow: var(--shadow-lg);
}

.modal-content h3 {
    margin-bottom: 16px;
    color: var(--text-primary);
    font-size: 16px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
}

.form-group textarea {
    width: 100%;
    padding: 16px;
    background-color: #f5f7fa;
    border: none;
    border-radius: 16px;
    font-size: 14px;
    resize: vertical;
    height: 140px;
}

.form-group textarea:focus {
    outline: none;
    border: none;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.image-preprocess-content {
    width: min(520px, calc(100vw - 32px));
}

.image-preprocess-content h3 {
    margin-bottom: 10px;
}

.image-preprocess-desc {
    margin: 0 0 16px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}

.image-preprocess-actions {
    display: grid;
    gap: 10px;
}

.image-preprocess-actions button {
    width: 100%;
    min-height: 42px;
    justify-content: center;
}

/* ========== 关闭历史栏 ========== */
.history-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.history-close:hover {
    background-color: rgba(0,0,0,0.05);
    color: var(--primary-color);
}

/* ========== 新增：Toast提示容器 ========== */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    background-color: #333;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 8px;
    animation: toastIn 0.3s ease;
    pointer-events: auto;
    max-width: 300px;
}

.toast.success {
    background-color: var(--success-color);
}

.toast.error {
    background-color: var(--danger-color);
}

.toast.info {
    background-color: var(--primary-color);
}

.toast i {
    font-size: 16px;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========== 历史侧边栏 ========== */
.history-sidebar {
    position: fixed;
    top: 16px;
    bottom: 16px;
    right: 16px;
    left: -320px;
    width: 320px;
    /* height: 100vh; */
    border-radius: 20px;
    background-color: var(--sidebar-bg);
    z-index: 1000;
    transition: left 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);
    display: flex;
    flex-direction: column;
}

.history-sidebar.active {
    left: 16px; 
}

/* 修改：主内容区域 - 添加左边距，实现挤压效果 */
.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    transition: margin-left 0.5s cubic-bezier(0.39, 0.58, 0.57, 1); /* 过渡动画 */
    margin-left: 0;
}

/* 当侧边栏激活时，主内容区域向右移动（被挤压） */
.app-container.sidebar-active {
    margin-left: 336px; /* 等于侧边栏宽度 */
}

/* 为了让过渡更平滑，给所有主要内容区域添加过渡 */
.left-sidebar,
.main-content,
.right-sidebar {
    transition: transform 0.3s ease-out;
}

/* 可选：添加一个半透明遮罩，增强视觉反馈 */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px) brightness(0.7);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    pointer-events: none; /* 让点击穿透到页面 */
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* 激活时可以点击关闭 */
}

/* 历史侧边栏其他样式保持不变 */
.history-sidebar-header {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-sidebar-header h3 {
    margin: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.history-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 16px 16px;
}

/* 历史记录分组样式 */
.history-group {
    margin-bottom: 24px;
}

.history-group:last-child {
    margin-bottom: 0;
}

.history-group-title {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 2列宫格布局 */
.history-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* 单个宫格 */
.history-item {
    aspect-ratio: 1 / 1;
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.history-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

/* 图片容器 */
.history-item-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.history-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 确保图片填满整个容器，可能会裁剪但保证不留白 */
    transition: transform 0.3s ease;
}

.history-item-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 8px 8px 8px; /* 上边距大一些，让渐变更自然 */
    background: linear-gradient(to top,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0) 100%);
    color: white;
    z-index: 2;
    backdrop-filter: blur(2px); /* 毛玻璃效果 */
}

.history-item-time {
    font-size: 11px;
    font-weight: 500;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* 添加文字阴影，增强可读性 */
    letter-spacing: 0.3px;
}

.history-item-mode {
    font-size: 10px;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 删除按钮（hover显示） */
.history-item-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background-color: var(--danger-color);
    color: white;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 2;
    transition: all 0.2s ease;
}

.history-item-delete i {
    color: white;
    Font-size: 14px;
}

.history-item:hover .history-item-delete {
    display: flex;
}

.history-item-delete:hover {
    transform: scale(1.1);
}

/* 空状态 */
.history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-secondary);
    gap: 12px;
}

.history-empty i {
    font-size: 48px;
    opacity: 0.5;
}

.history-sidebar-footer {
    padding: 16px;
    border-radius: 0px 0px 20px 20px;
    background-color: var(--sidebar-bg);
}

/* 加载动画 */
@keyframes itemFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.history-item {
    animation: itemFadeIn 0.3s ease;
}

/* 删除动画 */
.history-item.deleting {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
}

/* 当前编辑标签样式 */
.history-item-current-label {
    position: absolute;
    top: 4px;
    left: 4px;
    height: 20px;
    padding: 0 8px;
    background-color: #a0ed1e;
    color: #171717;
    font-size: 11px;
    font-weight: 400;
    line-height: 20px;
    border-radius: 8px; /* 50%圆角 */
    z-index: 3;
    letter-spacing: 0.3px;
}

/* 当前编辑项的边框高亮（可选） */
.history-item.current-editing {
    border-color: #a0ed1e;
    box-shadow: 0 0 0 2px rgba(179, 234, 80, 0.2);
}

.history-item.current-editing:hover {
    border-color: #a0ed1e;
    box-shadow: 0 4px 8px rgba(179, 234, 80, 0.3);
}

/* 序号触发器 - 确保菜单可以突破容器 */
.status-trigger {
    position: relative;
    cursor: pointer;
    display: inline-block;
}

/* ========== 新增：浮动状态菜单（使用Portal技术） ========== */

/* 浮动菜单容器 - 直接挂在body下 */
.floating-status-menu {
    position: fixed;
    z-index: 1000000;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    width: 120px;
    padding: 4px 4px;
    border: 1px solid #eef2f5;
    
    /* 动画相关属性 */
    opacity: 0;
    transform:  scale(0.95);  /* 初始状态：向上偏移并缩小 */
    transition: 
        opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.2s ease;
    visibility: hidden;
    pointer-events: none;
    
    /* 设置变换原点为顶部中间，让动画从触发器位置开始 */
    transform-origin: top left;
}

.floating-status-menu.active {
    opacity: 1;
    transform: translateY(0) scale(1);  /* 最终状态：恢复正常位置和大小 */
    visibility: visible;
    pointer-events: auto;
}

/* 菜单项 */
.floating-status-menu .menu-item {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.floating-status-menu .menu-item:hover {
    background-color: #f5f7fa;
}

/* 菜单圆点 */
.floating-status-menu .menu-dot {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    flex-shrink: 0;
}

.floating-status-menu .menu-dot.pending {
    background-color: #ff4444;
}

.floating-status-menu .menu-dot.keep {
    background-color: #f5a623;
}

.floating-status-menu .menu-dot.fixed {
    background-color: #80c808;
}

/* 菜单文字 */
.floating-status-menu .menu-text {
    font-size: 13px;
    color: #171717;
    font-weight: 400;
    line-height: 1.4;
}

/* 当菜单打开时，添加一个全屏透明遮罩 */
body.menu-open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    background: transparent;
    pointer-events: auto;
}

/* ========== 新增：偏移功能样式 ========== */

/* 偏移菜单 - 完全复用 floating-status-menu 的动画效果 */
#offset-menu.floating-status-menu {
    display: none;
    position: fixed;
    z-index: 1000000;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    width: 78px;
    padding: 16px 0;
    border: 1px solid #eef2f5;
    
    /* 动画相关属性 - 与 floating-status-menu 完全一致 */
    opacity: 0;
    transform: scale(0.95);
    transition: 
        opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.2s ease;
    visibility: hidden;
    pointer-events: none;
    
    /* 变换原点：根据菜单位置动态调整 */
    transform-origin: bottom right;
}

/* 激活状态 - 与 floating-status-menu 完全一致 */
#offset-menu.floating-status-menu.active {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
    pointer-events: auto;
}

/* 当菜单在下方显示时的变换原点 */
#offset-menu.floating-status-menu.position-bottom {
    transform-origin: top right;
}

/* 偏移滑块容器 - 高度自适应 */
.offset-slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    height: auto;  /* 高度自适应 */
    min-height: auto;
}

/* 垂直滑块 - 使用旋转方案，高度改为140px */
#offset-slider {
    width: 140px;  /* 改为140px */
    height: 6px;
    -webkit-appearance: none;
    background: linear-gradient(to right, var(--primary-color) 0%, var(--primary-color) 50%, var(--border-color) 50%, var(--border-color) 100%);
    border-radius: 3px;
    outline: none;
    transform: rotate(90deg);
    margin: 67px 0;  /* (140-6)/2 ≈ 67px，使滑块垂直居中 */
    cursor: pointer;
    position: relative;
    z-index: 1000001;
}

#offset-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#offset-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    background: var(--primary-hover);
}

/* Firefox 支持 */
#offset-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

#offset-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
    background: var(--primary-hover);
}

#offset-slider::-moz-range-track {
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
}

/* 偏移值显示 */
#offset-value {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    display: block;
    font-weight: 400;
    background-color: #f5f7fa;
    padding: 4px 12px;
    border-radius: 16px;
    z-index: 1000001;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

#offset-value:hover {
    background-color: #e8ecf1;
    transition: all 0.2s ease;
}

/* 移除滑块刻度相关样式 */
.slider-scale {
    display: none;  /* 隐藏刻度 */
}

/* 偏移按钮激活状态 */
#offset-toggle.active {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .app-container {
        flex-direction: column;
    }

    .left-sidebar, .right-sidebar {
        width: 100%;
        height: auto;
    }

    .left-sidebar {
        flex-direction: row;
        overflow-x: auto;
    }

    .upload-module, .control-module {
        min-width: 300px;
    }

    .main-content {
        flex: 1;
    }
}

/* ========== 批量导出功能样式 ========== */

/* 导出按钮样式 */
#batch-export-btn {
    width: auto;
    Padding:0 8px;
    height: 28px;
    border: none;
    background: var(--primary-color);
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-right: auto;
}

#batch-export-btn:hover {
    transform: scale(1.04);
}

#batch-export-btn.cancel-mode {
    background: var(--danger-color);
}

#batch-export-btn.cancel-mode:hover {
    background: #ff4444;
}

/* 选择模式下的复选框 */
.history-item-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.3);
    z-index: 5;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.history-item-checkbox.visible {
    display: flex;
}

.history-item-checkbox.checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.history-item-checkbox i {
    color: white;
    font-size: 16px;
    display: none;
}

.history-item-checkbox.checked i {
    display: block;
}

/* 底部导出按钮区域 */
.history-sidebar-footer .batch-export-actions {
    display: flex;
    gap: 8px;
}

.history-sidebar-footer .batch-export-actions button {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#batch-export-pdf {
    background-color: #a0ed1e;
    color: #171717;
}

#batch-export-pdf:hover:not(:disabled) {
    background-color: #8eda0d;
    transform: translateY(-1px);
    color: #171717;
}

#batch-export-pdf:disabled {
    background-color: var(--border-color);
    cursor: not-allowed;
    opacity: 0.4;
}

#batch-export-cancel {
    background-color: var(--primary-color);
    color: #FFF;
}

#batch-export-cancel:hover {
    background-color: var(--primary-color);
    transform: translateY(-1px);
}

/* 多选计数标签 */
.batch-select-count {
    font-size: 12px;
    color: var(--primary-color);
    font-weight: 500;
}

/* ========== 🆕 control-nav 导航栏样式 ========== */
.control-nav {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) auto minmax(240px, max-content);
    position: relative;
    align-items: center;
    gap: 12px;
    padding: 12px;
    flex-shrink: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.78)),
        radial-gradient(circle at 18px 18px, rgba(47, 111, 88, 0.1), transparent 24px);
    border-radius: 18px 18px 0 0;
}

/* 左侧区域 */
.control-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.control-left::-webkit-scrollbar,
.control-right::-webkit-scrollbar,
.mode-selector::-webkit-scrollbar {
    display: none;
}

.brand-chip {
    height: 44px;
    min-width: 158px;
    padding: 0 12px 0 10px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--text-primary);
    background: linear-gradient(135deg, #ffffff, #fff8e7);
    box-shadow: 0 10px 34px rgba(20, 17, 15, 0.12);
    text-decoration: none;
    flex-shrink: 0;
}

.brand-mascot {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #ffffff 0 12%, #171717 12% 52%, var(--brand-amber) 52% 100%);
    box-shadow: 0 6px 14px rgba(20, 17, 15, 0.18);
    overflow: hidden;
}

.brand-mascot::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: 7px;
    top: 7px;
    background: #ffffff;
    box-shadow: 2px 0 0 #171717 inset;
}

.brand-mascot::after {
    content: "";
    position: absolute;
    right: 3px;
    top: 12px;
    border-left: 10px solid var(--brand-beak);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.brand-copy strong {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    color: #171717;
}

.brand-copy em {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}

.nav-btn {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: white;
    border: none;
    box-shadow: 0 8px 40px rgba(18, 20, 29, 0.1);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 14px;
}

.nav-btn:hover {
    transform: scale(1.05);
}

.nav-btn.primary {
    width: auto;
    padding: 0 16px;
    gap: 6px;
    background-color: var(--primary-color);
    color: white;
    border: none;
}

.nav-btn.primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}

/* 基准宽度选择器 */
.width-selector {
    position: relative;
}

.selector-trigger {
    height: 42px;
    padding: 0 16px;
    background: white;
    border: none;
    box-shadow: 0 8px 40px rgba(18, 20, 29, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.selector-trigger:hover {
    transform: scale(1.05);
}

.selector-trigger i {
    font-size: 20px;
    color: var(--text-primary);
    transition: transform 0.2s ease;
}

.selector-trigger.active i {
    /* transform: rotate(180deg); */
}

.selector-dropdown {
    padding: 4px;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 110px;
    background: white;
    /* border: 1px solid var(--border-color); */
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    overflow: hidden;
}

.selector-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    height: 38px;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s ease;
}

.dropdown-item:hover {
    background-color: var(--light-bg);
}

.dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 4px 0;
}

.custom-width-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--primary-color);
}

.custom-width-item i {
    font-size: 18px;
}

/* 自定义宽度弹窗 */
.custom-width-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(4px) brightness(0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.custom-width-modal.active {
    opacity: 1;
    visibility: visible;
}

.custom-width-content {
    background: white;
    border-radius: 20px;
    padding: 24px;
    width: 280px;
    text-align: center;
}

.custom-width-content h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
}

.custom-width-content input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: none;
    background: #f6f7fa;
    border-radius: 14px;
    font-size: 14px;
    margin-bottom: 20px;
}

.custom-width-content input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.custom-width-actions {
    display: flex;
    gap: 12px;
}

.custom-width-actions button {
    flex: 1;
    height: 40px;
    border-radius: 14px;
    cursor: pointer;
    font-size: 14px;
}

/* 中间模式选择器 */
.control-center {
    height: 42px;
    display: flex;
    justify-content: center;
    position: static;
    transform: none;
    min-width: 354px;
}

.mode-selector {
    position: relative;
    display: flex;
    background: #f1f3f5;
    border-radius: 40px;
    padding: 4px;
    gap: 0px;
    isolation: isolate;
}

/* 滑块背景轨道 */
.mode-slider-bg {
    border-radius: 36px;
    pointer-events: none;
    z-index: 0;
}

/* 滑块圆点 */
.mode-slider-thumb {
    position: absolute;
    width: calc(25% - 4px);
    height: 34px;
    background: white;
    border-radius: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    top: 4px;
    left: 4px;
    z-index: 1;
}

/* 滑块位置控制 - 通过 transform 移动 */
.mode-selector[data-active-index="0"] .mode-slider-thumb {
    transform: translateX(0);
}

.mode-selector[data-active-index="1"] .mode-slider-thumb {
    transform: translateX(calc(100% + 2px));
}

.mode-selector[data-active-index="2"] .mode-slider-thumb {
    transform: translateX(calc(200% + 4px));
}

.mode-selector[data-active-index="3"] .mode-slider-thumb {
    transform: translateX(calc(300% + 6px));
}

/* 选项按钮样式 - 提高层级 */
.mode-option {
    position: relative;
    z-index: 2;
    flex: 1;
    padding: 7px 14px;
    border: none;
    background: transparent;
    border-radius: 32px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.mode-option i {
    font-size: 18px;
    transition: color 0.2s ease;
}

/* 激活状态 - 文字颜色变深/主题色 */
.mode-option.active {
    color: var(--primary-color);
}

.mode-option.active i {
    color: var(--primary-color);
}

.mode-option:hover:not(.active) {
    color: var(--primary-color);
}

/* 响应式适配 */
@media (max-width: 700px) {
    .mode-option {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .mode-option i {
        font-size: 12px;
    }
}

@media (max-width: 550px) {
    .mode-option span {
        display: none;
    }
    
    .mode-option {
        padding: 8px 16px;
    }
    
    .mode-option i {
        font-size: 16px;
    }
}

/* 右侧区域 */
.control-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

/* 响应式 */
@media (max-width: 1280px) {
    .control-nav {
        grid-template-columns: 1fr auto;
        gap: 12px;
    }
    
    .control-center {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
        width: 100%;
        justify-content: center;
    }
    
    .mode-selector {
        width: min(520px, 100%);
        justify-content: center;
    }
    
    .mode-option {
        padding: 8px 16px;
    }
}

@media (max-width: 760px) {
    body {
        overflow: auto;
    }

    .app-container {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .main-content {
        padding: 8px;
        width: 100%;
        overflow: visible;
    }

    .right-sidebar {
        width: 100%;
        height: 280px;
        order: 2;
        padding: 0 8px 8px;
    }

    .inspection-area.card {
        border-radius: 14px;
    }

    .control-nav {
        grid-template-columns: 1fr;
        padding: 8px;
        gap: 8px;
        position: sticky;
        top: 0;
        z-index: 30;
        backdrop-filter: blur(16px);
    }

    .control-left,
    .control-right {
        justify-content: flex-start;
        width: 100%;
        gap: 8px;
        padding-bottom: 2px;
    }

    .brand-chip {
        min-width: auto;
        justify-content: center;
    }

    .brand-copy strong {
        font-size: 13px;
    }

    .brand-copy em {
        display: none;
    }

    .control-center {
        min-width: 0;
    }

    .mode-selector {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .mode-option {
        min-width: 78px;
        padding: 8px 10px;
    }

    .selector-trigger,
    .auto-mark-btn,
    .h5-compare-btn,
    .member-btn {
        height: 40px;
        border-radius: 12px;
    }

    .control-right .btn-secondary,
    .control-right .btn-primary {
        height: 40px;
        padding: 0 12px;
    }

    .purchase-grid,
    .commerce-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #purchase-modal .commerce-modal-content {
        max-height: calc(100vh - 24px);
        overflow: auto;
        border-radius: 24px;
    }

    .qr-service-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .payment-box {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .payment-qr {
        width: 180px;
        height: 180px;
    }

    .service-qr {
        width: 160px;
        height: 160px;
    }

    .empty-upload-row {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .upload-area {
        width: min(100%, 320px);
        height: 260px;
        border-radius: 18px;
    }

    .comparison-container {
        min-height: 560px;
    }

    .canvas-container {
        min-height: 520px;
    }
}

@media (max-width: 520px) {
    .purchase-grid,
    .commerce-actions {
        grid-template-columns: 1fr;
    }

    .purchase-card {
        min-height: auto;
    }

    .auto-mark-btn span,
    .h5-compare-btn span,
    .member-text {
        display: none;
    }

    .member-badge {
        min-width: 38px;
    }
}

@media (max-width: 640px) {
    .modal {
        align-items: flex-start;
        justify-content: center;
        padding: 12px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .modal-content,
    .commerce-modal-content,
    #purchase-modal .commerce-modal-content {
        width: 100%;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 18px;
        border-radius: 22px;
        box-sizing: border-box;
    }

    .commerce-modal-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }

    .commerce-modal-header h3,
    .commerce-modal-header p {
        word-break: keep-all;
        overflow-wrap: normal;
        white-space: normal;
        text-align: left;
    }

    .commerce-modal-header h3 {
        font-size: 20px;
        line-height: 1.25;
        margin: 0 0 6px;
    }

    .commerce-modal-header .nav-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        padding: 0;
        border-radius: 14px;
        justify-self: end;
    }

    .commerce-panel {
        padding: 14px;
        border-radius: 16px;
    }

    .purchase-grid,
    .commerce-actions {
        grid-template-columns: 1fr;
    }

    .purchase-card {
        min-height: auto;
        padding: 16px;
    }

    .purchase-card h4 {
        font-size: 17px;
    }

    .purchase-card strong {
        font-size: 24px;
    }

    .payment-box,
    .qr-service-box {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .modal-actions {
        flex-wrap: wrap;
    }

    .modal-actions button {
        min-height: 42px;
    }
}

/* 顶部工作台工具栏：保留三段信息层级，避免多个旧布局互相覆盖 */
.control-nav {
    --toolbar-surface: rgba(252, 253, 250, 0.96);
    --toolbar-line: #e6ebf0;
    --toolbar-muted: #64707d;
    display: grid;
    grid-template-columns: minmax(520px, 1fr) auto minmax(236px, max-content);
    grid-template-areas: "left center right";
    align-items: center;
    gap: 14px;
    max-width: 100%;
    padding: 12px 16px;
    position: relative;
    z-index: 40;
    overflow: visible;
    background:
        linear-gradient(180deg, var(--toolbar-surface), rgba(246, 248, 245, 0.94)),
        radial-gradient(circle at 34px 22px, rgba(246, 199, 72, 0.2), transparent 32px);
    border-bottom: 1px solid var(--toolbar-line);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 18px 44px rgba(25, 28, 41, 0.08);
}

.control-left,
.control-center,
.control-right,
.toolbar-cluster {
    min-width: 0;
}

.control-left {
    grid-area: left;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: visible;
}

.toolbar-cluster {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.setup-cluster,
.inspect-cluster,
.control-right {
    padding-left: 10px;
    border-left: 1px solid rgba(100, 112, 125, 0.16);
}

.control-center {
    grid-area: center;
    display: flex;
    justify-content: center;
    height: auto;
    min-width: 344px;
    transform: none;
}

.control-right {
    grid-area: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    overflow: visible;
}

.brand-chip {
    height: 42px;
    min-width: 166px;
    padding: 0 11px 0 8px;
    border-radius: 13px;
    background: #ffffff;
    border: 1px solid rgba(23, 23, 23, 0.08);
    box-shadow: 0 10px 28px rgba(31, 35, 43, 0.08);
}

.brand-mascot {
    width: 30px;
    height: 30px;
    border-radius: 10px;
}

.brand-copy strong {
    font-size: 13px;
}

.brand-copy em {
    color: #6b7365;
    font-size: 10px;
    text-transform: uppercase;
}

.nav-btn,
.selector-trigger,
.toggle-switch,
.auto-mark-btn,
.h5-compare-btn,
.member-btn,
.control-right .btn-secondary,
.control-right .btn-primary {
    flex: 0 0 auto;
}

.nav-btn,
.selector-trigger,
.auto-mark-btn,
.h5-compare-btn,
.member-btn,
.control-right .btn-secondary,
.control-right .btn-primary {
    height: 40px;
    min-height: 40px;
    border-radius: 12px;
    box-shadow: none;
}

.nav-btn,
.selector-trigger,
.h5-compare-btn {
    border: 1px solid rgba(23, 23, 23, 0.08);
    background: #ffffff;
}

.nav-btn {
    width: 40px;
    color: #303844;
}

.nav-btn:hover,
.selector-trigger:hover,
.auto-mark-btn:hover:not(:disabled),
.h5-compare-btn:hover:not(:disabled),
.member-btn:hover,
.control-right .btn-secondary:hover:not(:disabled),
.control-right .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(31, 35, 43, 0.1);
}

.nav-btn:disabled {
    cursor: not-allowed;
    opacity: 0.38;
    box-shadow: none;
}

.selector-trigger {
    min-width: 104px;
    padding: 0 12px;
    justify-content: space-between;
    color: #20262e;
    font-weight: 650;
}

.selector-trigger.active i {
    transform: rotate(180deg);
}

.selector-dropdown {
    min-width: 132px;
    padding: 6px;
    top: calc(100% + 10px);
    border: 1px solid rgba(23, 23, 23, 0.08);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(25, 28, 41, 0.16);
}

.dropdown-item {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
}

.toggle-switch {
    height: 40px;
    padding: 0 10px 0 12px;
    border: 1px solid rgba(23, 23, 23, 0.08);
    background: #ffffff;
    box-shadow: none;
}

.toggle-switch label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    white-space: nowrap;
    cursor: pointer;
}

.toggle-label {
    color: #303844;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
}

.toggle-slider {
    width: 38px;
    height: 22px;
}

.toggle-slider:before {
    width: 14px;
    height: 14px;
}

.auto-mark-btn {
    padding: 0 13px;
    background: #20262e;
    color: #ffffff;
    font-weight: 700;
}

.auto-mark-btn:disabled {
    background: #edf1f5;
    color: #8a94a1;
    opacity: 1;
}

.h5-compare-btn {
    color: #20262e;
}

.member-btn {
    background: #2f6f58;
    box-shadow: none;
}

.member-badge {
    height: 22px;
    border-radius: 7px;
}

.mode-selector {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(72px, 1fr));
    min-height: 42px;
    padding: 4px;
    gap: 0;
    overflow: hidden;
    background: #e9edf1;
    border: 1px solid rgba(23, 23, 23, 0.06);
    border-radius: 999px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
    isolation: isolate;
}

.mode-slider-bg {
    position: absolute;
    inset: 4px;
    z-index: 0;
    pointer-events: none;
}

.mode-slider-thumb {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    height: 100%;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(31, 35, 43, 0.14);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.mode-selector[data-active-index="0"] .mode-slider-thumb {
    transform: translateX(0);
}

.mode-selector[data-active-index="1"] .mode-slider-thumb {
    transform: translateX(100%);
}

.mode-selector[data-active-index="2"] .mode-slider-thumb {
    transform: translateX(200%);
}

.mode-selector[data-active-index="3"] .mode-slider-thumb {
    transform: translateX(300%);
}

.mode-option {
    min-width: 72px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--toolbar-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mode-option.active {
    color: #171717;
    background: transparent;
    box-shadow: none;
}

.mode-option.active i {
    color: #171717;
}

.selector-trigger span,
.toggle-label,
.auto-mark-btn span,
.h5-compare-btn span,
.member-text,
.mode-option span {
    white-space: nowrap;
}

.purchase-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.purchase-card {
    position: relative;
    width: 100%;
    min-height: 156px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.purchase-card.is-selected::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 9px;
    border: 1px solid rgba(23, 23, 23, 0.12);
    pointer-events: none;
}

@media (max-width: 1280px) {
    .control-nav {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "left left"
            "center right";
        align-items: start;
    }

    .control-center {
        justify-content: flex-start;
    }

    .control-left {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .control-nav {
        grid-template-columns: 1fr;
        grid-template-areas:
            "left"
            "center"
            "right";
        overflow-x: hidden;
        overflow-y: visible;
    }

    .control-left,
    .control-right,
    .mode-selector {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .mode-option {
        min-width: 72px;
    }
}

@media (max-width: 640px) {
    .purchase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .payment-box {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .service-box {
        align-items: center;
    }
}

@media (max-width: 420px) {
    .purchase-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .modal {
        align-items: flex-start;
        justify-content: center;
        padding: 12px;
        overflow-y: auto;
    }

    .modal-content,
    .commerce-modal-content,
    #purchase-modal .commerce-modal-content {
        width: 100%;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 18px;
        border-radius: 22px;
        box-sizing: border-box;
    }

    .commerce-modal-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }

    .commerce-modal-header h3,
    .commerce-modal-header p {
        word-break: keep-all;
        overflow-wrap: normal;
        white-space: normal;
    }

    .commerce-modal-header .nav-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        padding: 0;
        border-radius: 14px;
        justify-self: end;
    }

    .purchase-grid,
    .commerce-actions {
        grid-template-columns: 1fr;
    }
}

/* 顶部工具栏最终响应式覆盖：按功能分组换行，不再挤压中间模式条 */
.control-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 10px 14px;
    overflow: visible;
}

.control-left {
    display: flex;
    flex: 1 1 calc(100% - 360px);
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: auto;
    overflow: visible;
    order: 1;
}

.toolbar-cluster {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.brand-cluster,
.setup-cluster {
    flex-wrap: nowrap;
}

.inspect-cluster {
    flex-wrap: wrap;
}

.control-center {
    display: flex;
    flex: 1 0 100%;
    justify-content: center;
    min-width: 0;
    order: 3;
}

.control-right {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    overflow: visible;
    order: 2;
}

.mode-selector {
    width: min(100%, 560px);
    grid-template-columns: repeat(4, minmax(68px, 1fr));
}

.mode-option {
    min-width: 0;
    padding: 0 10px;
}

.h5-compare-btn {
    background: #ffffff;
    color: #20262e;
}

.h5-compare-btn:hover:not(:disabled) {
    background: #f5f7f9;
}

.control-right .btn-secondary {
    background: #171717;
    color: #ffffff;
    border: 1px solid #171717;
}

.control-right .btn-primary {
    background: #a0ed1e;
    color: #171717;
    border: 1px solid #a0ed1e;
}

.control-right .btn-secondary:disabled,
.control-right .btn-primary:disabled {
    background: #edf1f5;
    border-color: #edf1f5;
    color: #8a94a1;
    opacity: 1;
}

/* 修正中间宽度断点：避免旧 max-width:1200 规则把标注栏铺满页面 */
@media (max-width: 1200px) and (min-width: 981px) {
    .app-container {
        flex-direction: row;
        height: 100vh;
        overflow: hidden;
    }

    .right-sidebar {
        width: 300px;
        height: 100vh;
        order: initial;
        padding: 0;
        flex: 0 0 300px;
    }

    .main-content {
        flex: 1;
        width: auto;
        min-width: 0;
        padding: 12px 12px 12px 0;
        overflow: hidden;
    }

    .control-left {
        flex-basis: 100%;
    }

    .control-right {
        margin-left: auto;
    }
}

body.is-free-user .mode-option[data-mode="overlay"]::after,
body.is-free-user .mode-option[data-mode="tile"]::after,
body.is-free-user .mode-option[data-mode="invert"]::after,
body.is-free-user .auto-mark-btn::after,
body.is-free-user .h5-compare-btn::after {
    flex: 0 0 auto;
    margin-left: 2px;
    padding: 1px 4px;
    font-size: 10px;
    line-height: 14px;
}

@media (max-width: 980px) {
    .main-content {
        padding: 8px;
    }

    .right-sidebar {
        width: 72px;
    }

    .control-nav {
        gap: 8px;
        padding: 8px;
        border-radius: 16px 16px 0 0;
    }

    .control-left,
    .control-center,
    .control-right {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .control-left,
    .control-right {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .control-left::-webkit-scrollbar,
    .control-right::-webkit-scrollbar {
        display: none;
    }

    .toolbar-cluster {
        flex: 0 0 auto;
    }

    .brand-chip {
        min-width: 150px;
    }

    .mode-selector {
        width: min(100%, 520px);
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mode-option {
        min-height: 36px;
        padding: 0 6px;
        gap: 4px;
        font-size: 12px;
    }

    .mode-option i {
        font-size: 15px;
    }
}

@media (max-width: 560px) {
    .app-container {
        display: block;
    }

    .right-sidebar {
        display: none;
    }

    .control-nav {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 8px;
        position: sticky;
        top: 0;
        z-index: 60;
        padding: 8px;
        overflow: hidden;
    }

    .control-left {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
        overflow: visible;
    }

    .brand-cluster,
    .setup-cluster,
    .inspect-cluster,
    .control-right,
    .control-center {
        width: 100%;
        min-width: 0;
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
        overflow: visible;
    }

    .brand-cluster,
    .setup-cluster,
    .inspect-cluster,
    .control-right {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        justify-content: start;
        gap: 8px;
    }

    .brand-cluster {
        grid-template-columns: minmax(0, 1fr) 38px;
        grid-auto-flow: unset;
    }

    .setup-cluster {
        grid-template-columns: minmax(118px, 1fr) minmax(86px, max-content);
        grid-auto-flow: unset;
    }

    .inspect-cluster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: unset;
    }

    .control-right {
        grid-template-columns: minmax(72px, max-content) minmax(72px, 1fr) minmax(72px, 1fr);
        grid-auto-flow: unset;
    }

    .control-center {
        order: initial;
        justify-content: stretch;
    }

    .brand-chip {
        width: 100%;
        min-width: 0;
        padding-right: 8px;
    }

    .brand-copy strong {
        font-size: 12px;
    }

    .brand-copy em,
    .auto-mark-btn span,
    .h5-compare-btn span,
    .member-text {
        display: none;
    }

    .selector-trigger {
        width: 100%;
        min-width: 0;
    }

    .toggle-switch {
        width: 100%;
        padding-left: 10px;
    }

    .toggle-label {
        font-size: 12px;
    }

    .mode-option span {
        display: none;
    }

    .mode-option {
        min-height: 38px;
        overflow: hidden;
    }

    .mode-selector {
        width: 100%;
        min-height: 44px;
        padding: 4px;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
    }

    .mode-option::after {
        display: none !important;
    }

    body.is-free-user .inspect-cluster .auto-mark-btn::after,
    body.is-free-user .inspect-cluster .h5-compare-btn::after {
        display: none !important;
    }

    .mode-option i {
        font-size: 17px;
    }

    .mode-option span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .control-right .btn-secondary,
    .control-right .btn-primary,
    .member-btn,
    .auto-mark-btn,
    .h5-compare-btn,
    .nav-btn,
    .selector-trigger {
        height: 38px;
        min-height: 38px;
        border-radius: 11px;
    }

    .nav-btn,
    .auto-mark-btn,
    .h5-compare-btn {
        width: 100%;
        padding: 0;
    }

    .inspect-cluster .nav-btn,
    .inspect-cluster .auto-mark-btn,
    .inspect-cluster .h5-compare-btn {
        min-width: 0;
    }

    .inspect-cluster .auto-mark-btn span,
    .inspect-cluster .h5-compare-btn span {
        display: inline;
        max-width: 72px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .inspect-cluster .nav-btn i,
    .inspect-cluster .auto-mark-btn i,
    .inspect-cluster .h5-compare-btn i {
        font-size: 17px;
    }

    .control-right .btn-secondary,
    .control-right .btn-primary {
        width: 100%;
        padding: 0 10px;
    }

    .upload-area {
        width: min(100%, 260px);
        height: 252px;
        padding: 18px;
        border-radius: 18px;
    }

    .empty-state {
        justify-content: flex-start;
        padding: 16px 0 28px;
        gap: 16px;
        overflow-y: auto;
    }

    .empty-upload-row {
        gap: 16px;
        width: 100%;
    }

    .start-btn {
        width: min(100%, 260px);
    }

    .image-replace-btn,
    .image-replace-menu {
        display: none !important;
    }

    .drawing-toolbar {
        right: 10px;
        transform: scale(0.86);
        transform-origin: right center;
    }
}

@media (max-width: 760px) {
    .app-container {
        display: block;
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .main-content {
        height: 100dvh;
        padding: 8px;
        overflow: hidden;
    }

    .inspection-area {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .inspection-view {
        min-height: 0;
        overflow: hidden;
    }

    .comparison-container {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .canvas-container {
        min-height: 0;
        height: 100%;
    }

    .canvas-wrapper {
        height: 100%;
        min-height: 0;
        overflow: auto;
    }

    .right-sidebar {
        display: none !important;
    }

    .zoom-controls {
        position: absolute;
        left: 50%;
        bottom: 18px;
        transform: translateX(-50%);
        z-index: 30;
        margin: 0;
        padding: 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 14px 34px rgba(20, 31, 48, 0.14);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .zoom-controls button {
        width: 38px;
        height: 38px;
    }

    #zoom-level {
        width: 52px;
        height: 38px;
        line-height: 38px;
        padding: 0 6px;
    }

    .control-group {
        left: 12px;
        right: 12px;
        bottom: 74px;
        width: auto;
    }
}

/* 桌面端兜底布局：兼容旧 HTML 或缓存 HTML，避免新版 CSS 下顶部控件散架 */
@media (min-width: 981px) {
    .control-nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        grid-template-areas:
            "left right"
            "center center";
        align-items: center;
        gap: 10px 14px;
    }

    .control-left {
        grid-area: left;
        display: flex;
        flex: initial;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        width: auto;
        max-width: 100%;
        overflow: visible;
        order: initial;
    }

    .control-left > * {
        flex: 0 0 auto;
    }

    .toolbar-cluster {
        flex: 0 0 auto;
    }

    .brand-cluster,
    .setup-cluster,
    .inspect-cluster {
        display: inline-flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }

    .control-center {
        grid-area: center;
        display: flex;
        flex: initial;
        justify-content: center;
        width: 100%;
        min-width: 0;
        order: initial;
    }

    .control-right {
        grid-area: right;
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-left: 0;
        overflow: visible;
        order: initial;
    }

    .mode-selector {
        width: min(560px, 100%);
    }
}

/* ========== 🆕 左下角图片替换按钮样式 ========== */
.image-replace-btn {
    position: absolute;
    bottom: 16px;
    left: 16px;
    width: 48px;
    height: 48px;
    background: white;
    /* border: 1px solid var(--border-color); */
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.2s ease;
    box-shadow: 0 8px 40px rgba(18, 20, 29, 0.20);
}

.image-replace-btn i {
    font-size: 22px;
    color: var(--text-primary);
}

.image-replace-btn:hover {
    /* background-color: var(--light-bg); */
    transform: scale(1.1);
}

/* 图片替换浮层菜单 - 复用 floating-status-menu 样式 */
.image-replace-menu {
    position: absolute;
    bottom: 70px;
    left: 16px;
    width: 340px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10);
    /* border: 1px solid #eef2f5; */
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 16px;
    
    /* 动画效果 */
    opacity: 0;
    transform: scale(0.95);
    transform-origin: bottom left;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.2s ease;
    visibility: hidden;
    pointer-events: none;
}

.image-replace-menu.active {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
    pointer-events: auto;
}

/* 菜单头部 */
.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-header span {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.menu-close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.menu-close:hover {
    background-color: var(--light-bg);
    color: var(--danger-color);
}

/* 紧凑版上传区域 */
.upload-area-compact {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.upload-area-compact:hover {
    border-color: var(--primary-color);
    background-color: rgba(43, 108, 176, 0.05);
}

.compact-placeholder {
    Padding-right:10px;
    Padding-bottom:4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.compact-placeholder i {
    font-size: 16px;
    color: var(--secondary-color);
}

.compact-placeholder p {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-primary);
    margin: 0;
}

.compact-hint {
    font-size: 11px;
    color: var(--text-secondary);
}

.preview-compact {
    display: none;
    width: 100%;
    margin-top: 8px;
}

.preview-compact.active {
    display: block;
}

.preview-compact .preview-image {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-height: 100px;
    overflow: hidden;
    border-radius: 8px;
}

.preview-compact .preview-image img {
    max-height: 100px;
    width: auto;
    height: auto;
    display: block;
    border-radius: 8px;
}

.preview-compact .image-info {
    margin-top: 4px;
    font-size: 11px;
}

/* 开始按钮 */
#start-inspection-compact {
    width: 100%;
    height: 44px;
}

#start-inspection-compact:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Purchase modal final responsive rules */
#purchase-modal {
    align-items: center;
    padding: 20px;
    overflow: hidden;
}

#purchase-modal .commerce-modal-content {
    width: min(760px, calc(100vw - 40px));
    max-height: min(860px, calc(100dvh - 40px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

#purchase-modal .commerce-modal-header {
    position: sticky;
    top: -24px;
    z-index: 12;
    margin: -24px -24px 16px;
    padding: 24px 24px 14px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(223, 230, 238, 0.86);
}

#purchase-modal .purchase-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#purchase-modal .purchase-card {
    min-height: 126px;
    padding: 12px;
}

#purchase-modal .payment-box {
    grid-template-columns: minmax(0, 1fr) 128px;
    padding: 14px;
}

#purchase-modal .payment-qr {
    width: 128px;
    height: 128px;
}

#purchase-modal .purchase-request-box {
    padding: 14px;
}

#purchase-modal .service-box {
    padding: 12px;
}

#purchase-modal .service-qr {
    width: 84px;
    height: 84px;
}

@media (max-width: 640px) {
    #purchase-modal {
        align-items: stretch;
        padding: 10px;
        overflow: hidden;
    }

    #purchase-modal .commerce-modal-content {
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - 20px);
        padding: 16px;
        border-radius: 22px;
        overflow-y: auto;
    }

    #purchase-modal .commerce-modal-header {
        top: -16px;
        margin: -16px -16px 12px;
        padding: 16px 16px 12px;
        grid-template-columns: minmax(0, 1fr) 44px;
    }

    #purchase-modal .commerce-modal-header h3 {
        font-size: 20px;
    }

    #purchase-modal .purchase-grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 10px;
        margin: 0 -16px 12px;
        padding: 0 16px 4px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    #purchase-modal .purchase-card {
        flex: 0 0 176px;
        min-height: 132px;
        padding: 12px;
        scroll-snap-align: start;
    }

    #purchase-modal .purchase-card h4 {
        font-size: 16px;
        margin: 5px 0;
    }

    #purchase-modal .purchase-card strong {
        font-size: 22px;
        margin-bottom: 6px;
    }

    #purchase-modal .purchase-card p {
        font-size: 12px;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #purchase-modal .payment-box {
        grid-template-columns: minmax(0, 1fr) 96px !important;
        gap: 12px;
        padding: 12px;
        text-align: left;
        justify-items: stretch;
    }

    #purchase-modal .payment-copy strong {
        font-size: 16px;
    }

    #purchase-modal .payment-copy small {
        font-size: 12px;
        line-height: 1.45;
    }

    #purchase-modal .payment-qr {
        width: 96px !important;
        height: 96px !important;
        border-width: 4px;
    }

    #purchase-modal .purchase-request-box {
        padding: 12px;
        gap: 10px;
    }

    #purchase-modal .purchase-request-box .setting-field {
        margin-bottom: 0;
    }

    #purchase-modal .service-box {
        flex-direction: row !important;
        align-items: center;
        text-align: left;
        padding: 10px;
    }

    #purchase-modal .service-qr {
        width: 64px !important;
        height: 64px !important;
    }

    #purchase-modal #purchase-service-text {
        font-size: 12px;
        line-height: 1.45;
    }
}