:root{
  --bg:#f4f6fa; --card:#fff; --line:#e4e8f0; --text:#1a2233; --muted:#6b7686;
  --brand:#2f6bff; --brand-dark:#1f4fd8; --green:#16a34a; --red:#dc2626;
  --orange:#ea8a04; --purple:#7c3aed; --cyan:#0891b2; --dark:#111827;
  --radius:12px; --shadow:0 1px 3px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.65 "Noto Sans CJK SC","Microsoft YaHei",system-ui,-apple-system,sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 12px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.topbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar .inner{max-width:1180px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px}
.logo{font-size:17px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}
.logo span{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#2f6bff,#7c3aed);display:inline-block}
.nav{display:flex;gap:16px;margin-left:8px;flex:1}
.nav a{color:var(--muted);font-weight:500}
.nav a.active,.nav a:hover{color:var(--brand);text-decoration:none}
.main{padding:26px 0 60px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:18px}
.card h2{font-size:16px}
.card.center{text-align:center;padding:48px 20px}
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:9px 16px;border-radius:9px;border:1px solid var(--brand);background:var(--brand);color:#fff;font-weight:600;cursor:pointer;font-size:13.5px}
.btn:hover{background:var(--brand-dark);text-decoration:none}
.btn.ghost{background:#fff;color:var(--brand)}
.btn.gray{background:#fff;color:var(--muted);border-color:var(--line)}
.btn.danger{background:#fff;color:var(--red);border-color:#f3c3c3}
.btn.sm{padding:5px 11px;font-size:12.5px;border-radius:8px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{background:#fafbfe;color:var(--muted);font-weight:600;white-space:nowrap}
tr:hover td{background:#fcfdff}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:600;line-height:1.7}
.badge.blue{background:#e8f0ff;color:#1f4fd8}.badge.green{background:#e6f7ed;color:#12733c}
.badge.red{background:#fdeaea;color:#b91c1c}.badge.orange{background:#fff4e5;color:#a55a00}
.badge.purple{background:#f1eafe;color:#5b21b6}.badge.cyan{background:#e0f6fa;color:#0e6b80}
.badge.gray{background:#eef1f5;color:#5a6473}.badge.dark{background:#e5e7eb;color:#111827}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.kpi .v{font-size:26px;font-weight:700;margin-top:4px}
.kpi .l{color:var(--muted);font-size:13px}
.kpi.warn{border-color:#f6c78a;background:#fffaf3}
.kpi.bad{border-color:#f3c3c3;background:#fff7f7}
form .field{margin-bottom:14px}
label{display:block;font-weight:600;margin-bottom:6px;font-size:13px}
input[type=text],input[type=password],input[type=number],input[type=file],select,textarea{
  width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid #d6e2ff;border-color:var(--brand)}
.hint{color:var(--muted);font-size:12.5px;margin-top:4px}
.alert{padding:11px 14px;border-radius:10px;margin-bottom:16px;font-weight:500}
.alert.success{background:#e8f7ee;color:#12733c;border:1px solid #b7e4c8}
.alert.error{background:#fdecec;color:#b91c1c;border:1px solid #f3c3c3}
.steps{display:flex;gap:0;margin:6px 0 4px;flex-wrap:wrap}
.step{flex:1;min-width:120px;text-align:center;position:relative;padding:0 4px}
.step .dot{width:26px;height:26px;border-radius:50%;background:#e6eaf2;color:var(--muted);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;font-size:12px;font-weight:700}
.step.done .dot{background:var(--brand);color:#fff}
.step.current .dot{background:#fff;border:2px solid var(--brand);color:var(--brand)}
.step .t{font-size:12.5px;color:var(--muted)}
.step.done .t,.step.current .t{color:var(--text);font-weight:600}
.step:not(:last-child):after{content:"";position:absolute;top:13px;left:60%;width:80%;height:2px;background:#e6eaf2}
.step.done:not(:last-child):after{background:var(--brand)}
.timeline{border-left:2px solid var(--line);margin-left:8px;padding-left:18px}
.timeline .item{position:relative;padding-bottom:16px}
.timeline .item:before{content:"";position:absolute;left:-25px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--brand)}
.timeline .item.muted:before{background:#c7cdd8}
.file{display:flex;gap:10px;align-items:center;padding:10px;border:1px dashed var(--line);border-radius:10px;background:#fafbfe;margin-bottom:8px}
.file .thumb{width:52px;height:52px;border-radius:8px;background:#e9edf5;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);overflow:hidden}
.file .thumb img{width:100%;height:100%;object-fit:cover}
.reject{border:1px solid #f3c3c3;background:#fff8f8;border-radius:10px;padding:14px;margin-bottom:12px}
.reject .label{font-weight:700;color:#b91c1c}
.tag-pick{display:flex;flex-wrap:wrap;gap:8px}
.tag-pick label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:20px;padding:6px 12px;background:#fff;cursor:pointer;font-weight:500;font-size:13px}
.tag-pick input{width:auto;margin:0}
.tag-pick label.on{border-color:var(--red);background:#fff5f5;color:#b91c1c}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:212px;background:#101828;color:#cbd5e1;padding:18px 0;overflow:auto}
.sidebar .brand{color:#fff;font-weight:700;padding:0 20px 16px;font-size:16px;border-bottom:1px solid #1f2937;margin-bottom:12px}
.sidebar a{display:block;color:#cbd5e1;padding:10px 20px;font-size:13.5px}
.sidebar a:hover,.sidebar a.active{background:#1f2937;color:#fff;text-decoration:none}
.sidebar .who{padding:12px 20px;font-size:12.5px;color:#8b95a5;border-top:1px solid #1f2937;margin-top:12px}
.admin-main{margin-left:212px;padding:24px 26px 60px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar input[type=text],.toolbar select{width:auto;min-width:150px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:20px;border:1px solid var(--line);background:#fff;font-size:13px;color:var(--muted)}
.chip.active{background:#eef4ff;border-color:#bcd0ff;color:var(--brand-dark);font-weight:600}
.bar{height:9px;border-radius:6px;background:#e9edf5;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.compare .box{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fafbfe}
.center{text-align:center}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mb0{margin-bottom:0}
.pre{white-space:pre-wrap;word-break:break-all}
.qr{background:#fff;padding:16px;border-radius:10px;border:1px solid var(--line);display:inline-block;font-size:12px;word-break:break-all;max-width:420px}
@media(max-width:820px){.sidebar{position:static;width:auto}.admin-main{margin-left:0}}

/* ---- 表单设计器：字段行 / 步骤条 ---- */
.frow {
  display: grid;
  grid-template-columns: 84px 1.1fr 1.1fr 78px 2fr 190px;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid #eef1f5;
}
.frow.fhead {
  font-size: 12px;
  color: #8b95a5;
  border-bottom: 1px solid #e3e8ef;
  padding-bottom: 6px;
}
.frow input[type=text], .frow select, .frow textarea { width: 100%; margin: 0; }
.frow .seq { color: #8b95a5; font-size: 13px; padding-top: 8px; }
.frow .facts { display: flex; flex-wrap: wrap; gap: 6px; }
.mb16 { margin-bottom: 16px; }
hr { border: 0; border-top: 1px solid #eef1f5; margin: 18px 0; }
@media (max-width: 900px) {
  .frow { grid-template-columns: 1fr; }
  .frow.fhead { display: none; }
}

/* ---- 表单设计器：序号排序 ---- */
.frow .seq { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.frow .seq input.sortno {
  width: 54px;
  margin: 0;
  padding: 6px 4px;
  text-align: center;
  font-weight: 600;
}

/* ---- 动态字段：输入框下方的填写说明与模板下载链接 ---- */
.field-help {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}
.field-link {
  margin-top: 4px;
  font-size: 12px;
}
.field-link a { font-weight: 500; }
.field-rule {
  margin-top: 4px;
  font-size: 12px;
  color: var(--orange);
  font-weight: 500;
}
.field-link a::before { content: "⤓ "; }

/* ---- 材料清单表：格式复选框 + 大小上限 + 操作列 ---- */
.frow.mrow { grid-template-columns: 56px 1.15fr 84px 200px 2fr 92px; }
.frow.mrow .fmt { display: flex; gap: 10px; flex-wrap: wrap; }
.frow.mrow .fmt label { display: inline-flex; align-items: center; gap: 4px; }
.frow.mrow input[type=number] { width: 100%; }

/* 强制手机绑定时弹出的阻断式卡片：不绑定就进不了其他页面 */
.card.modal-card {
  max-width: 560px;
  margin: 48px auto;
  border: 2px solid #e0a800;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .18);
}
.card.modal-card h2 { margin-top: 0; }

/* 登录方式：顶部水平选项卡（纯服务端切换，不依赖 JS） */
.tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line);padding:0 4px;margin-top:16px}
.tabs .tab{padding:10px 20px;font-size:14px;font-weight:500;color:var(--muted);border:1px solid transparent;border-bottom:0;border-radius:10px 10px 0 0;margin-bottom:-1px}
.tabs .tab:hover{color:var(--brand-dark);background:#f5f8ff;text-decoration:none}
.tabs .tab.active{background:#fff;border-color:var(--line);color:var(--brand-dark);font-weight:700;padding-bottom:11px}
.tab-panel{background:var(--card);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);padding:20px}
.tab-panel form{margin:0}
/* 「输入框 + 获取验证码」同行：输入框自适应，按钮不被挤扁、文字不换行 */
.code-row{display:flex;gap:8px}
.code-row input{flex:1 1 auto;min-width:0;width:auto}
.code-row .btn{flex:0 0 auto;white-space:nowrap}
/* 设置页：选项卡一行，右侧常驻「保存全部设置」（切换分类会刷新页面，保存按钮必须够得着） */
.tabs-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.tabs-bar .tabs{flex:1 1 auto}
.tabs-bar .btn{margin-bottom:8px}
.tab-panel > .card{box-shadow:none;background:#fafbfe;margin-top:16px}

/* 选项卡做成按钮时的外观复位（设置页用按钮提交做脏检查） */
.tabs button.tab{background:none;font:inherit;line-height:inherit;cursor:pointer}
.tabs button.tab:hover{background:#eef3ff}
.tabs button.tab.active{background:#fff;cursor:default}

/* ---- 侧边栏菜单分组（工单流程） ---- */
.sidebar details.nav-group summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 20px;font-size:13.5px;color:#e2e8f0;font-weight:600;cursor:pointer;list-style:none;user-select:none}
.sidebar details.nav-group summary::-webkit-details-marker{display:none}
.sidebar details.nav-group summary::marker{content:""}
.sidebar details.nav-group summary:hover{background:#1f2937;color:#fff;text-decoration:none}
.sidebar details.nav-group summary .arrow{font-size:10px;opacity:.65;transition:transform .15s}
.sidebar details.nav-group[open] summary .arrow{transform:rotate(90deg)}
.sidebar details.nav-group .sub a{padding-left:34px;font-size:13px}

/* 「添加一个字段」折叠面板：summary 呈按钮外观 */
details > summary.btn{list-style:none;cursor:pointer;user-select:none;display:inline-block}
details > summary.btn::-webkit-details-marker{display:none}
details > summary.btn::marker{content:''}
#nf_preview .field label{font-weight:600}

/* 操作定位：锚点指向刚操作过的行，描边高亮 */
.frow:target, .file:target, .card:target, tr:target {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  background: #f4f8ff;
  border-radius: 8px;
}

/* 操作确认气泡（居中弹出）与未保存守卫弹窗 */
.flash-pop{position:fixed;inset:0;background:rgba(15,23,42,.38);display:flex;align-items:center;justify-content:center;z-index:300}
.flash-box{background:#fff;border-radius:14px;box-shadow:0 12px 48px rgba(15,23,42,.25);padding:26px 38px;text-align:center;min-width:280px;max-width:440px}
.flash-box .flash-icon{width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;font-size:24px;line-height:46px;margin:0 auto 10px;font-weight:700}
.flash-box.error .flash-icon{background:var(--red)}
.flash-box .flash-msg{font-size:15px;white-space:pre-line}
.flash-actions{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}

/* 材料原地上传：行内反馈与错误态 */
.mu-tip{font-size:13px;margin-top:6px;color:var(--green)}
.mu-tip-err{color:var(--red)}
.mu-err{outline:1px solid var(--red);border-radius:6px}

/* 提交预检问题清单与目标定位 */
.issue-list{text-align:left;margin:12px 0 4px;padding-left:22px;max-height:200px;overflow:auto}
.issue-list li{margin:4px 0;color:var(--red)}
.issue-target{outline:2px solid var(--red);outline-offset:2px;border-radius:8px;transition:outline-color .8s}

#issue-panel:focus{outline:2px solid var(--brand);outline-offset:3px}