/* 全局主题变量：所有颜色、边框、背景和字体大小都从这里统一控制，方便后续换肤。 */
:root{--navy:#132238;--blue:#2563eb;--bg:#f3f6fb;--surface:#fff;--surface-2:#f8fafc;--text:#182230;--line:#e5eaf2;--muted:#667085;--red:#b42318;--green:#067647;--orange:#fed7aa;--selected:#bfdbfe;--app-font-size:10px}
/* 白色主题：偏办公软件风格，适合光线较强的环境。 */
:root[data-theme=white]{--navy:#ffffff;--bg:#f7f7f8;--surface:#ffffff;--surface-2:#fafafa;--text:#1f2937;--line:#e4e7ec;--muted:#667085;--blue:#334155;--selected:#e5e7eb}
/* 深色主题：重设表面色、文字色和选中色，避免 BOM 比对状态在深色下看不清。 */
:root[data-theme=dark]{--navy:#0f172a;--bg:#0b1220;--surface:#111827;--surface-2:#1f2937;--text:#e5e7eb;--line:#334155;--muted:#9ca3af;--blue:#60a5fa;--selected:#1e3a8a}
*{box-sizing:border-box}body{margin:0;font-family:"Microsoft YaHei UI",system-ui,sans-serif;font-size:var(--app-font-size);background:var(--bg);color:#182230;display:flex;min-height:100vh}
:root[data-theme] body{color:var(--text)}
/* 登录页：未登录时覆盖整个系统，避免用户看到仓库页面和业务数据。 */
.login-screen{position:fixed;inset:0;z-index:100;background:linear-gradient(135deg,#10213d,#2563eb 48%,#dbeafe);display:flex;align-items:center;justify-content:center;padding:22px}.login-screen.hidden{display:none}.login-card{width:min(430px,100%);background:#ffffffee;border:1px solid #ffffff80;border-radius:24px;padding:34px;box-shadow:0 30px 90px #0f172a55;display:grid;gap:16px;color:#1f2937}.login-card img{width:78px;height:78px;border-radius:20px;justify-self:center}.login-card h1{text-align:center;font-size:2.4em;margin:0}.login-card p{text-align:center;color:#667085;font-size:1.25em;margin:0 0 8px}.login-card button{padding:12px 14px;font-size:1.35em}
/* 左侧导航栏：桌面端固定在左侧，移动端会在媒体查询中变成底部导航。 */
aside{width:245px;background:var(--navy);color:white;padding:24px 18px;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column}
:root[data-theme=white] aside{color:var(--text);border-right:1px solid var(--line)}
.brand{display:flex;gap:12px;align-items:center;margin:0 5px 28px}.brand img{width:46px;height:46px;border-radius:12px;object-fit:cover}.brand strong{display:block;font-size:1.7em}.brand small{display:block;color:#9fb0c8;margin-top:5px;font-size:1.15em}
nav{display:grid;gap:7px}nav button{border:0;background:transparent;color:#cbd5e1;padding:13px 14px;text-align:left;border-radius:9px;font:inherit;font-size:1.35em;font-weight:700;cursor:pointer}:root[data-theme=white] nav button{color:#475467}nav button.active,nav button:hover{background:#29405e;color:white}:root[data-theme=white] nav button.active,:root[data-theme=white] nav button:hover{background:#eef2ff;color:#1d4ed8}footer{margin-top:auto;color:#91a4bd;font-size:1.15em;line-height:1.8}:root[data-theme=white] footer{color:#667085}
/* 主内容区与页面标题：根据左侧导航宽度预留空间。 */
main{margin-left:245px;width:calc(100% - 245px);padding:30px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:14px}h1{font-size:2.7em;margin:0 0 7px}header p{margin:0;color:var(--muted);font-size:1.35em}.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.status{color:var(--green);font-size:1.2em;background:#e7f8ef;padding:7px 12px;border-radius:99px}.status.error{color:var(--red);background:#fee2e2}
/* 仪表盘卡片和通用面板：信息总览、类目统计、表格容器共用这套视觉语言。 */
.page{display:none}.page.active{display:block}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.metric,.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 3px 14px #1f29370d}.metric{padding:20px}.metric small{color:var(--muted);font-size:1.25em}.metric strong{font-size:2.8em;display:block;margin-top:9px}.panel-title{padding:18px 20px;border-bottom:1px solid var(--line)}.panel-title h2,.setting-card h2{font-size:1.8em;margin:0 0 12px}.table-wrap{overflow:auto;max-height:calc(100vh - 220px)}
/* 表格：开启 sticky 表头和单元格边框，BOM 比对数量较多时更容易阅读。 */
table{width:100%;border-collapse:collapse;background:var(--surface)}th,td{text-align:left;padding:13px 15px;border:1px solid var(--line);white-space:nowrap}th{position:sticky;top:0;background:var(--surface-2);color:var(--muted);font-size:1.2em;z-index:1}td{font-size:1.28em}.component-name{display:flex;align-items:center;gap:10px;font-weight:700}.thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;background:#eef2f7;cursor:zoom-in}.low{color:var(--red);font-weight:bold}.positive{color:var(--green);font-weight:bold}.negative{color:var(--red);font-weight:bold}
/* 工具栏、输入框和按钮：新增、搜索、BOM 导入、领料等顶部操作统一使用。 */
.toolbar{display:flex;gap:10px;margin-bottom:15px;align-items:center;flex-wrap:wrap}.toolbar input{max-width:480px}.toolbar input[type=file]{background:var(--surface)}#issue-multiplier{width:110px}.page-size-label{display:flex;grid-auto-flow:column;align-items:center;gap:6px;width:auto;color:var(--muted);font-size:1.15em}.page-size-label select{width:105px}input,select,textarea{width:100%;border:1px solid #cfd7e4;border-radius:8px;padding:10px 11px;font:inherit;font-size:1.3em;background:var(--surface);color:var(--text)}input:focus,select:focus,textarea:focus{outline:2px solid #bfdbfe;border-color:var(--blue)}input.invalid,select.invalid,textarea.invalid{border-color:var(--red);outline:2px solid #fecaca}.form-error{display:none;background:#fef2f2;color:var(--red);border:1px solid #fecaca;border-radius:10px;padding:10px 12px;font-size:1.2em;font-weight:700;line-height:1.5}.form-error.show{display:block}
button{border:1px solid #cfd7e4;background:var(--surface);color:var(--text);border-radius:8px;padding:8px 12px;font:inherit;font-size:1.25em;cursor:pointer;font-weight:700}button:hover{background:var(--surface-2)}.primary{background:var(--blue);color:white;border-color:var(--blue)}.primary:hover{filter:brightness(.92)}.danger{color:var(--red)}.actions{display:flex;gap:6px}
/* 弹窗：新增/编辑元器件使用左右布局，左侧表单，右侧展示大图。 */
dialog{border:0;border-radius:15px;padding:0;width:min(1120px,calc(100vw - 30px));box-shadow:0 24px 80px #11182740;background:var(--surface);color:var(--text)}dialog::backdrop{background:#10182880}.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:19px 22px;border-bottom:1px solid var(--line)}.dialog-head h2{font-size:2em;margin:0}.dialog-head button{font-size:2em;border:0;padding:2px 10px}.component-dialog-body{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;padding:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid label,label{display:grid;gap:7px;color:var(--muted);font-size:1.1em;font-weight:700}.wide{grid-column:1/-1}.image-side{border-left:1px solid var(--line);padding-left:18px;display:flex;flex-direction:column;gap:12px}.image-side strong{font-size:1.5em}.image-side small{color:var(--muted);font-size:1.15em}.image-side img{width:100%;height:430px;object-fit:contain;background:var(--surface-2);border:1px solid var(--line);border-radius:14px}.dialog-actions{padding:15px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
/* 入库/出库弹窗、居中提示和图片悬停预览。 */
#stock-dialog{width:min(520px,calc(100vw - 30px))}.stock-body{padding:20px;display:grid;gap:16px}#toast{position:fixed;left:50%;top:50%;background:#172b44;color:white;padding:16px 22px;border-radius:12px;opacity:0;transform:translate(-50%,-45%) scale(.96);transition:.2s;pointer-events:none;font-size:1.5em;font-weight:700;z-index:80;box-shadow:0 20px 70px #10182840;text-align:center;max-width:min(520px,calc(100vw - 34px))}#toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#image-hover{position:fixed;display:none;z-index:45;background:white;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 60px #10182840;padding:10px;pointer-events:none}#image-hover.show{display:block}#image-hover img{width:340px;height:280px;object-fit:contain}
/* BOM 比对颜色：绿色表示自动匹配，红色表示缺料/不匹配，橙色表示人工指定匹配。 */
.legend{display:flex;gap:10px;align-items:center;margin:0 0 12px;color:#475467;font-size:1.25em;flex-wrap:wrap}.legend span{display:inline-block;width:28px;height:16px;border:1px solid var(--line);border-radius:4px}.legend .matched{background:#dcfce7}.legend .unmatched{background:#fee2e2}.legend .manual{background:var(--orange)}.legend .selected{background:var(--selected)}.bom-wrap{max-height:calc(100vh - 250px)}.bom-table tr:hover td{background:var(--selected)}.matched-row td{background:#dcfce7}.unmatched-row td{background:#fee2e2}.manual-row td{background:var(--orange)}
.inline-check{display:flex;align-items:center;gap:7px;width:auto;color:var(--muted);font-size:1.15em}.inline-check input{width:auto}.pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px;color:var(--muted);font-size:1.25em}.pager button:disabled{opacity:.45;cursor:not-allowed}.issue-body{padding:22px;font-size:1.35em;line-height:1.8}.issue-body strong{color:var(--blue)}.issue-body .warn{color:var(--green);font-weight:700}
.manual-match-input{min-width:280px;font-size:1em;padding:7px 9px}.manual-match-input:disabled{opacity:.55;cursor:not-allowed}.legend strong{color:var(--text)}
/* 深色主题下单独加深 BOM 状态色，并提高文字对比度。 */
:root[data-theme=dark] .legend{color:#d1d5db}
:root[data-theme=dark] .matched-row td{background:#064e3b;color:#ecfdf5;border-color:#047857}
:root[data-theme=dark] .unmatched-row td{background:#7f1d1d;color:#fff1f2;border-color:#b91c1c}
:root[data-theme=dark] .manual-row td{background:#7c2d12;color:#fff7ed;border-color:#ea580c}
:root[data-theme=dark] .bom-table tr:hover td{background:#1e40af;color:#eff6ff}
:root[data-theme=dark] .legend .matched{background:#064e3b;border-color:#047857}
:root[data-theme=dark] .legend .unmatched{background:#7f1d1d;border-color:#b91c1c}
:root[data-theme=dark] .legend .manual{background:#7c2d12;border-color:#ea580c}
/* 设置页：显示设置与危险操作分栏，清空仓库作为危险区单独标红。 */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.setting-card{padding:22px;display:grid;gap:15px}.setting-card p{font-size:1.25em;line-height:1.7;color:#475467}.check-row{display:flex;align-items:center;gap:10px}.check-row input{width:auto}.danger-zone{border-color:#fecaca}
/* 响应式布局：窄屏时弹窗改成上下结构，左侧导航改成底部导航。 */
@media(max-width:1000px){.component-dialog-body{grid-template-columns:1fr}.image-side{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}.settings-grid{grid-template-columns:1fr}}
@media(max-width:900px){body{padding-bottom:72px}aside{width:100%;height:72px;padding:7px;inset:auto 0 0 0;z-index:20}.brand,footer{display:none}nav{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;height:100%}nav button{font-size:1.05em;text-align:center;padding:7px 3px}main{margin-left:0;width:100%;padding:18px}header{align-items:flex-start}.status{display:none}.metrics{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}.toolbar input{max-width:none}.toolbar .primary{flex:1}.table-wrap{max-height:calc(100vh - 245px)}}