/* ============ 0905 量产批准（PSW）· 组件规格严格对齐初稿 Axure 原型 ============
 * 主色 #0077FF · 主文字 #161C24 · 次文字 #96999C · 分隔线 #DCDDDE · 边框 #A2A7AF
 * 字体 PingFangSC（表头/标题 Semibold 650，强调 Medium 500）· 字号 12px 为主
 * 圆角 0~2px · 主按钮 56×28 蓝底白字 · 卡片阴影 0 1px 12px rgba(42,60,89,.10)
 * ========================================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'PingFangSC-Regular', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 12px; line-height: 1.6; color: #161C24; background: #F5F6F8; min-width: 2930px;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 12px; color: #161C24; outline: none; }
input[type="text"], input[type="date"], input[type="number"], select, textarea {
  border: 1px solid #DCDDDE; border-radius: 2px; padding: 4px 8px; background: #fff; width: 100%; height: 28px;
}
textarea { height: auto; }
input:focus, select:focus, textarea:focus { border-color: #0077FF; }
input:disabled, select:disabled, textarea:disabled { background: #F5F6F8; color: #96999C; }
input::placeholder, textarea::placeholder { color: #96999C; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #C9CDD4; border-radius: 2px; }

/* ---------- 骨架 ---------- */
#app { display: flex; width: 1920px; min-height: 100vh; }
#side { width: 200px; flex: none; background: #fff; border-right: 1px solid #DCDDDE; position: sticky; top: 0; height: 100vh; }
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#topbar { height: 48px; background: #fff; border-bottom: 1px solid #DCDDDE; display: flex; align-items: center;
  padding: 0 20px; gap: 18px; position: sticky; top: 0; z-index: 50; }
#view { padding: 12px 16px 40px; }

/* ---------- 左侧菜单（选中=蓝字，对齐初稿） ---------- */
.logo { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-bottom: 1px solid #F0F1F3; }
.logo .lg-badge { width: 24px; height: 24px; border-radius: 2px; background: #0077FF; color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.logo .lg-name { font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif; font-weight: 500;
  font-size: 14px; color: #161C24; }
.menu-group { padding: 14px 16px 6px; color: #96999C; font-size: 12px; }
.menu-item { display: flex; align-items: center; gap: 8px; margin: 2px 12px; padding: 8px 10px; border-radius: 2px;
  color: #161C24; font-size: 14px; cursor: pointer; }
.menu-item:hover { color: #0077FF; }
.menu-item.active { color: #0077FF; font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
  font-weight: 500; background: #F0F7FF; }
.side-foot { margin: 18px 16px; padding: 10px; background: #F7F8FA; border-radius: 2px; color: #96999C; line-height: 1.8; }

/* ---------- 顶栏 ---------- */
.crumb { color: #96999C; }
.crumb b { color: #161C24; font-weight: 650; }
.tb-spacer { flex: 1; }
.search-box { position: relative; width: 240px; }
.search-box input { padding-left: 26px; background: #F5F6F8; border-color: #F5F6F8; }
.search-box .ico { position: absolute; left: 8px; top: 6px; color: #96999C; }
.seg { display: inline-flex; border: 1px solid #DCDDDE; border-radius: 2px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: #fff; padding: 5px 14px; font-size: 12px; color: #393E45; border-right: 1px solid #DCDDDE; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: #0077FF; color: #fff; font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif; font-weight: 500; }
.bell { position: relative; width: 30px; height: 30px; border: 1px solid #DCDDDE; border-radius: 2px; background: #fff; font-size: 14px; }
.bell .dot { position: absolute; top: -7px; right: -7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #F53F3F; color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.user-chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px; border: 1px solid #DCDDDE; border-radius: 2px; background: #fff; }
.avatar { width: 22px; height: 22px; border-radius: 50%; background: #0077FF; color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; }
.role-name { font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif; font-weight: 500; }

/* ---------- 按钮（主 56×28 蓝底白字 / 次白底描边，圆角2） ---------- */
.btn { height: 28px; padding: 0 16px; min-width: 56px; border: 1px solid #DCDDDE; background: #fff; border-radius: 2px;
  font-size: 12px; color: #161C24; }
.btn:hover { color: #0077FF; border-color: #0077FF; }
.btn.primary { background: #0077FF; border-color: #0077FF; color: #fff; }
.btn.primary:hover { background: #0066DB; border-color: #0066DB; color: #fff; }
.btn.danger { background: #fff; border-color: #F53F3F; color: #F53F3F; }
.btn.danger:hover { background: #FFF1F0; }
.btn.warn { background: #fff; border-color: #D9A400; color: #B8860B; }
.btn.warn:hover { background: #FFFBE6; }
.btn.mini { height: 22px; padding: 0 10px; min-width: 0; font-size: 12px; }
.btn.link { height: auto; min-width: 0; border: 0; background: none; color: #0077FF; padding: 2px 6px; }
.btn.link:hover { text-decoration: underline; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 卡片（白块+淡阴影，初稿规格） ---------- */
.card { background: #fff; border-radius: 2px; box-shadow: 0 1px 12px rgba(42, 60, 89, 0.10); margin-bottom: 12px; }
.card-hd { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #F0F1F3; }
.card-hd .t { font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; font-weight: 650;
  font-size: 14px; color: #161C24; }
.card-hd .sub { color: #96999C; }
.card-hd .spacer { flex: 1; }
.card-bd { padding: 14px 16px; }

/* ---------- 状态标签（浅底 2px 圆角） ---------- */
.tag { display: inline-block; padding: 1px 10px; border-radius: 2px; font-size: 12px; white-space: nowrap; line-height: 20px; }
.tag.red { color: #D93026; background: #FDECEC; }
.tag.orange { color: #D46B08; background: #FFF3E6; }
.tag.blue { color: #0077FF; background: #EBF5FF; }
.tag.green { color: #23A34B; background: #EAF8EF; }
.tag.gray { color: #51555B; background: #F2F3F5; }
.tag.yellow { color: #B8860B; background: #FFF8DC; }
.tag.purple { color: #642AB5; background: #F3EDFD; }

/* ---------- 查询区 ---------- */
.q-grid { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.q-item { display: flex; align-items: center; gap: 8px; width: 356px; }
.q-item > label { width: 118px; text-align: right; color: #393E45; flex: none; }
.q-foot { display: flex; gap: 10px; margin-top: 12px; padding-left: 126px; align-items: center; }
.fold-tip { color: #0077FF; cursor: pointer; user-select: none; }

/* ---------- 表格（表头白底 Semibold 650 h52 / 行 h50 / 线 #DCDDDE） ---------- */
.tbl-wrap { overflow: auto; max-height: 660px; border-bottom: 1px solid #DCDDDE; }
table.grid { border-collapse: separate; border-spacing: 0; width: 100%; background: #fff; }
table.grid th, table.grid td { border-bottom: 1px solid #DCDDDE; padding: 12px 12px; text-align: left; white-space: nowrap; }
table.grid th { font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; font-weight: 650;
  font-size: 12px; color: #161C24; background: #fff; position: sticky; top: 0; z-index: 2; box-shadow: 1px 0 0 0 #DCDDDE inset, 0 -1px 0 0 #DCDDDE inset; }
table.grid td { font-size: 12px; color: #393E45; box-shadow: 1px 0 0 0 #DCDDDE inset; }
table.grid tr:hover td { background: #F7FAFF; }
table.grid td.op, table.grid th.op { position: sticky; right: 0; background: #fff; box-shadow: -1px 0 0 0 #DCDDDE inset; }
table.grid td.op .btn.link { white-space: nowrap; padding: 2px 4px; }
.pager { display: flex; align-items: center; gap: 8px; padding: 12px 4px 2px; color: #51555B; }
.pager .pg { min-width: 26px; height: 26px; border: 1px solid #DCDDDE; border-radius: 2px; background: #fff; font-size: 12px; }
.pager .pg.on { background: #0077FF; color: #fff; border-color: #0077FF; }
.pager select { width: 64px; }

/* ---------- 详情头部 ---------- */
.detail-head { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 18px; }
.dh-item label { display: block; color: #96999C; }
.dh-item .v { font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif; font-weight: 500; color: #161C24; }
.no-line { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.no-line .no { font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; font-weight: 650; font-size: 16px; }
.hint-bar { display: flex; align-items: center; gap: 8px; border-radius: 2px; padding: 8px 12px; margin-top: 10px;
  background: #F0F7FF; border: 1px solid #BFE0FF; color: #393E45; }
.hint-bar.gray { background: #F7F8FA; border-color: #DCDDDE; }

/* ---------- 表单网格 ---------- */
.f-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 20px; }
.f-grid .col-2 { grid-column: span 2; }
.f-grid .col-4 { grid-column: span 4; }
.f-item > label { display: block; color: #393E45; margin-bottom: 4px; }
.f-item > label .req { color: #F53F3F; margin-right: 3px; }
.f-item .v { min-height: 28px; padding: 4px 0; color: #161C24; word-break: break-all; }
.radio-line { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 6px; }
.radio-line label { display: inline-flex; align-items: center; gap: 5px; color: #161C24; margin: 0; cursor: pointer; }
.radio-line input, .chk-grid input { accent-color: #0077FF; }
.chk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; padding-top: 6px; }
.level-tip { background: #F7F8FA; border: 1px dashed #DCDDDE; border-radius: 2px; padding: 8px 12px; margin-top: 8px;
  color: #51555B; line-height: 1.9; }
.declare-box { background: #FAFBFC; border: 1px solid #E8EAEE; border-radius: 2px; padding: 12px 16px; line-height: 2.1; color: #393E45; }
.sign-img { font-family: 'KaiTi', 'STKaiti', serif; font-size: 22px; color: #123D9B; }

/* ---------- 评审三级签核（检查→审核→批准） ---------- */
.appr-chain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.appr-card { border: 1px solid #E8EAEE; border-radius: 2px; padding: 10px 14px; background: #fff; }
.appr-card .hd { display: flex; align-items: center; gap: 8px;
  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; font-weight: 650; margin-bottom: 6px; }
.appr-card .meta { color: #96999C; }
.appr-card .concl { margin-top: 6px; color: #393E45; }
.appr-card.pending { background: #FAFBFC; border-style: dashed; color: #96999C; }
.appr-arrow { align-self: center; color: #96999C; font-size: 16px; }
.banner { border-radius: 2px; padding: 10px 14px; margin-top: 12px; display: flex; align-items: center; gap: 12px; line-height: 1.8; }
.banner.yellow { border: 1px solid #F5DE8C; background: #FFF8DC; }
.banner.red { border: 1px solid #F5B5B1; background: #FDECEC; }
.banner.green { border: 1px solid #A9E4BC; background: #EAF8EF; }

/* ---------- 步骤条 ---------- */
.stepper { display: flex; align-items: flex-start; padding: 8px 4px 2px; }
.step { flex: 1; text-align: center; position: relative; }
.step .nd { width: 22px; height: 22px; border-radius: 50%; background: #EDEFF2; color: #96999C; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; position: relative; z-index: 2; }
.step .lb { margin-top: 4px; color: #96999C; }
.step::before, .step::after { content: ''; position: absolute; top: 11px; height: 2px; background: #EDEFF2; width: 50%; }
.step::before { left: 0; } .step::after { right: 0; }
.step:first-child::before, .step:last-child::after { display: none; }
.step.done .nd, .step.cur .nd { background: #0077FF; color: #fff; }
.step.done::before, .step.done::after, .step.cur::before { background: #0077FF; }
.step.cur .nd { box-shadow: 0 0 0 4px rgba(0, 119, 255, .12); }
.step.cur .lb { color: #0077FF; font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif; font-weight: 500; }
.step.warn .nd { background: #D9A400; }
.step.bad .nd { background: #F53F3F; }

/* ---------- 时间线 ---------- */
.tl { padding-left: 6px; }
.tl-item { position: relative; padding: 0 0 14px 20px; }
.tl-item::before { content: ''; position: absolute; left: 5px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: #0077FF; }
.tl-item::after { content: ''; position: absolute; left: 8.5px; top: 18px; bottom: -2px; width: 1px; background: #E8EAEE; }
.tl-item:last-child::after { display: none; }
.tl-item .tm { color: #96999C; margin-right: 8px; }
.tl-item .who { font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif; font-weight: 500; margin-right: 8px; }
.tl-item .dt { color: #51555B; }

/* ---------- 附件表（初稿详情同款：白底细线表） ---------- */
table.files { border-collapse: collapse; width: 100%; background: #fff; }
table.files th, table.files td { border: 1px solid #DCDDDE; padding: 8px 12px; text-align: left; font-size: 12px; }
table.files th { font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; font-weight: 650; background: #FAFBFC; }

/* ---------- 弹窗 ---------- */
#modal-root { position: fixed; inset: 0; z-index: 1000; display: none; }
#modal-root.open { display: block; }
.mask { position: absolute; inset: 0; background: rgba(22, 28, 36, .45); }
.modal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 2px;
  width: 640px; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 6px 24px rgba(42, 60, 89, 0.25); }
.modal.w800 { width: 800px; } .modal.w960 { width: 960px; }
.modal .m-hd { display: flex; align-items: center; padding: 12px 18px; border-bottom: 1px solid #F0F1F3;
  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; font-weight: 650; font-size: 14px; }
.modal .m-hd .x { margin-left: auto; border: 0; background: none; font-size: 18px; color: #96999C; }
.modal .m-bd { padding: 16px 18px; overflow: auto; }
.modal .m-ft { padding: 12px 18px; border-top: 1px solid #F0F1F3; display: flex; justify-content: flex-end; gap: 10px; }
.m-tip { background: #F7F8FA; border: 1px solid #E8EAEE; border-radius: 2px; padding: 8px 12px; color: #51555B;
  margin-bottom: 12px; line-height: 1.8; }
.m-tip.warn { background: #FFF8DC; border-color: #F5DE8C; }
.m-tip.red { background: #FDECEC; border-color: #F5B5B1; }
.sum-tbl { border-collapse: collapse; width: 100%; margin-bottom: 12px; }
.sum-tbl td { border: 1px solid #DCDDDE; padding: 6px 10px; }
.sum-tbl td:first-child { width: 130px; background: #FAFBFC; color: #51555B; }

/* ---------- 消息下拉 ---------- */
.msg-pop { position: fixed; top: 52px; right: 150px; width: 430px; max-height: 480px; overflow: auto; background: #fff;
  border: 1px solid #DCDDDE; border-radius: 2px; box-shadow: 0 6px 24px rgba(42, 60, 89, 0.18); z-index: 900; display: none; }
.msg-pop.open { display: block; }
.msg-pop .mp-hd { padding: 10px 14px;
  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; font-weight: 650;
  border-bottom: 1px solid #F0F1F3; }
.msg-item { padding: 10px 14px; border-bottom: 1px solid #F5F6F8; cursor: pointer; }
.msg-item:hover { background: #F7FAFF; }
.msg-item .mt { display: flex; gap: 8px; align-items: center;
  font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif; font-weight: 500; }
.msg-item .mt .tag { flex: none; }
.msg-item .md { color: #51555B; margin-top: 2px; }
.msg-item .mm { color: #96999C; margin-top: 2px; }
.msg-item.unread .mt::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #F53F3F; }

/* ---------- toast ---------- */
#toast-root { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex;
  flex-direction: column; gap: 8px; align-items: center; }
.toast { background: #161C24; color: #fff; border-radius: 2px; padding: 8px 18px; font-size: 12px; opacity: .95;
  box-shadow: 0 6px 24px rgba(42, 60, 89, .25); }
.toast.ok { background: #10632E; } .toast.err { background: #B4130F; }

.empty-tip { text-align: center; color: #96999C; padding: 40px 0; }