/* ABOUTME: 网魂信息·爱合·智慧教育 · 三层巡查框架 - 蓝紫→玫红极光渐变主题 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* 色彩 · 极光弧 */
  --bg-deep: #0b0830;
  --bg-night: #15102e;
  --bg-card: rgba(30, 22, 70, 0.72);
  --bg-card-hover: rgba(48, 32, 96, 0.86);

  --c-blue: #1a1a66;
  --c-violet: #6b2bd9;
  --c-purple: #9933ff;
  --c-pink: #ff3399;
  --c-red: #ff2244;
  --c-brick: #992222;

  --fg-white: #f5f4ff;
  --fg-mist: #b6a8d9;
  --fg-dim: #7a6e99;

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --grad-main: linear-gradient(
    120deg,
    #1a1a66 0%,
    #6b2bd9 35%,
    #9933ff 55%,
    #ff3399 80%,
    #992222 100%
  );
  --grad-edge: linear-gradient(
    135deg,
    #6b2bd9 0%,
    #ff3399 60%,
    #ff2244 100%
  );
  --grad-soft: linear-gradient(
    135deg,
    rgba(107, 43, 217, 0.6) 0%,
    rgba(255, 51, 153, 0.5) 60%,
    rgba(255, 34, 68, 0.5) 100%
  );

  /* 字体 */
  --font-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --font-sans: "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei",
    sans-serif;
  --font-mono: "JetBrains Mono", "Menlo", monospace;

  /* 缓动 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* 圆角 */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 10px;
}

html,
body {
  background: var(--bg-deep);
  color: var(--fg-white);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

/* 极光弧：固定在右上角的弧形渐变 */
body {
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  top: -30vh;
  right: -25vw;
  width: 110vh;
  height: 110vh;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 30% 70%,
      rgba(255, 34, 68, 0.85) 0%,
      rgba(255, 51, 153, 0.7) 18%,
      rgba(153, 51, 255, 0.55) 38%,
      rgba(107, 43, 217, 0.35) 58%,
      rgba(26, 26, 102, 0.15) 76%,
      transparent 88%
    );
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
body::after {
  /* 弧形轮廓亮线 */
  content: "";
  position: fixed;
  top: -28vh;
  right: -23vw;
  width: 106vh;
  height: 106vh;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    conic-gradient(
      from 200deg at 30% 70%,
      transparent 0deg,
      transparent 60deg,
      rgba(255, 34, 68, 0.55) 130deg,
      rgba(255, 51, 153, 0.7) 170deg,
      rgba(153, 51, 255, 0.4) 210deg,
      transparent 260deg,
      transparent 360deg
    )
    border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* === 页眉 === */
.page-header {
  position: relative;
  padding: 64px 24px 36px;
  text-align: center;
}
.header-inner {
  max-width: 1080px;
  margin: 0 auto;
}
.header-brand {
  position: absolute;
  top: 24px;
  left: 32px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  animation: fadeUp 600ms var(--ease) 80ms forwards;
  z-index: 2;
}
.brand-seal {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-main);
  border-radius: var(--r-2);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 26px;
  color: var(--fg-white);
  letter-spacing: 0;
  flex-shrink: 0;
  box-shadow:
    0 6px 18px rgba(107, 43, 217, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.brand-text {
  text-align: left;
  line-height: 1.15;
}
.brand-zh {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.08em;
  color: var(--fg-white);
}
.brand-en {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--fg-mist);
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.brand-en-accent {
  color: #ff3399;
  font-weight: 500;
}

.header-nav {
  position: absolute;
  top: 28px;
  right: 32px;
  z-index: 2;
  opacity: 0;
  animation: fadeUp 600ms var(--ease) 160ms forwards;
}
.header-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-mist);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-2);
  transition: all 360ms var(--ease);
}
.header-nav-link:hover {
  color: var(--fg-white);
  border-color: var(--c-magenta);
  background: rgba(153, 51, 255, 0.15);
  box-shadow: 0 0 20px rgba(153, 51, 255, 0.2);
}

.page-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 38px;
  letter-spacing: 0.12em;
  color: var(--fg-white);
  margin-bottom: 14px;
  opacity: 0;
  animation: fadeUp 700ms var(--ease) 200ms forwards;
}
.title-line {
  flex: 0 0 80px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 51, 153, 0.5),
    transparent
  );
}
.title-main {
  position: relative;
  white-space: nowrap;
  background: var(--grad-edge);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.title-sub {
  display: none;
}
.page-subtitle {
  color: var(--fg-mist);
  font-size: 13px;
  letter-spacing: 0.3em;
  margin-top: 8px;
  opacity: 0;
  animation: fadeUp 700ms var(--ease) 320ms forwards;
}

/* === 搜索栏 === */
.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto 24px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  transition: border-color 360ms var(--ease), box-shadow 360ms var(--ease);
  animation: fadeUp 700ms var(--ease) 180ms forwards;
  opacity: 0;
}
.search-bar:focus-within {
  border-color: var(--c-violet);
  box-shadow: 0 0 0 3px rgba(107, 43, 217, 0.2);
}
.search-icon {
  flex-shrink: 0;
  color: var(--c-text-muted);
  transition: color 360ms var(--ease);
}
.search-bar:focus-within .search-icon {
  color: var(--c-violet);
}
.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: 400 15px/1.6 'Noto Sans SC', system-ui, sans-serif;
  color: var(--c-text);
  min-width: 0;
}
.search-input::placeholder {
  color: var(--c-text-muted);
}
.search-clear {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-text-muted);
  font: 400 14px/1 system-ui, sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 360ms var(--ease), color 360ms var(--ease);
}
.search-clear:hover {
  background: var(--c-pink);
  color: #fff;
}

/* === 主体 === */
.main-wrapper {
  flex: 1;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

.tier {
  margin-top: 36px;
}
.tier-label {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.tier-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 120px;
  height: 1px;
  background: var(--grad-edge);
}
.tier-num {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: var(--grad-edge);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tier-name {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--fg-white);
  letter-spacing: 0.16em;
  font-weight: 500;
}
.record-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-mist);
  letter-spacing: 0.1em;
}

/* === 第一层 · 大类卡片 === */
.major-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}

.major-card {
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  padding: 28px 24px 22px;
  cursor: pointer;
  transition:
    border-color 360ms var(--ease),
    background 360ms var(--ease),
    transform 360ms var(--ease),
    box-shadow 360ms var(--ease);
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUp 560ms var(--ease) forwards;
  position: relative;
  overflow: hidden;
}
.major-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-3);
  padding: 1px;
  background: var(--grad-edge);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 360ms var(--ease);
  pointer-events: none;
}
.major-card:hover {
  background: var(--bg-card-hover);
  box-shadow: 0 8px 32px rgba(107, 43, 217, 0.24);
}
.major-card:hover::before {
  opacity: 0.7;
}
.major-card.expanded {
  background: var(--bg-card-hover);
  box-shadow: 0 10px 40px rgba(255, 51, 153, 0.18);
}
.major-card.expanded::before {
  opacity: 1;
}

.major-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.major-ordinal {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--grad-edge);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.major-code {
  font-family: "Noto Serif SC", serif;
  font-size: 12px;
  font-weight: 600;
  color: #F5F4FF;
  letter-spacing: 0.14em;
  padding: 4px 12px;
  border: 1px solid rgba(255, 51, 153, 0.5);
  border-radius: 999px;
  background: linear-gradient(
    120deg,
    rgba(107, 43, 217, 0.22) 0%,
    rgba(255, 51, 153, 0.24) 60%,
    rgba(255, 34, 68, 0.22) 100%
  );
  box-shadow: 0 2px 10px rgba(255, 51, 153, 0.22);
  text-shadow: 0 1px 4px rgba(255, 51, 153, 0.4);
  white-space: nowrap;
}

.major-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--fg-white);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.major-motto {
  font-size: 12px;
  color: var(--fg-mist);
  letter-spacing: 0.18em;
  margin-bottom: 22px;
}

.major-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.major-count {
  font-size: 12px;
  color: var(--fg-mist);
  letter-spacing: 0.1em;
}
.major-toggle {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chev {
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--c-pink);
  border-bottom: 1px solid var(--c-pink);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 360ms var(--ease);
}
.major-card.expanded .chev {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* 子面板 */
.sub-panel {
  grid-column: 1 / -1;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 480ms var(--ease),
    opacity 360ms var(--ease) 60ms;
}
.major-card.expanded .sub-panel {
  max-height: 1400px;
  opacity: 1;
}
.sub-panel-inner {
  padding-top: 22px;
}

.sub-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.sub-divider-line {
  flex: 1;
  height: 1px;
  background: var(--line);
}
.sub-divider-text {
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: 0.24em;
  white-space: nowrap;
  background: var(--grad-edge);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sub-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sub-item {
  background: rgba(11, 8, 48, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition:
    border-color 320ms var(--ease),
    background 320ms var(--ease);
}
.sub-item:hover {
  border-color: rgba(255, 51, 153, 0.5);
  background: rgba(48, 32, 96, 0.6);
}
.sub-btn {
  background: transparent;
  border: 0;
  color: var(--fg-white);
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-align: left;
  position: relative;
}
.sub-btn::after {
  content: "";
  position: absolute;
  left: 38px;
  right: 24px;
  bottom: -2px;
  height: 1px;
  background: var(--grad-edge);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms var(--ease);
}
.sub-btn:hover::after {
  transform: scaleX(1);
}
.sub-btn:hover .sub-name {
  background: var(--grad-edge);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sub-btn:hover .sub-arrow {
  color: var(--c-pink);
}
.sub-idx {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.1em;
  min-width: 24px;
}
.sub-name {
  font-size: 14px;
  color: var(--fg-white);
  transition: color 280ms var(--ease);
}
.sub-arrow {
  margin-left: auto;
  color: var(--fg-dim);
  font-size: 18px;
  line-height: 1;
  transition: color 280ms var(--ease);
}
.sub-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--fg-dim);
  padding: 4px 10px;
  border: 1px dashed rgba(182, 168, 217, 0.3);
  border-radius: 999px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  cursor: not-allowed;
}
.sub-tag .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fg-dim);
}

/* === 巡查记录 === */
.records-section {
  margin-top: 56px;
}
.records-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  overflow: hidden;
}
.records-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.records-table thead th {
  text-align: left;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.16em;
  padding: 16px 18px;
  background: rgba(11, 8, 48, 0.5);
  border-bottom: 1px solid var(--line-strong);
  color: #a8c8ff;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
.records-table thead {
  background: rgba(11, 8, 48, 0.5);
}
.records-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--fg-white);
  vertical-align: top;
}
.records-table tbody tr:last-child td {
  border-bottom: 0;
}
.empty-row td {
  text-align: center;
  color: var(--fg-mist);
  font-family: var(--font-serif);
  letter-spacing: 0.3em;
  padding: 44px 16px !important;
}
.rec-row {
  opacity: 0;
  animation: fadeUp 420ms var(--ease) forwards;
}
.rec-row:hover td {
  background: rgba(255, 51, 153, 0.05);
}
.col-time {
  white-space: nowrap;
  width: 156px;
}
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-mist);
  letter-spacing: 0.04em;
}
.cat-major {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--fg-white);
  letter-spacing: 0.06em;
}
.cat-sub {
  font-size: 11px;
  color: var(--fg-mist);
  margin-top: 2px;
  letter-spacing: 0.06em;
}
.col-desc {
  max-width: 360px;
  color: var(--fg-white);
}
.col-by {
  color: var(--fg-mist);
  font-size: 12px;
  white-space: nowrap;
}
.chip {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--r-1);
  letter-spacing: 0.1em;
  font-family: var(--font-sans);
  border: 1px solid transparent;
}
.chip-type.chip-fault {
  color: #ff7a8e;
  border-color: rgba(255, 34, 68, 0.5);
  background: rgba(255, 34, 68, 0.12);
}
.chip-type.chip-err {
  color: #ffa1cf;
  border-color: rgba(255, 51, 153, 0.5);
  background: rgba(255, 51, 153, 0.12);
}
.chip-type.chip-ask {
  color: #c9a8ff;
  border-color: rgba(153, 51, 255, 0.5);
  background: rgba(153, 51, 255, 0.12);
}
.chip-urgent.chip-low {
  color: #a89cff;
  border-color: rgba(107, 43, 217, 0.45);
}
.chip-urgent.chip-mid {
  color: #ffa1cf;
  border-color: rgba(255, 51, 153, 0.5);
}
.chip-urgent.chip-high {
  color: #ff7a8e;
  border-color: rgba(255, 34, 68, 0.55);
  background: rgba(255, 34, 68, 0.12);
}
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-pink);
  margin-right: 8px;
  box-shadow: 0 0 8px rgba(255, 51, 153, 0.5);
  vertical-align: middle;
}

/* === 页脚 === */
.page-footer {
  padding: 30px 24px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--fg-dim);
  letter-spacing: 0.3em;
}
.foot-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.foot-line {
  width: 60px;
  height: 1px;
  background: var(--grad-edge);
  opacity: 0.55;
}
.foot-access {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(11, 8, 48, 0.55);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  position: relative;
  transition:
    border-color 320ms var(--ease),
    background 320ms var(--ease),
    box-shadow 320ms var(--ease);
}
.foot-access:hover {
  border-color: rgba(255, 51, 153, 0.5);
  background: rgba(48, 32, 96, 0.5);
  box-shadow: 0 6px 22px rgba(255, 51, 153, 0.18);
}
.foot-access-label {
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: 0.24em;
  background: var(--grad-edge);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.foot-access-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-white);
  text-decoration: none;
  letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
  transition:
    color 240ms var(--ease),
    border-color 240ms var(--ease);
  word-break: break-all;
}
.foot-access-link:hover {
  color: var(--c-pink);
  border-bottom-color: rgba(255, 51, 153, 0.6);
}

/* === 模态框 === */
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(7, 4, 24, 0.78);
  display: flex;
  align-items: flex-start;          /* 改成 flex-start，配合 modal margin:auto 实现"短则居中，高则可滚" */
  justify-content: center;
  padding: 24px;
  overflow-y: auto;                 /* 关键：允许遮罩内整体竖向滚动 */
  overscroll-behavior: contain;     /* 防止滚到底之后传穿到 body */
  -webkit-overflow-scrolling: touch;/* iOS 惯性滚动 */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 320ms var(--ease),
    visibility 0s linear 320ms;
  z-index: 100;
}
.modal-mask.show {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 320ms var(--ease),
    visibility 0s linear 0s;
}
.modal {
  width: 100%;
  max-width: 520px;
  background: rgba(21, 16, 46, 0.96);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3);
  padding: 28px 28px 24px;
  margin: auto;                     /* 在 mask (flex column) 中实现"未溢出时居中，溢出时正常滚" */
  transform: translateY(16px);
  opacity: 0;
  transition:
    transform 420ms var(--ease),
    opacity 420ms var(--ease);
  position: relative;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 51, 153, 0.18);
}
.modal-mask.show .modal {
  transform: translateY(0);
  opacity: 1;
}
.modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: var(--grad-edge);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.modal-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  margin-bottom: 6px;
  background: var(--grad-edge);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.modal-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--fg-white);
  letter-spacing: 0.08em;
}
.modal-close {
  background: transparent;
  border: 0;
  color: var(--fg-mist);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 240ms var(--ease);
}
.modal-close:hover {
  color: var(--c-pink);
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-row-double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-row-double > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-label {
  font-size: 12px;
  color: var(--fg-mist);
  letter-spacing: 0.16em;
  font-family: var(--font-serif);
}
.opt {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 0.1em;
  margin-left: 4px;
}
.form-control {
  background: rgba(11, 8, 48, 0.7);
  border: 1px solid var(--line-strong);
  color: var(--fg-white);
  border-radius: var(--r-2);
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  outline: none;
  transition:
    border-color 240ms var(--ease),
    background 240ms var(--ease),
    box-shadow 240ms var(--ease);
  resize: vertical;
}
.form-control:hover {
  border-color: rgba(255, 51, 153, 0.4);
}
.form-control:focus {
  border-color: var(--c-pink);
  background: rgba(11, 8, 48, 0.9);
  box-shadow: 0 0 0 3px rgba(255, 51, 153, 0.16);
}
select.form-control {
  appearance: none;
  background-image: linear-gradient(
      45deg,
      transparent 50%,
      var(--c-pink) 50%
    ),
    linear-gradient(135deg, var(--c-pink) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
  background-color: rgba(11, 8, 48, 0.7);
}
textarea.form-control {
  font-family: var(--font-sans);
  min-height: 80px;
  line-height: 1.7;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.btn {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.2em;
  padding: 9px 22px;
  border-radius: var(--r-2);
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 240ms var(--ease),
    border-color 240ms var(--ease),
    color 240ms var(--ease),
    box-shadow 240ms var(--ease);
}
.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--fg-mist);
}
.btn-ghost:hover {
  border-color: rgba(255, 51, 153, 0.5);
  color: var(--fg-white);
}
.btn-primary {
  background: var(--grad-edge);
  color: var(--fg-white);
  font-weight: 600;
  box-shadow: 0 6px 22px rgba(255, 51, 153, 0.32);
}
.btn-primary:hover {
  box-shadow:
    0 8px 28px rgba(255, 51, 153, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

/* === 动画 === */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === 响应式 === */
@media (max-width: 900px) {
  .major-grid {
    grid-template-columns: 1fr;
  }
  .page-header {
    padding-top: 96px;
  }
  .page-title {
    font-size: 28px;
    gap: 14px;
  }
  .title-line {
    flex: 0 0 40px;
  }
  body::before,
  body::after {
    top: -20vh;
    right: -40vw;
    width: 90vh;
    height: 90vh;
  }
}
@media (max-width: 640px) {
  .page-header {
    padding: 84px 18px 24px;
  }
  .header-brand {
    top: 18px;
    left: 18px;
    gap: 10px;
  }
  .brand-seal {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  .brand-zh {
    font-size: 18px;
  }
  .header-nav {
    top: 64px;
    right: 18px;
  }
  .header-nav-link {
    font-size: 12px;
    padding: 6px 12px;
  }
  .main-wrapper {
    padding: 18px 16px 32px;
  }
  .page-title {
    font-size: 24px;
  }
  .records-wrapper {
    overflow-x: auto;
  }
  .records-table {
    min-width: 720px;
  }
  .form-row-double {
    grid-template-columns: 1fr;
  }
  .modal {
    padding: 22px 20px 20px;
  }
}

/* ============================================================ */
/* 公网巡查模块                                                  */
/* ============================================================ */

/* 头部右上角操作栏 */
.header-actions {
  position: absolute;
  top: 24px;
  right: 32px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}

/* 用户身份按钮（未登录） */
.identity-entry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(11, 8, 48, 0.55);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--fg-white);
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.16em;
  transition:
    border-color 240ms var(--ease),
    background 240ms var(--ease),
    color 240ms var(--ease);
  opacity: 0;
  animation: fadeUp 600ms var(--ease) 160ms forwards;
}
.identity-entry:hover {
  border-color: rgba(168, 200, 255, 0.55);
  background: rgba(48, 32, 96, 0.55);
}
.ie-icon {
  width: 16px;
  height: 16px;
  color: #a8c8ff;
}
.ie-text {
  font-weight: 600;
}

/* 用户身份会话牌（已登录） */
.identity-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 10px;
  background: rgba(11, 8, 48, 0.7);
  border: 1px solid transparent;
  border-radius: 999px;
  position: relative;
  background-image: linear-gradient(rgba(11, 8, 48, 0.88), rgba(11, 8, 48, 0.88)),
    var(--grad-edge);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: fadeUp 420ms var(--ease) forwards;
}
.identity-card[hidden] {
  display: none !important;
}
.ic-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-edge);
  color: var(--fg-white);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.ic-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  gap: 1px;
}
.ic-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-white);
  letter-spacing: 0.04em;
}
.ic-sid {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-mist);
  letter-spacing: 0.14em;
}
.ic-sid span {
  background: var(--grad-edge);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}
.ic-logout {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg-mist);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 220ms var(--ease), color 220ms var(--ease);
}
.ic-logout:hover {
  background: rgba(255, 80, 110, 0.15);
  color: #ff506e;
}
.ic-logout svg {
  width: 14px;
  height: 14px;
}

/* 公网巡查入口（去掉之前的绝对定位，由 .header-actions 排版） */
.public-entry {
  position: static;
  top: auto;
  right: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(11, 8, 48, 0.65);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--fg-white);
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.16em;
  z-index: 2;
  transition:
    background 280ms var(--ease),
    box-shadow 280ms var(--ease),
    transform 280ms var(--ease);
  opacity: 0;
  animation: fadeUp 600ms var(--ease) 200ms forwards;
  background-image: linear-gradient(rgba(11, 8, 48, 0.85), rgba(11, 8, 48, 0.85)),
    var(--grad-edge);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1px solid transparent;
}
.public-entry:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(255, 51, 153, 0.36);
}
.pe-icon {
  width: 18px;
  height: 18px;
  color: var(--c-pink);
}
.pe-text {
  font-weight: 600;
}
.pe-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--grad-edge);
  color: var(--fg-white);
  font-weight: 600;
}

/* 大尺寸模态 */
.modal-lg {
  max-width: 640px;
  padding: 28px 30px 24px;
}

.form-hint {
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* 检测项 grid */
.check-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(11, 8, 48, 0.55);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  cursor: pointer;
  transition:
    border-color 220ms var(--ease),
    background 220ms var(--ease);
}
.check-item:hover {
  border-color: rgba(255, 51, 153, 0.4);
  background: rgba(48, 32, 96, 0.5);
}
.check-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.check-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: rgba(11, 8, 48, 0.6);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  transition:
    border-color 200ms var(--ease),
    background 200ms var(--ease);
}
.check-item input:checked + .check-box {
  background: var(--grad-edge);
  border-color: transparent;
}
.check-item input:checked + .check-box::after {
  content: "";
  position: absolute;
  inset: 3px 4px 4px 3px;
  border-right: 2px solid var(--fg-white);
  border-bottom: 2px solid var(--fg-white);
  transform: rotate(45deg) translate(-1px, -1px);
}
.check-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.ci-name {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--fg-white);
  letter-spacing: 0.06em;
}
.ci-desc {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 0.06em;
}

/* 支付弹层 */
.modal-pay {
  max-width: 560px;
  padding: 28px 30px 24px;
}
.pay-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}
.pay-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.pay-qr-frame {
  width: 220px;
  height: 220px;
  background: rgba(11, 8, 48, 0.9);
  border-radius: var(--r-2);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.pay-qr-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-2);
  padding: 1px;
  background: var(--grad-edge);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.pay-qr-frame canvas {
  background: transparent !important;
}
.pay-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-mono);
}
.pay-cur {
  font-size: 14px;
  color: var(--c-pink);
}
.pay-num {
  font-size: 26px;
  font-weight: 600;
  background: var(--grad-edge);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.02em;
}
.pay-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pay-target {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--fg-white);
  letter-spacing: 0.06em;
}
.pay-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 0;
  max-height: 130px;
  overflow-y: auto;
}
.pay-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fg-mist);
}
.pli-code {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--fg-mist);
  letter-spacing: 0.08em;
}
.pay-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-mist);
  padding: 10px 12px;
  background: rgba(11, 8, 48, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.pay-status em {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--c-pink);
  font-weight: 600;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-pink);
  box-shadow: 0 0 0 0 rgba(255, 51, 153, 0.7);
  animation: pulse 1.6s var(--ease) infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 51, 153, 0.55);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 51, 153, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 51, 153, 0);
  }
}
.pay-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
}
.pay-foot {
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 0.06em;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* 报告弹层 */
.modal-report {
  max-width: 760px;
  padding: 24px 24px 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.modal-report .modal-header {
  margin-bottom: 0;
  padding: 0 4px 16px;
}
.report-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 22px 4px 8px;
}
.report-content {
  background: #0b0830;
  padding: 28px 28px 24px;
  border-radius: var(--r-2);
  border: 1px solid var(--line-strong);
  position: relative;
}
.report-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0 22px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.rc-mark {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-edge);
  color: var(--fg-white);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 30px;
  border-radius: var(--r-2);
  box-shadow: 0 6px 24px rgba(255, 51, 153, 0.3);
  margin-bottom: 6px;
}
.rc-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.12em;
  background: var(--grad-edge);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rc-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-mist);
  letter-spacing: 0.24em;
}

.report-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
  margin-bottom: 22px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.rm-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
}
.rm-k {
  font-family: var(--font-serif);
  color: #a8c8ff;
  letter-spacing: 0.18em;
  min-width: 64px;
  flex-shrink: 0;
}
.rm-v {
  color: var(--fg-white);
  font-family: var(--font-mono);
  word-break: break-all;
}

.report-section-title {
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.22em;
  color: #a8c8ff;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.report-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ri-card {
  padding: 14px 16px;
  background: rgba(11, 8, 48, 0.6);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  position: relative;
  transition: border-color 320ms var(--ease);
}
.ri-card.lvl-pass {
  border-color: rgba(92, 220, 165, 0.5);
}
.ri-card.lvl-warn {
  border-color: rgba(255, 200, 90, 0.55);
}
.ri-card.lvl-fail {
  border-color: rgba(255, 80, 110, 0.6);
}
.ri-card.lvl-info {
  border-color: rgba(168, 200, 255, 0.5);
}
.ri-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.ri-code {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg-mist);
  letter-spacing: 0.14em;
}
.ri-name {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--fg-white);
  letter-spacing: 0.08em;
  flex: 1;
}
.ri-status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-mist);
}
.lvl-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fg-mist);
}
.lvl-pass .ri-status {
  color: #5cdca5;
}
.lvl-pass .lvl-dot {
  background: #5cdca5;
  box-shadow: 0 0 8px rgba(92, 220, 165, 0.6);
}
.lvl-warn .ri-status {
  color: #ffc85a;
}
.lvl-warn .lvl-dot {
  background: #ffc85a;
  box-shadow: 0 0 8px rgba(255, 200, 90, 0.6);
}
.lvl-fail .ri-status {
  color: #ff506e;
}
.lvl-fail .lvl-dot {
  background: #ff506e;
  box-shadow: 0 0 8px rgba(255, 80, 110, 0.6);
}
.lvl-info .ri-status {
  color: #a8c8ff;
}
.lvl-info .lvl-dot {
  background: #a8c8ff;
  box-shadow: 0 0 8px rgba(168, 200, 255, 0.6);
}
.ri-card.running .ri-status {
  color: var(--c-pink);
}
.ri-card.running .ri-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-pink);
  margin-right: 6px;
  animation: pulse 1.4s var(--ease) infinite;
}
.ri-metric {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #a8c8ff;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.ri-detail {
  font-size: 12px;
  color: var(--fg-mist);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.report-foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.rf-line {
  flex: 1;
  height: 1px;
  background: var(--grad-edge);
  opacity: 0.4;
}
.rf-text {
  font-family: var(--font-serif);
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 4px 20px;
  border-top: 1px solid var(--line);
  margin-top: 12px;
}

/* 响应式 */
@media (max-width: 900px) {
  .public-entry {
    top: 20px;
    right: 18px;
    padding: 8px 14px;
    font-size: 13px;
  }
  .pay-body {
    grid-template-columns: 1fr;
  }
  .pay-qr-wrap {
    align-items: center;
  }
  .check-grid {
    grid-template-columns: 1fr;
  }
  .report-meta {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .public-entry .pe-text {
    display: none;
  }
  .public-entry {
    padding: 8px 12px;
  }
  .modal-lg,
  .modal-pay,
  .modal-report {
    padding: 22px 18px 18px;
  }
}

/* ============= 用户身份登录模态 ============= */
.modal-login {
  width: min(420px, 100%);
  padding: 28px 28px 24px;
}
.modal-login .modal-title {
  text-align: center;
  letter-spacing: 0.22em;
}
.login-sub {
  margin: 6px 0 22px;
  text-align: center;
  font-size: 12px;
  color: var(--fg-mist);
  letter-spacing: 0.18em;
}

.login-step {
  display: none;
  animation: fadeUp 360ms var(--ease) forwards;
}
.login-step.is-active {
  display: block;
}

.login-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.login-row .form-input {
  flex: 1;
  margin: 0;
}
.login-cta {
  width: auto;
  padding: 0 18px;
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
}
.login-cta[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(48, 32, 96, 0.5);
  color: var(--fg-static);
}

.code-hint {
  margin: 14px 0 18px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(48, 32, 96, 0.4);
  border: 1px dashed rgba(168, 200, 255, 0.4);
  display: flex;
  align-items: center;
  gap: 12px;
}
.code-hint-label {
  font-size: 11px;
  color: var(--fg-mist);
  letter-spacing: 0.2em;
  flex-shrink: 0;
}
.code-hint-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.4em;
  background: var(--grad-edge);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.code-hint-tip {
  margin-left: auto;
  font-size: 10px;
  color: var(--fg-static);
  letter-spacing: 0.18em;
}

.login-tip {
  text-align: center;
  font-size: 11px;
  color: var(--fg-static);
  letter-spacing: 0.18em;
  margin-top: 14px;
}
.login-error {
  margin-top: -6px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #ff506e;
  letter-spacing: 0.1em;
  min-height: 16px;
}

.login-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* 登录成功后的 SID 揭示卡 */
.sid-reveal {
  margin: 12px 0 4px;
  padding: 18px 18px;
  border-radius: 10px;
  background: rgba(11, 8, 48, 0.7);
  position: relative;
  background-image: linear-gradient(rgba(11, 8, 48, 0.86), rgba(11, 8, 48, 0.86)),
    var(--grad-edge);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1px solid transparent;
  text-align: center;
}
.sid-label {
  font-size: 11px;
  color: var(--fg-mist);
  letter-spacing: 0.3em;
}
.sid-value {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.22em;
  background: var(--grad-edge);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sid-phone {
  margin-top: 10px;
  font-size: 12px;
  color: var(--fg-mist);
  letter-spacing: 0.12em;
}

/* 提交人字段在已登录时的锁定态 */
.form-input.is-locked,
.form-textarea.is-locked {
  background: rgba(11, 8, 48, 0.78);
  color: var(--fg-mist);
  cursor: not-allowed;
}
.lock-hint {
  font-size: 11px;
  color: var(--fg-static);
  letter-spacing: 0.14em;
  margin-top: 6px;
}
.lock-hint strong {
  background: var(--grad-edge);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
  margin-left: 4px;
}

/* 报告中的会话信息条 */
.session-band {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(11, 8, 48, 0.55);
  border: 1px dashed rgba(168, 200, 255, 0.3);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--fg-mist);
}
.session-band b {
  color: var(--fg-white);
  font-weight: 600;
}

@media (max-width: 640px) {
  .header-actions {
    top: 18px;
    right: 18px;
    gap: 8px;
  }
  .identity-entry .ie-text,
  .ic-meta .ic-sid {
    display: none;
  }
  .modal-login {
    padding: 22px 18px 18px;
  }
  .code-hint {
    flex-wrap: wrap;
  }
  .code-hint-tip {
    margin-left: 0;
    width: 100%;
  }
}

/* ============ 试点 · 固定电信服务 · 申请人徽标 ============ */
.applicant-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 9px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ffe6f0;
  background: linear-gradient(120deg, rgba(107, 43, 217, 0.32), rgba(255, 51, 153, 0.32));
  border: 1px solid rgba(255, 51, 153, 0.5);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(255, 51, 153, 0.18);
  white-space: nowrap;
}
.applicant-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff3399 0%, #ff2244 100%);
  box-shadow: 0 0 6px rgba(255, 51, 153, 0.7);
}

/* ====== 网络信息身份认证（固定电信服务试点） ====== */
.net-auth {
  margin: 14px 0 4px;
  padding: 14px 16px 6px;
  border: 1px solid rgba(153, 51, 255, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(107, 43, 217, 0.08), rgba(255, 51, 153, 0.04));
  position: relative;
}
.net-auth[hidden] {
  display: none;
}
.net-auth::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 11px;
  padding: 1px;
  background: linear-gradient(135deg, #6b2bd9 0%, #ff3399 60%, #ff2244 100%);
  -webkit-mask:
    linear-gradient(#000, #000) content-box,
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.35;
  pointer-events: none;
}
.net-auth-legend {
  padding: 0 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #f5f4ff;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.net-auth-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6b2bd9, #ff3399 70%, #ff2244);
  box-shadow: 0 0 8px rgba(255, 51, 153, 0.6);
}
.net-auth-sub {
  font-size: 11.5px;
  color: #b6a8d9;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.net-auth .form-row {
  margin-top: 10px;
}
.net-auth .form-row:first-of-type {
  margin-top: 6px;
}

/* ====== 巡查记录 · 身份码列 ====== */
.records-table .col-idcode {
  width: 200px;
  white-space: nowrap;
}
.idcode-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #f5f4ff;
  background: rgba(107, 43, 217, 0.18);
  border: 1px solid rgba(153, 51, 255, 0.35);
}
.idcode-empty {
  color: #7a6e99;
  font-size: 13px;
}

/* === 联系人信息 · 姓名 / 电话 两列布局（替换原"提交人"单一字段） === */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-grid-2 .form-control {
  width: 100%;
}
@media (max-width: 540px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}

/* ===== 手机号实名验证区块（固定电信服务表单专属） ===== */
.phone-verify {
  margin: 18px 0 4px;
  padding: 16px 18px 18px;
  border: 1px solid rgba(255, 51, 153, 0.32);
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      rgba(107, 43, 217, 0.10),
      rgba(255, 51, 153, 0.10),
      rgba(255, 34, 68, 0.10)
    );
  position: relative;
}
.phone-verify::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 1px;
  background: linear-gradient(135deg, #6B2BD9 0%, #FF3399 60%, #FF2244 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.45;
  pointer-events: none;
}
.phone-verify-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px;
  margin-left: -4px;
  color: #F5F4FF;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 15px;
}
.phone-verify-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FF3399, #FF2244 70%);
  box-shadow: 0 0 0 3px rgba(255, 51, 153, 0.18);
}
.phone-verify-sub {
  color: #B6A8D9;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.phone-verify-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}
.phone-verify-row.second {
  grid-template-columns: 1fr auto;
}
.btn-code {
  appearance: none;
  border: 0;
  padding: 0 16px;
  height: 40px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #F5F4FF;
  cursor: pointer;
  background: linear-gradient(120deg, #6B2BD9 0%, #FF3399 70%, #FF2244 100%);
  box-shadow: 0 4px 14px rgba(255, 51, 153, 0.28);
  transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 200ms;
}
.btn-code:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 51, 153, 0.42);
}
.btn-code:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: linear-gradient(120deg, rgba(107, 43, 217, 0.55), rgba(255, 51, 153, 0.55));
  box-shadow: none;
}
.verify-status {
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}
.verify-status[data-state="idle"]    { color: #B6A8D9; }
.verify-status[data-state="pending"] { color: #A8C8FF; }
.verify-status[data-state="success"] { color: #5BFFA0; }
.verify-status[data-state="error"]   { color: #FF6680; }

/* 窄屏 modal 缩边距 + 适配虚拟键盘弹起后剩余视高 */
@media (max-width: 540px) {
  .modal-mask { padding: 16px 12px; }
  .modal { padding: 22px 18px 18px; border-radius: 12px; }
  .modal-form { gap: 14px; }
  .net-auth, .phone-verify { padding: 14px 14px 16px; }
}

/* ============================================================
 *  20 个独立巡查登记页 · 页壳样式
 * ============================================================ */
body.inspect-page {
  background: #0B0830;
  min-height: 100vh;
  position: relative;
  padding-bottom: 60px;
}
body.inspect-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 60% 80% at 100% -10%,
      rgba(255, 51, 153, 0.22) 0%,
      rgba(107, 43, 217, 0.18) 30%,
      rgba(26, 26, 102, 0.1) 60%,
      transparent 90%
    ),
    radial-gradient(
      ellipse 80% 60% at -10% 110%,
      rgba(153, 51, 255, 0.12) 0%,
      transparent 70%
    );
  z-index: 0;
}

.inspect-header {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: 48px 32px 24px;
}
.inspect-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #B6A8D9;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border: 1px solid rgba(182, 168, 217, 0.32);
  border-radius: 999px;
  transition: all 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.inspect-back:hover {
  color: #F5F4FF;
  border-color: rgba(255, 51, 153, 0.6);
  background: rgba(255, 51, 153, 0.08);
}
.inspect-id {
  margin-top: 20px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: #B6A8D9;
}
.inspect-h1 {
  margin: 8px 0 6px;
  font-family: "Noto Serif SC", serif;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: linear-gradient(120deg, #A8C8FF 0%, #9933FF 35%, #FF3399 70%, #FF2244 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.inspect-h2 {
  margin: 0;
  color: #7A6E99;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.inspect-shell {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 32px;
}
.inspect-form {
  background: rgba(30, 22, 70, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 10px 40px rgba(11, 8, 48, 0.6);
}
.inspect-form .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

.inspect-tip {
  margin: 16px 4px 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #B6A8D9;
}
.inspect-tip[data-state="success"] { color: #5BFFA0; }
.inspect-tip[data-state="pending"] { color: #A8C8FF; }

.form-textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}
.form-input.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.05em;
}

@media (max-width: 720px) {
  .inspect-header { padding: 32px 18px 16px; }
  .inspect-shell { padding: 0 16px; }
  .inspect-h1 { font-size: 26px; }
  .inspect-form { padding: 24px 18px; }
}

/* ============================================================
 *  虎首镶底 · 四海共享
 * ============================================================ */
.tiger-share {
  position: fixed;
  right: 28px;
  bottom: 28px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #F5F4FF;
  z-index: 30;
  cursor: pointer;
  user-select: none;
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tiger-share:hover {
  transform: translateY(-4px);
}
.tiger-glow {
  position: absolute;
  inset: -8px -8px 18px -8px;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse 70% 60% at 50% 50%,
      rgba(255, 51, 153, 0.35) 0%,
      rgba(107, 43, 217, 0.22) 40%,
      transparent 80%
    );
  filter: blur(8px);
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tiger-share:hover .tiger-glow {
  opacity: 1;
}
.tiger-svg {
  width: 40px;
  height: 40px;
  display: block;
  position: relative;
  filter: drop-shadow(0 3px 8px rgba(255, 51, 153, 0.5));
  transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.tiger-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tiger-share:hover .tiger-svg {
  transform: scale(1.06);
}
.tiger-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
}
.tiger-zh {
  font-family: "Noto Serif SC", serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  background: linear-gradient(120deg, #A8C8FF 0%, #9933FF 35%, #FF3399 70%, #FF2244 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.tiger-en {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 0.2em;
  color: #B6A8D9;
  opacity: 0.75;
}

@media (max-width: 540px) {
  .tiger-share { right: 14px; bottom: 14px; }
  .tiger-svg { width: 32px; height: 32px; }
  .tiger-zh { font-size: 10px; letter-spacing: 0.18em; }
  .tiger-en { font-size: 7px; letter-spacing: 0.18em; }
}

/* ===== 国家63行业标准 徽章 · 紧贴第一层标题右侧 ===== */
.tier-standard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 0 6px;
  padding: 5px 16px;
  border: 1px solid rgba(255, 51, 153, 0.5);
  border-radius: 999px;
  background: linear-gradient(
    120deg,
    rgba(107, 43, 217, 0.22) 0%,
    rgba(255, 51, 153, 0.24) 60%,
    rgba(255, 34, 68, 0.22) 100%
  );
  box-shadow: 0 3px 12px rgba(255, 51, 153, 0.22);
  font-family: "Noto Serif SC", serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #F5F4FF;
  text-shadow: 0 1px 6px rgba(255, 51, 153, 0.45);
  align-self: center;
  vertical-align: middle;
  white-space: nowrap;
}
.tier-standard-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FF3399, #FF2244 70%);
  box-shadow: 0 0 0 2px rgba(255, 51, 153, 0.18);
  flex-shrink: 0;
}
.tier-standard-text {
  font-family: "Noto Serif SC", serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  background: linear-gradient(120deg, #A8C8FF 0%, #FF3399 60%, #FF2244 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.tier-standard-code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #B6A8D9;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
@media (max-width: 540px) {
  .tier-standard { padding: 4px 12px; gap: 6px; margin-left: 4px; font-size: 11px; letter-spacing: 0.1em; }
  .tier-standard-text { font-size: 11px; letter-spacing: 0.1em; }
  .tier-standard-code { font-size: 10px; }
}

/* ===== 网魂定位 · 白字宣言 ===== */
.manifesto {
  margin: 64px auto 0;
  max-width: 980px;
  padding: 40px 48px;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(30, 22, 70, 0.55) 0%, rgba(75, 35, 130, 0.40) 60%, rgba(140, 38, 96, 0.32) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 48px rgba(11, 8, 48, 0.45);
  position: relative;
  overflow: hidden;
}
.manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 60% at 100% 0%, rgba(255, 51, 153, 0.18) 0%, rgba(107, 43, 217, 0.06) 35%, transparent 70%);
}
.manifesto-title {
  font-family: "Noto Serif SC", serif;
  font-size: 28px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 0.16em;
  margin: 0 0 24px;
  text-align: center;
  position: relative;
}
.manifesto-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(135deg, #6B2BD9 0%, #FF3399 60%, #FF2244 100%);
  border-radius: 2px;
}
.manifesto-text {
  font-family: "Noto Sans SC", sans-serif;
  font-size: 15.5px;
  line-height: 2.05;
  color: #FFFFFF;
  margin: 0 0 16px;
  letter-spacing: 0.03em;
  text-indent: 2em;
  position: relative;
}
.manifesto-text:last-child {
  margin-bottom: 0;
}

/* ===== 底部友站 · 登高网站 ===== */
.page-footer {
  max-width: 880px;
  margin: 56px auto 40px;
  padding: 0 28px;
  display: flex;
  justify-content: center;
}
.footer-link {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 21px;             /* 中文 3 号字 ≈ 16pt ≈ 21px */
  letter-spacing: 0.14em;
  color: #FFFFFF;
  text-decoration: none;
  padding: 8px 20px;
  background: linear-gradient(120deg, #6B2BD9 0%, #9933FF 35%, #FF3399 70%, #FF2244 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 16px rgba(255, 51, 153, 0.28);
  transition: transform 360ms var(--ease), text-shadow 360ms var(--ease), letter-spacing 360ms var(--ease);
  display: inline-block;
  line-height: 1.3;
}
.footer-link-gold {
  background: linear-gradient(135deg, #FFE08A 0%, #F5C842 35%, #E8B864 65%, #D4A82A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 14px rgba(245, 200, 66, 0.45);
  padding-right: 0.05em;
}
.footer-link:hover {
  transform: translateY(-2px);
  letter-spacing: 0.18em;
  text-shadow: 0 0 26px rgba(255, 51, 153, 0.5);
}
.footer-link:hover .footer-link-gold {
  text-shadow: 0 0 22px rgba(245, 200, 66, 0.7);
}

@media (max-width: 720px) {
  .page-footer {
    margin: 40px 14px 32px;
    padding: 0 6px;
  }
  .footer-link {
    font-size: 19px;
    padding: 8px 14px;
    letter-spacing: 0.12em;
  }
  .footer-link:hover {
    letter-spacing: 0.15em;
  }
}

@media (max-width: 720px) {
  .manifesto {
    margin: 44px 14px 0;
    padding: 28px 24px;
  }
  .manifesto-title { font-size: 22px; letter-spacing: 0.12em; }
  .manifesto-text { font-size: 14px; line-height: 1.92; }
}

/* ===== 工作对话框入口按钮 ===== */
.worktalk-launcher {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 32px;
  margin: 56px auto 32px;
  padding: 0 28px;
  max-width: 1080px;
}
.worktalk-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 16px 30px 16px 24px;
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(107, 43, 217, 0.28) 0%, rgba(255, 51, 153, 0.24) 70%, rgba(255, 34, 68, 0.22) 100%);
  border: 1px solid transparent;
  background-clip: padding-box;
  color: var(--fg-white);
  font-family: var(--font-serif);
  cursor: pointer;
  isolation: isolate;
  transition: transform 360ms var(--ease), box-shadow 360ms var(--ease), background 360ms var(--ease);
  text-align: left;
}
.worktalk-btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--grad-edge);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}
.worktalk-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(120deg, rgba(107, 43, 217, 0.38) 0%, rgba(255, 51, 153, 0.32) 70%, rgba(255, 34, 68, 0.30) 100%);
  box-shadow:
    0 12px 32px rgba(255, 51, 153, 0.24),
    0 0 0 1px rgba(255, 51, 153, 0.28);
}
.worktalk-btn-icon {
  font-size: 26px;
  line-height: 1;
  color: #FFE08A;
  text-shadow: 0 0 12px rgba(245, 200, 66, 0.55);
}
.worktalk-btn-label {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.12em;
  color: #FFFFFF;
  display: block;
  line-height: 1.2;
}
.worktalk-btn-sub {
  font-family: var(--font-sans, "Noto Sans SC", sans-serif);
  font-size: 12px;
  color: #D9CCFF;
  letter-spacing: 0.12em;
  display: block;
  margin-top: 4px;
}

/* ===== 工作对话框 modal ===== */
.worktalk-mask {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11, 8, 48, 0.72);
  backdrop-filter: blur(6px);
  z-index: 999;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 16px;
}
.worktalk-mask.is-open {
  display: flex;
  animation: worktalkFadeIn 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes worktalkFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.worktalk-modal {
  width: 100%;
  max-width: 720px;
  max-height: 86vh;
  background: linear-gradient(160deg, #15102E 0%, #1c1240 50%, #2a1450 100%);
  border-radius: 18px 18px 12px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 51, 153, 0.12),
    0 0 60px rgba(107, 43, 217, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: worktalkSlideUp 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes worktalkSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.worktalk-modal .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.worktalk-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.worktalk-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.worktalk-meta-tip {
  font-family: var(--font-sans, "Noto Sans SC", sans-serif);
  font-size: 12px;
  color: #B6A8D9;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.worktalk-clear {
  flex-shrink: 0;
  font-family: var(--font-sans, "Noto Sans SC", sans-serif);
  font-size: 12px;
  color: #FF7AAA;
  background: transparent;
  border: 1px solid rgba(255, 51, 153, 0.4);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: all 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.worktalk-clear:hover {
  background: rgba(255, 51, 153, 0.18);
  color: #FFFFFF;
}
.worktalk-list {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}
.worktalk-list::-webkit-scrollbar {
  width: 6px;
}
.worktalk-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}
.worktalk-empty {
  text-align: center;
  padding: 48px 16px;
  color: #7A6E99;
}
.worktalk-empty-title {
  font-family: var(--font-serif);
  font-size: 18px;
  color: #B6A8D9;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.worktalk-empty-sub {
  font-family: var(--font-sans, "Noto Sans SC", sans-serif);
  font-size: 13px;
  color: #7A6E99;
  letter-spacing: 0.06em;
}
.worktalk-msg {
  background: rgba(48, 28, 100, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
  position: relative;
  transition: border-color 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.worktalk-msg:hover {
  border-color: rgba(255, 51, 153, 0.28);
}
.worktalk-msg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.worktalk-msg-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #8A7CBF;
  letter-spacing: 0.04em;
}
.worktalk-msg-del {
  background: transparent;
  border: none;
  color: #6A5C8F;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.worktalk-msg-del:hover {
  background: rgba(255, 51, 153, 0.18);
  color: #FF7AAA;
}
.worktalk-msg-text {
  font-family: var(--font-sans, "Noto Sans SC", sans-serif);
  font-size: 14px;
  color: #F5F4FF;
  line-height: 1.7;
  letter-spacing: 0.02em;
  word-break: break-word;
}
.worktalk-form {
  display: flex;
  gap: 10px;
  align-items: stretch;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(11, 8, 48, 0.4);
  flex-shrink: 0;
}
.worktalk-input {
  flex: 1;
  resize: none;
  min-height: 56px;
  max-height: 160px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--fg-white);
  font-family: var(--font-sans, "Noto Sans SC", sans-serif);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  transition: border-color 280ms cubic-bezier(0.22, 0.61, 0.36, 1), background 280ms;
  outline: none;
}
.worktalk-input::placeholder {
  color: #6A5C8F;
}
.worktalk-input:focus {
  border-color: rgba(255, 51, 153, 0.55);
  background: rgba(255, 255, 255, 0.06);
}
.worktalk-send {
  flex-shrink: 0;
  padding: 0 22px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #6B2BD9, #FF3399);
  color: #FFFFFF;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 280ms;
  min-width: 88px;
}
.worktalk-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 51, 153, 0.4);
}
.worktalk-send:active {
  transform: translateY(0);
}

@media (max-width: 720px) {
  .worktalk-launcher {
    margin: 40px auto 24px;
    padding: 0 16px;
    gap: 16px;
  }
  .worktalk-btn {
    padding: 14px 22px 14px 18px;
    gap: 12px;
    width: 100%;
    justify-content: flex-start;
  }
  .worktalk-btn-label { font-size: 18px; letter-spacing: 0.1em; }
  .worktalk-btn-sub { font-size: 11px; }
  .worktalk-btn-icon { font-size: 22px; }
  .worktalk-modal { max-height: 92vh; border-radius: 14px 14px 10px 10px; }
  .worktalk-modal .modal-header { padding: 16px 18px 12px; }
  .worktalk-meta { padding: 10px 18px; flex-wrap: wrap; }
  .worktalk-list { padding: 14px 18px; }
  .worktalk-form { padding: 12px 14px 14px; gap: 8px; }
  .worktalk-send { padding: 0 16px; min-width: 70px; font-size: 14px; letter-spacing: 0.1em; }
}

/* 大管家入口按钮：与工作对话框并排 */
.worktalk-launcher { flex-wrap: wrap; }
.worktalk-btn-butler {
  text-decoration: none;
}
.worktalk-btn-butler .worktalk-btn-icon {
  color: #FFFFFF;
  text-shadow: 0 0 14px rgba(255, 51, 153, 0.55);
}
.worktalk-btn-butler .worktalk-btn-label {
  background: linear-gradient(120deg, #FFE08A 0%, #F5C842 35%, #FF3399 70%, #FF2244 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* === 工作对话框 · 客人 / 主家双向气泡 === */
.worktalk-list {
  align-items: stretch;
}
.worktalk-msg {
  max-width: 86%;
  align-self: flex-end; /* 客人消息默认靠右 */
}
.worktalk-msg-user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(107, 43, 217, 0.42), rgba(255, 51, 153, 0.32));
  border-color: rgba(255, 51, 153, 0.28);
}
.worktalk-msg-host {
  align-self: flex-start; /* 网魂回敬靠左 */
  background: linear-gradient(135deg, rgba(20, 14, 60, 0.78), rgba(48, 28, 100, 0.55));
  border: 1px solid rgba(245, 200, 66, 0.42);
  box-shadow: 0 0 18px rgba(245, 200, 66, 0.08);
}
.worktalk-msg-host .worktalk-msg-text {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: #FFF6E0;
}
.worktalk-msg-tag {
  font-family: var(--font-sans, "Noto Sans SC", sans-serif);
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 2px 8px;
  border-radius: 999px;
  margin: 0 auto 0 8px;
  flex-shrink: 0;
}
.worktalk-msg-tag-host {
  background: linear-gradient(120deg, #FFE08A 0%, #F5C842 60%, #E8B864 100%);
  color: #2A1450;
  font-weight: 700;
}
.worktalk-msg-host .worktalk-msg-time {
  color: #C9A864;
}
.worktalk-msg-host::before {
  content: "网魂";
  position: absolute;
  top: -10px;
  left: 12px;
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #FFE08A;
  background: #1A0E40;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid rgba(245, 200, 66, 0.4);
}
@media (max-width: 720px) {
  .worktalk-msg { max-width: 94%; }
  .worktalk-msg-host .worktalk-msg-text { font-size: 14px; line-height: 1.75; }
}

/* ===== 运行动态面板 ===== */
.liveops {
  max-width: 860px;
  margin: 0 auto 36px;
  padding: 24px 28px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.liveops-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.liveops-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.06em;
}
.liveops-bar {
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-stat);
}
.liveops-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.liveops-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 13px;
  font-size: 12px;
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  color: var(--text-main);
  background: rgba(107, 43, 217, 0.15);
  border: 1px solid rgba(255, 51, 153, 0.35);
  border-radius: 6px;
  cursor: pointer;
  transition: all 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  letter-spacing: 0.03em;
}
.liveops-btn:hover {
  background: rgba(153, 51, 255, 0.3);
  border-color: rgba(255, 51, 153, 0.75);
  box-shadow: 0 0 10px rgba(255, 51, 153, 0.22);
}
.liveops-btn.primary {
  background: linear-gradient(135deg, rgba(107, 43, 217, 0.35), rgba(255, 51, 153, 0.35));
  border-color: rgba(255, 51, 153, 0.65);
  font-weight: 600;
}
.liveops-records {
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.liveops-rec {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12.5px;
  line-height: 1.5;
}
.liveops-ts {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-stat);
  flex-shrink: 0;
}
.liveops-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.liveops-txt { font-family: 'Noto Sans SC', system-ui, sans-serif; }

/* ===== 运行动态 · 新版（meta + tiles + records）===== */
.liveops-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.liveops-title {
  margin: 0;
  font-family: 'Noto Serif SC', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 0.06em;
}
.liveops-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}
.liveops-meta-key {
  color: var(--text-sub);
  letter-spacing: 0.04em;
}
.liveops-status-badge {
  display: inline-block;
  padding: 2px 12px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  border-radius: 4px;
  border: 1px solid rgba(122, 110, 153, 0.5);
  background: rgba(21, 16, 46, 0.6);
  color: var(--text-sub);
  letter-spacing: 0.06em;
}
.liveops-status-badge.liveops-status-on {
  color: #FFCC66;
  border-color: rgba(245, 200, 66, 0.65);
  background: rgba(255, 204, 102, 0.1);
  box-shadow: 0 0 8px rgba(255, 204, 102, 0.2);
}
.liveops-status-badge.liveops-status-off {
  color: #FF99CC;
  border-color: rgba(255, 51, 153, 0.55);
  background: rgba(255, 51, 153, 0.08);
}
.liveops-meta-link {
  margin-left: auto;
  font-size: 12px;
  color: #FFCC66;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 204, 102, 0.4);
  letter-spacing: 0.04em;
}
.liveops-meta-link:hover { color: #FFB733; border-bottom-color: rgba(255, 183, 51, 0.85); }
.liveops-meta-counts {
  margin-bottom: 18px;
  color: var(--text-sub);
  font-size: 12.5px;
  font-family: 'JetBrains Mono', monospace;
}
.liveops-meta-pair b {
  font-weight: 600;
  color: #FFCC66;
  margin: 0 2px;
}
.liveops-meta-sep { color: var(--text-stat); margin: 0 4px; }

.liveops-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.liveops-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 10px;
  text-decoration: none;
  text-align: center;
  background: rgba(107, 43, 217, 0.12);
  border: 1px solid rgba(255, 51, 153, 0.3);
  border-radius: 8px;
  color: var(--text-main);
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.4;
  transition: all 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.liveops-tile:hover {
  background: rgba(153, 51, 255, 0.28);
  border-color: rgba(255, 51, 153, 0.85);
  box-shadow: 0 0 14px rgba(255, 51, 153, 0.25);
  transform: translateY(-1px);
}
.liveops-tile-name { display: inline-block; }
.liveops-tile-primary {
  background: linear-gradient(135deg, rgba(107, 43, 217, 0.4) 0%, rgba(255, 51, 153, 0.4) 60%, rgba(255, 34, 68, 0.32) 100%);
  border-color: rgba(255, 51, 153, 0.7);
  color: #FFE5F0;
  font-weight: 600;
}
.liveops-tile-primary:hover {
  background: linear-gradient(135deg, rgba(107, 43, 217, 0.55) 0%, rgba(255, 51, 153, 0.55) 60%, rgba(255, 34, 68, 0.45) 100%);
  border-color: rgba(255, 51, 153, 1);
  box-shadow: 0 0 18px rgba(255, 51, 153, 0.4);
}

.liveops-records-wrap {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.liveops-records-label {
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--text-sub);
  letter-spacing: 0.06em;
}
.liveops-rec-bullet {
  display: inline-block;
  width: 10px;
  text-align: center;
  color: var(--text-stat);
}
.liveops-rec-empty .liveops-rec-empty-txt {
  color: var(--text-stat);
  font-style: italic;
  font-family: 'Noto Sans SC', system-ui, sans-serif;
  font-size: 12.5px;
}
.liveops-rec-desc { color: var(--text-stat); font-size: 12px; }

@media (max-width: 720px) {
  .liveops-tiles { grid-template-columns: repeat(3, 1fr); }
  .liveops-meta-link { margin-left: 0; }
}
@media (max-width: 420px) {
  .liveops-tiles { grid-template-columns: repeat(2, 1fr); }
  .liveops-tile { font-size: 12.5px; }
}