/* SIM Control Plane — 界面样式
   结构：设计变量 → 基础 → 外壳 → 通用组件 → 表单与浮层 → 各页面 → 响应式
   仅使用系统字体与本地资源；CSP 禁止内联样式，动态宽度由 JS 通过 CSSOM 设置。 */

/* ---------- 设计变量 ---------- */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --sunken: #f1f3f6;
  --line: #e4e7ec;
  --line-strong: #cfd4dc;
  --text: #15181e;
  --text-2: #565e6b;
  --text-3: #8a919d;
  --accent: #2d5be3;
  --accent-hover: #2149c4;
  --accent-weak: #edf2ff;
  --accent-line: #c5d3fb;
  --ok: #157a52;
  --ok-weak: #e6f4ed;
  --warn: #9a5b06;
  --warn-weak: #fdf2dc;
  --bad: #c22f48;
  --bad-weak: #fdeaee;
  --violet: #6b46c1;
  --violet-weak: #f1ecfd;
  --radius: 8px;
  --radius-s: 6px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.06);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --side: 216px;
  --top: 52px;
}

/* ---------- 基础 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 13.5px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
fieldset {
  margin: 0;
  padding: 0;
}
ul,
ol {
  list-style: none;
}
fieldset {
  border: 0;
  min-width: 0;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: fixed;
  left: 12px;
  top: -48px;
  z-index: 50;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  background: var(--text);
  color: #fff;
}
.skip:focus {
  top: 12px;
}
.ico {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mono {
  font-family: var(--mono);
  font-size: 0.94em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.unk {
  color: var(--text-3);
  font-style: normal;
}
.cur {
  color: var(--text-3);
  font-size: 0.86em;
  letter-spacing: 0.02em;
}
.sep {
  margin: 0 6px;
  color: var(--line-strong);
}
.pre {
  white-space: pre-wrap;
}
kbd {
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--sunken);
  color: var(--text-3);
  font: 11px/16px var(--mono);
}

/* ---------- 外壳 ---------- */
.app {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr);
  min-height: 100vh;
}
.side {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 14px 10px 12px;
  border-right: 1px solid var(--line);
  background: #fbfbfc;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px 14px;
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.brand:hover {
  text-decoration: none;
}
.brand-mark {
  width: 22px;
  height: 22px;
  flex: none;
}
.brand-card {
  fill: var(--accent);
}
.brand-bars {
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-group {
  padding: 14px 8px 5px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--radius-s);
  color: var(--text-2);
  font-weight: 500;
}
.nav a:hover {
  background: var(--sunken);
  color: var(--text);
  text-decoration: none;
}
.nav a[aria-current] {
  background: #eceff4;
  color: var(--text);
}
.nav a[aria-current] .ico {
  color: var(--accent);
}
.side-foot {
  display: grid;
  gap: 3px;
  margin-top: auto;
  padding: 10px 8px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.health {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-2);
}
.health i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
}
.health[data-state="ok"] i {
  background: #1fa971;
  box-shadow: 0 0 0 3px var(--ok-weak);
}
.health[data-state="bad"] {
  color: var(--bad);
}
.health[data-state="bad"] i {
  background: var(--bad);
}
.side-meta {
  color: var(--text-3);
}

.main {
  min-width: 0;
}
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--top);
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-2);
}
.crumbs h1 {
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 620;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crumbs a {
  color: var(--text-2);
  white-space: nowrap;
}
.crumb-sep {
  width: 12px;
  height: 12px;
  color: var(--text-3);
}
.crumb-n {
  color: var(--text-3);
  font-size: 12.5px;
  white-space: nowrap;
}
.actions {
  display: flex;
  flex: none;
  gap: 8px;
  margin-left: auto;
}
.loadbar {
  position: sticky;
  top: var(--top);
  z-index: 11;
  height: 2px;
  margin-bottom: -2px;
  overflow: hidden;
}
.is-loading .loadbar::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  background: var(--accent);
  animation: load 1s ease-in-out infinite;
}
@keyframes load {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(260%);
  }
}
#root {
  outline: none;
}
.page {
  display: grid;
  gap: 16px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 28px 64px;
  animation: enter 0.16s ease-out;
}
@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}
.skeleton {
  display: grid;
  gap: 16px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 28px;
}
.skeleton i {
  height: 72px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, #eceef2 25%, #f5f6f8 40%, #eceef2 55%) 0 0 / 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton i:nth-child(2) {
  height: 220px;
}
.skeleton i:nth-child(3) {
  height: 140px;
}
@keyframes shimmer {
  to {
    background-position: -150% 0;
  }
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.btn:hover {
  background: var(--sunken);
  text-decoration: none;
}
.btn:active {
  box-shadow: none;
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}
.btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}
.btn-danger {
  border-color: var(--bad);
  background: var(--bad);
  color: #fff;
}
.btn-danger:hover {
  background: #a82439;
}
.btn-ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--text-2);
}
.btn-danger-ghost:hover {
  background: var(--bad-weak);
  color: var(--bad);
}
.btn-sm {
  height: 26px;
  padding: 0 8px;
  font-size: 12.5px;
}
.btn .ico {
  width: 14px;
  height: 14px;
}
.is-busy {
  position: relative;
  color: transparent !important;
}
.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 14px;
  height: 14px;
  margin: auto;
  border: 2px solid var(--text-3);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn-primary.is-busy::after,
.btn-danger.is-busy::after {
  border-color: #fff;
  border-top-color: transparent;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--text-3);
}
.icon-btn:hover {
  background: var(--sunken);
  color: var(--text);
}
.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 500;
}
.link:hover {
  text-decoration: underline;
}
.row-link {
  color: var(--text);
  font-weight: 560;
}
.row-link:hover {
  color: var(--accent);
}
.more {
  width: 100%;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  color: var(--text-2);
}

/* ---------- 徽标与标识 ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 520;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.badge .ico {
  width: 12px;
  height: 12px;
}
.b-neutral {
  border-color: var(--line);
  background: var(--sunken);
  color: var(--text-2);
}
.b-muted {
  border-color: var(--line);
  background: transparent;
  color: var(--text-3);
}
.b-ok {
  background: var(--ok-weak);
  color: var(--ok);
}
.b-warn {
  background: var(--warn-weak);
  color: var(--warn);
}
.b-bad {
  background: var(--bad-weak);
  color: var(--bad);
}
.b-accent {
  background: var(--accent-weak);
  color: var(--accent);
}
.b-violet {
  background: var(--violet-weak);
  color: var(--violet);
}
.b-dashed {
  border: 1px dashed var(--line-strong);
  color: var(--text-3);
}
.b-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge + .badge {
  margin-left: 4px;
}
.due-far {
  color: var(--text-3);
  font-size: 12px;
}
.ctile,
.cmark {
  display: inline-grid;
  place-items: center;
  flex: none;
  font-family: var(--mono);
  font-weight: 600;
}
.ctile {
  grid-auto-flow: column;
  gap: 3px;
  min-width: 28px;
  height: 20px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.cmark {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  font-size: 10px;
}
.ctile i {
  font: normal 12px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
/* 归属地区不是按 ICCID 得出（ICCID 未填写）：虚线边框提示待核实 */
.ctile-manual {
  outline: 1px dashed var(--line-strong);
  outline-offset: 1px;
}
.ctile-unk,
.cmark-unk {
  border: 1px dashed var(--line-strong);
  color: var(--text-3);
}
.t0 {
  background: #e7efff;
  color: #2a4fb8;
}
.t1 {
  background: #e3f4ec;
  color: #17694a;
}
.t2 {
  background: #fdefd9;
  color: #8a5207;
}
.t3 {
  background: #f1eafd;
  color: #5f3db1;
}
.t4 {
  background: #fde8ec;
  color: #a62a41;
}
.t5 {
  background: #e2f3f6;
  color: #17687a;
}

/* 三态能力：是 / 否 / 未知 */
.cap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px 0 6px;
  border: 1px solid transparent;
  font-size: 12px;
  white-space: nowrap;
}
.cap .ico {
  width: 12px;
  height: 12px;
  stroke-width: 2;
}
.cap-l {
  color: inherit;
  opacity: 0.85;
}
.cap b {
  font-weight: 620;
}
.cap-yes {
  background: var(--ok-weak);
  color: var(--ok);
}
.cap-no {
  background: var(--bad-weak);
  color: var(--bad);
}
.cap-unk {
  border: 1px dashed var(--line-strong);
  background: var(--surface);
  color: var(--text-3);
}
.ladder {
  display: inline-flex;
  gap: 2px;
}
.ladder .cap:first-child {
  border-radius: 6px 0 0 6px;
}
.ladder .cap:last-child {
  border-radius: 0 6px 6px 0;
}
.ladder:not(.ladder-sub) .cap {
  min-width: 86px;
}
.ladder-sub .cap {
  height: 20px;
  font-size: 11.5px;
}

/* ---------- 面板 / 键值 / 列表 ---------- */
.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  min-width: 0;
}
.panel-h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px 10px;
}
.panel-h h2 {
  font-size: 13.5px;
  font-weight: 620;
}
.panel-meta {
  margin-left: auto;
  color: var(--text-3);
  font-size: 12.5px;
  text-align: right;
}
.panel > .kv,
.panel > .timeline,
.panel > .capsum,
.panel > .dist {
  padding: 0 16px 14px;
}
.panel-flush > .panel-h {
  border-bottom: 1px solid var(--line);
}
.cols {
  display: grid;
  gap: 16px;
  align-items: start;
}
.cols-main {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
.stack-v {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.kv > div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.kv > div:first-child {
  border-top: 0;
}
.kv dt {
  color: var(--text-2);
}
.kv dd {
  min-width: 0;
  overflow-wrap: anywhere;
}
.kv-dense {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  column-gap: 20px;
}
.kv-dense > div {
  grid-template-columns: 116px minmax(0, 1fr);
  padding: 4px 0;
  border: 0;
  font-size: 12.5px;
}
.kv-key {
  display: block;
  color: var(--text-3);
  font: 10.5px var(--mono);
}
.empty-row {
  padding: 18px 16px;
  color: var(--text-3);
}
.empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 64px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}
.empty h2 {
  font-size: 15px;
  font-weight: 620;
}
.empty p {
  max-width: 440px;
  color: var(--text-2);
}
.empty-ico {
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 8px;
  background: var(--accent-weak);
  color: var(--accent);
  box-sizing: content-box;
}
.empty-error .empty-ico {
  background: var(--bad-weak);
  color: var(--bad);
}
.empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.result-n {
  min-height: 0;
  margin: -8px 2px;
  color: var(--text-3);
  font-size: 12.5px;
}
.result-n:empty {
  display: none;
}
.foot-note {
  color: var(--text-3);
  font-size: 12.5px;
}
.panel > .foot-note {
  padding: 10px 16px 14px;
}
.note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 16px;
  color: var(--text-2);
  font-size: 12.5px;
}
.note .ico {
  margin-top: 2px;
  color: var(--text-3);
}
.note-warn {
  background: var(--warn-weak);
  color: #6f4204;
}
.note-warn .ico {
  color: var(--warn);
}
.banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #f3dcae;
  border-radius: var(--radius);
  background: var(--warn-weak);
  color: #6f4204;
}
.banner .btn {
  margin-left: auto;
}

/* 行列表（到期、风险、提醒） */
.rows {
  border-top: 1px solid var(--line);
}
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--line);
}
.row:last-child {
  border-bottom: 0;
}
.row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.row-main > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-main > .ctile {
  overflow: visible;
}
.row-title {
  font-weight: 540;
}
.row-sub,
.row-kind {
  color: var(--text-3);
  font-size: 12.5px;
}
.row-sub .row-link {
  color: var(--text-2);
  font-weight: 500;
}
.row-due {
  flex: none;
  min-width: 78px;
}
.row-date {
  flex: none;
  color: var(--text-2);
}
.row-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}
.row-chips .badge {
  margin: 0;
}
.row-bal {
  flex: none;
  min-width: 92px;
  text-align: right;
}
.row.is-done .row-title {
  color: var(--text-3);
  text-decoration: line-through;
}
.check {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: transparent;
}
.check .ico {
  width: 11px;
  height: 11px;
  stroke-width: 2.2;
}
.check:hover {
  border-color: var(--ok);
  color: var(--ok);
}
.check.is-on {
  border-color: var(--ok);
  background: var(--ok);
  color: #fff;
}

/* ---------- 表格 ---------- */
.table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
th:first-child,
td:first-child {
  padding-left: 16px;
}
th:last-child,
td:last-child {
  padding-right: 16px;
}
th {
  background: #fafbfc;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 560;
  white-space: nowrap;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover {
  background: #fafbfd;
}
tr[data-href] {
  cursor: pointer;
}
tr.past td {
  color: var(--text-3);
}
td.num,
th.num {
  text-align: right;
  white-space: nowrap;
}
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}
.th-sort:hover,
th[aria-sort="ascending"] .th-sort,
th[aria-sort="descending"] .th-sort {
  color: var(--text);
}
.th-sort .ico {
  width: 11px;
  height: 11px;
}
td > .mono,
td > .badge {
  white-space: nowrap;
}
.cell-sub {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font-size: 12px;
}
.ident {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 170px;
}
.ident-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
  color: var(--text-2);
  font-size: 12px;
}

/* ---------- 工具条 ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.toolbar-gap {
  flex: 1;
}
.toolbar select,
.search {
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
}
.toolbar select {
  max-width: 160px;
  padding: 0 26px 0 10px;
}
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  max-width: 380px;
  padding: 0 8px 0 10px;
  color: var(--text-3);
}
.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}
.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: none;
  color: var(--text);
}
.search input::placeholder {
  color: var(--text-3);
}
.seg {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--radius-s);
  background: #e9ecf1;
}
.seg-view button {
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
}
.seg-view button b {
  margin-left: 2px;
  color: var(--text-3);
  font: 500 12px var(--mono);
}
.seg-view button[aria-pressed="true"] {
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
}
.seg-view button:disabled {
  cursor: default;
  opacity: 0.5;
}
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
}
input[type="checkbox"],
input[type="radio"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
}

/* ---------- 表单 ---------- */
.fs {
  padding: 16px 20px 18px;
  border-bottom: 1px solid var(--line);
}
.fs:last-child {
  border-bottom: 0;
}
.fs > legend {
  float: left;
  width: 100%;
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 620;
}
.fs-h {
  clear: both;
  margin: -4px 0 10px;
  color: var(--text-2);
  font-size: 12.5px;
}
.fgrid {
  clear: both;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}
.f {
  display: grid;
  gap: 5px;
  align-content: start;
  min-width: 0;
}
.f-wide {
  grid-column: 1 / -1;
}
.f-l {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
}
.req {
  color: var(--bad);
  font-size: 11px;
  font-style: normal;
}
.f-h {
  color: var(--text-3);
  font-size: 12px;
}
.f input,
.f select,
.f textarea {
  width: 100%;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.f textarea {
  resize: vertical;
  line-height: 1.5;
}
.f input:hover,
.f select:hover,
.f textarea:hover {
  border-color: #b4bbc6;
}
.f input:focus,
.f select:focus,
.f textarea:focus,
.toolbar select:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 3px var(--accent-weak);
}
.f input::placeholder {
  color: #a9afb9;
}
.f input:user-invalid {
  border-color: var(--bad);
}
.tri .seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.seg-o {
  position: relative;
  display: block;
}
.seg-o input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.seg-o span {
  display: block;
  padding: 4px 0;
  border-radius: 5px;
  color: var(--text-2);
  font-weight: 500;
  text-align: center;
}
.seg-o input:checked + span {
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
}
.seg-o input[value="true"]:checked + span {
  color: var(--ok);
}
.seg-o input[value="false"]:checked + span {
  color: var(--bad);
}
.seg-o input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.form-msg {
  padding: 8px 12px;
  border-radius: var(--radius-s);
  background: var(--bad-weak);
  color: var(--bad);
  font-size: 12.5px;
}
.form-msg[data-tone="warn"] {
  background: var(--warn-weak);
  color: #6f4204;
}
.panel > .form-msg {
  margin: 0 16px 14px;
}
.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 14px 16px;
}
.f-grow {
  flex: 1 1 240px;
}

/* ---------- 抽屉 / 对话框 / 提示 ---------- */
dialog {
  padding: 0;
  border: 0;
  color: var(--text);
}
dialog::backdrop {
  background: rgba(17, 22, 33, 0.32);
  animation: fade 0.16s ease-out;
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
.drawer {
  inset: 0 0 0 auto;
  width: min(500px, 100vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  border-left: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  animation: slide 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.drawer-wide {
  width: min(620px, 100vw);
}
@keyframes slide {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
}
.drawer-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}
.drawer-h {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 14px 20px;
  border-bottom: 1px solid var(--line);
}
.drawer-h h2 {
  font-size: 15px;
  font-weight: 640;
}
.drawer-h p {
  margin-top: 2px;
  color: var(--text-2);
  font-size: 12.5px;
}
.drawer-h .icon-btn {
  margin-left: auto;
}
.drawer-b {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer-f {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: #fafbfc;
}
.drawer-f .form-msg {
  flex: 1 1 100%;
}
.modal {
  width: min(420px, calc(100vw - 32px));
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  animation: pop 0.14s ease-out;
}
@keyframes pop {
  from {
    transform: scale(0.97);
    opacity: 0;
  }
}
.modal-form {
  display: grid;
  gap: 10px;
  padding: 20px;
}
.modal-form h2 {
  font-size: 15px;
  font-weight: 640;
}
.modal-b {
  display: grid;
  gap: 6px;
  color: var(--text-2);
}
.modal-form footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  display: grid;
  gap: 8px;
  width: min(380px, calc(100vw - 40px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 8px 10px 12px;
  border-radius: var(--radius);
  background: #1c2029;
  box-shadow: var(--shadow-pop);
  color: #fff;
  animation: enter 0.18s ease-out;
}
.toast > .ico {
  margin-top: 2px;
  color: #5fd3a0;
}
.toast-error > .ico {
  color: #ff8fa1;
}
.toast span {
  flex: 1;
  overflow-wrap: anywhere;
}
.toast .icon-btn {
  width: 22px;
  height: 22px;
  color: #9aa2b1;
}
.toast .icon-btn:hover {
  background: #2b313d;
  color: #fff;
}

/* ---------- 总览 ---------- */
.kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.kpi {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border-left: 1px solid var(--line);
  margin-left: -1px;
}
.kpi-l {
  color: var(--text-2);
  font-size: 12.5px;
}
.kpi strong {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}
.kpi-n {
  color: var(--text-3);
  font-size: 12px;
}
.kpi-warn strong {
  color: var(--warn);
}
.kpi-bad strong {
  color: var(--bad);
}
.kpi-accent strong {
  color: var(--accent);
}
.dist {
  display: grid;
  gap: 14px;
}
.dist h3 {
  margin-bottom: 6px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 560;
}
.h3-note {
  margin-left: 8px;
  font-weight: 400;
}
.bars li {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}
.bars-l {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bars b {
  font-weight: 500;
  text-align: right;
}
.bar {
  height: 6px;
  border-radius: 3px;
  background: var(--sunken);
  overflow: hidden;
}
.bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.4s ease-out;
}

/* ---------- 线路详情 ---------- */
.hero {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero > .ctile {
  min-width: 44px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 14px;
}
.hero > .ctile i {
  font-size: 17px;
}
.hero-main {
  min-width: 0;
}
.hero h1 {
  font-size: 20px;
  font-weight: 640;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.hero p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: var(--text-2);
}
.hero .sep {
  margin: 0 2px;
}
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.facts > div {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 12px 16px;
  border-left: 1px solid var(--line);
  margin-left: -1px;
}
.facts-l {
  color: var(--text-2);
  font-size: 12.5px;
}
.facts strong {
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.facts strong .mono {
  font-size: 15px;
}
.facts-n {
  color: var(--text-3);
  font-size: 12px;
}
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--text-2);
  font-weight: 520;
  white-space: nowrap;
}
.tabs button:hover {
  color: var(--text);
}
.tabs button[aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--text);
}
.tab-n {
  padding: 0 6px;
  border-radius: 9px;
  background: #e9ecf1;
  color: var(--text-2);
  font: 500 11px/17px var(--mono);
}
#tabpanel {
  display: grid;
  gap: 16px;
  outline-offset: 4px;
}
.timeline li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.timeline li:first-child {
  border-top: 0;
}
.tl-date {
  padding-top: 1px;
  color: var(--text-2);
}
.tl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.tl-src {
  color: var(--text-3);
  font-size: 12px;
}
.tl-detail {
  margin-top: 4px;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.diff li {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 1px 0 !important;
  border: 0 !important;
  font-size: 12.5px;
}
.diff-k {
  min-width: 84px;
  color: var(--text-2);
}
.diff-arrow {
  color: var(--text-3);
}

/* ---------- 漫游实验室 ---------- */
.capsum {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.capsum-i {
  display: grid;
  gap: 6px;
}
.capsum-l {
  font-weight: 600;
}
.stack {
  display: flex;
  gap: 2px;
  height: 6px;
}
.stack i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease-out;
}
.s-yes {
  background: #1fa971;
}
.s-no {
  background: #e0566e;
}
.s-unk {
  background: repeating-linear-gradient(135deg, #d5d9e0 0 3px, #eceff3 3px 6px);
}
.capsum-n {
  display: flex;
  gap: 10px;
  font-size: 12px;
}
.capsum-n b {
  font-weight: 520;
}
.c-yes {
  color: var(--ok);
}
.c-no {
  color: var(--bad);
}
.c-unk {
  color: var(--text-3);
}
.rrow {
  display: grid;
  grid-template-columns: 132px minmax(190px, 1.1fr) auto minmax(210px, 1fr);
  gap: 10px 20px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.rrow:last-child {
  border-bottom: 0;
}
.rrow-when {
  display: grid;
  gap: 2px;
}
.rrow-when .row-link {
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rrow-net {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.rrow-net .ctile {
  margin-top: 1px;
}
.rrow-name {
  display: block;
  font-weight: 560;
}
.rrow-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12px;
}
.plmn {
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--sunken);
  line-height: 18px;
}
.bands {
  color: var(--text-2);
}
.rrow-caps {
  display: grid;
  gap: 4px;
  justify-items: start;
}
.rrow-speed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 14px;
}
.metric {
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}
.metric .ico {
  align-self: center;
  width: 12px;
  height: 12px;
  color: var(--text-3);
}
.metric-l {
  color: var(--text-3);
  font-size: 12px;
}
.metric b {
  font-weight: 600;
}
.metric-u {
  color: var(--text-3);
  font-size: 11.5px;
}
.rnote {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  color: var(--text-2);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.rnote em {
  margin-right: 5px;
  color: var(--text-3);
  font-style: normal;
}
.rnote-result {
  color: var(--text);
  font-weight: 540;
}

/* ---------- 运营商资料 ---------- */
.carriers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px;
  align-items: start;
}
.carrier-h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
}
.carrier-h > .cmark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 15px;
}
.carrier-t {
  flex: 1;
  min-width: 0;
}
.carrier-t h2 {
  font-size: 14.5px;
  font-weight: 640;
}
.carrier-t p {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 12.5px;
}
.carrier-t .sep {
  margin: 0;
}
.carrier-t .ctile {
  min-width: 24px;
  height: 16px;
  font-size: 9.5px;
}
.ext {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow-wrap: anywhere;
}
.ext .ico {
  width: 12px;
  height: 12px;
}
.ussd {
  border-top: 1px solid var(--line);
  background: #fafbfc;
  border-radius: 0 0 var(--radius) var(--radius);
}
.ussd-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 4px 16px;
}
.ussd-h h3 {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.ussd-l {
  padding: 0 16px 12px;
}
.ussd-l li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 4px 0;
}
.code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface);
  font: 600 12.5px var(--mono);
}
.code .ico {
  width: 12px;
  height: 12px;
  color: var(--text-3);
}
.code:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ussd-s {
  color: var(--text-3);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* ---------- Excel 导入 ---------- */
.steps {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-3);
  font-weight: 520;
}
.step:not(:last-child)::after {
  content: "";
  width: 28px;
  height: 1px;
  margin: 0 4px;
  background: var(--line-strong);
}
.step-n {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  font: 600 11.5px var(--mono);
}
.step-n .ico {
  width: 12px;
  height: 12px;
  stroke-width: 2.2;
}
.step-now {
  color: var(--text);
}
.step-now .step-n {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.step-done {
  color: var(--text-2);
}
.step-done .step-n {
  border-color: var(--ok-weak);
  background: var(--ok-weak);
  color: var(--ok);
}
.drop {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 4px 16px 12px;
  padding: 28px 16px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  background: #fafbfc;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.drop:hover,
.drop.is-over,
.drop:focus-within {
  border-color: var(--accent);
  background: var(--accent-weak);
}
.drop.has-file {
  border-style: solid;
  border-color: var(--accent-line);
  background: var(--accent-weak);
}
.drop-ico {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
  color: var(--accent);
}
.drop-t {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.drop-s {
  color: var(--text-2);
  font-size: 12.5px;
}
.pick-f {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px 14px 0;
}
.pick-f .note {
  flex: 1;
}
.maps {
  padding: 0 16px 14px;
  display: grid;
  gap: 8px;
}
.map {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.map summary,
.irow summary {
  cursor: pointer;
}
.map summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
}
.map-l {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 0 24px;
  padding: 4px 12px 10px;
  border-top: 1px solid var(--line);
}
.map-l li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 16px minmax(0, 1.2fr);
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12.5px;
}
.map-col {
  color: var(--text-3);
}
.map-h {
  font-weight: 520;
  overflow-wrap: anywhere;
}
.map-arrow {
  color: var(--text-3);
}
.map-f {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.map-f .mono {
  color: var(--text-3);
  font-size: 11px;
}
.is-unmapped .map-h {
  color: var(--text-2);
}
.review-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.irow {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
}
.irow.is-selected {
  background: #f7f9ff;
  box-shadow: inset 2px 0 0 var(--accent);
}
.irow-check {
  padding-top: 3px;
}
.irow-no {
  display: block;
  width: 15px;
  height: 15px;
  border: 1px dashed var(--line-strong);
  border-radius: 3px;
  background: var(--sunken);
}
.irow-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.irow-head .badge {
  margin: 0;
}
.irow-key {
  margin-left: 4px;
  color: var(--text-3);
  font-size: 12px;
}
.irow-sum {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 5px;
  font-weight: 520;
}
.irow-sum span + span {
  color: var(--text-2);
  font-weight: 400;
}
.irow-skip .irow-sum,
.irow-review .irow-sum {
  color: var(--text-2);
}
.issues {
  display: grid;
  gap: 3px;
  margin-top: 6px;
}
.issues li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--warn);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.irow-skip .issues li {
  color: var(--text-2);
}
.issues .ico {
  width: 13px;
  height: 13px;
  margin-top: 3px;
}
.irow details {
  margin-top: 6px;
  color: var(--text-2);
  font-size: 12.5px;
}
.irow-detail {
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: #fafbfc;
  color: var(--text);
}
.unmapped {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-strong);
}
.unmapped h4 {
  color: var(--warn);
  font-size: 12px;
  font-weight: 600;
}
.apply {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
}
.apply-info {
  display: grid;
  flex: 1 1 200px;
}
.apply-info span {
  color: var(--text-2);
  font-size: 12.5px;
}
.apply-info .is-bad {
  color: var(--bad);
}
.confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  color: var(--text-2);
  font-size: 12.5px;
}
.done {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 40px 24px;
  text-align: center;
}
.done-ico {
  width: 22px;
  height: 22px;
  padding: 8px;
  border-radius: 50%;
  background: var(--ok-weak);
  color: var(--ok);
  box-sizing: content-box;
  stroke-width: 2;
}
.done h2 {
  font-size: 16px;
  font-weight: 640;
}
.done-n {
  display: flex;
  gap: 40px;
  margin: 6px 0;
}
.done-n div {
  display: grid;
}
.done-n strong {
  font-size: 26px;
  font-weight: 600;
}
.done-n span,
.done-backup {
  color: var(--text-2);
  font-size: 12.5px;
}
.done-backup .mono {
  display: block;
  margin-top: 2px;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ---------- 关联资产（v0.2） ---------- */
.empty-compact {
  padding: 32px 20px;
  border: 0;
}
.la-impact > .facts {
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: none;
}
.la-impact > .facts:last-child {
  border-radius: var(--radius);
}
.la-impact > .note {
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
}
.la-impact .facts-l {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.la-fi {
  width: 13px;
  height: 13px;
  color: var(--text-3);
}
.la-bar {
  flex-wrap: wrap;
  align-items: center;
}
.la-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.la-tools > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.la-list {
  border-top: 1px solid var(--line);
}
.la-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 3px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.la-item:last-child {
  border-bottom: 0;
}
.la-ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sunken);
  color: var(--text-2);
}
.la-item > .la-ico {
  grid-row: 1 / span 2;
}
.la-account,
.la-subscription {
  background: var(--accent-weak);
  color: var(--accent);
}
.la-payment {
  background: var(--ok-weak);
  color: var(--ok);
}
.la-document {
  background: var(--warn-weak);
  color: var(--warn);
}
.la-support_case {
  background: var(--violet-weak);
  color: var(--violet);
}
.la-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.la-head .badge + .badge {
  margin-left: 0;
}
.la-title {
  font-weight: 620;
  overflow-wrap: anywhere;
}
.la-next {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-2);
  font-size: 12.5px;
}
.la-next .ico {
  width: 13px;
  height: 13px;
}
.la-acts {
  display: flex;
  align-items: center;
  gap: 2px;
  grid-row: 1 / span 2;
  grid-column: 3;
  align-self: start;
}
.la-meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  min-width: 0;
  color: var(--text-2);
  font-size: 12.5px;
}
.la-meta .sep {
  color: var(--text-3);
}
.la-id {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.la-eye {
  width: 22px;
  height: 22px;
}
.la-eye .ico {
  width: 14px;
  height: 14px;
}
.la-rels,
.la-notes,
.la-also {
  grid-column: 2 / -1;
}
.la-rels {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}
.la-rel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 4px 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: #fafbfc;
}
.la-rel .badge + .badge {
  margin-left: 0;
}
.la-ver {
  color: var(--text-2);
  font-size: 12.5px;
  white-space: nowrap;
}
.la-rel-n {
  flex: 1 1 160px;
  min-width: 0;
  color: var(--text-2);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.la-rel-acts {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.la-danger:hover {
  background: var(--bad-weak);
  color: var(--bad);
}
.la-notes {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-2);
  font-size: 12.5px;
  white-space: pre-line;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.la-also {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 12.5px;
}
.la-also .ico {
  width: 13px;
  height: 13px;
  margin-top: 3px;
}
.la-item.is-archived .la-title,
.la-item.is-archived .la-meta {
  color: var(--text-3);
}
.la-item.is-archived .la-ico {
  background: var(--sunken);
  color: var(--text-3);
}
.la-removed > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 620;
  list-style: none;
}
.la-removed > summary::-webkit-details-marker {
  display: none;
}
.la-removed > summary .ico {
  color: var(--text-3);
}
.la-removed[open] > summary {
  border-bottom: 1px solid var(--line);
}
.la-sum-h {
  margin-left: auto;
  color: var(--text-3);
  font-size: 12.5px;
  font-weight: 400;
}
.la-mode {
  padding: 14px 20px 0;
}
.la-mode .seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.la-mode button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.la-mode .ico {
  width: 14px;
  height: 14px;
}
.la-find {
  clear: both;
  display: flex;
  gap: 8px;
}
.la-find .search {
  max-width: none;
}
.la-find select {
  flex: none;
  max-width: 132px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
}
.la-results {
  max-height: 300px;
  margin-top: 10px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.la-results > .empty-row {
  padding: 14px 12px;
}
.la-results .link {
  margin-left: 6px;
}
.la-err {
  margin: 8px;
}
.la-opt {
  display: grid;
  grid-template-columns: 16px 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.la-opt:last-child {
  border-bottom: 0;
}
.la-opt:hover {
  background: #fafbfd;
}
.la-opt:has(input:checked) {
  background: var(--accent-weak);
}
.la-opt .la-ico {
  width: 28px;
  height: 28px;
}
.la-opt-b {
  display: grid;
  min-width: 0;
}
.la-opt-t {
  font-weight: 560;
  overflow-wrap: anywhere;
}
.la-opt-s {
  color: var(--text-3);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.la-opt-here {
  color: var(--violet);
  font-size: 12px;
}
.la-dup {
  margin: 0 20px 16px;
}
.la-ctx {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.la-ctx > div {
  display: grid;
}
.la-ctx span {
  color: var(--text-2);
  font-size: 12.5px;
}
.la-fn {
  padding: 0 20px 16px;
}
.la-sec {
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 620;
}
.drawer .fs > .table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
}

/* ---------- v0.3 M1：身份头 / 状态 / 服务 / 复核队列 ---------- */
.nav-n {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--warn-weak);
  color: var(--warn);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.nav-n[hidden] {
  display: none;
}
.idh {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.idh-i {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
  padding: 10px 16px;
  border-left: 1px solid var(--line);
  margin-left: -1px;
}
.idh-l {
  flex: 1 0 100%;
  color: var(--text-2);
  font-size: 12px;
}
.idh-l-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.idh-v {
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.idh-s {
  flex: 1 0 100%;
  color: var(--text-3);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.idh-title {
  color: var(--text-2);
}
.idh-note {
  align-self: center;
}
.idh-compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
  margin-top: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.idh-compact .idh-i {
  gap: 0 6px;
  padding: 0;
  border: 0;
  margin: 0;
}
.idh-compact .idh-v {
  font-size: 13px;
}
.idh-compact .idh-s {
  font-size: 12px;
}
.idh-compact .idh-title {
  display: none;
}
.ident-id {
  align-items: flex-start;
  min-width: 360px;
}
.ident-body {
  min-width: 0;
}
.states {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.st-i {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.st-i strong {
  font-size: 15px;
  font-weight: 600;
}
.dd {
  color: var(--text-3);
  font-size: 12px;
}
.dd-un {
  font-style: normal;
}
.legacy {
  color: var(--text-3);
  font-size: 11.5px;
}
.warn-t {
  color: var(--warn);
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.svc {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.svc-dummy {
  grid-column: 1 / -1;
  border-style: dashed;
}
.svc h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 14px;
  font-weight: 620;
}
.svc-hint {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 400;
}
.svc-conflict {
  padding: 6px 10px;
  border-radius: var(--radius-s);
  background: var(--bad-weak);
  color: var(--bad);
  font-size: 12.5px;
}
.svc-note {
  padding: 6px 10px;
  border-radius: var(--radius-s);
  background: var(--line);
  color: var(--text-2);
  font-size: 12.5px;
}
.ev-pending {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}
.svc-layer {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.svc-l {
  color: var(--text-2);
  font-size: 12.5px;
}
.svc-v {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ev-main,
.ev-meta,
.ev-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.ev-meta,
.ev-n,
.ev-ctx,
.ev-said {
  color: var(--text-3);
  font-size: 12px;
}
.ev-ctx {
  color: var(--text-2);
}
.ev-list {
  display: grid;
  gap: 6px;
  list-style: none;
}
.rq {
  list-style: none;
}
.rq-i {
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.rq-i:first-child {
  border-top: 0;
}
.rq-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.rq-src {
  color: var(--text-3);
  font-size: 12px;
}
.rq-t {
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .idh {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .idh-i {
    border-bottom: 1px solid var(--line);
    margin-bottom: -1px;
  }
  .svc-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .idh {
    grid-template-columns: minmax(0, 1fr);
  }
  .states {
    grid-template-columns: minmax(0, 1fr);
  }
  .ident-id {
    min-width: 320px;
  }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  .kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kpi {
    border-bottom: 1px solid var(--line);
    margin-bottom: -1px;
  }
  .rrow {
    grid-template-columns: 132px minmax(0, 1fr) auto;
  }
  .rrow-speed {
    grid-column: 2 / -1;
    grid-template-columns: repeat(4, auto);
    justify-content: start;
  }
  .hide-m {
    display: none;
  }
}
@media (max-width: 900px) {
  :root {
    --top: 48px;
  }
  .app {
    display: block;
  }
  .side {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    height: auto;
    padding: 8px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .brand {
    padding: 0 6px 0 0;
  }
  .brand-name,
  .nav-group,
  .side-meta {
    display: none;
  }
  .nav {
    flex-direction: row;
  }
  .nav a {
    white-space: nowrap;
  }
  .side-foot {
    margin: 0 0 0 auto;
    padding: 0 0 0 8px;
    border: 0;
    white-space: nowrap;
  }
  .top {
    padding: 0 16px;
  }
  .page,
  .skeleton {
    padding: 16px 16px 56px;
  }
  .cols-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .facts > div {
    border-bottom: 1px solid var(--line);
    margin-bottom: -1px;
  }
  .capsum {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .carriers {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .hide-s,
  .health span {
    display: none;
  }
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kpi strong {
    font-size: 20px;
  }
  .search {
    flex-basis: 100%;
    max-width: none;
  }
  .search kbd {
    display: none;
  }
  .toolbar select {
    flex: 1 1 40%;
    max-width: none;
  }
  .row {
    flex-wrap: wrap;
  }
  .row-main {
    flex: 1 1 calc(100% - 40px);
  }
  .row-due {
    min-width: 0;
  }
  .row-kind,
  .row-bal {
    display: none;
  }
  .rrow {
    grid-template-columns: minmax(0, 1fr);
  }
  .rrow-when {
    display: flex;
    gap: 10px;
    align-items: baseline;
  }
  .rrow-speed,
  .rnote {
    grid-column: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ladder {
    flex-wrap: wrap;
  }
  .fgrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .kv > div {
    grid-template-columns: 92px minmax(0, 1fr);
  }
  .timeline li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .pick-f {
    flex-direction: column;
    align-items: stretch;
    padding: 0 16px 14px;
  }
  .pick-f .note {
    padding: 0;
  }
  .map-l {
    grid-template-columns: minmax(0, 1fr);
  }
  .step span:last-child {
    display: none;
  }
  .step-now span:last-child {
    display: inline;
  }
  .toasts {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }
  .la-item {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    column-gap: 8px;
    padding: 12px;
  }
  .la-item > .la-ico {
    width: 28px;
    height: 28px;
  }
  .la-acts {
    gap: 0;
    margin-right: -4px;
  }
  .la-rels,
  .la-notes,
  .la-also {
    grid-column: 1 / -1;
  }
  .la-sum-h {
    margin-left: 0;
    flex-basis: 100%;
  }
  .la-tools {
    justify-content: flex-start;
  }
  .la-find {
    flex-wrap: wrap;
  }
  .la-find select {
    flex: 1 1 100%;
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* 可展开出处（PRD h.3） */
.prov {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted, inherit);
}
.prov > summary {
  cursor: pointer;
  width: max-content;
}
.prov dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px 10px;
  margin: 4px 0 0;
}
.prov dt {
  opacity: 0.75;
}
.prov dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------- 资金页（M2） ---------- */
.fm-body {
  padding: 12px 16px 14px;
  display: grid;
  gap: 12px;
  min-width: 0;
}
.fm-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.fm-n {
  display: inline-block;
  margin-left: 6px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 400;
}
.fm-n.warn-t {
  color: var(--warn);
}
.fm-ge {
  font-weight: 600;
}
.fm-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 12px;
}
.fm-box {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.fm-box-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.fm-readings,
.fm-hist,
.fm-notices,
.fm-entries,
.fm-losses,
.fm-src {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fm-hist {
  display: grid;
  gap: 2px;
  margin-top: 4px;
}
.fm-reading {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.fm-rc {
  min-width: 0;
  overflow-wrap: anywhere;
}
.fm-notices {
  display: grid;
  gap: 8px;
}
.fm-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
}
.fm-notice > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.fm-notice-ok {
  color: var(--text-3);
}
.fm-switch {
  display: inline-flex;
  gap: 4px;
}
.fm-switch .btn[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--accent);
}
.fm-period,
.fm-conv {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px 10px;
}
.fm-period .f,
.fm-conv .f {
  width: auto;
}
.fm-conv .f input[name="amount"] {
  width: 110px;
}
.fm-conv .f input[name="from"],
.fm-conv .f input[name="to"] {
  width: 80px;
  text-transform: uppercase;
}
.fm-view {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.fm-k {
  display: grid;
  gap: 2px;
}
.fm-side {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.fm-src {
  display: grid;
  gap: 2px;
}
.fm-entry,
.fm-legacy {
  display: grid;
  grid-template-columns: 92px minmax(0, 1.4fr) max-content minmax(0, 1.4fr);
  gap: 4px 12px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.fm-entry:first-child,
.fm-legacy:first-child {
  border-top: 0;
}
.fm-et,
.fm-er,
.fm-ex {
  min-width: 0;
  overflow-wrap: anywhere;
}
.fm-et .badge {
  margin-left: 6px;
}
.fm-ea {
  text-align: right;
  white-space: nowrap;
}
.fm-ex {
  grid-column: 2 / -1;
  color: var(--text-2);
  font-size: 12px;
}
.fm-entry .prov {
  grid-column: 2 / -1;
  margin-top: 0;
}
.fm-entry.is-reversed {
  color: var(--text-3);
}
.fm-entry.is-reversed .fm-ea {
  text-decoration: line-through;
}
.fm-entry.is-reversal {
  background: var(--violet-weak);
}
.fm-loss {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.fm-conv-out {
  min-height: 20px;
  display: grid;
  gap: 4px;
}
.fm-help p {
  margin-top: 4px;
  max-width: 70ch;
}
@media (max-width: 640px) {
  .fm-body {
    padding: 12px;
  }
  .fm-entry,
  .fm-legacy {
    grid-template-columns: minmax(0, 1fr) max-content;
  }
  .fm-ed {
    grid-column: 1 / -1;
  }
  .fm-et {
    grid-column: 1;
  }
  .fm-ea {
    grid-column: 2;
  }
  .fm-er,
  .fm-ex,
  .fm-entry .prov {
    grid-column: 1 / -1;
  }
  .fm-reading {
    grid-template-columns: max-content minmax(0, 1fr);
  }
  .fm-rc {
    grid-column: 1 / -1;
  }
}

/* ---------- 规则与期限、规则库、总览期限风险（M3） ---------- */
:root {
  --orange: #b4500a;
  --orange-weak: #fdeedd;
  --yellow: #7a5d00;
  --yellow-weak: #fbf3cf;
}
.dl-none {
  color: var(--text-3);
}
.dl-sub {
  color: var(--text-2);
  font-size: 12.5px;
  margin-left: 8px;
}
.dl-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.dl-tag-est {
  background: var(--warn-weak);
  color: var(--warn);
  border: 1px solid #ecd49d;
}
.dl-tag-lb {
  background: var(--violet-weak);
  color: var(--violet);
  border: 1px solid #d6c9f4;
}
.dl-tag-unv {
  background: var(--bad-weak);
  color: var(--bad);
  border: 1px dashed #e6a7b3;
}
.dl-tag-grey,
.dl-tag-stale {
  background: var(--sunken);
  color: var(--text-2);
  border: 1px dashed var(--line-strong);
}
.dl-q {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--sunken);
  color: var(--text-2);
  font-size: 12px;
  white-space: nowrap;
}
.dl-q-official_reading {
  background: var(--ok-weak);
  color: var(--ok);
  border-color: #b9dfcb;
}
.dl-q-rule_derived {
  background: var(--accent-weak);
  color: var(--accent);
  border-color: var(--accent-line);
}
.dl-q-estimated {
  background: var(--warn-weak);
  color: var(--warn);
  border-color: #ecd49d;
}
.dl-q-lower_bound {
  background: var(--violet-weak);
  color: var(--violet);
  border-color: #d6c9f4;
}
.dl-conf {
  font-weight: 600;
}
.dl-conf-rule_derived {
  color: var(--text-2);
}
.dl-conf-enforced_observation {
  color: var(--orange);
}
.dl-conf-terminated_on_fact {
  color: var(--bad);
}
.dl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 0 16px 10px;
}
.dl-refs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 16px 12px;
}
.dl-ref {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--sunken);
}
.dl-ref h3 {
  margin-bottom: 4px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 560;
}
.dl-ref-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 0;
}
.dl-big {
  font-size: 18px;
  font-weight: 650;
}
.dl-cands {
  display: grid;
  gap: 10px;
  padding: 0 16px 14px;
}
.dl-c {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
}
.dl-c[data-status="past_official_unenforced"],
.dl-c[data-status="past_official_unknown"] {
  border-color: #e6a7b3;
  background: #fffafb;
}
.dl-c[data-status="enforced"],
.dl-c[data-status="not_applicable"] {
  opacity: 0.8;
}
.dl-c-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.dl-slot {
  color: var(--text-3);
  font-size: 12px;
}
.dl-status {
  margin: 6px 0 8px;
  font-weight: 560;
}
.dl-dates {
  display: grid;
  gap: 2px;
}
.dl-d {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
}
.dl-d:first-child {
  border-top: 0;
}
.dl-d dt {
  color: var(--text-2);
}
.dl-d dd {
  min-width: 0;
  overflow-wrap: anywhere;
}
.dl-why {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-2);
}
.dl-why > summary {
  cursor: pointer;
  width: max-content;
}
.dl-kv {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 4px 10px;
  margin-top: 6px;
}
.dl-kv dd {
  min-width: 0;
}
.dl-ul {
  list-style: disc inside;
}
.dl-id {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--sunken);
}
.dl-tw {
  max-width: 100%;
  overflow-x: auto;
}
.dl-t {
  border-collapse: collapse;
  font-size: 12px;
}
.dl-t th,
.dl-t td {
  padding: 2px 10px 2px 0;
  text-align: left;
  white-space: nowrap;
  font-weight: 500;
}
.dl-t th {
  color: var(--text-3);
}

/* 总览：期限风险列表 */
.rk-list {
  display: grid;
}
.rk {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
  gap: 8px 24px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
}
.rk:first-child {
  border-top: 0;
}
.rk-red {
  border-left-color: var(--bad);
}
.rk-orange {
  border-left-color: var(--orange);
}
.rk-yellow {
  border-left-color: #c9a400;
}
.rk-grey {
  border-left-color: var(--text-3);
}
.rk-past {
  background: #fffafb;
}
.rk > .idh {
  margin-top: 0;
  align-self: start;
}
.rk-body {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.rk-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.rk-date {
  font-size: 17px;
  font-weight: 650;
}
.rk-sub {
  color: var(--text-2);
  font-size: 12.5px;
}
.rk-status {
  font-weight: 560;
}
.rk-past .rk-status {
  color: var(--bad);
}
span.rk-grey {
  padding: 1px 8px;
  border: 1px dashed var(--line-strong);
  border-radius: 5px;
  color: var(--text-2);
  font-size: 12.5px;
}
.rk-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.rk-chip-red {
  background: var(--bad);
}
.rk-chip-orange {
  background: var(--orange);
}
.rk-chip-yellow {
  background: #b89500;
}
.rk-chip-grey {
  background: var(--text-3);
}
.rk-meta {
  display: grid;
  gap: 2px;
}
.rk-m {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
}
.rk-m dt {
  color: var(--text-3);
  font-size: 12.5px;
}
.rk-m dd {
  min-width: 0;
  overflow-wrap: anywhere;
}
.rk-link {
  font-size: 12.5px;
  width: max-content;
}

/* 规则与期限页 */
.rt-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.rt-rules > .kr,
.rt-obs > .kr,
.kb-rules > .kr,
.kb-tipg > .kr {
  margin: 0 16px 10px;
}
.rt-sub {
  margin: 14px 16px 8px;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
}
.rt-rules > .empty-row,
.rt-obs > .empty-row {
  padding: 4px 16px 14px;
}
.rt-prod {
  padding: 0 16px 14px;
}
.rt-note {
  color: var(--text-2);
  font-size: 12.5px;
}
.kr {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
}
.kr-old {
  opacity: 0.65;
}
.kr-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.kr-sum {
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.kr-meta {
  margin-top: 4px;
  color: var(--text-2);
  font-size: 12.5px;
}
.kr-params {
  margin-top: 4px;
  font-size: 12.5px;
}
.kr-params > summary {
  cursor: pointer;
  width: max-content;
  color: var(--text-2);
}
.pv,
.pv-l {
  margin: 4px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--line);
}
.pv > div {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px 10px;
}
.pv dt {
  color: var(--text-3);
}
.pv dd,
.pv-l li {
  min-width: 0;
  overflow-wrap: anywhere;
}
.pv-l {
  list-style: none;
}

/* 规则库页 */
.kb-car {
  margin-top: 16px;
}
.kb-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 14px;
}
.kb-orig {
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 400;
}
.kb-body {
  display: grid;
  gap: 8px;
  padding: 0 16px 14px;
}
.kb-fam {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--sunken);
}
.kb-fam > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 8px 12px;
  cursor: pointer;
}
.kb-fam > .kr-meta,
.kb-fam > .prov {
  margin: 0 12px 8px;
}
.kb-rules {
  display: grid;
  gap: 0;
  padding: 4px 0 2px;
}
.kb-rules > .kr {
  margin: 0 12px 10px;
}
.kb-slug {
  color: var(--text-3);
  font-size: 12px;
}
.kb-n {
  margin-left: auto;
  color: var(--text-2);
  font-size: 12.5px;
}
.kb-tools {
  padding: 0 16px 8px;
}
.kb-filter {
  max-width: 260px;
}
.kb-tips {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
}
.kb-tipg h3 {
  margin: 4px 16px 6px;
  color: var(--text-2);
  font-size: 12.5px;
}
.row.is-superseded .row-title {
  color: var(--text-3);
  text-decoration: line-through;
}

@media (max-width: 900px) {
  .rt-cols,
  .dl-refs {
    grid-template-columns: minmax(0, 1fr);
  }
  .rk {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .dl-d {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .rk {
    padding: 12px;
  }
  .rk-m {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .rt-rules > .kr,
  .rt-obs > .kr,
  .kb-rules > .kr,
  .kb-tipg > .kr {
    margin-left: 12px;
    margin-right: 12px;
  }
  .kb-n {
    margin-left: 0;
    flex: 1 0 100%;
  }
  .dl-kv {
    grid-template-columns: minmax(0, 1fr);
  }
}
.rk .idh-compact .idh-title {
  display: block;
}

/* ---------- 登录与安全（v0.4） ---------- */
.offscreen {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.nav a[hidden],
.nav-group[hidden] {
  display: none;
}
.nav-n-warn {
  background: var(--warn-weak);
  color: var(--warn);
}
/* 受限会话：导航只保留“安全” */
body[data-restricted] .nav a:not(#nav-security),
body[data-restricted] .nav-group:not(#nav-account-group) {
  display: none;
}
/* 登录页 / 安装页：隐藏侧栏与顶栏，卡片居中 */
body[data-shell="bare"] .side,
body[data-shell="bare"] .top {
  display: none;
}
body[data-shell="bare"] .app {
  display: block;
}
body[data-shell="bare"] #root {
  display: grid;
  min-height: calc(100vh - 56px);
  align-content: center;
}
body[data-shell="bare"] .page {
  display: grid;
  justify-items: center;
  padding: 24px 16px;
}
.auth-card {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  padding: 28px 28px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.auth-card.auth-wide {
  width: min(560px, 100%);
}
.auth-card h1 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.auth-lead {
  color: var(--text-2);
}
.auth-card .note {
  border-radius: var(--radius-s);
  background: var(--sunken);
}
.auth-card .note-warn {
  background: var(--warn-weak);
}
.auth-card .note p {
  margin-top: 2px;
}
.btn-lg {
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
}
.auth-alt {
  display: flex;
  justify-content: center;
}
.auth-recovery,
.auth-form {
  display: grid;
  gap: 12px;
}
.auth-recovery[hidden] {
  display: none;
}
.ok-line {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--ok);
  font-size: 12.5px;
}
.agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.agree input {
  margin-top: 3px;
}
.agree .f-h {
  display: block;
}

/* 恢复码 / 一次性令牌 */
.codes {
  display: grid;
  gap: 14px;
}
.codes h2,
.modal-form > h2 {
  font-size: 16px;
  font-weight: 650;
}
.codes-warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #f3dcae;
  border-radius: var(--radius-s);
  background: var(--warn-weak);
  color: #6f4204;
  font-size: 12.5px;
}
.codes-warn .ico {
  flex: none;
  margin-top: 2px;
  color: var(--warn);
}
.codes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.code {
  padding: 8px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--sunken);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-align: center;
  user-select: all;
}
.codes-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.codes-next {
  display: grid;
  gap: 6px;
}
.modal.modal-wide {
  width: min(520px, calc(100vw - 32px));
}
.token-secret {
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--sunken);
}
.token-secret code {
  display: block;
  overflow-wrap: anywhere;
  user-select: all;
  font-size: 12.5px;
}

/* 横幅 */
.notice-slot:empty {
  display: none;
}
.notice-slot {
  padding: 14px 28px 0;
}
.banner > div {
  flex: 1 1 auto;
  min-width: 0;
}
.banner p {
  margin-top: 2px;
  font-size: 12.5px;
}
.banner-strong {
  border-color: var(--accent-line);
  background: var(--accent-weak);
  color: var(--text);
}
.banner-strong > .ico {
  flex: none;
  color: var(--accent);
}
.banner-bad {
  border-color: #f2c1ca;
  background: var(--bad-weak);
  color: #7d1d2e;
}
.banner-bad > .ico {
  flex: none;
  color: var(--bad);
}
.banner-ok {
  border-color: #bfe0cf;
  background: var(--ok-weak);
  color: #0f5a3d;
}
.banner-ok > .ico {
  flex: none;
  color: var(--ok);
}

/* 侧栏账号块 */
.acct {
  display: grid;
  gap: 4px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.acct-name {
  font-weight: 620;
  overflow-wrap: anywhere;
}
.acct-role {
  color: var(--text-3);
}
.acct-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

/* 安全页 */
.sec-stack {
  display: grid;
  gap: 16px;
}
.pk-add {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}
.pk-add-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pk-replace {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--line-strong);
  justify-items: start;
}
.row-actions {
  display: inline-flex;
  gap: 6px;
}
.rec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 16px 14px;
}
.rec-count {
  font-size: 15px;
  font-weight: 620;
}
.rec-row[data-tone="bad"] .rec-count,
.rec-row[data-tone="warn"] .rec-count {
  color: var(--warn);
}
.scope-list {
  clear: both; /* the fieldset legend floats at full width */
  display: grid;
  gap: 8px;
}
.scope-list + .fs-h {
  margin-top: 12px;
}
@media (max-width: 640px) {
  .auth-card {
    padding: 20px 16px;
  }
  .codes-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .notice-slot {
    padding: 12px 16px 0;
  }
  .rec-row {
    flex-direction: column;
    align-items: stretch;
  }
  .banner {
    flex-wrap: wrap;
  }
}

td.pk-name,
th.pk-name {
  min-width: 108px;
}
td.pk-name {
  white-space: nowrap;
}
@media (max-width: 900px) {
  .acct {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .acct-name,
  .acct-role {
    display: none;
  }
}

/* 备案号页脚：小号、居中，登录页 / 安装页与应用外壳共用 */
.icp {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
}
.icp a {
  color: inherit;
  text-decoration: none;
}
.icp a:hover,
.icp a:focus-visible {
  text-decoration: underline;
}