@charset "UTF-8";
/* V4 新增的样式：支持型号、教程资料、扫描、重建四个分类用到的组件。
   ui.css（V1）、ui-v2.css（V2）、ui-v3.css（V3）都没有改动。
   只按电脑屏幕设计（1366 宽及以上），没有做手机界面。 */

/* ---------- 上面一排现在有 13 个一级分类：窄一些的屏幕上不显示小图标，保证排成一排 ---------- */
@media(max-width:1700px){.pnav svg{display:none}}
@media(max-width:1500px){.pnav{padding:8px 10px}.desktop.v3 .topnav{gap:14px;padding-left:20px}}

/* ---------- 通用小件 ---------- */
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
label.btn{cursor:pointer}
.panel-foot{padding:14px 22px;border-top:1px solid #edf0f5;display:flex;justify-content:flex-end;gap:10px}
.panel-head small{font-size:11px;color:#94a0b1;font-weight:400}
.radio-inline{display:flex;gap:20px;align-items:center;min-height:42px}
.radio-inline label{display:flex;align-items:center;gap:7px;font-size:12px;color:#51637b;cursor:pointer}
.radio-inline input{accent-color:var(--blue);padding:0;box-shadow:none}
.field>span{font-size:12px;color:#5e7089}
.bulk-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 20px;background:#f7faff;border-bottom:1px solid #e6edf8;font-size:12px;color:#51637b}
.bulk-bar b{color:#2859c5}
.bulk-bar span{margin-right:6px}
td input[type=checkbox]{accent-color:var(--blue);width:15px;height:15px;padding:0}
.state-dot{width:7px;height:7px;border-radius:50%;background:#c6cfdb;flex:none}
.state-dot.green{background:#2fa886}.state-dot.blue{background:#5b8bea}.state-dot.amber{background:#e2a93b}
.danger-text{color:#c6444b!important}

/* ---------- 图片：显示、上传框 ---------- */
.pic{border:1px solid #e3e9f1;border-radius:8px;background:#f7f9fc;display:flex;align-items:center;justify-content:center;overflow:hidden;height:190px}
.pic img,.pic svg{max-width:100%;max-height:100%;display:block;object-fit:contain}
.pic.demo svg{height:100%;width:auto}
.pic.empty{flex-direction:column;gap:9px;color:#a3b0c2;font-size:11px;border-style:dashed;text-align:center;padding:0 14px;line-height:1.6}
.pic.empty svg{width:26px;height:26px;color:#c2cbd7}
.upload-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.upload-box{border:1px dashed #cdd8e8;border-radius:10px;padding:13px;display:flex;flex-direction:column;gap:10px;background:#fbfcfe;min-width:0}
.upload-box.has{border-style:solid;border-color:#dfe6ef;background:#fff}
.upload-box.over{border-color:#3b6fe0;border-style:solid;background:#eef4ff}
.upload-box.over .pic{background:#e3ecff}
.upload-title{font-size:12px;color:#51637b;font-weight:600;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.upload-title small{font-weight:400;color:#93a2b6;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:62%}
.upload-box .pic{height:170px}
.upload-actions{display:flex;gap:8px;flex-wrap:wrap}
.upload-actions .btn svg{width:13px;height:13px}

/* ---------- “用户端看到的样子”：预览框 ---------- */
.client-frame{border:1px solid #d5deea;border-radius:10px;overflow:hidden;background:#fff}
.client-tabs{display:flex;align-items:center;gap:4px;padding:8px 10px;background:#f1f4f9;border-bottom:1px solid #e1e7f0;font-size:11px;color:#7b8ba1}
.client-tabs span{padding:5px 11px;border-radius:6px;white-space:nowrap}
.client-tabs span.on{background:#2c5fd4;color:#fff}
.client-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #edf0f5;font-size:11px;color:#8a98ab;flex-wrap:wrap}
.client-chip{background:#fff;border:1px solid #dce3ed;border-radius:6px;padding:6px 12px;font-size:11px;color:#51637b}
.client-chip.on{background:#2c5fd4;border-color:#2c5fd4;color:#fff}
.client-bar .search{flex:1;max-width:260px;min-width:150px}
.client-bar>span{margin-left:auto}
.client-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.client-list{border-right:1px solid #edf0f5;max-height:430px;overflow:auto}
.client-list table{width:100%}
.client-list tbody tr{cursor:pointer}
.client-list tbody tr:hover{background:#f6f9ff}
.client-list tbody tr.on{background:#eef4ff;box-shadow:inset 3px 0 0 #3b6fe0}
.client-list td,.client-list th{padding:10px 12px;font-size:11px;white-space:nowrap}
.client-card{padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.client-card>small{font-size:10px;color:#9aa7b9;letter-spacing:.4px}
.client-card>strong{font-size:15px;color:#22344d;word-break:break-all;min-height:21px}
.client-card p{font-size:11px;color:#6d7d94;line-height:1.8}
.client-card p b{color:#34506f;font-weight:600}
.client-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:6px 0}
.client-photos figure{margin:0;display:flex;flex-direction:column;gap:7px;min-width:0}
.client-photos figcaption{font-size:11px;color:#51637b;display:flex;align-items:center;gap:6px;white-space:nowrap}
.client-photos figcaption i{font-style:normal;font-size:10px;background:#eef4ff;color:#3b6fe0;border-radius:4px;padding:1px 5px}
.client-photos figcaption span{margin-left:auto;color:#9aa7b9;font-size:10px;overflow:hidden;text-overflow:ellipsis}
.client-photos .pic{height:230px}
.client-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:50px 20px;color:#9aa7b9;font-size:12px}
.client-empty svg{width:42px;height:42px;color:#c2cbd7}
.client-empty strong{color:#51637b;font-size:14px}
.client-guide{padding:16px 18px 20px}
.client-guide h3{font-size:14px;color:#22344d;margin-bottom:14px}
.guide-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.guide-steps li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px}
.guide-steps li>i{font-style:normal;width:26px;height:26px;border-radius:50%;background:#2c5fd4;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
.guide-steps strong,.guide-tools strong{font-size:13px;color:#2b405b;display:block;line-height:1.6}
.guide-steps p,.guide-tools p{font-size:12px;color:#5e7089;line-height:1.85;white-space:pre-wrap;margin-top:4px;word-break:break-word}
.guide-steps .pic{margin-top:9px;height:170px}
.guide-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.guide-tools figure{margin:0;border:1px solid #e6ebf2;border-radius:9px;overflow:hidden;min-width:0}
.guide-tools .pic{border:0;border-radius:0;height:130px;border-bottom:1px solid #edf0f5}
.guide-tools figcaption{padding:11px 13px}

/* ---------- 支持型号：新增 / 编辑 ---------- */
.model-edit{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start}
.model-edit>.panel:last-child{position:sticky;top:0}
.model-edit .form-actions{margin-top:22px}
.model-edit .check-label{font-size:12px;color:#5e7089}
.split-pane .client-body{grid-template-columns:minmax(0,1fr)}
.split-pane .client-list{border-right:0;border-bottom:1px solid #edf0f5;max-height:232px}
.split-pane .client-photos .pic{height:250px}
@media(min-width:1680px){.split-pane .client-body{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}.split-pane .client-list{border-right:1px solid #edf0f5;border-bottom:0;max-height:430px}}
textarea[data-import]{width:100%;font-family:Consolas,"Cascadia Code",monospace;font-size:12px;line-height:1.7;resize:vertical;white-space:pre;overflow:auto}

/* ---------- 教程资料：专区选择、状态条、编辑卡 ---------- */
.zone-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.zone-chip{display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid #dfe6ef;border-radius:8px;background:#fff;font-size:12px;color:#51637b;white-space:nowrap}
.zone-chip small{font-size:10px;color:#9aa7b9}
.zone-chip:hover{border-color:#b9c8e4}
.zone-chip.active{border-color:#3b6fe0;background:#eef4ff;color:#2859c5;font-weight:600}
.guide-status{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 18px;margin-bottom:18px}
.guide-status.amber{border-color:#f3dfb4;background:#fffaf0}
.guide-state{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:#51637b}
.guide-state small{color:#9aa7b9;font-size:11px}
.guide-actions{display:flex;gap:8px;flex-wrap:wrap}
.guide-edit{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px;align-items:start}
.guide-edit>*{min-width:0;margin-bottom:0}
.guide-side{position:sticky;top:0;display:flex;flex-direction:column;max-height:calc(100vh - 190px)}
.guide-side .panel-body{overflow:auto}
.guide-side .tabs{margin:0;border:0;gap:16px}
.guide-side .tab{padding:0 2px 3px;font-size:12px}
.block-card{border:1px solid #e1e7f0;border-radius:10px;margin-bottom:14px;background:#fff}
.block-card header{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:#f7f9fc;border-bottom:1px solid #edf0f5;border-radius:10px 10px 0 0}
.block-no{font-size:12px;font-weight:650;color:#34506f}
.block-tools{display:flex;gap:2px}
.block-tools button{background:none;color:#5b78b5;font-size:11px;padding:5px 9px;border-radius:6px}
.block-tools button:hover:not(:disabled){background:#eaf0fb}
.block-tools button:disabled{color:#c2cbd7;cursor:default}
.block-body{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:16px;padding:14px}
.block-fields{display:flex;flex-direction:column;gap:13px;min-width:0}
.block-fields textarea{resize:vertical;min-height:104px;line-height:1.7}
.block-body .upload-box{padding:10px;align-self:start}
.block-body .upload-box .pic{height:122px}
.block-empty{border:1px dashed #d5deea;border-radius:10px;padding:36px 20px;text-align:center;color:#93a2b6;font-size:12px;margin-bottom:14px;line-height:1.8}
.block-empty svg{width:28px;height:28px;margin-bottom:8px;color:#b7c3d4}
.add-block{width:100%;border:1px dashed #b9c8e4;background:#f7faff;color:#3b6fe0;border-radius:10px;padding:12px;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}
.add-block svg{width:15px;height:15px}
.add-block:hover{background:#eef4ff}
.guide-cell{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.guide-cell .badge{margin-left:0}

/* ---------- 扫描记录：错误细项 ---------- */
.err-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.err-grid div{border:1px solid #e6ebf2;border-radius:8px;padding:9px 4px;text-align:center}
.err-grid small{display:block;font-size:10px;color:#93a2b6;white-space:nowrap}
.err-grid strong{font-size:15px;color:#34506f;display:block;margin-top:3px}
.err-grid .hot{border-color:#f3c9cd;background:#fff5f5}
.err-grid .hot strong{color:#c6444b}
.err-grid+.caption-note{margin-top:10px}

/* ---------- “演示操作”面板：五种动作各一个页签 ---------- */
.demo-tabs{display:flex;gap:4px;padding:9px 12px;border-bottom:1px solid #eef2f6;background:#f8fafc}
.demo-tabs button{flex:1;background:none;border-radius:6px;padding:7px 4px;font-size:11px;color:#6d7d94;white-space:nowrap}
.demo-tabs button:hover{background:#eef2f8}
.demo-tabs button.on{background:#2c5fd4;color:#fff}