/* ===== 春风 SRM 原型 · 共享样式 =====
   主色 #02A7F0 / 链接 #0079FE / 表头 #7F7F7F·#A6A6A6 / 边框 #E4E4E4 / 字号 14px */
:root{
  --primary:#02A7F0; --primary-d:#0385C0; --link:#0079FE;
  --text:#333; --text2:#666; --text3:#999;
  --border:#E4E4E4; --bg:#F2F3F5; --card:#fff; --red:#D9001B; --green:#0A8F4F; --orange:#D48806;
  --side:#00182E; --side-top:#000C17; --th:#7F7F7F; --th2:#A6A6A6;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Microsoft YaHei','PingFang SC',Arial,sans-serif;font-size:14px;color:var(--text);
  background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none}
a{cursor:pointer;text-decoration:none}
#app{display:flex;align-items:flex-start;width:1840px}

/* ===== 左侧深色导航 ===== */
.side{width:240px;flex-shrink:0;background:var(--side);min-height:100vh;padding-bottom:24px}
.side .side-logo{height:48px;background:var(--side-top);display:flex;align-items:center;gap:8px;padding:0 16px;color:#fff;font-size:15px;font-weight:700}
.side .side-logo i{width:18px;height:18px;border-radius:3px;background:var(--primary);display:inline-block}
.side .side-group{padding:14px 16px 6px;color:#7A8BA0;font-size:12px}
.side .side-item{display:flex;align-items:center;height:40px;padding:0 16px;color:#C6D1DE;font-size:13.5px;border-left:3px solid transparent}
.side .side-item:hover{background:rgba(255,255,255,.06);color:#fff}
.side .side-item.on{background:rgba(2,167,240,.16);color:#fff;border-left-color:var(--primary);font-weight:600}

/* ===== 主区 ===== */
.main{width:1600px;flex-shrink:0;min-height:100vh;background:var(--bg)}
.topbar{height:48px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:26px;position:sticky;top:0;z-index:50}
.topbar .brand{font-size:14px;font-weight:700;color:var(--primary);white-space:nowrap}
.topbar nav{display:flex;gap:4px;flex:1}
.topbar nav a{font-size:13.5px;color:var(--text2);padding:6px 12px;border-radius:3px}
.topbar nav a.on{color:var(--primary);background:#E8F6FE;font-weight:600}
.topbar .user{font-size:12.5px;color:var(--text3);white-space:nowrap}
.crumb{padding:12px 20px 0;font-size:12.5px;color:var(--text3)}
.crumb b{color:var(--text2);font-weight:400}
.crumb a{color:var(--link)}
.wrap{padding:12px 20px 40px}

/* ===== 页面标题 ===== */
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:12px}
.page-head h1{font-size:18px;font-weight:700;color:#1A1A1A;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.page-head h1 .tag{font-size:12px;font-weight:400;color:var(--text3);border:1px solid var(--border);border-radius:2px;padding:1px 6px;background:#fff}
.page-head h1 .st{font-size:12px;font-weight:400;border-radius:2px;padding:1px 6px}
.st.draft{color:var(--orange);border:1px solid #F0D3A0;background:#FFFBF0}
.st.done{color:var(--green);border:1px solid #B7E3C9;background:#F0FBF4}
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn{height:32px;padding:0 14px;font-size:13.5px;border:1px solid var(--border);background:#fff;color:var(--text);border-radius:3px;white-space:nowrap}
.btn:hover{border-color:var(--primary);color:var(--primary)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-d);color:#fff}
.btn.ghost{color:var(--text2)}

/* ===== 卡片 ===== */
.card{background:var(--card);border:1px solid var(--border);border-radius:3px;margin-bottom:16px}
.card-head{min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--border);gap:12px}
.card-head .card-title{font-size:14px;font-weight:700;color:#1A1A1A;display:flex;align-items:center;gap:8px;white-space:nowrap}
.card-head .card-title::before{content:'';width:3px;height:14px;background:var(--primary);display:inline-block}
.src{font-size:12px;color:var(--text3);text-align:right;line-height:1.7}
.src b{color:var(--text2)}
.src .pp{color:var(--link);font-family:Consolas,monospace}
.card-body{padding:14px}

/* ===== 查询区 ===== */
.query{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 16px}
.qf{display:flex;align-items:center;gap:8px}
.qf label{font-size:13px;color:var(--text2);white-space:nowrap;min-width:96px;text-align:right}
.qf input,.qf select{flex:1;height:30px;border:1px solid var(--border);border-radius:3px;padding:0 8px;font-size:13px;font-family:inherit;color:var(--text);background:#fff;outline:none;min-width:0}
.qf input:focus,.qf select:focus{border-color:var(--primary)}
.query-bar{display:flex;justify-content:center;gap:8px;margin-top:14px}

/* ===== 表格 ===== */
.tbl-wrap{overflow-x:auto}
table.grid{border-collapse:collapse;font-size:13px;background:#fff;width:100%}
table.grid th,table.grid td{border:1px solid var(--border);padding:8px 10px;text-align:center;white-space:nowrap}
table.grid thead th{background:var(--th);color:#fff;font-weight:700;height:42px;border-color:#fff}
table.grid tbody td{height:42px}
table.grid tbody tr:hover td{background:#F7FBFE}
table.grid tbody td.txt{text-align:left;white-space:normal;line-height:1.5}
table.grid tr.newrow td{background:#F0FBF4}
table.grid tr.newrow:hover td{background:#E6F7EC}
table.grid tr.updrow td{background:#FFFBF0}
.toolbar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.toolbar .spacer{flex:1}
.toolbar .total{font-size:13px;color:var(--text2)}
.pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 14px;font-size:13px;color:var(--text2)}
.pager a{min-width:28px;height:28px;line-height:28px;text-align:center;border:1px solid var(--border);border-radius:3px;color:var(--text2);padding:0 6px}
.pager a.on{border-color:var(--primary);color:var(--primary);font-weight:700}

/* ===== 标记 ===== */
.badge{display:inline-block;font-size:12px;border-radius:2px;padding:1px 6px;border:1px solid}
.badge.add{color:var(--green);border-color:#B7E3C9;background:#F0FBF4}
.badge.upd{color:var(--orange);border-color:#F0D3A0;background:#FFFBF0}
.badge.err{color:var(--red);border-color:#F0B3BB;background:#FFF5F6}
.badge.tar{color:var(--primary-d);border-color:#CCE8F8;background:#EAF6FD}
.badge.none{color:var(--text2);border-color:var(--border);background:#FAFAFA}
.badge.risk-h{color:var(--red);border-color:#F0B3BB;background:#FFF5F6}
.badge.risk-m{color:var(--orange);border-color:#F0D3A0;background:#FFFBF0}
.link{color:var(--link)}
.link.danger{color:var(--red)}
.link.dim{color:var(--text3)}
.red{color:var(--red)}
.green{color:var(--green)}
.dim{color:var(--text3)}
.mono{font-family:Consolas,monospace;font-size:12.5px}

/* ===== 详情表单 ===== */
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 18px}
.ff{display:flex;flex-direction:column;gap:5px}
.ff label{font-size:13px;color:var(--text2)}
.ff label i{color:var(--red);font-style:normal;margin-right:2px}
.ff input,.ff select{height:30px;border:1px solid var(--border);border-radius:3px;padding:0 8px;font-size:13px;color:var(--text);background:#fff;font-family:inherit;outline:none;min-width:0}
.ff input[readonly],.ff select.disabled{background:#F7F8FA;color:var(--text2)}
.form-sub{margin:18px 0 10px;font-size:13.5px;font-weight:700;color:#1A1A1A;display:flex;align-items:center;gap:8px}
.form-sub::before{content:'';width:3px;height:13px;background:#B9C2CC;display:inline-block}

/* ===== 跟产审核表（成熟度详情） ===== */
table.fu{border-collapse:collapse;font-size:12.5px;table-layout:fixed;width:1740px}
table.fu th,table.fu td{border:1px solid #fff;padding:6px 7px;text-align:center;vertical-align:middle}
table.fu thead tr.h1 th{background:#5B5B5B;color:#fff;font-weight:700;height:30px}
table.fu thead tr.h2 th{background:var(--th2);color:#fff;font-weight:700;height:40px;line-height:1.3}
table.fu thead tr.h2 th.ro-h{background:#BDBDBD}
table.fu tbody td{background:#fff;border-color:var(--border);height:46px}
table.fu tbody td.ro{background:#F7F8FA;color:var(--text2)}
table.fu tbody td.stage{font-weight:700;color:#1A1A1A;background:#FAFBFC}
table.fu tbody td.txt{text-align:left;line-height:1.4;font-size:12px}
table.fu tbody tr:hover td{background:#F7FBFE}
table.fu tbody tr:hover td.ro{background:#F0F2F5}
.srcbar{font-size:12px;color:var(--text3);padding:10px 2px 0;line-height:1.9}
.srcbar .pp{color:var(--link);font-family:Consolas,monospace}

/* ===== 质量爬坡阶段表（爬坡详情，贴图 2/3/4） ===== */
.climb-block{border:1px solid var(--border);border-radius:3px;margin-bottom:14px}
.climb-block:last-child{margin-bottom:0}
.climb-bar{height:40px;display:flex;align-items:center;gap:14px;padding:0 12px;background:#FAFBFC;border-bottom:1px solid var(--border)}
.climb-bar .climb-title{color:var(--primary);font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:6px}
.climb-bar .climb-title::before{content:'▾';font-size:11px;color:var(--primary)}
.stage-box{height:26px;min-width:104px;border:1px solid var(--border);border-radius:2px;background:#fff;font-size:13px;
  color:var(--text);display:inline-flex;align-items:center;justify-content:space-between;padding:0 8px;gap:10px}
.stage-box i{font-style:normal;color:var(--text3);font-size:10px}
.climb-bar .src{margin-left:auto}
table.climb{border-collapse:collapse;font-size:12.5px;background:#fff;table-layout:fixed}
table.climb th,table.climb td{border:1px solid #fff;padding:6px 6px;text-align:center;vertical-align:middle}
table.climb thead tr.hdr1 th{background:var(--th);color:#fff;font-weight:700;height:30px;font-size:12.5px}
table.climb thead tr.hdr2 th{background:var(--th2);color:#fff;font-weight:700;height:46px;font-size:12.5px;line-height:1.35}
table.climb thead th.vmid{background:var(--th2);color:#fff;font-weight:700}
table.climb tbody td{height:48px;color:var(--text);background:#fff;border-color:var(--border)}
table.climb tbody tr:hover td{background:#F7FBFE}
table.climb td.ok{color:var(--green)}
table.climb td.ng{color:var(--red);font-weight:700}
table.climb td.date{white-space:nowrap}
table.climb td.txt{text-align:left;line-height:1.45;font-size:12px}
table.climb.p31{width:2385px}
table.climb.p32{width:2715px}

/* ===== 弹窗 ===== */
.mask{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:900}
.mask.on{display:block}
.modal{display:none;position:fixed;left:50%;top:12vh;transform:translateX(-50%);width:640px;background:#fff;border-radius:4px;z-index:901;box-shadow:0 8px 30px rgba(0,0,0,.22)}
.modal.on{display:block}
.modal .mh{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border)}
.modal .mh b{font-size:15px;color:#1A1A1A}
.modal .mh span{cursor:pointer;color:var(--text3);font-size:16px}
.modal .mb{padding:18px 20px;max-height:60vh;overflow-y:auto}
.modal .mf{display:flex;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:1px solid var(--border)}
.tip{font-size:13px;color:var(--text2);line-height:1.8}
.tip.sm{font-size:12.5px;color:var(--text3);margin-top:8px}
.drop{margin:14px 0 8px;border:1px dashed #B9C2CC;border-radius:4px;background:#FAFBFC;padding:26px 16px;text-align:center;cursor:pointer}
.drop:hover{border-color:var(--primary);background:#F4FBFF}
.drop .ic{font-size:22px;color:var(--primary)}
.drop .dt{font-size:13.5px;color:var(--text2);margin-top:8px}
.drop .ds{font-size:12px;color:var(--text3);margin-top:6px}
.filerow{display:none;align-items:center;gap:8px;margin-top:10px;background:#F0FBF4;border:1px solid #B7E3C9;border-radius:3px;padding:8px 10px;font-size:13px}
.filerow.on{display:flex}
.filerow .ok{color:var(--green);font-weight:700}
.hint{font-size:12px;color:var(--text3);margin-top:12px;line-height:1.9}
.sheet-tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:12px}
.sheet-tbl th,.sheet-tbl td{border:1px solid var(--border);padding:6px 8px;text-align:left;vertical-align:top}
.sheet-tbl th{background:#F2F5F8;font-weight:700}
.sheet-tbl td.mono{font-family:Consolas,monospace;font-size:12px;color:#555}

/* ===== 导入预览 ===== */
.sum{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
.sum .s{background:#fff;border:1px solid var(--border);border-radius:3px;padding:12px 14px}
.sum .s .k{font-size:12.5px;color:var(--text3)}
.sum .s .v{font-size:22px;font-weight:700;color:#1A1A1A;margin-top:2px}
.sum .s .v.g{color:var(--green)} .sum .s .v.o{color:var(--orange)} .sum .s .v.r{color:var(--red)}
.alert{border-radius:3px;padding:12px 14px;font-size:13px;line-height:1.9;margin:0 0 14px}
.alert.warn{background:#FFFBF0;border:1px solid #F0D3A0;color:#7A5200}
.alert.warn b{color:var(--red)}
.alert.info{background:#EAF6FD;border:1px solid #CCE8F8;color:#0B3B5A}
.foot-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px}

/* ===== 关联关系块 ===== */
.rel{display:flex;align-items:center;gap:10px;background:#EAF6FD;border:1px solid #CCE8F8;border-radius:3px;padding:10px 12px;font-size:13px;color:#0B3B5A;line-height:1.8;flex-wrap:wrap}
.rel b{font-family:Consolas,monospace;color:var(--link)}
.rel .arrow{color:var(--primary);font-weight:700}
.rel-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rel-card{border:1px solid var(--border);border-radius:3px;padding:12px 14px;background:#fff}
.rel-card .rk{font-size:12.5px;color:var(--text3)}
.rel-card .rv{font-size:15px;font-weight:700;margin-top:2px}
.rel-card .rv a{color:var(--link);font-family:Consolas,monospace}

/* ===== toast ===== */
#toast{position:fixed;left:50%;bottom:60px;transform:translateX(-50%);background:rgba(0,0,0,.85);color:#fff;
  font-size:13px;padding:10px 18px;border-radius:3px;z-index:999;display:none;max-width:960px;line-height:1.7}