:root {
  --blue: #0052d9;
  --blue-hover: #0046b8;
  --blue-light: #e8f0ff;
  --blue-line: #b8cffa;
  --bg: #f2f4f7;
  --card: #ffffff;
  --border: #e5e8ef;
  --border-strong: #d4d9e4;
  --text: #1a1f2b;
  --text-2: #4e5969;
  --text-3: #8a94a6;
  --green: #00a870;
  --green-bg: #e6f7f1;
  --red: #e34d59;
  --red-bg: #fdecee;
  --orange: #ed7b2f;
  --orange-bg: #fdf1e7;
  --amber: #d99100;
  --amber-bg: #fcf5e3;
  --gray-bg: #f2f3f5;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 30, 50, .04), 0 4px 16px rgba(20, 30, 50, .04);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: inherit; font-size: 14px; color: var(--text); }
a { color: var(--blue); text-decoration: none; }

.app { display: flex; height: 100vh; overflow: hidden; }

/* ---------- sidebar ---------- */
.sidebar {
  width: 236px; flex: 0 0 236px; background: #fff;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.logo {
  width: 34px; height: 34px; border-radius: 9px; background: var(--blue);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; letter-spacing: -1px;
}
.brand-name { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.brand-sub { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.nav { padding: 8px 10px; overflow-y: auto; flex: 1; }
.nav-group { font-size: 11.5px; color: var(--text-3); padding: 14px 10px 6px; letter-spacing: .5px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px;
  border-radius: 8px; color: var(--text-2); cursor: pointer;
  font-size: 13.5px; margin-bottom: 2px; user-select: none;
  transition: background .12s, color .12s;
}
.nav-item svg { flex: 0 0 16px; opacity: .75; }
.nav-item:hover { background: #f5f6f9; }
.nav-item.active { background: var(--blue-light); color: var(--blue); font-weight: 600; }
.nav-item.active svg { opacity: 1; }
.nav-item .pill {
  margin-left: auto; background: var(--red); color: #fff; font-size: 11px;
  min-width: 18px; height: 18px; border-radius: 9px; display: flex;
  align-items: center; justify-content: center; padding: 0 5px; font-weight: 500;
}
.sidebar-foot { border-top: 1px solid var(--border); padding: 12px 16px 14px; }
.foot-plan { font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.foot-plan b { color: var(--blue); font-weight: 600; }
.foot-ver { font-size: 11px; color: var(--text-3); }

/* ---------- topbar ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 58px; flex: 0 0 58px; background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; gap: 16px;
}
.crumbs { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.crumbs .sub { font-size: 12.5px; font-weight: 400; color: var(--text-3); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.subject-switch { display: flex; align-items: center; gap: 8px; }
.ss-label { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
select {
  height: 32px; border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 0 26px 0 10px; background: #fff; max-width: 240px;
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a94a6' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
select:focus { outline: none; border-color: var(--blue); }
.icon-btn {
  width: 32px; height: 32px; border: 1px solid var(--border); background: #fff;
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-2); position: relative;
}
.icon-btn:hover { border-color: var(--border-strong); color: var(--blue); }
.icon-btn .dot {
  position: absolute; top: 6px; right: 6px; width: 6px; height: 6px;
  background: var(--red); border-radius: 50%; display: none;
}
.icon-btn .dot.on { display: block; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: #e8f0ff; color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
}
.content { flex: 1; overflow-y: auto; padding: 22px; }

/* ---------- generic ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-title { font-size: 20px; font-weight: 600; margin: 0 0 4px; letter-spacing: -.2px; }
.page-desc { font-size: 13px; color: var(--text-3); margin: 0; max-width: 720px; }
.head-actions { display: flex; gap: 10px; flex-shrink: 0; }

.btn {
  height: 34px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--border-strong);
  background: #fff; cursor: pointer; font-size: 13.5px; display: inline-flex;
  align-items: center; gap: 6px; white-space: nowrap; transition: all .12s;
}
.btn:hover { border-color: var(--blue); color: var(--blue); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--blue); padding: 0 8px; }
.btn.ghost:hover { background: var(--blue-light); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 5px; }
.btn.danger { color: var(--red); border-color: #f5c2c7; }
.btn.danger:hover { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-head {
  padding: 15px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-title { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card-title .hint { font-size: 12px; color: var(--text-3); font-weight: 400; }
.card-body { padding: 18px; }
.card-body.tight { padding: 10px 18px 16px; }

.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-32 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-32, .grid-3 { grid-template-columns: 1fr; }
}

/* stat cards */
.stat { padding: 16px 18px; }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-label { font-size: 13px; color: var(--text-2); }
.stat-ico { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.stat-num { font-size: 26px; font-weight: 600; letter-spacing: -.5px; margin: 6px 0 2px; line-height: 1.2; }
.stat-num small { font-size: 13px; font-weight: 400; color: var(--text-3); margin-left: 3px; letter-spacing: 0; }
.stat-foot { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.trend-up { color: var(--red); font-weight: 500; }
.trend-flat { color: var(--text-3); }

.ico-blue { background: var(--blue-light); color: var(--blue); }
.ico-green { background: var(--green-bg); color: var(--green); }
.ico-orange { background: var(--orange-bg); color: var(--orange); }
.ico-red { background: var(--red-bg); color: var(--red); }

/* badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
  border-radius: 4px; font-size: 12px; white-space: nowrap; font-weight: 500;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.ok { background: var(--green-bg); color: #00875a; }
.badge.warn { background: var(--amber-bg); color: #a86b00; }
.badge.danger { background: var(--red-bg); color: #c52b39; }
.badge.info { background: var(--blue-light); color: var(--blue); }
.badge.muted { background: var(--gray-bg); color: var(--text-3); }
.badge.tag { background: #f2f3f5; color: var(--text-2); }
.badge.tag::before { display: none; }

/* table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; font-weight: 500; color: var(--text-3); font-size: 12.5px;
  padding: 10px 14px; background: #fafbfc; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td { padding: 12px 14px; border-bottom: 1px solid #f0f2f6; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfd; }
.t-main { font-weight: 500; color: var(--text); }
.t-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.t-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--text-2); }
.row-actions { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.row-actions a { font-size: 12.5px; cursor: pointer; }
.row-actions a.del { color: var(--red); }

/* toolbar */
.toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.search {
  height: 32px; border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 0 12px; width: 240px; background: #fff;
}
.search:focus { outline: none; border-color: var(--blue); }
.tabs { display: flex; gap: 4px; }
.tab {
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
  color: var(--text-2); user-select: none;
}
.tab:hover { background: #f5f6f9; }
.tab.active { background: var(--blue-light); color: var(--blue); font-weight: 600; }
.spacer { flex: 1; }

/* progress */
.bar { height: 8px; border-radius: 4px; background: #eef0f5; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 4px; background: var(--blue); }
.bar.ok > i { background: var(--green); }
.bar.warn > i { background: var(--orange); }

/* list rows */
.list-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 0;
  border-bottom: 1px dashed #eceef4;
}
.list-row:last-child { border-bottom: none; }
.lv-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: 0 0 8px; }
.lv-3 { background: var(--red); box-shadow: 0 0 0 3px var(--red-bg); }
.lv-2 { background: var(--orange); box-shadow: 0 0 0 3px var(--orange-bg); }
.lv-1 { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-bg); }
.lr-main { flex: 1; min-width: 0; }
.lr-title { font-size: 13.5px; font-weight: 500; margin-bottom: 2px; }
.lr-desc { font-size: 12.5px; color: var(--text-3); }
.lr-time { font-size: 12px; color: var(--text-3); white-space: nowrap; }

/* steps */
.steps { display: flex; align-items: center; gap: 0; padding: 4px 0 22px; }
.step { display: flex; align-items: center; gap: 9px; flex: 1; }
.step:last-child { flex: 0 0 auto; }
.step-idx {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong);
  color: var(--text-3); display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; flex: 0 0 26px; background: #fff; font-weight: 500;
}
.step.active .step-idx { background: var(--blue); border-color: var(--blue); color: #fff; }
.step.done .step-idx { background: var(--green-bg); border-color: #9fe0c9; color: #00875a; }
.step-name { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.step.active .step-name { color: var(--blue); font-weight: 600; }
.step.done .step-name { color: var(--text-2); }
.step-line { flex: 1; height: 1px; background: var(--border); margin: 0 12px; min-width: 12px; }

/* forms */
.form-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start; margin-bottom: 18px; }
.form-label { font-size: 13.5px; color: var(--text-2); padding-top: 7px; }
.form-label .req { color: var(--red); margin-right: 3px; }
.form-ctrl input[type="text"], .form-ctrl input[type="email"], .form-ctrl input[type="date"],
.form-ctrl textarea, .form-ctrl select {
  width: 100%; max-width: 460px; border: 1px solid var(--border-strong); border-radius: 6px;
  height: 34px; padding: 0 12px; background: #fff;
}
.form-ctrl textarea { height: auto; min-height: 72px; padding: 8px 12px; resize: vertical; line-height: 1.6; }
.form-ctrl input:focus, .form-ctrl textarea:focus, .form-ctrl select:focus { outline: none; border-color: var(--blue); }
.form-tip { font-size: 12px; color: var(--text-3); margin-top: 6px; max-width: 480px; }
.radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-card {
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 10px 14px;
  cursor: pointer; font-size: 13.5px; display: flex; align-items: center; gap: 8px; background: #fff;
}
.radio-card:hover { border-color: var(--blue-line); }
.radio-card.sel { border-color: var(--blue); background: var(--blue-light); color: var(--blue); font-weight: 500; }
.upload-box {
  border: 1px dashed var(--border-strong); border-radius: 8px; padding: 16px;
  max-width: 460px; background: #fbfcfd; font-size: 13px; color: var(--text-3);
  display: flex; align-items: center; gap: 10px;
}
.upload-box.done { border-style: solid; border-color: #9fe0c9; background: var(--green-bg); color: #00875a; }

/* alert channel */
.channel { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed #eceef4; }
.channel:last-child { border-bottom: none; }
.channel-ico { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.ch-name { font-size: 13.5px; font-weight: 500; }
.ch-desc { font-size: 12px; color: var(--text-3); }
.switch {
  width: 38px; height: 20px; border-radius: 10px; background: #d9dde6; position: relative;
  cursor: pointer; transition: background .15s; flex: 0 0 38px; margin-left: auto;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.switch.on { background: var(--blue); }
.switch.on::after { transform: translateX(18px); }

/* plan cards */
.plan-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; }
@media (max-width: 1180px) { .plan-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.plan-card {
  border: 1px solid var(--border); border-radius: 10px; padding: 16px 14px; text-align: center;
  cursor: pointer; transition: all .15s; background: #fff; position: relative;
}
.plan-card:hover { border-color: var(--blue-line); box-shadow: 0 4px 14px rgba(0,82,217,.08); }
.plan-card.cur { border-color: var(--blue); background: #f7faff; }
.plan-card .pc-cur { position: absolute; top: -1px; right: 10px; background: var(--blue); color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 0 0 5px 5px; }
.pc-num { font-size: 22px; font-weight: 600; letter-spacing: -.5px; }
.pc-unit { font-size: 12px; color: var(--text-3); margin-bottom: 10px; }
.pc-price { font-size: 15px; font-weight: 600; color: var(--blue); }
.pc-per { font-size: 11.5px; color: var(--text-3); }

/* timeline */
.tl { position: relative; padding-left: 18px; }
.tl::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--border); }
.tl-item { position: relative; padding-bottom: 16px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -18px; top: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: #fff; border: 1.5px solid var(--border-strong);
}
.tl-item.hi::before { border-color: var(--blue); background: var(--blue); }
.tl-time { font-size: 12px; color: var(--text-3); }
.tl-text { font-size: 13px; margin-top: 1px; }

/* notice */
.notice {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: 8px;
  background: var(--blue-light); border: 1px solid var(--blue-line);
  font-size: 13px; color: #14428f; line-height: 1.6;
}
.notice.warn { background: var(--amber-bg); border-color: #f2dca8; color: #7a5300; }
.notice b { font-weight: 600; }

/* empty */
.empty { text-align: center; padding: 48px 20px; color: var(--text-3); font-size: 13px; }

/* modal */
.modal-mask {
  position: fixed; inset: 0; background: rgba(15, 22, 36, .45);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 24px;
}
.modal-mask.on { display: flex; }
.modal {
  background: #fff; border-radius: 12px; width: 520px; max-width: 100%;
  max-height: 86vh; overflow: auto; box-shadow: 0 20px 60px rgba(10, 20, 40, .2);
}
.modal.wide { width: 680px; }
.modal-head { padding: 18px 22px 14px; font-size: 16px; font-weight: 600; border-bottom: 1px solid var(--border); }
.modal-body { padding: 20px 22px; }
.modal-foot { padding: 14px 22px 18px; display: flex; justify-content: flex-end; gap: 10px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; height: 34px; border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 0 12px; background: #fff;
}
.field textarea { height: 76px; padding: 8px 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); }
.field .tip { font-size: 12px; color: var(--text-3); margin-top: 5px; }

/* toast */
.toast-wrap { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  background: #1f2733; color: #fff; padding: 9px 18px; border-radius: 8px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(10,20,40,.25); animation: tin .18s ease-out;
}
.toast.ok { background: #0f7b5f; }
@keyframes tin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; font-size: 13px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; color: var(--text); }

.split { height: 1px; background: var(--border); margin: 16px 0; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt20 { margin-top: 20px; }
.mb0 { margin-bottom: 0; }
/* 接口原始返回（云账号调试） */
.raw {
  background: #0f172a; color: #dbe7ff; font-size: 12px; line-height: 1.6;
  padding: 14px 16px; border-radius: 8px; overflow: auto;
  font-family: "JetBrains Mono", Consolas, monospace; white-space: pre-wrap; word-break: break-all;
}
.muted { color: var(--text-3); }
.fs12 { font-size: 12px; }
.right { text-align: right; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d5d9e2; border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 新增备案向导：居中加宽，消除留白 ---------- */
.wizard-wrap { max-width: 980px; margin: 0 auto; }
.wz-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 30px; align-items: start; }
@media (max-width: 900px) { .wz-cols { grid-template-columns: 1fr; } }
.wz-col { min-width: 0; }

/* 云资源（接入信息）卡片 */
.cloud-card { border: 1px solid var(--border); border-radius: 10px; padding: 16px; background: #fafbfd; }
.cloud-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.cloud-head b { font-size: 14px; }
.cloud-region {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px dashed var(--border);
}
.cloud-region select { flex: 1 1 auto; min-width: 0; height: 30px; font-size: 12.5px; }
.cloud-region a { cursor: pointer; white-space: nowrap; }
.cloud-group { margin-bottom: 12px; }
.cloud-group h4 { font-size: 12.5px; color: var(--text-2); margin: 0 0 7px; font-weight: 600; }
.cloud-opt {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: 7px; margin-bottom: 7px; cursor: pointer; font-size: 13px; background: #fff;
  flex-direction: column;
}
.cloud-opt-main { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.cloud-opt-main .ell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-opt-meta { line-height: 1.4; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cloud-warn { color: #b3261e; }
.cloud-opt:hover { border-color: var(--blue-line); }
.cloud-opt.sel { border-color: var(--blue); background: var(--blue-light); }
.cloud-opt .t-mono { font-size: 12.5px; flex: 0 0 auto; }
.cloud-opt .muted { min-width: 0; }
.cloud-summary { margin-bottom: 8px; }
.cloud-actions { font-size: 12.5px; }
.cloud-actions a { cursor: pointer; }
.cloud-manual { margin-top: 4px; }
.cloud-empty { font-size: 12.5px; color: var(--text-3); padding: 8px 0; line-height: 1.6; }
.cloud-empty.err { color: var(--red); }
.cloud-manual .radio-group { margin-bottom: 4px; }
.split-light { height: 1px; background: var(--border); margin: 14px 0; }

/* 主体来源云账号徽章 */
.acc-tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px;
  font-size: 12px; font-weight: 500; background: #f2f3f5; color: var(--text-2); white-space: nowrap;
}
.acc-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #8a94a6; margin-right: 6px; }
.mb-sub { margin-bottom: 16px; }

/* =====================================================================
   腾讯云备案控制台 · 新增备案向导（wizard.js）
   ===================================================================== */
.tf-wrap { display: flex; flex-direction: column; min-height: 100%; }
.tf-head { display: flex; align-items: center; gap: 12px; padding: 2px 0 4px; }
.tf-back { font-size: 16px; font-weight: 600; color: var(--text); cursor: pointer; letter-spacing: -.2px; }
.tf-back:hover { color: var(--blue); }
.tf-crumb-sub { font-size: 12.5px; color: var(--text-3); }

/* 步骤条 */
.tf-steps { display: flex; align-items: center; padding: 16px 0 18px; flex-wrap: wrap; row-gap: 8px; }
.tf-step { display: flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 13px; }
.tf-step-idx {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; line-height: 1; flex: 0 0 auto;
}
.tf-step.cur .tf-step-idx { background: var(--blue); border-color: var(--blue); color: #fff; }
.tf-step.cur .tf-step-name { color: var(--text); font-weight: 600; }
.tf-step.done .tf-step-idx { background: var(--blue-light); border-color: var(--blue-line); color: var(--blue); }
.tf-step.done .tf-step-name { color: var(--text-2); }
.tf-step-arrow { color: #c3c9d6; margin: 0 10px; font-size: 14px; }

/* 主体布局 */
.tf-body { display: flex; align-items: flex-start; gap: 16px; }
.tf-side {
  width: 232px; flex: 0 0 232px; background: #fff; border: 1px solid var(--border);
  border-radius: 6px; padding: 16px 16px 14px; position: sticky; top: 0;
}
.tf-side-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.tf-side-list { margin: 0; padding-left: 16px; font-size: 12.5px; color: var(--text-2); line-height: 1.8; }
.tf-side-list li { margin-bottom: 4px; }
.tf-side-list li::marker { color: #b6bdcb; }
.tf-side-sub { margin: 18px 0 6px; font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.tf-faq { display: flex; flex-direction: column; }
.tf-faq a {
  font-size: 12.5px; color: var(--text-2); padding: 8px 0; border-top: 1px solid #f2f4f7;
  cursor: pointer; line-height: 1.5;
}
.tf-faq a:hover { color: var(--blue); }
.tf-link { color: var(--blue); cursor: pointer; }
.tf-link:hover { text-decoration: underline; }

.tf-main {
  flex: 1; min-width: 0; background: #fff; border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden;
}
.tf-card { padding: 20px 24px 6px; }
.tf-card + .tf-card { border-top: 1px solid var(--border); }
.tf-card-title { font-size: 13.5px; font-weight: 600; margin: 0 0 18px; }

/* 表单行：左标签 + 右控件 */
.tf-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.tf-label { width: 132px; flex: 0 0 132px; font-size: 13px; color: var(--text-2); padding-top: 7px; line-height: 1.4; word-break: keep-all; }
.tf-ctrl { flex: 1; min-width: 0; }
.tf-req { color: var(--red); font-style: normal; margin-right: 3px; }
.tf-tip { font-size: 12px; color: var(--text-3); line-height: 1.65; margin-top: 6px; }
.tf-tip a { cursor: pointer; }

.tf-card input[type=text], .tf-card select, .tf-card textarea,
.tf-modal-body input[type=text], .tf-modal-body select {
  height: 32px; border: 1px solid var(--border-strong); border-radius: 3px;
  padding: 0 10px; background: #fff; outline: none; font-size: 13px; width: 100%; max-width: 420px;
  transition: border-color .15s, box-shadow .15s;
}
.tf-card textarea { height: auto; min-height: 92px; padding: 8px 10px; line-height: 1.6; width: 100%; max-width: 620px; resize: vertical; }
.tf-card input[type=text]:focus, .tf-card select:focus, .tf-card textarea:focus,
.tf-modal-body input[type=text]:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 82, 217, .1);
}
.tf-card input.readonly, .tf-card input[readonly] { background: #f7f8fa; color: var(--text-2); }
.tf-card select { cursor: pointer; }

/* 带前缀的输入框 */
.tf-group { display: flex; align-items: center; max-width: 420px; }
.tf-group .tf-addon {
  height: 32px; display: inline-flex; align-items: center; padding: 0 10px;
  background: #f7f8fa; border: 1px solid var(--border-strong); border-right: 0;
  border-radius: 3px 0 0 3px; font-size: 13px; color: var(--text-2); flex: 0 0 auto;
}
.tf-group input[type=text] { border-radius: 0; flex: 1; max-width: none; }
.tf-group .tf-ok { padding: 0 8px; }
.tf-group-code input[type=text] { border-radius: 3px 0 0 3px; }

/* 校验勾 */
.tf-ok { color: transparent; font-size: 14px; flex: 0 0 auto; }
.tf-ok.on { color: var(--green); }

/* 单选 */
.tf-radio { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; min-height: 32px; }
.tf-radio-item { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; color: var(--text-2); }
.tf-radio-item i {
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: #fff; display: inline-block; position: relative; flex: 0 0 auto;
}
.tf-radio-item.on { color: var(--text); }
.tf-radio-item.on i { border-color: var(--blue); }
.tf-radio-item.on i::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--blue);
}

/* 云资源选择行 */
.tf-res { display: flex; align-items: center; gap: 8px; max-width: 620px; }
.tf-res-type { width: 152px; flex: 0 0 152px; }
.tf-res-input { flex: 1; min-width: 0; max-width: none; }
.tf-res .tf-ic {
  width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid var(--border-strong);
  background: #fff; border-radius: 3px; cursor: pointer; font-size: 15px; color: var(--text-2); line-height: 1;
}
.tf-res .tf-ic:hover { border-color: var(--blue); color: var(--blue); }
.tf-res-extra { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); margin-top: 8px; }
.tf-res-extra select { width: 160px; height: 28px; font-size: 12px; }

/* 证件上传 */
.tf-upload-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tf-ids { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; align-items: flex-start; }
.tf-id-tile {
  width: 138px; height: 88px; border: 1px dashed var(--border-strong); border-radius: 4px;
  background: #fafbfc; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; cursor: pointer; transition: all .15s; text-align: center;
}
.tf-id-tile:hover { border-color: var(--blue); background: #f5f9ff; }
.tf-id-tile-label { font-size: 12.5px; color: var(--text-2); }
.tf-id-tile-empty { font-size: 12px; color: var(--text-3); }
.tf-id-tile.done { border-style: solid; border-color: var(--green); background: var(--green-bg); }
.tf-id-tile.done .tf-id-tile-label { color: #0b7a54; }
.tf-id-tile-done { font-size: 12px; color: var(--green); font-weight: 600; }
.tf-id-tile-hint { font-size: 11px; color: var(--text-3); padding: 0 6px; line-height: 1.4; }
.tf-id-sample { display: flex; gap: 10px; align-items: flex-start; padding-left: 6px; }
.tf-id-sample-img {
  width: 66px; height: 88px; border-radius: 4px; border: 1px solid var(--border);
  background: repeating-linear-gradient(135deg, #eef2f8 0 8px, #e6ebf4 8px 16px);
}
.tf-id-checks { list-style: none; margin: 0; padding: 0; font-size: 11.5px; color: var(--text-3); line-height: 1.9; }
.tf-id-checks li::before { content: "\2713"; color: var(--green); margin-right: 5px; }

/* 主体负责人证件上传：左上传框 + 右正反面示例 */
.tf-upload-row { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; margin-top: 10px; max-width: 780px; }
.tf-id-drop {
  flex: 1 1 380px; min-width: 280px; min-height: 196px;
  border: 1px dashed var(--border-strong); border-radius: 4px; background: #fafbfc;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; transition: border-color .15s, background .15s; text-align: center; padding: 16px;
}
.tf-id-drop:hover { border-color: var(--blue); background: #f5f9ff; }
.tf-id-drop.done { border-style: solid; border-color: var(--green); background: var(--green-bg); }
.tf-id-drop-main { font-size: 13px; color: var(--text-2); }
.tf-id-drop-main.ok { color: #0b7a54; font-weight: 600; }
.tf-id-drop-sub { font-size: 12px; color: var(--text-3); }
.tf-id-example {
  flex: 0 0 296px; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: 12px; border: 1px solid var(--border); border-radius: 4px; background: #fff;
}
.tf-id-ex { display: flex; align-items: center; gap: 12px; }
.tf-id-ex .tf-idcard { width: 88px; height: 55px; flex: 0 0 88px; border-radius: 4px; display: block; }
.tf-id-ex .tf-id-checks { font-size: 12px; line-height: 1.75; }
.tf-mail-detail { margin-top: 8px; min-height: 72px; max-width: 480px; }

/* 按钮 */
.tf-btn {
  height: 32px; padding: 0 16px; border: 1px solid var(--border-strong); background: #fff;
  border-radius: 3px; cursor: pointer; font-size: 13px; color: var(--text); white-space: nowrap;
  transition: all .15s;
}
.tf-btn:hover { border-color: var(--blue); color: var(--blue); }
.tf-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.tf-btn.primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }
.tf-btn:disabled, .tf-btn.primary:disabled {
  background: #f2f3f5; border-color: var(--border-strong); color: #b5bcc9; cursor: not-allowed;
}
.tf-btn.danger { color: var(--red); border-color: #f3c9cd; }
.tf-btn.danger:hover { border-color: var(--red); color: var(--red); }
.tf-btn.code { border-radius: 0 3px 3px 0; border-left: 0; height: 32px; background: #f1f6ff; border-color: #d3e2fa; color: #3a72d8; }
.tf-btn.code:hover { background: #e8f0fd; border-color: var(--blue); color: var(--blue); }
.tf-btn.code:disabled { background: #f2f3f5; border-color: var(--border-strong); color: #b5bcc9; }

/* 服务列表 */
.tf-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.tf-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tf-table th {
  text-align: left; font-weight: 500; color: var(--text-2); font-size: 12.5px;
  background: #f7f8fa; padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.tf-table td { padding: 12px; border-bottom: 1px solid #f2f4f7; color: var(--text); vertical-align: middle; }
.tf-table tr:hover td { background: #fafbfd; }
.tf-state.ok { color: var(--blue); }
.tf-state.bad { color: var(--red); }
.tf-ops a { margin-right: 14px; cursor: pointer; font-size: 12.5px; }
.tf-ops a.del { color: var(--text-3); }
.tf-ops a.del:hover { color: var(--red); }
.tf-empty { padding: 34px 0; text-align: center; color: var(--text-3); font-size: 13px; }
.tf-pager {
  display: flex; align-items: center; gap: 6px; justify-content: flex-end;
  padding: 14px 0; font-size: 12px; color: var(--text-3);
}
.tf-pager-num {
  min-width: 24px; height: 24px; line-height: 22px; text-align: center;
  border: 1px solid var(--blue); color: var(--blue); border-radius: 3px; background: #fff;
}

/* 编辑页分区标题 */
.tf-sub-title {
  font-size: 13px; font-weight: 600; margin: 26px 0 16px; padding-top: 18px;
  border-top: 1px solid var(--border);
}
.tf-edit-foot { display: flex; gap: 10px; justify-content: center; padding: 8px 0 18px; }

/* 日期区间 */
.tf-range { display: flex; align-items: center; gap: 8px; max-width: 420px; position: relative; }
.tf-range input { flex: 1; min-width: 0; }
.tf-range input:nth-of-type(2) { padding-right: 28px; }
.tf-range-sep { color: var(--text-3); }
.tf-cal {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); font-size: 13px; line-height: 1; pointer-events: none;
}

/* 上传区 */
.tf-drop {
  border: 1px dashed var(--border-strong); border-radius: 4px; background: #fafbfc;
  padding: 22px 16px; text-align: center; cursor: pointer; max-width: 620px; transition: all .15s;
}
.tf-drop:hover { border-color: var(--blue); background: #f5f9ff; }
.tf-drop-main { font-size: 13px; color: var(--blue); }
.tf-drop-sub { font-size: 12px; color: var(--text-3); margin-top: 6px; }

/* 复选框 */
.tf-check-line { margin: 4px 0 2px; }
.tf-checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text-2); }
.tf-checkbox i {
  width: 14px; height: 14px; border: 1px solid var(--border-strong); border-radius: 2px;
  background: #fff; display: inline-block; position: relative; flex: 0 0 auto;
}
.tf-checkbox.on i { background: var(--blue); border-color: var(--blue); }
.tf-checkbox.on i::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}

/* 主体信息摘要条 */
.tf-org-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #f7f8fa; border-radius: 4px; padding: 9px 12px; margin-bottom: 20px; font-size: 12.5px;
}
.tf-org-name { font-weight: 600; }
.tf-org-meta { color: var(--text-3); }
.tf-org-strip .tf-link { margin-left: auto; }

/* 真实性核验 */
.tf-verify { border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; max-width: 560px; }
.tf-verify-item { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.tf-verify-item b { font-weight: 600; }
.tf-verify-item span { color: var(--text-3); font-size: 12.5px; }
.tf-verify-item.ok span { color: var(--green); }
.tf-verify-item .tf-btn { margin-left: auto; }
.tf-verify-tip { font-size: 12px; color: var(--text-3); margin-top: 8px; }

/* 预览 */
.tf-kv { width: 100%; border-collapse: collapse; font-size: 13px; }
.tf-kv th {
  width: 130px; text-align: left; font-weight: 400; color: var(--text-3);
  padding: 7px 0; vertical-align: top; font-size: 12.5px;
}
.tf-kv td { padding: 7px 0; color: var(--text); word-break: break-all; }
.tf-preview-svc { border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; margin-bottom: 12px; }
.tf-preview-svc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 13px; }
.tf-json {
  width: 100%; max-width: 100%; min-height: 180px; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; border: 1px solid var(--border-strong); border-radius: 3px; padding: 10px;
  line-height: 1.5; resize: vertical; outline: none;
}
.tf-notice {
  margin-top: 16px; background: #fdf6e7; border: 1px solid #f7e2b8; color: #8a6116;
  border-radius: 4px; padding: 10px 12px; font-size: 12.5px; line-height: 1.7;
}

/* 底部操作条 */
.tf-foot {
  position: sticky; bottom: -22px; margin-top: 16px; padding: 12px 0 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg);
}
.tf-foot-right { display: flex; gap: 10px; }
.tf-foot .tf-btn { height: 34px; }

/* 弹窗（新增服务 / 扫码） */
.tf-modal-head { font-size: 15px; font-weight: 600; padding: 18px 22px 0; }
.tf-modal-body { padding: 18px 22px 6px; }
.tf-modal-body .tf-label { width: 96px; flex: 0 0 96px; }
.tf-modal-body .tf-group { max-width: 340px; }
.tf-modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px 22px 18px; border-top: 1px solid var(--border); margin-top: 8px;
}
.tf-scan { display: flex; gap: 20px; align-items: flex-start; }
.tf-scan-qr {
  width: 130px; height: 130px; flex: 0 0 130px; border: 1px solid var(--border);
  border-radius: 4px;
  background:
    repeating-linear-gradient(0deg, #1a1f2b 0 6px, transparent 6px 12px),
    repeating-linear-gradient(90deg, #1a1f2b 0 6px, transparent 6px 12px);
  background-blend-mode: multiply;
  opacity: .82;
}
.tf-scan-title { font-size: 13.5px; font-weight: 600; margin-bottom: 10px; }

/* ================================================================
   第 1 步：主办单位信息（信息填写方式 / 营业执照上传 / 域名校验）
   ================================================================ */

/* 信息填写方式：整条浅灰底 */
.tf-reuse {
  display: flex; align-items: center; gap: 12px;
  background: #f7f9fc; border: 1px solid #edf0f5; border-radius: 4px;
  padding: 10px 14px; margin: 0 0 20px;
}
.tf-reuse.on { background: #f2f7ff; border-color: #d8e6ff; }
.tf-reuse-label {
  width: 118px; flex: 0 0 118px; font-size: 13px; color: var(--text-2);
}
.tf-reuse-body { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.tf-reuse-note { font-size: 12px; color: var(--text-3); }
.tf-reuse-ok { font-size: 12px; color: var(--green); }

/* 营业执照上传：真实图片预览 / 上传中 / 拖拽 */
.tf-lic { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.tf-lic-box {
  position: relative; width: 320px; height: 128px; border: 1px dashed var(--border-strong); border-radius: 4px;
  background: #fafbfc; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; cursor: pointer; transition: border-color .15s, background .15s;
  overflow: hidden; box-sizing: border-box;
}
.tf-lic-box:hover { border-color: var(--blue); background: #f5f9ff; }
.tf-lic-box.dragging { border-color: var(--blue); background: #eef4ff; border-style: solid; }
.tf-lic-box.uploading { border-style: solid; border-color: var(--blue); background: #f5f9ff; cursor: default; }
.tf-lic-main { font-size: 13px; color: var(--blue); }
.tf-lic-sub { font-size: 12px; color: var(--text-3); }
.tf-lic-plus {
  width: 26px; height: 26px; line-height: 24px; text-align: center; border-radius: 50%;
  border: 1px solid #cfd9ea; color: var(--blue); font-size: 16px; background: #fff;
}
/* 已上传：铺满缩略图 + 底部信息条 + 悬停操作 */
.tf-lic-box.has-img { border: 1px solid var(--border); background: #f2f4f7; padding: 0; }
.tf-lic-img { width: 100%; height: calc(100% - 26px); object-fit: contain; background: #f2f4f7; display: block; }
.tf-lic-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26px; padding: 0 8px;
  display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .94);
  border-top: 1px solid var(--border); font-size: 11.5px;
}
.tf-lic-ok { color: var(--green); font-weight: 600; flex: 0 0 auto; }
.tf-lic-nm { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-lic-acts {
  position: absolute; left: 0; right: 0; bottom: 26px; padding: 5px 8px;
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  background: rgba(26, 34, 51, .82); color: #fff;
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
}
.tf-lic-box.has-img:hover .tf-lic-acts { opacity: 1; transform: none; }
.tf-lic-acts a { color: #fff; cursor: pointer; }
.tf-lic-acts a:hover { text-decoration: underline; }
.tf-lic-acts a.danger { color: #ffb4ad; margin-left: auto; }
.tf-lic-acts i { width: 1px; height: 10px; background: rgba(255, 255, 255, .35); }
.tf-lic-meta { margin-top: 8px; font-size: 12px; color: var(--text-3); }
.tf-lic-meta a { color: var(--blue); word-break: break-all; }
.tf-lic-side { width: 168px; flex: 0 0 168px; }
.tf-sample-tag { font-size: 11.5px; color: var(--text-3); margin-bottom: 6px; line-height: 1.4; }
.tf-lic-sample {
  height: 100px; border: 1px solid var(--border); border-radius: 3px; background: #fff;
  padding: 4px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
  display: flex; align-items: center; justify-content: center;
}
.tf-lic-sample:hover { border-color: var(--blue); box-shadow: 0 2px 8px rgba(43, 108, 255, .12); }
.tf-lic-svg { width: 100%; height: 100%; display: block; }

/* 上传中旋转指示 */
.tf-spin {
  width: 18px; height: 18px; border: 2px solid #cfdcf6; border-top-color: var(--blue);
  border-radius: 50%; animation: tfSpin .8s linear infinite;
}
@keyframes tfSpin { to { transform: rotate(360deg); } }

/* 身份证正反面缩略图 */
.tf-id-minis { display: flex; gap: 10px; margin-bottom: 10px; width: 100%; }
.tf-id-mini {
  position: relative; flex: 1 1 0; min-width: 0; height: 74px; border: 1px dashed var(--border-strong);
  border-radius: 4px; background: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; cursor: pointer;
  transition: border-color .15s, background .15s; overflow: hidden;
}
.tf-id-mini:hover { border-color: var(--blue); background: #f7faff; }
.tf-id-mini.dragging { border-color: var(--blue); background: #eef4ff; border-style: solid; }
.tf-id-mini.uploading { border-style: solid; border-color: var(--blue); background: #f5f9ff; cursor: default; }
.tf-id-mini-plus { font-size: 15px; color: var(--blue); line-height: 1; }
.tf-id-mini-label { font-size: 11.5px; color: var(--text-2); }
.tf-id-mini-sub { font-size: 11px; color: var(--text-3); }
.tf-id-mini.has-img { border: 1px solid var(--border); background: #f2f4f7; }
.tf-id-mini img { width: 100%; height: 100%; object-fit: contain; background: #eef1f6; display: block; }
.tf-id-mini-tag {
  position: absolute; left: 0; bottom: 0; padding: 1px 6px; font-size: 10.5px;
  color: #fff; background: rgba(26, 34, 51, .62); border-radius: 0 3px 0 0;
}
.tf-id-mini-acts {
  position: absolute; right: 4px; top: 4px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s;
}
.tf-id-mini.has-img:hover .tf-id-mini-acts { opacity: 1; }
.tf-id-mini-acts a {
  width: 18px; height: 18px; line-height: 17px; text-align: center; border-radius: 3px;
  background: rgba(26, 34, 51, .66); color: #fff; font-size: 11px; cursor: pointer;
}
.tf-id-mini-acts a.danger { background: rgba(214, 69, 56, .86); font-size: 13px; }
.tf-id-mini-mask {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(26, 34, 51, .55); color: #fff; font-size: 11.5px; opacity: 0;
  transition: opacity .15s; pointer-events: none;
}
.tf-id-mini.has-img:hover .tf-id-mini-mask { opacity: 1; }

/* 图片查看大图浮层 */
.tf-viewer {
  position: fixed; inset: 0; z-index: 400; background: rgba(16, 22, 33, .55);
  display: flex; align-items: center; justify-content: center; padding: 28px;
}
.tf-viewer-box {
  max-width: min(880px, 94vw); max-height: 92vh; background: #fff; border-radius: 6px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28); display: flex; flex-direction: column; overflow: hidden;
}
.tf-viewer-head {
  height: 42px; flex: 0 0 42px; padding: 0 8px 0 16px; display: flex; align-items: center;
  justify-content: space-between; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text-1);
}
.tf-viewer-x {
  width: 28px; height: 28px; border: 0; background: transparent; font-size: 20px;
  color: var(--text-3); cursor: pointer; border-radius: 3px; line-height: 1;
}
.tf-viewer-x:hover { background: #f2f4f8; color: var(--text-1); }
.tf-viewer-body { padding: 12px; overflow: auto; background: #f7f8fa; }
.tf-viewer-body img { max-width: 100%; max-height: calc(92vh - 160px); display: block; margin: 0 auto; }
.tf-viewer-sample { width: min(520px, 82vw); background: #fff; border: 1px solid var(--border); }
.tf-viewer-note { padding: 8px 16px 12px; font-size: 12px; color: var(--text-3); text-align: center; }
.tf-viewer-note a { color: var(--blue); }

/* 域名：错误态红框 + 感叹号 */
.tf-domain-wrap { display: flex; align-items: center; gap: 8px; max-width: 460px; }
.tf-domain-wrap .tf-group { flex: 1; max-width: none; min-width: 0; }
.tf-err-ic {
  display: none; width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 11px; line-height: 16px;
  text-align: center; font-style: normal; font-weight: 600;
}
.tf-err-ic.on { display: inline-block; }
.tf-domain-wrap.err .tf-group input[type=text],
.tf-domain-wrap.err .tf-group .tf-addon { border-color: var(--red); }
.tf-domain-wrap.err .tf-group input[type=text]:focus { box-shadow: 0 0 0 3px rgba(216, 57, 49, .1); }

/* 继续添加云服务 */
.tf-addmore-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 4px 0 18px 144px;
}
.tf-addmore {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--blue); cursor: pointer;
}
.tf-addmore b { font-weight: 400; font-size: 14px; line-height: 1; }
.tf-addmore:hover { text-decoration: underline; }

/* 追加的云服务行 */
.tf-res-sub { margin-top: 10px; }
.tf-res .tf-ic.danger:hover { border-color: var(--red); color: var(--red); }

/* 备案授权码：输入框 + 下拉（点击展开全部可用授权码，右侧标注状态）
 * 面板用 fixed 定位，避免被 .tf-main 的 overflow:hidden 裁掉；坐标由 JS 按输入框位置计算 */
.tf-res .tf-code-wrap { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.tf-code-wrap .tf-code-input { width: 100%; box-sizing: border-box; }
.tf-code-wrap[data-open="1"] .tf-code-input { border-color: #2b6cff; box-shadow: 0 0 0 2px rgba(43, 108, 255, .12); }
.tf-code-panel {
  display: none; position: fixed; z-index: 90;
  top: 0; left: 0; width: 360px; max-height: 302px;
  overflow-y: auto; box-sizing: border-box;
  background: #fff; border: 1px solid #d6dbe6; border-radius: 6px;
  box-shadow: 0 8px 28px rgba(30, 45, 75, .18);
}
.tf-code-wrap[data-open="1"] .tf-code-panel { display: block; }
.tf-code-list { padding: 4px 0; }
.tf-code-panel::-webkit-scrollbar { width: 8px; }
.tf-code-panel::-webkit-scrollbar-thumb { background: #d5dae4; border-radius: 4px; }
.tf-code-panel::-webkit-scrollbar-track { background: transparent; }
.tf-code-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 30px; padding: 0 12px; font-size: 13px; color: var(--text-1); cursor: pointer;
}
.tf-code-item:hover { background: #f5f7fb; }
.tf-code-item.on { background: #e7ecf6; }
.tf-code-item.on .tf-code-val { font-weight: 600; color: #1a2233; }
.tf-code-item.no { opacity: .58; }
.tf-code-check { flex: 0 0 auto; width: 16px; font-size: 14px; color: #2b6cff; text-align: center; }
.tf-code-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-code-ok { flex: 0 0 auto; font-size: 13px; color: #00a870; }
.tf-code-no { flex: 0 0 auto; font-size: 13px; color: #9aa3b2; }
.tf-code-empty { padding: 10px 12px; font-size: 12px; line-height: 1.7; color: #8a93a3; }
/* 演示数据小标签 */
.tf-demo { display: inline-block; padding: 1px 6px; font-size: 11px; line-height: 16px; color: #b88200; background: #fff7e6; border: 1px solid #ffe1a8; border-radius: 3px; }

/* 云资源读取范围（内联小下拉） */
.tf-region-inline { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; white-space: nowrap; }
.tf-card .tf-region-inline select {
  width: auto; max-width: 180px; height: 24px; font-size: 12px; padding: 0 4px;
  border: 1px solid var(--border); border-radius: 3px;
}

/* 表单控件适度加宽，减少卡片内右侧空白 */
.tf-card input[type=text], .tf-card select { max-width: 480px; }
.tf-card .tf-group, .tf-card .tf-range, .tf-card .tf-domain-wrap { max-width: 480px; }
.tf-card textarea { max-width: 660px; }

/* ================================================================
   备案区域：省 / 市 / 区县 三级级联（仿控制台浮层）
   ================================================================ */
.tf-casc { position: relative; width: 100%; max-width: 480px; }
.tf-casc-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 32px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid var(--border-strong); border-radius: 2px; background: #fff;
  font-size: 13px; color: var(--text-1); cursor: pointer; transition: border-color .15s;
}
.tf-casc-trigger:hover { border-color: #97a4b9; }
.tf-casc-trigger.ph .tf-casc-val { color: var(--text-3); }
.tf-casc[data-open="1"] .tf-casc-trigger {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 82, 217, .08);
}
.tf-casc-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-casc-caret {
  width: 0; height: 0; flex: 0 0 auto; margin-top: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid #8a93a3; transition: transform .15s;
}
.tf-casc[data-open="1"] .tf-casc-caret { transform: rotate(180deg); }

/* 浮层：三列并排 + 底部说明 */
.tf-casc-panel {
  display: none; position: absolute; z-index: 80;
  top: calc(100% + 4px); left: 0; width: 660px; max-width: calc(100vw - 32px); box-sizing: border-box;
  background: #fff; border: 1px solid #e1e5ee; border-radius: 2px;
  box-shadow: 0 6px 24px rgba(30, 45, 75, .16);
}
.tf-casc[data-open="1"] .tf-casc-panel { display: block; }
.tf-pca-cols { display: flex; }
.tf-pca-col {
  flex: 1 1 0; min-width: 0; height: 306px; overflow-y: auto;
  border-right: 1px solid #f0f2f6; padding: 4px 0;
}
.tf-pca-col:last-child { border-right: 0; }
.tf-pca-col::-webkit-scrollbar { width: 8px; }
.tf-pca-col::-webkit-scrollbar-thumb { background: #d5dae4; border-radius: 4px; }
.tf-pca-col::-webkit-scrollbar-track { background: transparent; }
.tf-pca-item {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  height: 32px; padding: 0 12px; font-size: 13px; color: var(--text-1);
  cursor: pointer; white-space: nowrap; overflow: hidden;
}
.tf-pca-item .tf-pca-ar { font-style: normal; font-size: 12px; color: #b9c1cf; flex: 0 0 auto; }
.tf-pca-item:hover, .tf-pca-item.on { background: #0052d9; color: #fff; }
.tf-pca-item:hover .tf-pca-ar, .tf-pca-item.on .tf-pca-ar { color: rgba(255, 255, 255, .75); }
.tf-pca-empty { padding: 10px 12px; font-size: 12px; color: var(--text-3); }
.tf-pca-note {
  padding: 8px 12px 10px; border-top: 1px solid #f0f2f6;
  font-size: 12px; line-height: 1.6; color: var(--text-3);
}

/* 云资源合规警示（按量计费 / 到期 / 不足 3 个月） */
.tf-warn { color: var(--red); font-weight: 500; }
.tf-warn::before { content: "⚠ "; font-weight: 400; }

/* ---------- 备案信息（按主体维度，对齐腾讯云控制台） ---------- */
.icp-card { margin-bottom: 16px; overflow: hidden; }
.icp-sec {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px 12px;
}
.icp-title { font-size: 16px; font-weight: 600; margin: 0; letter-spacing: -.2px; }
.icp-links { display: flex; align-items: center; gap: 22px; }
.icp-links a { font-size: 13px; color: var(--blue); cursor: pointer; white-space: nowrap; }
.icp-links a:hover { color: var(--blue-hover); text-decoration: underline; }

.icp-kv {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 28px; padding: 6px 22px 22px;
}
.icp-kv-i label { display: block; font-size: 12.5px; color: var(--text-3); margin-bottom: 4px; }
.icp-val { font-size: 13.5px; color: var(--text); min-height: 22px; display: flex; align-items: center; gap: 6px; }
.icp-no { color: var(--blue); font-weight: 500; letter-spacing: .1px; }
.icp-wait { color: var(--text-3); }
.icp-copy {
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent;
  color: var(--text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.icp-copy:hover { background: var(--blue-light); color: var(--blue); }

.icp-st { font-size: 13px; white-space: nowrap; }
.icp-st.ok { color: var(--green); }
.icp-st.info { color: var(--blue); }
.icp-st.warn { color: var(--amber); }
.icp-st.bad { color: var(--red); }
.icp-st.off { color: var(--text-3); }

.icp-acts { display: flex; align-items: center; gap: 10px; }

.icp-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 22px 14px; flex-wrap: wrap;
}
.icp-tabs { display: flex; }
.icp-tab {
  height: 32px; padding: 0 20px; display: flex; align-items: center;
  font-size: 13px; color: var(--text-2); background: #fff; cursor: pointer;
  border: 1px solid var(--border-strong); border-left-width: 0; user-select: none;
}
.icp-tab:first-child { border-left-width: 1px; border-radius: 3px 0 0 3px; }
.icp-tab:last-child { border-radius: 0 3px 3px 0; }
.icp-tab:hover { color: var(--blue); }
.icp-tab.on { color: var(--blue); border-color: var(--blue); position: relative; z-index: 1; font-weight: 500; }

.icp-searchwrap { position: relative; display: flex; align-items: center; }
.icp-searchwrap svg { position: absolute; left: 10px; color: var(--text-3); pointer-events: none; }
.icp-search {
  height: 32px; width: 300px; font-size: 13px; background: #fff;
  border: 1px solid var(--border-strong); border-radius: 4px;
  padding: 0 12px 0 30px;
}
.icp-search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(0, 82, 217, .08); }

.icp-table th { font-size: 12.5px; padding: 12px 20px; }
.icp-table td { padding: 17px 20px; font-size: 13px; }
.icp-no-cell { color: var(--blue) !important; font-weight: 500; }
.icp-svc { cursor: pointer; color: var(--text); }
.icp-svc:hover { color: var(--blue); }
.icp-domain { color: var(--blue); word-break: break-all; }
.icp-ops { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.icp-ops a { font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.icp-ops a:hover { text-decoration: underline; }
.icp-empty { padding: 34px 0; text-align: center; font-size: 13px; line-height: 1.9; color: var(--text-2); }

.icp-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 22px; border-top: 1px solid var(--border); background: #fafbfc;
}
.icp-total { font-size: 13px; color: var(--text-2); }
.icp-pgr { display: flex; align-items: center; gap: 8px; }
.icp-size { height: 30px; font-size: 12.5px; border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 6px; background: #fff; }
.icp-pg {
  width: 30px; height: 30px; padding: 0; background: #fff; border: 1px solid var(--border-strong);
  border-radius: 4px; color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.icp-pg:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.icp-pg:disabled { opacity: .45; cursor: not-allowed; }
.icp-pgnow {
  min-width: 34px; height: 30px; background: #fff; border: 1px solid var(--border-strong); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500; color: var(--blue);
}
.icp-pgof { font-size: 12.5px; color: var(--text-2); }

/* 批量选择列表（注销服务 / 取消接入） */
.icp-picklist { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; margin-top: 12px; }
.icp-pickrow {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  font-size: 13px; border-bottom: 1px solid #f0f2f6; cursor: pointer;
}
.icp-pickrow:last-child { border-bottom: none; }
.icp-pickrow:hover { background: #fafbfd; }
.icp-pickname { flex: 1; min-width: 0; }
.icp-pickdom { flex: 0 0 170px; color: var(--blue); }
.icp-pickno { flex: 0 0 165px; color: var(--text-3); }

@media (max-width: 1240px) {
  .icp-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icp-search { width: 220px; }
}

/* ICP 备案号：中文与数字之间不做自动间距，贴近控制台的紧凑排版 */
.icp-no, .icp-no-cell { text-autospace: no-autospace; letter-spacing: 0; }
.icp-table td:nth-child(3), .icp-table td:nth-child(4) { white-space: nowrap; }
.icp-no-cell { font-size: 12.5px; white-space: nowrap; }

/* ---------- 备案主体：行内展开服务清单 ---------- */
.subj-name { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; user-select: none; }
.subj-name:hover .t-main { color: var(--blue); }
.subj-caret { flex: 0 0 14px; margin-top: 4px; color: var(--text-3); transition: transform .15s ease; }
.subj-caret.on { transform: rotate(90deg); color: var(--blue); }

.subj-exp > td { padding: 0 !important; background: #fbfcfe; border-bottom: 1px solid var(--border) !important; }
.subj-panel { padding: 14px 18px 16px 40px; }
.subj-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.subj-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.subj-chip {
  font-size: 12px; color: var(--text-2); background: #fff; border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 10px;
}
.subj-chip b { color: var(--text); font-weight: 600; }
.subj-more { font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.subj-more:hover { text-decoration: underline; }

.subj-svc { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.subj-svc-row {
  display: grid; grid-template-columns: 56px minmax(0, 1.15fr) minmax(0, 1.35fr) minmax(0, 1.15fr) 74px 44px;
  gap: 12px; align-items: center; padding: 9px 14px;
  font-size: 12.5px; border-bottom: 1px solid #f2f4f8;
}
.subj-svc-row:last-child { border-bottom: none; }
.subj-svc-row.head { background: #fafbfc; color: var(--text-3); font-size: 12px; }
.subj-svc-kind { color: var(--text-2); }
.subj-svc-name { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subj-svc-icp { color: var(--blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-autospace: no-autospace; }
.subj-svc-dom { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subj-svc-row a { cursor: pointer; }
.subj-svc-row a:hover { text-decoration: underline; }
.subj-svc-row .icp-st { font-size: 12.5px; }
.subj-empty { font-size: 12.5px; color: var(--text-3); background: #fff; border: 1px dashed var(--border-strong); border-radius: 8px; padding: 18px; text-align: center; }

@media (max-width: 1240px) {
  .subj-svc-row { grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.2fr) 74px 44px; }
  .subj-svc-row .subj-svc-dom, .subj-svc-row.head span:nth-child(4) { display: none; }
}
.subj-table td:nth-child(3), .subj-table td:nth-child(5), .subj-table td:nth-child(7) { white-space: nowrap; }
.subj-table .t-sub { white-space: nowrap; }
.subj-table td { vertical-align: top; }
.subj-table .subj-exp > td { vertical-align: middle; }
.subj-check { font-size: 11.5px; color: var(--text-3); margin-top: 3px; white-space: nowrap; }
.subj-table th:nth-child(4), .subj-table td:nth-child(4) { white-space: nowrap; }
.subj-table td:nth-child(6) { white-space: nowrap; }
/* 六列版：主体名称 / 云账号 / 所在地 / 备案资产 / 状态 / 操作 */
.subj-table td:nth-child(3), .subj-table td:nth-child(4), .subj-table td:nth-child(5) { white-space: nowrap; }

/* ---------- 真实提交：提交方式说明 / 参数操作 ---------- */
.tf-real-mode {
  display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.7;
  background: #f2f7ff; border: 1px solid #d3e2fb; border-radius: 4px; padding: 10px 12px; color: var(--text-2);
}
.tf-real-mode b { color: var(--blue); flex: 0 0 auto; font-weight: 600; }
.tf-warn-inline { font-size: 12.5px; color: var(--red, #d93026); }
.tf-warn-inline code { background: #fbeeed; border-radius: 3px; padding: 0 4px; font-size: 12px; }
.tf-json-ops { display: flex; gap: 8px; margin-top: 8px; }
.tf-loc-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f0f2f6; font-size: 13px; }
.tf-loc-row:last-of-type { border-bottom: none; }
.tf-loc-k { flex: 0 0 40px; color: var(--text-3); }
.tf-loc-n { flex: 1; min-width: 0; color: var(--text); }
.tf-loc-row b { color: var(--blue); font-weight: 600; letter-spacing: .2px; }
.tf-loc-row b.tf-loc-no { color: var(--text-3); font-weight: 400; }

/* 前置审批文件列表 */
.tf-prefiles { margin-top: 10px; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.tf-prefile {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  font-size: 12.5px; background: #fff; border-bottom: 1px solid #f2f4f8;
}
.tf-prefile:last-child { border-bottom: none; }
.tf-prefile a { color: var(--blue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-prefile-size { color: var(--text-3); flex: 0 0 auto; }
.tf-prefile-del { flex: 0 0 auto; color: var(--text-3) !important; cursor: pointer; }
.tf-prefile-del:hover { color: var(--red, #d93026) !important; }
.tf-drop.busy { opacity: .7; pointer-events: none; }

/* ---------- 巡检规则 / 规则命中结果 ---------- */
.rule-row { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #f2f4f8; }
.rule-row:last-child { border-bottom: none; }
.rule-row .lv-dot { margin-top: 5px; flex: 0 0 auto; }
.rule-main { flex: 1; min-width: 0; }
.rule-name { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text); }
.rule-desc { font-size: 12px; color: var(--text-3); line-height: 1.6; margin-top: 3px; }
.rule-hit { font-size: 11.5px; color: var(--red, #d93026); background: #fdeeed; border-radius: 3px; padding: 1px 6px; font-weight: 500; }
.rule-ok { font-size: 11.5px; color: var(--green, #00a870); background: #e8f8f0; border-radius: 3px; padding: 1px 6px; }
.rule-idle { font-size: 11.5px; color: var(--text-3); background: #f2f4f8; border-radius: 3px; padding: 1px 6px; }
.rule-items { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.rule-item { font-size: 12px; color: var(--text-2); line-height: 1.6; padding-left: 10px; border-left: 2px solid #e5e9f2; }
.rule-item .muted { color: var(--text-3); }

/* 规则已恢复的告警：整行弱化，仍可回看 */
.list-row.resolved { opacity: .62; }

/* ---------- 备案订单：阶段筛选 / 总览入口 ---------- */
.dash-links { display: flex; align-items: center; gap: 14px; }
.dash-more { padding: 10px 22px 14px; font-size: 12.5px; border-top: 1px solid var(--border); }
.dash-more a { color: var(--blue); cursor: pointer; }
.dash-more a:hover { text-decoration: underline; }

.ord-tab-n { font-weight: 500; color: var(--text-3); margin-left: 2px; }
.icp-tab.on .ord-tab-n { color: var(--blue); }

.ord-phase { display: inline-block; margin-left: 8px; font-size: 11.5px; padding: 1px 7px; border-radius: 3px; vertical-align: 1px; }
.ord-phase-live { color: var(--blue); background: #eaf2ff; }
.ord-phase-done { color: var(--green); background: #e8f8f0; }
.ord-phase-dead { color: var(--text-3); background: #f2f4f8; }

/* 总览「进行中备案订单」：窄卡片内用列表行，避免表格被裁切 */
.ord-item { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid #f2f4f8; cursor: pointer; }
.ord-item:last-child { border-bottom: none; }
.ord-item:hover { background: #fafbfd; }
.ord-main { flex: 1; min-width: 0; }
.ord-name { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.ord-name .ord-kind { font-weight: 400; flex: 0 0 auto; }
.ord-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ord-stage { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }

/* 备案订单页：行距收紧，操作列不折行 */
.filing-table td { padding: 13px 20px; }
.filing-table th:last-child, .filing-table td:last-child, .filing-table th:nth-child(7), .filing-table td:nth-child(7) { white-space: nowrap; }
.filing-table td:nth-child(5) { white-space: nowrap; }
.filing-table .ord-act a { cursor: pointer; white-space: nowrap; }
.filing-table .ord-act a:hover { text-decoration: underline; }

/* ---------- 成员与权限 ---------- */
.mbr-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mbr-sel {
  height: 32px; max-width: 132px; font-size: 13px; background: #fff; color: var(--text-2);
  border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 8px; cursor: pointer;
}
.mbr-sel:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(0, 82, 217, .08); }

.member-table td { padding: 12px 20px; vertical-align: middle; }
.member-table tbody tr:hover { background: #fafbfd; }
.mbr-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mbr-avatar {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600; color: #fff; letter-spacing: .5px;
  background: #94a3b8;
}
.mbr-avatar.av0 { background: #3b7ef2; }
.mbr-avatar.av1 { background: #12a594; }
.mbr-avatar.av2 { background: #8a63d2; }
.mbr-avatar.av3 { background: #e0803a; }
.mbr-avatar.av4 { background: #2f9fd0; }
.mbr-avatar.av5 { background: #d0557f; }
.mbr-id { min-width: 0; }
.mbr-name { font-size: 13.5px; color: var(--text); line-height: 1.4; display: flex; align-items: center; gap: 6px; }
.mbr-self {
  font-size: 10.5px; line-height: 15px; padding: 0 5px; border-radius: 3px;
  background: var(--blue-light); color: var(--blue); font-weight: 500; white-space: nowrap;
}
.mbr-acc {
  font-size: 11.5px; color: var(--text-3); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.role-tag {
  display: inline-block; font-size: 12px; line-height: 20px; padding: 0 8px;
  border-radius: 3px; white-space: nowrap; background: var(--gray-bg); color: var(--text-2);
}
.role-tag.danger { background: var(--red-bg); color: #c52b39; }
.role-tag.info { background: var(--blue-light); color: var(--blue); }
.role-tag.warn { background: var(--amber-bg); color: #a86b00; }
.role-tag.muted { background: var(--gray-bg); color: var(--text-3); }

.scope-all { font-size: 12.5px; color: var(--text-2); }
.scope-chips { display: flex; align-items: center; gap: 4px; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.scope-chip {
  flex: 0 0 auto; max-width: 92px; font-size: 11.5px; line-height: 19px; padding: 0 6px;
  border-radius: 3px; background: var(--gray-bg); color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scope-chip.more { background: #fff; border: 1px solid var(--border-strong); color: var(--text-3); }
.row-ops { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.row-ops a { color: var(--blue); text-decoration: none; }
.row-ops a.danger { color: #c52b39; }
.row-ops a:hover { text-decoration: underline; }

/* 成员表单 */
.field-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.scope-radio { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); margin-bottom: 10px; cursor: pointer; }
.scope-radio input { width: auto; margin: 0; }
.scope-picker {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px;
  max-height: 190px; overflow: auto; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 5px; background: #fafbfc;
}
.scope-picker.off { opacity: .45; pointer-events: none; }
.scope-item { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; cursor: pointer; }
.scope-item input { width: auto; margin: 0; }
.scope-item-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope-item-region { color: var(--text-3); font-size: 11.5px; white-space: nowrap; }

/* 角色说明 */
.role-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.role-card { border: 1px solid var(--border); border-radius: 6px; padding: 12px 12px 13px; background: #fafbfc; }
.role-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 7px; }
.role-card-top .role-tag { white-space: nowrap; }
.role-card-desc { font-size: 12px; color: var(--text-2); line-height: 1.65; }
.perm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.perm-table th, .perm-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: center; }
.perm-table th { font-weight: 500; color: var(--text-2); background: #fafbfc; white-space: nowrap; }
.perm-table th:first-child, .perm-table td:first-child { text-align: left; color: var(--text); }
.perm-table tbody tr:last-child td { border-bottom: 0; }
.perm-yes { color: #00875a; font-weight: 600; }
.perm-no { color: var(--border-strong); }

@media (max-width: 1320px) {
  .role-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scope-picker { grid-template-columns: 1fr; }
}

/* 弹窗内表单控件修正：全局 select 有 max-width，复选框会被 input 规则撑成 34px 高 */
.field select {
  max-width: none; padding-right: 26px;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a94a6' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 9px center;
}
.field input[type=checkbox], .field input[type=radio] {
  width: 15px; height: 15px; padding: 0; margin: 0; border: 0; border-radius: 3px;
  accent-color: var(--blue); flex: 0 0 auto; cursor: pointer;
}
.scope-item-name { flex: 1 1 auto; }
.scope-item-region { margin-left: auto; text-align: right; }
/* .field label 的块级规则会盖掉列表项，这里显式提权重 */
.field label.scope-item {
  display: flex; align-items: center; gap: 7px; margin-bottom: 0;
  font-size: 12.5px; color: var(--text); cursor: pointer;
}
.field label.scope-radio { display: flex; align-items: center; margin-bottom: 10px; }
/* 固定列宽，避免长邮箱把「最近登录」挤成两行 */
.member-table { table-layout: fixed; }
.member-table td { overflow: hidden; }
.mbr-acc { display: block; max-width: 100%; }
.member-table td:nth-child(5) { white-space: nowrap; }

/* ---------- 主体列表：订单状态列 ---------- */
/* 一行「操作类型 + 当前环节」，一行「提交时间 + 已等待/超期」。
   进行中订单按「该谁动手」排序，所以最需要处理的环节永远在最上面。 */
.subj-ord { max-width: 196px; }
.subj-ord:not(.none) { cursor: pointer; }
.subj-ord:not(.none):hover .subj-ord-stage { text-decoration: underline; }
.subj-ord-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.subj-ord-kind {
  flex: 0 0 auto; font-size: 11px; line-height: 17px; padding: 0 5px; border-radius: 3px;
  background: var(--blue-light); color: var(--blue); white-space: nowrap;
}
.subj-ord-kind.warn { background: var(--amber-bg); color: #a86b00; }
.subj-ord-kind.danger { background: var(--red-bg); color: #c52b39; }
.subj-ord-stage {
  font-size: 12.5px; color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.subj-ord-stage.bad { color: #c52b39; font-weight: 500; }
.subj-ord-stage.warn { color: #a86b00; font-weight: 500; }
.subj-ord-stage.muted { color: var(--text-3); }
.subj-ord-sub { font-size: 11.5px; color: var(--text-3); margin-top: 3px; white-space: nowrap; }
.subj-ord-late { color: #c52b39; font-weight: 500; }
.subj-ord-more { font-size: 11.5px; color: var(--blue); margin-top: 2px; }
.subj-ord-more:hover { text-decoration: underline; }

/* 主体备案状态退成名称前的小圆点：正常安静、异常红、审核中黄 */
.subj-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle; background: #12a594;
}
.subj-dot.warn { background: #e0a13a; }
.subj-dot.danger { background: #d33b48; }
.mt4 { margin-top: 4px; }
/* 名称行里的状态标签压缩，长主体名才不会把标签挤到第二行 */
.subj-name .t-main .badge { padding: 0 4px; font-size: 11px; line-height: 17px; margin-left: 2px; }

/* 主体列表的订单状态筛选：下拉本身即筛选器，选中时高亮，避免「筛过了也不知道」 */
.subj-ordsel { min-width: 154px; }
.subj-ordsel.on {
  border-color: var(--blue); color: var(--blue);
  background-color: #f5f9ff; font-weight: 500;
}
.subj-ordclear { color: var(--blue); text-decoration: none; cursor: pointer; white-space: nowrap; }
.subj-ordclear:hover { text-decoration: underline; }

/* ---------- 总览：备案订单状态面板 ---------- */
.ordmix {
  display: flex; gap: 2px; height: 8px; margin-top: 14px;
  border-radius: 4px; overflow: hidden; background: var(--gray-bg);
}
.ordmix > i { display: block; height: 100%; min-width: 3px; }
.ordmix-lg { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--text-3); }
.ordmix-lg span { display: flex; align-items: center; gap: 5px; }
.ordmix-lg i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.ordmix-lg b { color: var(--text); font-weight: 600; margin-left: -1px; }

.stg-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--text-2); margin-bottom: 4px;
}
.stg-row {
  display: grid; grid-template-columns: 116px minmax(0, 1fr) 100px;
  align-items: center; gap: 10px; padding: 6px 0; cursor: pointer;
}
.stg-row:hover .stg-name { color: var(--blue); }
.stg-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text); white-space: nowrap;
}
.stg-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.stg-cnt {
  font-size: 11px; line-height: 15px; padding: 0 5px; border-radius: 8px;
  background: var(--gray-bg); color: var(--text-3); font-weight: 500;
}
.stg-bar { height: 6px; border-radius: 3px; background: #f2f4f8; overflow: hidden; }
.stg-bar i { display: block; height: 100%; border-radius: 3px; opacity: .9; }
.stg-val { font-size: 11.5px; color: var(--text-3); text-align: right; white-space: nowrap; }
.stg-late { color: #c52b39; font-weight: 500; }
.stg-empty { padding: 8px 0 2px; font-size: 12.5px; color: var(--text-3); }
.stg-foot {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-3); line-height: 1.7;
}

/* 备案订单页：环节筛选 */
.ord-stage-sel { max-width: 156px; }
/* 只停留 1 天的环节条也要看得见，否则和「没有数据」分不清 */
.stg-bar i { min-width: 12px; }
.stg-row:hover { background: #fafbfd; }
.stg-row { border-radius: 4px; padding-left: 4px; padding-right: 4px; margin: 0 -4px; }

/* ---------- 右上角账号菜单（超级管理员 / 成员身份切换与退出） ---------- */
.user-menu { position: relative; }
.avatar {
  border: none; cursor: pointer; font-family: inherit; padding: 0;
  transition: box-shadow .12s;
}
.avatar:hover { box-shadow: 0 0 0 3px rgba(0, 82, 217, .12); }
.user-pop {
  position: absolute; top: 42px; right: 0; width: 232px; z-index: 60;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 30, 60, .14); padding: 6px;
}
.user-pop[hidden] { display: none; }
.up-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.up-name { font-size: 13.5px; font-weight: 600; }
.up-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.up-item {
  display: block; padding: 8px 10px; border-radius: 6px; font-size: 13px;
  color: var(--text-2); cursor: pointer; text-decoration: none;
}
.up-item:hover { background: #f2f5fa; color: var(--blue); }
.up-item.danger { color: var(--red); }
.up-item.danger:hover { background: #fdf2f2; color: var(--red); }

/* 新成员初始密码一行 */
.pwd-row { display: flex; gap: 8px; align-items: center; }
.pwd-row input { flex: 1; font-family: var(--mono, ui-monospace, monospace); letter-spacing: .4px; }
.btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; flex-shrink: 0; }