

    * { box-sizing: border-box; }
    html { background: var(--night-sky); }
    body {
      margin: 0;
      min-height: 100dvh;
      overflow-x: hidden;
      background:
        radial-gradient(circle at 78% -10%, rgba(77, 226, 197, .16), transparent 34rem),
        radial-gradient(circle at 10% 8%, rgba(111, 157, 255, .13), transparent 30rem),
        linear-gradient(145deg, #050b12 0%, #07121c 48%, #081019 100%);
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .36;
      background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: linear-gradient(to bottom, black, transparent 84%);
    }
    body::after {
      content: "";
      position: fixed;
      z-index: 0;
      width: 46vw;
      height: 46vw;
      right: -18vw;
      top: 12vh;
      border: 1px solid rgba(77, 226, 197, .08);
      border-radius: 50%;
      box-shadow:
        0 0 0 70px rgba(77, 226, 197, .025),
        0 0 0 140px rgba(77, 226, 197, .018),
        0 0 120px rgba(77, 226, 197, .08);
      pointer-events: none;
      animation: radarBreathe 7s ease-in-out infinite;
    }

    button, input, textarea, select { font: inherit; }
    button { cursor: pointer; }
    button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
      outline: 2px solid var(--radar-bright);
      outline-offset: 2px;
    }
    button:disabled { opacity: .42; cursor: not-allowed; }

    .shell {
      position: relative;
      z-index: 1;
      width: min(1760px, calc(100vw - 28px));
      margin: 0 auto;
      padding: 18px 0 36px;
    }
    .command {
      position: sticky;
      top: 0;
      z-index: 20;
      padding: 10px 0 14px;
      backdrop-filter: blur(20px) saturate(120%);
    }
    .command-inner {
      position: relative;
      display: grid;
      grid-template-columns: minmax(300px, 1fr) auto;
      gap: 18px;
      align-items: center;
      min-width: 0;
      overflow: hidden;
      border: 1px solid var(--grid-line-strong);
      border-radius: var(--radius-panel);
      background: linear-gradient(120deg, rgba(12, 25, 38, .95), rgba(9, 20, 31, .88));
      box-shadow: var(--shadow-deep), inset 0 1px rgba(255,255,255,.04);
      padding: 13px 16px;
    }
    .command-inner::after {
      content: "";
      position: absolute;
      left: -28%;
      bottom: 0;
      width: 32%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--radar-bright), transparent);
      animation: commandScan 5.5s ease-in-out infinite;
    }
    .brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
    .mark {
      position: relative;
      flex: 0 0 auto;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(77, 226, 197, .36);
      border-radius: 13px;
      background: radial-gradient(circle at 35% 30%, rgba(77,226,197,.18), transparent 55%), var(--night-deep);
      color: var(--radar-bright);
      display: grid;
      place-items: center;
      font-family: var(--font-data);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: -.05em;
      box-shadow: inset 0 0 24px rgba(77, 226, 197, .08), 0 0 28px rgba(77, 226, 197, .08);
    }
    .mark::after { content: ""; position: absolute; width: 5px; height: 5px; right: 5px; top: 5px; border-radius: 50%; background: var(--safe); box-shadow: 0 0 10px var(--safe); }
    .brand-copy { min-width: 0; }
    .brand h1 { margin: 0; color: var(--ice); font-size: clamp(19px, 1.8vw, 27px); line-height: 1.08; letter-spacing: -.035em; }
    .brand p { margin: 5px 0 0; color: var(--steel); font-size: 12px; line-height: 1.35; }
    .brand p strong { color: var(--radar); font-weight: 650; }
    .ops-strip { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }

    .pill, .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      max-width: 100%;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 11px;
      line-height: 1.2;
      font-weight: 680;
      border: 1px solid var(--grid-line);
      white-space: nowrap;
    }
    .pill { background: rgba(255,255,255,.035); color: var(--ice-soft); }
    .status-pill::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
    .status-GREEN, .status-APPROVED { background: var(--safe-soft); color: var(--safe); border-color: rgba(81,217,149,.22); }
    .status-YELLOW, .status-PENDING_REVIEW { background: var(--caution-soft); color: var(--caution); border-color: rgba(241,184,91,.24); }
    .status-RED, .status-REJECTED, .status-INVALIDATED { background: var(--danger-soft); color: var(--danger); border-color: rgba(255,116,116,.23); }
    .status-SUPERSEDED { background: rgba(137,160,170,.1); color: #a8bac1; border-color: rgba(137,160,170,.2); }
    .status-CONFLICT { background: rgba(241,184,91,.13); color: #ffd285; border-color: rgba(241,184,91,.26); }

    .layout {
      display: grid;
      grid-template-columns: minmax(280px, 320px) minmax(520px, 1fr) minmax(320px, 370px);
      gap: 14px;
      align-items: start;
    }
    .layout > *, .stack, .right-col, .panel, .section-card, .section-body, .review-grid { min-width: 0; }
    .panel {
      background: linear-gradient(180deg, rgba(13, 27, 41, .94), rgba(8, 19, 30, .95));
      border: 1px solid var(--grid-line-strong);
      border-radius: var(--radius-panel);
      box-shadow: 0 18px 46px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.025);
      overflow: hidden;
    }
    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
      padding: 14px 15px;
      border-bottom: 1px solid var(--grid-line);
      background: rgba(255,255,255,.012);
    }
    .panel-header > div { min-width: 0; }
    .panel-title { margin: 0; color: var(--ice); font-size: 13px; line-height: 1.2; font-weight: 760; letter-spacing: -.01em; }
    .panel-title .en { display: block; margin-top: 3px; color: var(--steel-dim); font-family: var(--font-data); font-size: 9px; line-height: 1; letter-spacing: .11em; text-transform: uppercase; font-weight: 600; }
    .panel-note { margin-top: 5px; color: var(--steel); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
    .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }

    select, input, textarea {
      display: block;
      max-width: 100%;
      min-width: 0;
      border: 1px solid var(--grid-line-strong);
      border-radius: var(--radius-control);
      background: var(--console-inset);
      color: var(--ice);
      padding: 8px 10px;
      min-height: 38px;
      box-shadow: inset 0 1px 8px rgba(0,0,0,.18);
    }
    select { color-scheme: dark; }
    input::placeholder, textarea::placeholder { color: var(--steel-dim); }
    textarea { width: 100%; resize: vertical; }
    .btn {
      flex: 0 0 auto;
      border: 1px solid rgba(77,226,197,.38);
      border-radius: var(--radius-control);
      padding: 8px 12px;
      background: linear-gradient(180deg, #42d9bd, #20b899);
      color: #04110f;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
      box-shadow: 0 8px 22px rgba(32,184,153,.12), inset 0 1px rgba(255,255,255,.28);
      transition: transform var(--motion-fast) var(--ease-control), box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease, background var(--motion-fast) ease;
    }
    .btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(32,184,153,.2), inset 0 1px rgba(255,255,255,.3); }
    .btn:active { transform: translateY(1px) scale(.99); }
    .btn.secondary { background: rgba(255,255,255,.035); color: var(--ice-soft); border-color: var(--grid-line-strong); box-shadow: none; }
    .btn.secondary:hover { border-color: rgba(77,226,197,.42); color: var(--radar-bright); background: var(--radar-soft); box-shadow: none; }
    .btn.danger { background: rgba(255,116,116,.12); color: #ff9a9a; border-color: rgba(255,116,116,.34); box-shadow: none; }
    .btn.success { background: linear-gradient(180deg, #62e5a7, #35bf7f); color: #03130b; border-color: rgba(98,229,167,.42); }

    .stack { display: grid; gap: 14px; }
    .queue { max-height: calc(100dvh - 154px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(77,226,197,.25) transparent; }
    .signal-card {
      position: relative;
      display: grid;
      gap: 9px;
      min-width: 0;
      padding: 14px 13px 14px 18px;
      border-bottom: 1px solid var(--grid-line);
      cursor: pointer;
      animation: itemIn var(--motion-standard) var(--ease-enter) both;
      transition: background .2s ease, transform .2s ease;
    }
    .signal-card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: rgba(137,160,170,.25); transition: width .2s ease, background .2s ease, box-shadow .2s ease; }
    .signal-card:hover { background: rgba(111,157,255,.055); transform: translateX(2px); }
    .signal-card.active { background: linear-gradient(90deg, rgba(77,226,197,.095), rgba(77,226,197,.02)); }
    .signal-card.active::before { width: 3px; background: var(--radar); box-shadow: 0 0 16px var(--radar); }
    .signal-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; min-width: 0; }
    .signal-top > div { min-width: 0; }
    .signal-type { color: var(--ice); font-size: 13px; font-weight: 760; letter-spacing: -.01em; overflow-wrap: anywhere; }
    .signal-type .en { display: block; margin-top: 3px; color: var(--steel-dim); font-family: var(--font-data); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
    .signal-product { margin-top: 5px; color: var(--ice-soft); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
    .badge-row { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
    .badge { display: inline-flex; align-items: center; max-width: 100%; border-radius: 999px; padding: 4px 8px; background: rgba(255,255,255,.045); color: var(--steel); font-size: 10px; line-height: 1.25; font-weight: 650; border: 1px solid var(--grid-line); white-space: normal; overflow-wrap: anywhere; }
    .confidence { flex: 0 0 auto; font-family: var(--font-data); font-variant-numeric: tabular-nums; color: var(--radar); }

    .overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 13px; }
    .metric {
      position: relative;
      min-width: 0;
      overflow: hidden;
      background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
      border: 1px solid var(--grid-line);
      border-radius: 13px;
      padding: 11px;
      min-height: 102px;
    }
    .metric::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--signal-blue); opacity: .58; }
    .metric:nth-child(1)::after { background: var(--caution); }
    .metric:nth-child(2)::after { background: #ffd285; }
    .metric:nth-child(3)::after { background: var(--danger); }
    .metric:nth-child(4)::after { background: var(--radar); }
    .metric b { display: block; color: var(--steel); font-size: 10px; line-height: 1.3; margin-bottom: 8px; font-weight: 650; overflow-wrap: anywhere; }
    .metric b .en { display: block; color: var(--steel-dim); font-family: var(--font-data); font-size: 8px; letter-spacing: .07em; text-transform: uppercase; }
    .metric span { display: block; color: var(--ice); font-family: var(--font-data); font-size: 27px; line-height: 1; font-weight: 760; letter-spacing: -.05em; }
    .metric small { display: block; color: var(--steel-dim); margin-top: 9px; font-size: 10px; line-height: 1.35; overflow-wrap: anywhere; word-break: break-word; }

    .review-grid { display: grid; gap: 14px; padding: 14px; }
    .hero-signal {
      position: relative;
      isolation: isolate;
      display: grid;
      gap: 14px;
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(77,226,197,.25);
      border-radius: 17px;
      padding: 18px;
      background:
        radial-gradient(circle at 86% 12%, rgba(77,226,197,.19), transparent 18rem),
        linear-gradient(135deg, rgba(18,39,53,.98), rgba(7,18,29,.98));
      box-shadow: inset 0 1px rgba(255,255,255,.035), 0 16px 46px rgba(0,0,0,.2);
    }
    .hero-signal::before {
      content: "";
      position: absolute;
      z-index: -1;
      right: -68px;
      top: -72px;
      width: 240px;
      height: 240px;
      border-radius: 50%;
      border: 1px solid rgba(77,226,197,.12);
      box-shadow: 0 0 0 38px rgba(77,226,197,.035), 0 0 0 76px rgba(77,226,197,.02);
      animation: orbit 12s linear infinite;
    }
    .hero-signal::after { content: ""; position: absolute; z-index: -1; left: -30%; top: 0; width: 26%; height: 100%; background: linear-gradient(90deg, transparent, rgba(127,248,222,.08), transparent); transform: skewX(-16deg); animation: heroScan 6s ease-in-out infinite; }
    .hero-signal h2 { margin: 0; max-width: 18ch; color: var(--ice); font-size: clamp(22px, 2.4vw, 36px); line-height: 1.08; letter-spacing: -.045em; overflow-wrap: anywhere; }
    .hero-signal .subtle { max-width: 100%; color: var(--steel); font-family: var(--font-data); font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; word-break: break-all; }
    .hero-meta { display: flex; flex-wrap: wrap; gap: 7px; position: relative; z-index: 1; }

    .section-card { min-width: 0; border: 1px solid var(--grid-line); border-radius: 14px; background: rgba(255,255,255,.018); overflow: hidden; }
    .section-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; padding: 11px 13px; border-bottom: 1px solid var(--grid-line); color: var(--ice-soft); font-size: 12px; font-weight: 720; }
    .section-title > * { min-width: 0; }
    .section-title .en { color: var(--steel-dim); font-size: 9px; font-family: var(--font-data); text-transform: uppercase; letter-spacing: .07em; }
    .section-body { padding: 13px; }
    .kv { display: grid; grid-template-columns: minmax(88px, 120px) minmax(0, 1fr); gap: 8px 10px; font-size: 11px; line-height: 1.45; }
    .kv b { color: var(--steel); font-weight: 650; }
    .kv span { color: var(--ice-soft); min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
    .codebox { max-width: 100%; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; background: var(--console-inset); color: #dcecef; padding: 13px; border: 1px solid var(--grid-line); border-radius: 11px; font-family: var(--font-data); font-size: 10px; line-height: 1.58; margin: 0; max-height: 290px; overflow: auto; }
    .evidence-text { color: var(--ice-soft); }

    .field-list { display: grid; gap: 9px; }
    .field-row { min-width: 0; border: 1px solid var(--grid-line); border-radius: 12px; padding: 11px; background: rgba(3,12,20,.36); display: grid; gap: 9px; transition: border-color .2s ease, background .2s ease; }
    .field-row:hover { border-color: rgba(77,226,197,.28); background: rgba(77,226,197,.025); }
    .field-row.conflict { border-color: rgba(241,184,91,.42); background: rgba(241,184,91,.055); }
    .field-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-width: 0; }
    .field-name { color: var(--ice); font-size: 12px; font-weight: 720; overflow-wrap: anywhere; }
    .field-name .en { display: block; margin-top: 2px; color: var(--steel-dim); font-family: var(--font-data); font-size: 8px; font-weight: 500; }
    .field-diff { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
    .diff-box { min-width: 0; overflow: hidden; border-radius: 10px; border: 1px solid var(--grid-line); padding: 9px; background: rgba(255,255,255,.025); }
    .diff-box b { display: block; color: var(--steel-dim); font-size: 8px; line-height: 1.2; letter-spacing: .05em; margin-bottom: 5px; font-weight: 600; }
    .diff-box span { display: block; color: var(--ice-soft); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; word-break: break-word; }
    .proposal-input { width: 100%; min-width: 0; max-width: 100%; min-height: 38px; }

    .rail { position: relative; display: grid; gap: 10px; min-width: 0; padding-left: 18px; }
    .rail::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--radar), rgba(111,157,255,.45), transparent); }
    .rail-item { position: relative; min-width: 0; border: 1px solid var(--grid-line); border-radius: 11px; background: rgba(255,255,255,.025); padding: 9px 10px; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
    .rail-item:hover { transform: translateX(2px); border-color: rgba(77,226,197,.28); background: rgba(77,226,197,.035); }
    .rail-item::before { content: ""; position: absolute; left: -17px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--radar); box-shadow: 0 0 0 3px var(--night-deep), 0 0 12px var(--radar); animation: nodePulse 2.8s ease-in-out infinite; }
    .rail-title { color: var(--ice-soft); font-size: 11px; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; }
    .rail-meta { color: var(--steel-dim); font-family: var(--font-data); font-size: 9px; line-height: 1.45; margin-top: 3px; overflow-wrap: anywhere; word-break: break-all; }

    .product-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 9px; padding: 13px; }
    .product-card { min-width: 0; border: 1px solid var(--grid-line); border-radius: 13px; padding: 12px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.014)); transition: transform .2s ease, border-color .2s ease; }
    .product-card:hover { transform: translateY(-2px); border-color: rgba(77,226,197,.28); }
    .product-card h3 { margin: 0 0 8px; color: var(--ice); font-size: 13px; letter-spacing: -.01em; overflow-wrap: anywhere; }
    .product-bar { height: 4px; background: rgba(137,160,170,.16); border-radius: 999px; overflow: hidden; margin-top: 10px; }
    .product-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--radar), var(--signal-blue)); box-shadow: 0 0 12px rgba(77,226,197,.35); width: 0%; transition: width .7s cubic-bezier(.2,.8,.2,1); }

    .empty { padding: 30px 16px; color: var(--steel); font-size: 12px; line-height: 1.6; text-align: center; }
    .error { margin: 0 0 12px; color: #ffaaaa; background: var(--danger-soft); border: 1px solid rgba(255,116,116,.26); padding: 11px 13px; border-radius: 12px; display: none; }
    .toast { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: none; max-width: min(360px, calc(100vw - 32px)); color: var(--ice); background: rgba(13,27,41,.96); border: 1px solid rgba(77,226,197,.3); border-radius: 12px; padding: 11px 13px; box-shadow: var(--shadow-deep); font-size: 12px; }

    [hidden] { display: none !important; }

    @keyframes itemIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes commandScan { 0%, 12% { transform: translateX(0); opacity: 0; } 38%, 65% { opacity: 1; } 88%, 100% { transform: translateX(410%); opacity: 0; } }
    @keyframes heroScan { 0%, 18% { transform: translateX(0) skewX(-16deg); opacity: 0; } 50% { opacity: 1; } 85%, 100% { transform: translateX(620%) skewX(-16deg); opacity: 0; } }
    @keyframes radarBreathe { 0%,100% { transform: scale(.96); opacity: .6; } 50% { transform: scale(1.03); opacity: 1; } }
    @keyframes orbit { to { transform: rotate(360deg); } }
    @keyframes nodePulse { 0%,100% { opacity: .68; } 50% { opacity: 1; box-shadow: 0 0 0 4px var(--night-deep), 0 0 18px var(--radar); } }

    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
    @media (max-width: 1320px) {
      .layout { grid-template-columns: minmax(280px, 310px) minmax(500px, 1fr); }
      .right-col { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 900px) {
      .shell { width: min(100vw - 18px, 820px); padding-top: 8px; }
      .command-inner, .layout, .right-col { grid-template-columns: 1fr; }
      .ops-strip { justify-content: flex-start; }
      .queue { max-height: 420px; }
    }
    @media (max-width: 560px) {
      .command-inner { padding: 12px; }
      .mark { width: 40px; height: 40px; }
      .brand h1 { font-size: 18px; }
      .overview, .field-diff { grid-template-columns: 1fr; }
      .panel-header { align-items: flex-start; }
      .section-title { align-items: flex-start; flex-direction: column; }
      .section-title .btn { align-self: stretch; }
      .hero-signal h2 { max-width: none; }
    }

/* Signature component: explainable evidence-to-fact flow */
.evidence-flow-card { border-color: rgba(77, 226, 197, .22); }
.evidence-flow {
  --flow-progress: 0%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  padding: 4px 0 2px;
}
.evidence-flow::before,
.evidence-flow::after {
  content: "";
  position: absolute;
  left: calc(100% / 12);
  right: calc(100% / 12);
  top: 20px;
  height: 1px;
  border-radius: 999px;
}
.evidence-flow::before { background: rgba(137, 160, 170, .2); }
.evidence-flow::after {
  right: auto;
  width: var(--flow-progress);
  background: linear-gradient(90deg, var(--radar), var(--signal-blue));
  box-shadow: 0 0 12px rgba(77, 226, 197, .35);
  transition: width var(--motion-narrative) var(--ease-enter);
}
.flow-stage {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  min-width: 0;
  text-align: center;
  opacity: 0;
  animation: flowStageIn var(--motion-standard) var(--ease-enter) forwards;
  animation-delay: var(--stage-delay);
}
.flow-node {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--grid-line-strong);
  border-radius: 50%;
  background: var(--night-deep);
  color: var(--steel-dim);
  font-family: var(--font-data);
  font-size: 10px;
  box-shadow: 0 0 0 5px var(--night-deep);
  transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease, background var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.flow-stage.done .flow-node {
  border-color: rgba(77, 226, 197, .52);
  background: var(--radar-soft);
  color: var(--radar-bright);
  box-shadow: 0 0 0 5px var(--night-deep), 0 0 18px rgba(77, 226, 197, .22);
}
.flow-stage.current .flow-node {
  border-color: var(--caution);
  color: #ffd285;
  background: var(--caution-soft);
  box-shadow: 0 0 0 5px var(--night-deep), 0 0 20px rgba(241, 184, 91, .26);
  animation: currentNode 2.2s ease-in-out infinite;
}
.flow-stage.blocked .flow-node {
  border-color: rgba(255, 116, 116, .48);
  color: var(--danger);
  background: var(--danger-soft);
}
.flow-copy { min-width: 0; display: grid; gap: 2px; }
.flow-copy strong { color: var(--ice-soft); font-size: 10px; line-height: 1.3; font-weight: 680; overflow-wrap: anywhere; }
.flow-copy small { color: var(--steel-dim); font-family: var(--font-data); font-size: 7px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }
.flow-copy em { margin-top: 2px; color: var(--steel); font-family: var(--font-data); font-size: 7px; line-height: 1.25; font-style: normal; overflow-wrap: anywhere; }
.flow-stage.waiting .flow-copy { opacity: .5; }
.flow-stage.blocked .flow-copy strong { color: #ff9a9a; }

@keyframes flowStageIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes currentNode { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

@media (max-width: 700px) {
  .evidence-flow { grid-template-columns: 1fr; gap: 0; padding-left: 2px; }
  .evidence-flow::before,
  .evidence-flow::after {
    left: 17px;
    right: auto;
    top: 17px;
    bottom: 17px;
    width: 1px;
    height: auto;
  }
  .evidence-flow::after {
    bottom: auto;
    height: var(--flow-progress);
    background: linear-gradient(var(--radar), var(--signal-blue));
    transition: height var(--motion-narrative) var(--ease-enter);
  }
  .flow-stage {
    min-height: 58px;
    grid-template-columns: 34px minmax(0, 1fr);
    justify-items: start;
    align-items: start;
    gap: 12px;
    text-align: left;
  }
  .flow-copy { padding-top: 2px; }
  .flow-copy strong { font-size: 11px; }
  .flow-copy small, .flow-copy em { font-size: 8px; }
}

.flow-stage {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.flow-stage:hover .flow-node,
.flow-stage:focus-visible .flow-node {
  transform: translateY(-2px);
  border-color: var(--radar-bright);
}
.flow-stage:focus-visible { outline: none; }
.focus-flash { animation: focusFlash 1.1s var(--ease-enter); }
@keyframes focusFlash {
  0% { border-color: var(--radar-bright); box-shadow: 0 0 0 1px rgba(77,226,197,.32), 0 0 28px rgba(77,226,197,.18); }
  100% { border-color: var(--grid-line); box-shadow: none; }
}

/* Deep Ops ambient field */
:root { --cursor-x: 72vw; --cursor-y: 18vh; }
body {
  background:
    radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(125,211,252,.16), transparent 24rem),
    radial-gradient(circle at 76% -12%, rgba(137,168,255,.18), transparent 34rem),
    radial-gradient(circle at 6% 10%, rgba(125,211,252,.10), transparent 28rem),
    linear-gradient(145deg, #030712 0%, #07111f 50%, #050914 100%);
}
body::before { opacity:.28; background-size:64px 64px; }
body::after {
  border-color: rgba(125,211,252,.08);
  box-shadow:
    0 0 0 70px rgba(125,211,252,.020),
    0 0 0 140px rgba(137,168,255,.014),
    0 0 140px rgba(125,211,252,.08);
}
.app-main::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(115deg, transparent 0%, rgba(125,211,252,.035) 48%, transparent 62%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.035), transparent 30rem);
  mix-blend-mode:screen;
  opacity:.72;
}
.tower-card,
.exec-weekly-card,
.p0-risk-preview,
.exec-hero,
.p0-risk-hero,
.processing-hero,
.tracker-priority-copy {
  box-shadow: 0 24px 80px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.045);
}
.tower-card,
.exec-north-star div,
.p0-risk-row,
.exec-digest-metric,
.exec-digest-bullet,
.exec-approved-item,
.exec-lever-card {
  position:relative;
  overflow:hidden;
}
.tower-card::after,
.exec-north-star div::before,
.p0-risk-row::before,
.exec-digest-metric::before,
.exec-digest-bullet::before,
.exec-approved-item::before,
.exec-lever-card::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at var(--mx, 50%) var(--my, 20%), rgba(199,240,255,.16), transparent 13rem);
  transition:opacity 260ms ease;
}
.tower-card:hover::after,
.exec-north-star div:hover::before,
.p0-risk-row:hover::before,
.exec-digest-metric:hover::before,
.exec-digest-bullet:hover::before,
.exec-approved-item:hover::before,
.exec-lever-card:hover::before { opacity:1; }
@media (prefers-reduced-motion: reduce) {
  .app-main::before { display:none; }
}
