:root {
  --blue-950: #061858;
  --blue-900: #08206f;
  --blue-800: #092b92;
  --blue-600: #0b5cff;
  --blue-100: #edf5ff;
  --blue-050: #f7fbff;
  --line: #d7e3f7;
  --text: #071a55;
  --muted: #5f6f9c;
  --green: #16a34a;
  --green-bg: #ecfdf3;
  --orange: #f59e0b;
  --orange-bg: #fff7ed;
  --red: #ef4444;
  --red-bg: #fff1f2;
  --purple: #8b5cf6;
  --shadow: 0 12px 30px rgba(20, 54, 113, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
  color: var(--text);
  background: #ffffff;
  letter-spacing: 0;
  overflow-x: hidden;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.boot {
  min-height: 100vh;
  display: grid;
  place-items: center;
  color: var(--blue-900);
  font-weight: 800;
}

.boot.error {
  color: var(--red);
}

.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(90deg, var(--blue-950), var(--blue-800));
  box-shadow: 0 4px 16px rgba(4, 16, 64, 0.22);
}

.brand,
.top-actions {
  display: flex;
  align-items: center;
}

.brand {
  gap: 14px;
  min-width: 520px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px 12px 16px 16px;
  color: var(--blue-950);
  background: #fff;
  font-size: 14px;
  font-weight: 900;
}

.brand-title {
  font-size: 28px;
  font-weight: 900;
  white-space: nowrap;
}

.top-actions {
  gap: 18px;
  font-size: 15px;
  font-weight: 700;
}

.top-actions a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 6px;
}

.top-actions a.is-current,
.top-actions a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.time-chip,
.help-chip,
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.clock,
.help-chip::first-letter,
.user-chip::first-letter {
  display: inline-grid;
  place-items: center;
}

.app-shell {
  display: grid;
  grid-template-columns: 247px 1fr;
  min-height: calc(100vh - 64px);
}

.sidebar {
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #f9fcff, #fff);
  padding: 18px 14px;
}

.sidebar h2 {
  margin: 0 0 16px;
  font-size: 20px;
}

.nav-list {
  display: grid;
  gap: 10px;
}

.nav-card {
  width: 100%;
  min-height: 70px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(24, 56, 103, 0.04);
}

.nav-card.active {
  color: #fff;
  border-color: var(--blue-600);
  background: linear-gradient(180deg, #1167ff, #0655ed);
}

.nav-card.done .nav-status {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
}

.nav-card.active .nav-status {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.nav-card strong {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
}

.nav-card small {
  display: block;
  line-height: 1.35;
  font-size: 13px;
  font-weight: 700;
}

.nav-status {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid #6073aa;
  border-radius: 50%;
  font-weight: 900;
}

.progress-card {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.progress-card h3 {
  margin: 0 0 12px;
  text-align: left;
  font-size: 16px;
}

.progress-ring {
  width: 90px;
  height: 90px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--blue-600) var(--progress), #e8edf7 0);
}

.progress-ring::before {
  content: "";
  position: absolute;
}

.progress-ring span {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  font-size: 22px;
  font-weight: 900;
}

.progress-card strong,
.progress-card p {
  display: block;
  margin: 8px 0 0;
  font-weight: 800;
}

.progress-card p {
  color: var(--text);
}

.ghost-wide {
  width: 100%;
  margin-top: 84px;
  padding: 12px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-weight: 800;
}

.workspace {
  padding: 16px 18px;
  background: #fff;
  overflow: auto;
}

.notice {
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid #9ec5ff;
  border-radius: 8px;
  color: #0756d8;
  background: #eef6ff;
  font-weight: 800;
}

.ai-review-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
  border-color: #ffd08a;
  background: #fffaf2;
}

.ai-review-panel h2 {
  margin-bottom: 6px;
}

.ai-review-panel p {
  margin: 0 0 6px;
  font-weight: 800;
}

.ai-review-panel small {
  color: var(--muted);
  font-weight: 700;
}

.ai-review-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 310px;
}

.module-heading {
  margin: 0 0 16px;
}

.module-heading h1 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.2;
  color: var(--text);
}

.module-heading p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 700;
}

.steps {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  margin: 16px 0 18px;
  justify-content: center;
}

.step {
  display: grid;
  grid-template-columns: 44px minmax(0, auto);
  column-gap: 10px;
  align-items: center;
  min-width: 138px;
}

.step span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg, #156bff, #0954df);
  font-size: 22px;
  font-weight: 900;
}

.step strong,
.step small {
  display: block;
  white-space: nowrap;
}

.step strong {
  font-size: 15px;
}

.step small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.step-arrow {
  width: 48px;
  flex: 0 1 58px;
  border-top: 2px dashed var(--blue-600);
}

.card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(34, 68, 118, 0.04);
  padding: 14px;
}

.card h2 {
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.25;
}

.card h2 small {
  color: var(--text);
  font-size: 13px;
}

.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.card-title h2 {
  margin: 0 0 10px;
}

.mini-primary,
.primary,
.secondary,
.outline,
.green {
  border-radius: 6px;
  border: 1px solid transparent;
  font-weight: 900;
}

.mini-primary {
  padding: 7px 12px;
  color: var(--blue-600);
  border-color: #9ec5ff;
  background: #fff;
  font-size: 13px;
}

.primary {
  color: #fff;
  background: linear-gradient(180deg, #0d65ff, #0753e7);
}

.secondary {
  color: var(--text);
  border-color: var(--line);
  background: #fff;
}

.outline {
  color: var(--blue-600);
  border-color: #9ec5ff;
  background: #fff;
}

.green {
  color: #fff;
  background: #0aa43f;
}

.outline.green {
  color: #079337;
  border-color: #13a84c;
}

.large {
  min-width: 280px;
  padding: 14px 24px;
  font-size: 17px;
}

.block {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 13px;
}

.kv-table {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
}

.kv-table div {
  display: grid;
  grid-template-columns: 120px 1fr;
  min-height: 32px;
  border-bottom: 1px solid var(--line);
}

.kv-table div:last-child {
  border-bottom: 0;
}

.kv-table b,
.kv-table span {
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.45;
}

.kv-table b {
  background: #f8fbff;
}

.info-note,
.tip,
.judgement {
  margin-top: 12px;
  padding: 12px;
  border-radius: 7px;
  font-size: 14px;
  line-height: 1.5;
}

.tip.info,
.info-note {
  color: #0756d8;
  border: 1px solid #c7defe;
  background: #f3f8ff;
}

.tip.warn,
.judgement {
  border: 1px solid #fed7aa;
  background: var(--orange-bg);
}

.tip.success {
  color: #0c7a32;
  border: 1px solid #bbf7d0;
  background: var(--green-bg);
}

.judgement strong {
  display: block;
  margin-top: 8px;
  color: #f97316;
  font-size: 17px;
}

.module-one-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.98fr 1.05fr;
  gap: 18px;
  align-items: stretch;
}

.flow-stack {
  display: grid;
  justify-items: center;
  margin-top: 8px;
}

.flow-node {
  width: 86%;
  min-height: 68px;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  border: 1px solid #bdd4f4;
  border-radius: 7px;
  background: #f8fbff;
  padding: 9px 14px;
}

.flow-node span {
  font-size: 32px;
  color: var(--blue-600);
}

.flow-node b {
  display: block;
  color: var(--blue-600);
  font-size: 16px;
}

.flow-node small {
  display: block;
  margin-top: 4px;
  line-height: 1.35;
}

.flow-node.red {
  border-color: #ffb3b8;
  background: var(--red-bg);
}

.flow-node.red span,
.flow-node.red b {
  color: var(--red);
}

.flow-node.purple {
  border-color: #d9c9ff;
  background: #f6f1ff;
}

.flow-node.purple span,
.flow-node.purple b {
  color: var(--purple);
}

.flow-down {
  color: var(--blue-600);
  font-size: 22px;
  line-height: 1;
}

.ai-box {
  min-height: 382px;
  padding: 28px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.ai-box h3 {
  margin: 0 0 18px;
  font-size: 18px;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}

.check-list li {
  position: relative;
  padding-left: 34px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: var(--green);
  font-size: 13px;
}

.output-banner {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 18px;
  align-items: center;
  margin-top: 18px;
  padding: 12px 16px;
  border: 1px solid #2fbb69;
  border-radius: 7px;
  background: linear-gradient(90deg, #f6fff9, #fff);
}

.output-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--blue-600);
  border: 2px solid var(--blue-600);
  border-radius: 6px;
  font-size: 26px;
}

.output-banner h3 {
  margin: 0 0 6px;
  color: #008d3d;
  font-size: 20px;
}

.output-banner p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
}

.module-two-grid {
  display: grid;
  grid-template-columns: 280px 1fr 300px;
  grid-template-rows: auto auto;
  gap: 12px;
}

.upload-box {
  height: 150px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 6px;
  border: 1px dashed #9ec5ff;
  border-radius: 7px;
  color: var(--blue-600);
  background: #f8fbff;
  font-size: 28px;
}

.upload-box b,
.upload-box small {
  display: block;
  font-size: 14px;
}

.file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
}

.analysis-card {
  grid-column: 2 / 4;
}

.risk-review {
  grid-column: 1 / 3;
}

.measures-card {
  grid-column: 3;
}

.donut-card {
  grid-column: 3;
}

.table-wrap {
  width: 100%;
  overflow: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  border: 1px solid var(--line);
  padding: 8px 9px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.35;
}

th {
  color: var(--text);
  background: #f3f7ff;
  font-weight: 900;
}

.dense table {
  font-size: 12px;
}

.dense th,
.dense td {
  padding: 6px 7px;
}

.risk {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 900;
}

.risk-low {
  color: var(--green);
  border: 1px solid #86efac;
  background: var(--green-bg);
}

.risk-medium {
  color: var(--orange);
  border: 1px solid #fed7aa;
  background: var(--orange-bg);
}

.risk-high {
  color: var(--red);
  border: 1px solid #fecdd3;
  background: var(--red-bg);
}

.danger-text {
  color: var(--red);
  font-weight: 900;
}

.success-text {
  color: var(--green);
}

.radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 8px;
  white-space: nowrap;
}

.measure-list,
.remediate-list {
  display: grid;
  gap: 9px;
}

.measure-row {
  display: grid;
  grid-template-columns: 84px 1fr 1fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.measure-row label {
  display: inline-flex;
  gap: 5px;
  font-size: 12px;
}

.donut {
  width: 128px;
  height: 128px;
  margin: 16px auto;
  border-radius: 50%;
  background: conic-gradient(#2563eb 0 50%, #f59e0b 50% 80%, #ef4444 80% 100%);
  position: relative;
}

.donut::after {
  content: "";
  position: absolute;
  inset: 28px;
  background: #fff;
  border-radius: 50%;
}

.legend {
  display: grid;
  gap: 9px;
  font-size: 13px;
}

.low-dot,
.mid-dot,
.high-dot {
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 3px;
}

.low-dot { background: var(--green); }
.mid-dot { background: var(--orange); }
.high-dot { background: var(--red); }

.module-three-grid,
.module-four-grid,
.module-five-grid,
.module-six-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 12px;
}

.precheck-card,
.opinion-card,
.incident-card,
.response-card,
.checklist-card,
.review-result {
  grid-column: 1;
}

.manual-card,
.history-card,
.responsibility-card,
.record-card,
.remediate-card,
.final-output {
  grid-column: 2;
}

.auto-card,
.target-output {
  grid-column: 2;
}

.target-manual {
  grid-column: 1;
}

.recipient-card {
  grid-column: 1;
}

.pill {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 900;
}

.pill-blue {
  color: var(--blue-600);
  background: #eaf3ff;
}

.pill-green {
  color: var(--green);
  background: var(--green-bg);
}

.pill-red {
  color: var(--red);
  background: var(--red-bg);
}

.opinion-doc {
  padding: 16px;
  border: 1px solid #8cbaff;
  border-radius: 7px;
  text-align: center;
}

.opinion-doc h3 {
  margin: 0 0 14px;
  font-size: 20px;
}

.doc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: left;
  gap: 8px 28px;
  margin-bottom: 14px;
}

.doc-grid p {
  margin: 0;
  font-weight: 700;
}

.bottom-actions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}

.bottom-actions button {
  padding: 12px 24px;
}

select {
  width: 100%;
  min-width: 110px;
  padding: 7px 10px;
  color: var(--text);
  border: 1px solid #bcd3f2;
  border-radius: 6px;
  background: #fff;
  font-weight: 700;
}

.recipient-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  color: var(--blue-900);
}

.flag {
  width: 48px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #ffdf52;
  border-radius: 4px;
  background: #e21b2d;
}

.alert-box {
  border: 1px solid #f7b8bd;
  border-radius: 7px;
  background: linear-gradient(120deg, #fff4f5, #fff);
  padding: 14px;
}

.rule-tips {
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid #bfd7ff;
  border-radius: 7px;
  color: #0756d8;
  background: #f4f8ff;
  font-weight: 800;
}

.record-output {
  border: 1px solid #b8e7c5;
  border-radius: 7px;
  background: #f8fff9;
  padding: 12px;
}

.remediate-row {
  display: grid;
  grid-template-columns: 120px 1fr 260px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.remediate-row em {
  display: inline-flex;
  margin: 3px;
  padding: 5px 8px;
  border: 1px solid #bdd4f4;
  border-radius: 5px;
  color: #0756d8;
  background: #f8fbff;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.radio-list {
  display: grid;
  gap: 8px;
}

.radio-list label {
  display: grid;
  grid-template-columns: 28px 1fr;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-weight: 900;
}

.radio-list label.selected {
  border-color: #9ec5ff;
  background: #f3f8ff;
  color: var(--blue-600);
}

.radio-list small {
  display: block;
  grid-column: 2;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 700;
}

.review-note {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #bbf7d0;
  border-radius: 7px;
  background: var(--green-bg);
}

.review-note ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.doc-list {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.doc-list h3 {
  margin: 0 0 10px;
}

.doc-list p {
  margin: 10px 0 0;
  line-height: 1.55;
  font-size: 13px;
}

.console-page {
  min-height: calc(100vh - 100px);
}

.console-hero {
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(120deg, #f8fbff, #fff);
}

.console-hero h1 {
  margin: 0 0 8px;
  font-size: 28px;
}

.console-hero p {
  margin: 0;
  font-weight: 700;
}

.console-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.console-grid .wide {
  grid-column: span 3;
}

.metric b {
  display: block;
  color: var(--blue-600);
  font-size: 48px;
}

.metric span {
  font-weight: 900;
}

.audit-log {
  min-height: 120px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fbff;
}

.config-card {
  min-height: 150px;
}

.config-card p {
  margin: 0 0 12px;
}

@media (max-width: 1200px) {
  .top-actions a {
    display: none;
  }

  .app-shell {
    grid-template-columns: 220px 1fr;
  }

  .module-one-grid,
  .module-two-grid,
  .module-three-grid,
  .module-four-grid,
  .module-five-grid,
  .module-six-grid {
    grid-template-columns: 1fr;
  }

  .analysis-card,
  .risk-review,
  .measures-card,
  .donut-card,
  .precheck-card,
  .opinion-card,
  .manual-card,
  .history-card,
  .recipient-card,
  .auto-card,
  .target-manual,
  .target-output,
  .incident-card,
  .responsibility-card,
  .response-card,
  .record-card,
  .checklist-card,
  .remediate-card,
  .review-result,
  .final-output {
    grid-column: 1;
  }

  .output-banner {
    grid-template-columns: 48px 1fr;
  }

  .output-banner button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .topbar {
    height: auto;
    min-height: 58px;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
  }

  .brand {
    min-width: 0;
    gap: 10px;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
  }

  .brand-title {
    white-space: normal;
    font-size: 20px;
    line-height: 1.15;
  }

  .top-actions {
    gap: 8px;
    font-size: 12px;
  }

  .time-chip,
  .help-chip,
  .user-chip {
    display: none;
  }

  .app-shell {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 12px;
  }

  .sidebar h2 {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .nav-list {
    grid-template-columns: repeat(6, minmax(132px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .nav-card {
    min-height: 58px;
    grid-template-columns: 28px 1fr;
    gap: 8px;
    padding: 8px;
  }

  .nav-status {
    width: 24px;
    height: 24px;
  }

  .nav-card strong {
    font-size: 12px;
  }

  .nav-card small {
    font-size: 11px;
  }

  .progress-card {
    display: none;
  }

  .workspace {
    padding: 12px;
    overflow-x: hidden;
  }

  .module-heading h1 {
    font-size: 24px;
  }

  .steps {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .card {
    padding: 12px;
  }

  .console-grid {
    grid-template-columns: 1fr;
  }

  .console-grid .wide {
    grid-column: 1;
  }

  .ai-review-panel {
    grid-template-columns: 1fr;
  }

  .ai-review-actions {
    min-width: 0;
    justify-content: flex-start;
  }

  .output-banner {
    grid-template-columns: 1fr;
  }
}