/* 全局重置 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #FFFFFF;
    color: #111111;
    max-width: 480px;
    margin: 0 auto;
}

/* 顶部标题栏 */
#top-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 45px;
    padding: 0 12px;
    background: #F5F5F5;
    font-size: 16px;
    font-weight: 500;
}
#title { flex: 1; text-align: center; }
#menu-btn {
    font-size: 20px;
    cursor: pointer;
    position: relative;   /* 放这里 */
}
#menu-badge {
    position: absolute;   /* 新增 */
    top: 2px;            /* 新增 */
    right: 2px;          /* 新增 */
    background: #E53935;
    color: #fff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 10px;
    min-width: 16px;
    text-align: center;
    display: none;       /* 默认隐藏，JS 控制显隐 */
}

/* 线号切换 */
#line-selector {
    display: flex;
    gap: 8px;
    padding: 16px 18px;
}
.line-btn {
    flex: 1;
    height: 40px;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    color: #111111;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.line-btn.selected {
    background: #E3F2FD;
    border-color: #90CAF9;
    color: #1565C0;
    overflow: hidden;
}

/* 区域标题 */
.section { padding: 12px 18px; }
.section-title {
    font-size: 14px;
    color: #888888;
    margin-bottom: 8px;
}

/* 网格容器 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    min-height: 40px;
    border-left: 1px solid #E5E5E5;
    border-right: 1px solid #E5E5E5;
    padding: 0 4px;
}

/* 按钮 */
.grid-btn {
    height: 40px;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 14px;
    color: #111111;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.grid-btn.selected {
    background: #E3F2FD;
    border-color: #90CAF9;
    color: #1565C0;
}

/* 提示文字 */
.hint {
    grid-column: 1 / -1;
    text-align: center;
    color: #888888;
    font-size: 14px;
    padding: 20px 0;
}

/* 材料计算页面 - 填充在品牌页面之上 */
#calc-page {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    bottom: 0;
    background: #FFFFFF;
    overflow-y: auto;
    z-index: 100;
    display: none;
    padding: 12px 16px;
}
/* 品牌/规格页面容器 */
#brand-spec-page { display: block; }
#calc-page.active { display: block; }
#brand-spec-page.active { display: block; }

/* 返回按钮 */
#back-btn { font-size: 20px; cursor: pointer; }
/* 确保标题栏在计算页上方 */
#top-bar {
    position: relative;
    z-index: 200;
}
/* 输入行 */

/* 将输入行改为 Grid 布局，强制同行且等号居中 */
/* 输入行 - 手机端稳定三列等宽 */
#input-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;  /* 左右平分，等号自适应 */
    align-items: center;
    gap: 8px;          /* 减小间距，避免窄屏溢出 */
    margin: 4px 0 10px 0;
}
/* === 输入框容器（带左上角标签） === */
.x-input-wrapper {
    position: relative;
    flex: 1;
}
.x-label {
    position: absolute;
    top: -10px;
    left: 12px;
    background: #FFFFFF;
    padding: 0 6px;
    font-size: 12px;
    color: #757575;
    z-index: 1;
    pointer-events: none;
}
/* 左侧输入区 */
.x-input-area {
    display: flex;
    align-items: center;
    justify-content: space-between;  /* 让左侧文字与输入框分开 */
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 0 8px;
    height: 50px;
    min-width: 0;      /* 防止 flex 溢出 */
}
.x-input-area span {
    display: none;
}
#input-x {
    width: 100%;
    height: 50px;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    text-align: center;
    font-size: 18px;
    outline: none;
    background: transparent;
    transition: border-color 0.2s;
}
/* 输入框获得焦点时，边框变黄色 */
#input-x:focus {
    border-color: #64B5F6;    /* 浅蓝色边框，与按钮选中态一致 */
    border-width: 1px;        /* 保持正常粗细，不需要加粗 */
}

/* X(kg) 的占位文本颜色调浅 */
#input-x::placeholder {
    color: #757575;
    font-size: 12px;
}

/* 等号 - 不伸缩，居中 */
.equal-sign {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    white-space: nowrap;
}

/* 右侧结果区 */
#result-box {
    background: #FFF0F5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    padding: 0 12px;      /* 内边距防止文字贴边 */
    overflow: visible;
    text-overflow: ellipsis;
    position: relative;
    
}
#result-box::after {
    content: "EA";
    position: absolute;
    top: -10px;
    right: 10px;
    background: #FFFFFF;           /* 白色背景，与页面底色一致，形成"镂空"效果 */
    color: #757575;
    font-size: 12px;
    font-weight: 400;
    padding: 0 4px;
    line-height: 1;
    pointer-events: none;
    z-index: 1;                   /* 确保在结果区数字上方 */
}

#material-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 40px;
    gap: 8px;
    margin-bottom: 12px;
    max-height: 136px;   /* 40*3 + 8*2 = 136，精确3行 */
    overflow-y: auto;
}
/* EA 标签外层容器（相对定位锚点） */
.result-wrapper {
    position: relative;
}

/* EA 标签 */
.result-label {
    position: absolute;
    top: -10px;
    right: 10px;
    background: #FFFFFF;
    color: #757575;
    font-size: 12px;
    font-weight: 400;
    padding: 0 4px;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
}

/* 促销标签卡片 — 默认（未选中）状态 */
#promo-card {
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    padding: 6px 10px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 12px;
    background: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    color: #333333;               /* ← 未选中时的文字颜色（深灰/黑） */
}

/* 促销标签卡片 — 选中状态 */
#promo-card.active {
    background: #BBDEFB;
    border-color: #64B5F6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    color: #1565C0;
}

/* 子选项 */
#sub-options {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 12px;
}
.sub-btn {
    padding: 8px 16px;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 12px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.sub-btn.selected {
    background: #E3F2FD;
    border-color: #90CAF9;
    color: #1565C0;
}

/* 属性卡片 */
#property-card {
    background: #F5F5F5;
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    color: #666;
}
/* 促销标签对话框 */
#promo-dialog-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-start;         /* 靠上显示，键盘弹出时不会遮挡关闭按钮 */
    padding-top: 8vh;               /* 顶部留一些空间 */
    
}
#promo-dialog {
    width: 94%;
    max-width: 420px;
    background: #E6F0FA;
    border-radius: 16px;
    max-height: 40vh;          /* 天花板限制，而非强制固定 */
    display: flex;
    flex-direction: column;
    padding: 16px;
    box-sizing: border-box;
}
/* 关闭按钮 */
#promo-dialog-close {
    background: #FFFFFF;
    border: none;
    border-radius: 8px;
    height: 40px;              /* 调小关闭按钮，与搜索框一致 */
    flex-shrink: 0;            /* 禁止被压缩 */
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
}
#promo-dialog-title {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 12px;
    color: #333;
}
/* 搜索输入框 */
#promo-search {
    width: 100%;
    height: 35px;
    min-height: 35px;
    max-height: 35px;
    flex-shrink: 0;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    margin-bottom: 8px;
    background: #FFFFFF;
}

#promo-dialog-close {
    background: #FFFFFF;
    border: none;
    border-radius: 8px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
}
#promo-grid-container {
    background: #FFFFFF;
    border-radius: 12px;
    flex: 1;                   /* 占据剩余空间 */
    overflow-y: auto;
    padding: 8px;
    margin-bottom: 8px;
    min-height: 0;             /* 关键！允许被正确压缩 */
}
.promo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;                                     /* 增加间距 */
}
.promo-tag-btn {
    height: 30px;                                  /* 降低按钮高度 */
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    background: #F8F8F8;
    font-size: 14px;                               /* 缩小字号 */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.2s;
    overflow: hidden;
}
.promo-tag-btn.selected {
    background: #BBDEFB;
    border-color: #90CAF9;
    color: #1565C0;
}
.promo-tag-btn .order {
    position: absolute;
    top: 2px;
    left: 6px;
    font-size: 14px;                               /* 加大角标 */
    color: #999;
    font-weight: 500;
}

/* 同步确认弹窗 */
#sync-confirm-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
}
#sync-confirm-dialog {
    background: #FFFFFF;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    max-height: 70vh;
    padding: 16px;
    display: flex;
    flex-direction: column;
}
#sync-confirm-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
}
#sync-confirm-body {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}
#sync-confirm-list {
    flex: 1;
    overflow-y: auto;
    font-size: 13px;
    color: #333;
    line-height: 1.6;
}
.dialog-btn-cancel {
    flex: 1;
    height: 40px;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 14px;
    cursor: pointer;
}
.dialog-btn-danger {
    flex: 1;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: #E53935;
    color: #FFFFFF;
    font-size: 14px;
    cursor: pointer;
}
/* 下拉菜单 */
#dropdown-menu {
    position: absolute;
    top: 45px;
    right: 8px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 500;
    min-width: 160px;
    padding: 4px 0;
}
.menu-item {
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.menu-item:hover { background: #F5F5F5; }
.divider { height: 1px; background: #E5E5E5; margin: 4px 0; }

#sync-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E53935;
    color: #fff;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    margin-left: 8px;
    line-height: 1;
    padding: 0 4px;
    box-sizing: border-box;
}

/* 设置对话框 */
#settings-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
}
#settings-dialog {
    background: #FFFFFF;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    padding: 16px;
}
#settings-title {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 12px;
}
/* 上下文菜单 */
.context-menu {
    position: absolute;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 600;
    min-width: 100px;
    max-width: 130px;
    display: none;
}
.context-item {
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    overflow: hidden;
}
.context-item:hover { background: #F5F5F5; }
/* 禁止浏览器默认长按菜单 */
.grid-btn,
.promo-tag-btn,
.sub-btn,
#promo-card,
.line-btn,
#menu-btn,
.menu-item,
.context-item {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    overflow: hidden;
}

/* 输入框正常可选中 */
#input-x,

input[type="text"] {
    -webkit-user-select: text;
    user-select: text;
}
/* 材料编辑弹窗 */
#material-edit-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1002;
    display: flex;
    align-items: flex-start;
    padding-top: 8vh;
    justify-content: center;
}
#material-edit-dialog {
    background: #FFFFFF;
    border-radius: 12px;
    width: 70%;
    max-width: 360px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;      /* ✅ 新增：内部内容水平居中 */
    margin: 0 auto;        /* 新增：确保居中 */
}
#material-edit-title {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 12px;
    color: #333;
}
.me-row {
    display: block;
    margin-bottom: 14px;   /* 稍大一点，给浮动标签留空间 */
}
.me-label {
    display: none;   /* 隐藏旧标签 */
}
.me-input {
    width: 100%;              /* ✅ 确保填满容器 */
    height: 42px;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 0 8px;
    font-size: 14px;
    background: #FAFAFA;
    outline: none;
}
.me-input:focus {
    border-color: #64B5F6;
    background: #FFFFFF;
}
/* 日志查看对话框 */
#log-viewer-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
}
#log-viewer-dialog {
    background: #FFFFFF;
    border-radius: 12px;
    width: 90%;
    max-width: 420px;
    max-height: 70vh;
    padding: 16px;
    display: flex;
    flex-direction: column;
}
#log-viewer-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
    text-align: center;
}
#log-viewer-list {
    flex: 1;
    overflow-y: auto;
    font-size: 13px;
    color: #333;
    line-height: 1.8;
}
.log-entry {
    border-bottom: 1px solid #F0F0F0;
    padding: 8px 0;
    margin-bottom: 4px;
}
.log-entry:last-child { border-bottom: none; }
.log-type { font-weight: bold; }
.log-type.INSERT { color: #4CAF50; }
.log-type.UPDATE { color: #FF9800; }
.log-type.DELETE { color: #E53935; }
.log-path { color: #555; font-size: 12px; margin: 2px 0; }
.log-changes { font-size: 12px; color: #333; margin: 2px 0; }
.log-time { font-size: 11px; color: #999; margin-top: 2px; }
/* 同步角标：红色叹号 */
#sync-badge.warn {
    background: #E53935;
    color: #fff;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 同步角标：绿色NEW */
#sync-badge.info {
    background: #4CAF50;
    color: #fff;
    border-radius: 4px;
    min-width: auto;
    height: 16px;
    font-size: 9px;
    font-weight: bold;
    line-height: 1;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 日志角标 */
#log-badge {
    display: none;
    background: #E53935;
    color: #fff;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    margin-left: 8px;
    line-height: 1;
    padding: 0 4px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
}
/* 输入框容器 — 相对定位锚点 */
.me-input-wrap {
    position: relative;
    width: 100%;
}

/* 浮动标签 — 仿 X(kg) 效果 */
.me-label-float {
    position: absolute;
    top: -10px;
    left: 12px;
    background: #FFFFFF;
    padding: 0 6px;
    font-size: 12px;
    color: #757575;
    z-index: 1;
    pointer-events: none;
    white-space: nowrap;
}
/* 材料弹窗按钮 */
#me-btn-cancel,
#me-btn-save {
    flex: 1;
    height: 40px;
    font-size: 15px;
    border-radius: 8px;
}
/* 材料弹窗 — 按钮行撑满 */
#material-edit-dialog > div:last-child {
    margin-left: -14px;
    margin-right: -14px;
    width: calc(100% + 28px);
    padding: 0 14px;
    box-sizing: border-box;
}

/* 材料弹窗 — 按钮 */
#me-btn-cancel,
#me-btn-save {
    flex: 1;
    height: 44px;
    font-size: 15px;
    border-radius: 8px;
}

/* 备注标签加粗 */
#me-row-remark .me-label-float {
    font-weight: bold;
    color: #333;
}
#log-viewer-close {
    height: 44px;
    font-size: 15px;
}