/* Agenora reference UI layer, aligned with demo-digital-bond.stacs.cn */
:root {
  --ref-bg: #f8fafc;
  --ref-ink: #0a0e1a;
  --ref-navy: #0a2540;
  --ref-slate: #475569;
  --ref-muted: #64748b;
  --ref-line: #e2e8f0;
  --ref-card: #ffffff;
  --ref-orange: #f26b2c;
  --ref-green: #10b981;
  --ref-cyan: #0891b2;
  --ref-purple: #8b5cf6;
  --ref-dark: #0b1220;
}

body {
  color: var(--ref-ink) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(242,107,44,.09), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(16,185,129,.10), transparent 32%),
    var(--ref-bg) !important;
}

body::before,
body::after {
  display: none !important;
}

.app {
  background: transparent !important;
}

aside {
  background: rgba(255,255,255,.88) !important;
  border-bottom: 1px solid var(--ref-line) !important;
  box-shadow: 0 1px 12px rgba(15,23,42,.06) !important;
  color: var(--ref-ink) !important;
}

.brand-mark {
  background: var(--ref-navy) !important;
  color: white !important;
  box-shadow: none !important;
}

.brand-mark::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ref-green);
  position: absolute;
  transform: translate(17px, 18px);
  border: 2px solid white;
}

.brand strong,
.crumb strong,
h1,
h2,
h3 {
  color: var(--ref-ink) !important;
}

.brand span,
.crumb span,
p,
.value-points li {
  color: var(--ref-slate) !important;
}

.nav-title {
  color: var(--ref-muted) !important;
  border-left: 1px solid var(--ref-line) !important;
}

.nav-btn {
  color: #2a3454 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.nav-btn.active,
.nav-btn:hover {
  color: white !important;
  background: var(--ref-navy) !important;
  border-color: var(--ref-navy) !important;
}

.topbar,
.demo-homebar {
  background: rgba(255,255,255,.88) !important;
  border: 1px solid var(--ref-line) !important;
  box-shadow: 0 1px 12px rgba(15,23,42,.06) !important;
  color: var(--ref-ink) !important;
}

.topbar {
  position: static !important;
  margin-bottom: 24px !important;
}

.topbar::before {
  content: "节点在线" !important;
  color: var(--ref-green) !important;
  background: rgba(16,185,129,.10) !important;
  border-color: rgba(16,185,129,.28) !important;
}

.platform-stat span,
.demo-homebar span {
  color: var(--ref-muted) !important;
}

.platform-stat strong,
.demo-homebar strong {
  color: var(--ref-navy) !important;
}

.btn {
  background: #fff !important;
  color: var(--ref-ink) !important;
  border: 1px solid var(--ref-line) !important;
  box-shadow: none !important;
}

.btn:hover {
  border-color: rgba(242,107,44,.55) !important;
  color: var(--ref-orange) !important;
}

.btn.primary {
  background: var(--ref-orange) !important;
  border-color: var(--ref-orange) !important;
  color: white !important;
}

.persona-switch {
  background: #f1f5f9 !important;
  border-color: var(--ref-line) !important;
}

.persona-switch button {
  color: var(--ref-slate) !important;
}

.persona-switch button.active {
  background: var(--ref-navy) !important;
  color: white !important;
  box-shadow: none !important;
}

.hero,
.agent-hero {
  background:
    linear-gradient(90deg, rgba(248,250,252,.96), rgba(248,250,252,.88)),
    radial-gradient(circle at 82% 26%, rgba(16,185,129,.14), transparent 28%),
    radial-gradient(circle at 54% 14%, rgba(242,107,44,.12), transparent 22%),
    #fff !important;
  color: var(--ref-ink) !important;
  border: 1px solid var(--ref-line) !important;
  box-shadow: none !important;
}

.hero::before,
.hero::after,
.agent-hero::before,
.agent-hero::after {
  display: none !important;
}

.hero p,
.agent-hero p,
.demo-hero-copy p {
  color: #334155 !important;
}

.eyebrow,
.demo-kicker,
.showcase-pill {
  background: rgba(242,107,44,.10) !important;
  border-color: rgba(242,107,44,.20) !important;
  color: var(--ref-orange) !important;
}

.card,
.step,
.profile-item,
.evidence-card,
.task-card,
.trust-event,
.impact-card,
.chip,
.hero-panel,
.radar-panel,
.showcase-band,
.playbook-step,
.story-step,
.runway-card,
.demo-radar-item {
  background: var(--ref-card) !important;
  color: var(--ref-ink) !important;
  border: 1px solid var(--ref-line) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04) !important;
}

.hero-panel h3,
.hero-panel .signal span,
.hero-panel .signal b {
  color: var(--ref-ink) !important;
}

.hero-panel .signal {
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
}

.hero-panel .signal b {
  grid-column: 2;
  font-size: 12px;
  opacity: .72;
}

.showcase-band::before {
  display: none !important;
}

.showcase-head h2,
.showcase-head p,
.playbook-step b,
.story-step b,
.runway-card strong,
.demo-radar-item b,
.evidence-card b,
.task-card strong,
.trust-event strong {
  color: var(--ref-ink) !important;
}

.showcase-head p,
.playbook-step span,
.story-step span,
.runway-card span,
.demo-radar-item span,
.evidence-card span,
.task-card p,
.trust-event p,
.chip,
.profile-item span,
.impact-card span {
  color: var(--ref-slate) !important;
}

.kpi strong,
.profile-item strong,
.impact-card strong,
.metric,
.demo-status strong {
  color: var(--ref-orange) !important;
  text-shadow: none !important;
}

.tag {
  background: rgba(16,185,129,.10) !important;
  border: 1px solid rgba(16,185,129,.24) !important;
  color: #047857 !important;
}

.tag.blue {
  background: rgba(14,165,233,.10) !important;
  border-color: rgba(14,165,233,.24) !important;
  color: #0369a1 !important;
}

.tag.gold {
  background: rgba(242,107,44,.10) !important;
  border-color: rgba(242,107,44,.24) !important;
  color: #c2410c !important;
}

.tag.red {
  background: rgba(239,68,68,.10) !important;
  border-color: rgba(239,68,68,.24) !important;
  color: #b91c1c !important;
}

.tag.gray {
  background: #f1f5f9 !important;
  border-color: var(--ref-line) !important;
  color: var(--ref-slate) !important;
}

.demo-status .card {
  background: white !important;
  color: var(--ref-ink) !important;
  border-color: var(--ref-line) !important;
}

.demo-status span,
.demo-status small {
  color: var(--ref-slate) !important;
}

.mock-screen,
.risk-meter,
.data-theater,
.demo-mini-chart {
  background: var(--ref-dark) !important;
  color: white !important;
  border-color: #1e293b !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.18) !important;
}

.mock-screen h2,
.mock-screen h3,
.mock-screen strong,
.risk-meter strong,
.risk-meter span,
.demo-mini-chart strong,
.demo-mini-chart p,
.data-theater .node.core {
  color: white !important;
}

.screen-box,
.data-theater .node {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(148,163,184,.22) !important;
  color: rgba(255,255,255,.86) !important;
}

.screen-box span,
.screen-box p {
  color: rgba(226,232,240,.72) !important;
}

.bar {
  background: #e2e8f0 !important;
}

.bar i,
.demo-bars i {
  background: linear-gradient(180deg, var(--ref-orange), #fb923c) !important;
}

.table {
  border: 1px solid var(--ref-line) !important;
  background: white !important;
}

.table th {
  background: #f1f5f9 !important;
  color: var(--ref-muted) !important;
  border-bottom-color: var(--ref-line) !important;
}

.table td {
  background: white !important;
  color: var(--ref-ink) !important;
  border-bottom-color: var(--ref-line) !important;
}

.diagram {
  background: white !important;
  border-color: var(--ref-line) !important;
}

.layer {
  background: #fff !important;
  border-color: var(--ref-line) !important;
}

.layer h3 {
  color: var(--ref-navy) !important;
}

.app-visual {
  background:
    radial-gradient(circle at 78% 24%, rgba(242,107,44,.18), transparent 28%),
    linear-gradient(135deg, rgba(10,37,64,.08), rgba(16,185,129,.08)) !important;
}

.tower {
  background: white !important;
  border-color: var(--ref-line) !important;
}

.tower:nth-child(3) {
  background: rgba(242,107,44,.20) !important;
}

.tower:nth-child(5) {
  background: rgba(16,185,129,.18) !important;
}

.story-step i,
.demo-step i {
  background: var(--ref-orange) !important;
  color: white !important;
}

.story-step.active,
.demo-step.active {
  border-color: rgba(242,107,44,.60) !important;
  background: rgba(242,107,44,.08) !important;
  box-shadow: 0 0 0 4px rgba(242,107,44,.08) !important;
}

.demo-step.done i {
  background: var(--ref-green) !important;
}

.reference-stepper {
  margin: 24px 24px 0;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--ref-line);
  background: white;
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.reference-step {
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--ref-line);
  border-radius: 8px;
  background: #fff;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  position: relative;
}

.reference-step.active {
  border-color: rgba(242,107,44,.60);
  background: rgba(242,107,44,.08);
}

.reference-step i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 900;
  background: #e2e8f0;
  color: #475569;
  font-size: 12px;
}

.reference-step.active i {
  background: var(--ref-orange);
  color: white;
}

.reference-step b {
  color: var(--ref-ink);
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.reference-step span {
  color: var(--ref-muted);
  line-height: 1.4;
  font-size: 12px;
}

.ai-narrator {
  background: rgba(255,255,255,.92) !important;
  border-color: var(--ref-line) !important;
  color: var(--ref-ink) !important;
  width: min(320px, calc(100vw - 44px)) !important;
  padding: 12px !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.10) !important;
}

.ai-narrator strong {
  color: var(--ref-ink) !important;
}

.ai-narrator p {
  color: var(--ref-slate) !important;
  font-size: 12px !important;
}

.ai-narrator .meter {
  background: #e2e8f0 !important;
}

.ai-narrator .meter i {
  background: linear-gradient(90deg, var(--ref-orange), var(--ref-green)) !important;
}

/* Final light-theme readability pass. Keep all white-card text dark. */
.card:not(.mock-screen):not(.risk-meter),
.step,
.demo-step,
.playbook-step,
.story-step,
.runway-card,
.evidence-card,
.task-card,
.trust-event,
.profile-item,
.impact-card {
  color: var(--ref-ink) !important;
}

.card:not(.mock-screen):not(.risk-meter) h2,
.card:not(.mock-screen):not(.risk-meter) h3,
.card:not(.mock-screen):not(.risk-meter) b,
.card:not(.mock-screen):not(.risk-meter) strong,
.step b,
.demo-step b,
.playbook-step b,
.story-step b,
.runway-card strong,
.evidence-card b,
.task-card strong,
.trust-event strong {
  color: var(--ref-ink) !important;
}

.card:not(.mock-screen):not(.risk-meter) p,
.card:not(.mock-screen):not(.risk-meter) span:not(.tag):not(.showcase-pill),
.card:not(.mock-screen):not(.risk-meter) small,
.kpi span,
.step span,
.demo-step span,
.playbook-step span,
.story-step span,
.runway-card span:not(.showcase-pill),
.evidence-card span:not(.tag),
.task-card p,
.trust-event p,
.profile-item span,
.impact-card span,
.chip {
  color: var(--ref-slate) !important;
  opacity: 1 !important;
}

.kpi strong,
.metric,
.demo-status strong {
  color: var(--ref-orange) !important;
}

.agent-hero .radar-panel,
.agent-hero .demo-status .card {
  background: white !important;
  border-color: var(--ref-line) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04) !important;
}

.agent-hero .radar-panel *,
.agent-hero .demo-status .card * {
  text-shadow: none !important;
}

.agent-hero .radar-panel h3,
.agent-hero .radar-panel strong,
.agent-hero .radar-panel b,
.agent-hero .demo-status .card b {
  color: var(--ref-ink) !important;
}

.agent-hero .radar-panel span,
.agent-hero .radar-panel p,
.agent-hero .radar-panel small,
.agent-hero .demo-status .card span,
.agent-hero .demo-status .card small {
  color: var(--ref-slate) !important;
  opacity: 1 !important;
}

.agent-hero .demo-status .card strong {
  color: var(--ref-orange) !important;
}

.agent-hero .radar-panel .tag {
  color: #c2410c !important;
}

.demo-shell .card,
.order-board .card,
.demo-playbook .playbook-step {
  background: white !important;
  color: var(--ref-ink) !important;
  border-color: var(--ref-line) !important;
}

.demo-shell .card p,
.demo-shell .card span:not(.tag):not(.showcase-pill),
.order-board .card p,
.order-board .card span:not(.tag):not(.showcase-pill),
.demo-playbook .playbook-step span {
  color: var(--ref-slate) !important;
}

.showcase-band .kpi strong,
.card .kpi strong {
  color: var(--ref-orange) !important;
}

.mock-screen,
.flow-theater,
.risk-meter,
.command-center,
.data-theater {
  color: white !important;
}

.mock-screen strong,
.mock-screen b,
.mock-screen h2,
.mock-screen h3,
.flow-theater strong,
.flow-theater b,
.risk-meter strong,
.command-center strong,
.data-theater strong,
.data-theater .node.core {
  color: white !important;
}

.mock-screen span:not(.tag),
.mock-screen p,
.mock-screen small,
.flow-theater span,
.flow-theater small,
.risk-meter span,
.command-center span,
.data-theater span {
  color: rgba(226,232,240,.78) !important;
}

.radar-panel {
  background: white !important;
  color: var(--ref-ink) !important;
  border-color: var(--ref-line) !important;
}

.radar-panel strong,
.radar-panel b,
.radar-order strong {
  color: var(--ref-ink) !important;
}

.radar-panel span,
.radar-order span {
  color: var(--ref-slate) !important;
}

.demo-status .card {
  background: white !important;
  color: var(--ref-ink) !important;
}

.demo-status span,
.demo-status small {
  color: var(--ref-slate) !important;
}

.demo-status strong {
  color: var(--ref-orange) !important;
}

.grasp-card {
  display: grid;
  gap: 12px;
}

.grasp-card h3 {
  font-size: 24px;
  margin: 0 !important;
}

.grasp-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.grasp-metrics div {
  border: 1px solid var(--ref-line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
  display: grid;
  gap: 5px;
}

.grasp-metrics b {
  color: var(--ref-muted) !important;
  font-size: 12px;
}

.grasp-metrics strong {
  color: var(--ref-orange) !important;
  font-size: 20px;
}

.grasp-metrics span {
  color: var(--ref-slate) !important;
  font-size: 12px;
  line-height: 1.45;
}

.grasp-screen .screen-box b {
  color: white !important;
}

.grasp-screen .screen-box span {
  color: rgba(226,232,240,.78) !important;
}

@media (max-width: 1180px) {
  .reference-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grasp-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .reference-stepper {
    margin: 16px 18px 0;
    grid-template-columns: 1fr;
  }
}