/* 重置默认样式（统一基础，避免浏览器差异） */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
    background: #f5f5f5;
    padding: 15px;
    /* 1. 修复分页遮挡：底部内边距 = 分页栏高度（52px）+ 间距（10px），刚好不遮挡内容 */
    padding-bottom: 62px; 
    min-height: 100vh; /* 保证页面高度足够，避免内容少时分页悬浮 */
}

/* 容器（居中+限制宽度，适配大屏/手机，统一内容区域） */
.container {
    max-width: 800px;
    margin: 0 auto;
    /* 给容器加统一间距，避免内部元素贴边 */
    padding: 0 5px;
}

/* 顶部标题栏（含返回按钮，固定高度+对齐，避免标题偏移） */
.header {
    display: flex;
    align-items: center;
    justify-content: center; /* 强制标题居中，不受按钮宽度影响 */
    margin-bottom: 20px;
    height: 40px; /* 固定高度，避免按钮上下晃动 */
}
.back-btn {
    background: none;
    border: none;
    font-size: 16px;
    color: #2196F3;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background 0.2s;
    /* 2. 修复标题居中：按钮绝对定位，不占用容器空间 */
    position: absolute;
    left: 15px;
    top: 15px;
}
.back-btn:hover {
    background: #f0f7ff;
}
.back-btn svg {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}
.page-title {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin: 0;
    /* 标题不换行，避免小屏错位 */
    white-space: nowrap;
}
/* 删掉占位元素（用绝对定位替代，避免宽度计算错误） */
.header-placeholder {
    display: none;
}

/* 图片预览区（固定比例+清晰显示，避免拉伸/变形） */
.img-preview {
    width: 100%;
    /* 3. 修复预览区变形：用aspect-ratio固定宽高比（4:3），适配所有屏幕 */
    aspect-ratio: 4 / 3; 
    background: #fff;
    border: 2px dashed #ddd;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.2s;
}
.img-preview:hover {
    border-color: #2196F3;
}
.img-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，只显示中间部分，不拉伸 */
}
.preview-tip {
    color: #999;
    font-size: 14px;
    text-align: center;
    padding: 0 20px;
    /* 提示文字不换行，避免小屏错乱 */
    white-space: nowrap;
}

/* 按钮组（等宽+适配点击，避免小屏挤压） */
.btn-group {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    /* 按钮组最小宽度限制，避免小屏缩成一条 */
    min-width: 280px;
    margin-left: auto;
    margin-right: auto;
}
.btn {
    flex: 1; /* 两个按钮等分宽度 */
    padding: 14px 0;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: opacity 0.2s;
    /* 按钮文字不换行，避免挤压 */
    white-space: nowrap;
}
.btn:hover:not(:disabled) {
    opacity: 0.9;
}
.btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}
.btn-select {
    background: #2196F3;
    color: #fff;
}
.btn-recog {
    background: #4CAF50;
    color: #fff;
}

/* 加载提示（居中+不占空间，避免内容跳动） */
.loading {
    text-align: center;
    color: #666;
    font-size: 16px;
    margin: 20px 0;
    padding: 10px 0;
    /* 固定高度，避免加载前后内容偏移 */
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 结果区域（统一间距，避免内容贴边） */
.result-area {
    margin-top: 10px;
    padding: 0 5px;
}
/* 错误/空结果提示（居中+美观，避免单调） */
.error, .empty {
    text-align: center;
    color: #666;
    padding: 30px 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin: 0 auto;
    max-width: 500px; /* 限制宽度，避免大屏太宽 */
}

/* 4. 商品列表（整齐排列+适配所有屏幕，不换行错乱） */
.goods-list {
    display: grid;
    /* 最小140px/列，最大1fr，确保至少2列（小屏2列，大屏3-4列） */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px; /* 列/行间距一致，排列整齐 */
    margin-bottom: 10px; /* 和分页栏留间距 */
    justify-items: center; /* 项目居中，避免边缘不对齐 */
}
/* 商品项（固定宽度+统一高度，避免参差不齐） */
.goods-item {
    width: 100%; /* 占满网格列宽 */
    max-width: 200px; /* 限制最大宽度，避免大屏太宽 */
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s;
    /* 固定高度，避免内容多少导致错位 */
    display: flex;
    flex-direction: column;
    height: 220px;
}
.goods-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* 商品图片（固定比例，统一大小） */
.goods-item img {
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形图片，整齐统一 */
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 8px;
    background: #fafafa; /* 加载前占位 */
}
/* 图片加载失败备用样式（避免破图） */
.goods-item img.onerror {
    content: url('../img/default.png'); /* 替换成你的默认图路径，没有就删这行 */
    background: #eee;
}
/* 商品名称（固定行数，避免高度不一） */
.goods-name {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
    /* 最多2行，超出省略（解决长名称换行错乱） */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1; /* 占满剩余空间，让相似度文字靠下 */
}
.goods-similarity {
    font-size: 13px;
    color: #E53935;
    font-weight: 600;
    margin-top: auto; /* 固定在商品项底部 */
}

/* 5. 分页栏（固定底部+不错位+适配所有屏幕） */
.pagination {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px 15px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 固定高度，避免内容跳动 */
    height: 52px;
    /* 限制最大宽度，和内容容器对齐 */
    max-width: 800px;
    margin: 0 auto;
    /* 左右留边，避免小屏按钮贴边 */
    box-sizing: border-box;
}
/* 分页按钮（固定大小，避免点击区域过小） */
.page-btn {
    padding: 8px 16px;
    border: 1px solid #2196F3;
    border-radius: 4px;
    background: #fff;
    color: #2196F3;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    /* 固定宽度，避免按钮大小不一 */
    min-width: 80px;
    text-align: center;
}
.page-btn:hover:not(:disabled) {
    background: #f0f7ff;
}
.page-btn:disabled {
    border-color: #ccc;
    color: #ccc;
    cursor: not-allowed;
}
/* 页码信息（居中显示，避免挤压） */
.page-info {
    font-size: 14px;
    color: #666;
    /* 固定宽度，避免内容变化导致按钮偏移 */
    min-width: 120px;
    text-align: center;
}