:root {
  --bg: #061017;
  --bg-soft: #0a1820;
  --panel: #0b1b24;
  --panel-2: #0d202a;
  --line: #183640;
  --line-soft: #112b34;
  --text: #d7e7ea;
  --muted: #78959c;
  --bright: #f1faf9;
  --cyan: #46d8cf;
  --cyan-soft: #1b7e7b;
  --lime: #88e0ad;
  --amber: #e6b566;
  --red: #e27a7a;
  --blue: #77a8ff;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); }
body {
  background:
    radial-gradient(circle at 75% 8%, rgba(70,216,207,.08), transparent 28rem),
    linear-gradient(180deg, #061017 0%, #071119 100%);
}
button { font: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 230px minmax(0, 1fr); }
.sidebar {
  position: sticky; top: 0; height: 100vh; padding: 28px 20px 22px;
  border-right: 1px solid var(--line-soft); background: rgba(4,13,18,.93);
  display: flex; flex-direction: column; z-index: 5;
}
.brand-block { display: flex; align-items: center; gap: 13px; padding-bottom: 28px; border-bottom: 1px solid var(--line-soft); }
.brand-mark {
  width: 38px; height: 38px; border: 1px solid var(--cyan-soft); display: grid; place-items: center;
  color: var(--cyan); font-family: var(--serif); font-size: 21px; background: #07151b;
  box-shadow: inset 0 0 22px rgba(70,216,207,.05);
}
.brand-name { color: var(--bright); letter-spacing: .18em; font: 700 15px var(--mono); }
.brand-subtitle { color: var(--muted); font: 9px/1.4 var(--mono); letter-spacing: .09em; margin-top: 3px; }
.nav { display: grid; gap: 4px; margin-top: 25px; }
.nav-item {
  width: 100%; border: 0; border-left: 2px solid transparent; padding: 12px 10px; background: transparent;
  color: #9ab0b5; display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
  transition: .16s ease; font-size: 13px;
}
.nav-item span { color: #47646b; font: 10px var(--mono); }
.nav-item:hover { color: var(--bright); background: rgba(70,216,207,.035); }
.nav-item.active { color: var(--cyan); background: rgba(70,216,207,.055); border-left-color: var(--cyan); }
.nav-item.active span { color: var(--cyan-soft); }
.sidebar-footer { margin-top: auto; border: 1px solid var(--line-soft); padding: 13px 12px; background: #07151b; }
.determinism-light { display: flex; gap: 8px; align-items: center; font: 10px var(--mono); letter-spacing: .08em; color: var(--lime); }
.determinism-light i { display:block; width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 9px rgba(136,224,173,.7); }
.sidebar-footer small { display:block; margin-top:6px; color:var(--muted); font-size:10px; }

.main { min-width: 0; }
.topbar { height: 68px; padding: 0 32px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line-soft); background:rgba(6,16,23,.82); backdrop-filter: blur(12px); position:sticky; top:0; z-index:4; }
.crumb { font: 10px var(--mono); letter-spacing:.12em; color:#55757d; }
.top-status { font: 10px var(--mono); letter-spacing:.08em; display:flex; gap:8px; align-items:center; color:var(--muted); }
.connection-state { display:flex; gap:8px; align-items:center; white-space:nowrap; }
.top-button { border:1px solid var(--line); background:#081820; color:#91adb2; padding:7px 9px; cursor:pointer; font:9px var(--mono); text-transform:uppercase; letter-spacing:.04em; }
.top-button:hover { border-color:var(--cyan-soft); color:var(--cyan); }
.status-dot { width:7px; height:7px; border-radius:50%; background:#756e4a; }
.status-dot.live { background:var(--lime); box-shadow:0 0 8px rgba(136,224,173,.65); }
.status-dot.error { background:var(--red); }

.view { max-width: 1440px; margin: 0 auto; padding: 36px 38px 80px; }
.loading-screen { min-height:55vh; display:grid; place-items:center; align-content:center; gap:18px; color:var(--muted); font:11px var(--mono); letter-spacing:.08em; }
.loading-orbit { width:40px; height:40px; border:1px solid #1a424c; border-radius:50%; position:relative; }
.loading-orbit i { width:7px; height:7px; background:var(--cyan); border-radius:50%; position:absolute; top:-4px; left:16px; animation:orbit 1.2s linear infinite; transform-origin:4px 24px; }
@keyframes orbit { to { transform: rotate(360deg); } }

.page-header { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:30px; }
.eyebrow { color:var(--cyan); font:10px var(--mono); letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:7px 0 8px; font:400 clamp(34px,5vw,58px)/1.03 var(--serif); color:var(--bright); letter-spacing:-.025em; }
.page-header p { max-width:770px; margin:0; color:#8ba2a7; font-size:14px; line-height:1.6; }
.receipt-tag { align-self:flex-start; border:1px solid var(--line); padding:10px 12px; color:#64858b; font:9px var(--mono); letter-spacing:.08em; white-space:nowrap; }
.header-receipts { display:grid; justify-items:end; gap:7px; color:#58777e; font:9px var(--mono); }

.metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border:1px solid var(--line); margin-bottom:24px; background:rgba(10,24,32,.62); }
.metric { padding:20px 18px; min-height:108px; border-right:1px solid var(--line-soft); }
.metric:last-child { border-right:0; }
.metric span { display:block; color:#658189; font:9px var(--mono); letter-spacing:.11em; text-transform:uppercase; }
.metric strong { display:block; color:var(--bright); font:400 29px/1.15 var(--serif); margin:10px 0 2px; }
.metric small { color:#627c83; font-size:10px; }

.grid-2 { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr); gap:20px; }
.panel { border:1px solid var(--line); background:rgba(10,25,33,.72); min-width:0; }
.panel-header { padding:17px 18px 14px; border-bottom:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:14px; align-items:center; }
.panel-header h2 { margin:3px 0 0; font:400 22px var(--serif); color:var(--bright); }
.panel-header small { font:9px var(--mono); color:#56757c; }
.panel-body { padding:16px 18px 18px; }

.readiness-stack { display:grid; gap:7px; }
.readiness-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:11px 0; border-bottom:1px solid #0f2831; }
.readiness-row:last-child { border-bottom:0; }
.readiness-row strong { font-size:12px; color:#bdd0d3; font-weight:550; }
.readiness-row small { display:block; margin-top:3px; color:#57777e; font:9px var(--mono); }
.badge { display:inline-flex; align-items:center; justify-content:center; min-width:78px; height:23px; padding:0 8px; border:1px solid; font:9px var(--mono); letter-spacing:.045em; text-transform:uppercase; }
.badge-ready,.badge-verified { border-color:#295f4b; color:var(--lime); background:rgba(85,160,115,.08); }
.badge-degraded,.badge-verified_with_findings { border-color:#66552e; color:var(--amber); background:rgba(202,161,80,.07); }
.badge-failed,.badge-blocked { border-color:#633636; color:#e99696; background:rgba(194,82,82,.07); }
.badge-unknown,.badge-not_active { border-color:#29434a; color:#78959c; background:rgba(84,115,123,.05); }

.stream-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.stream-card { padding:12px; border:1px solid #14303a; background:#081820; }
.stream-card.interactive { width:100%; text-align:left; cursor:pointer; color:inherit; }
.stream-card.interactive:hover { border-color:var(--cyan-soft); background:#0a1d25; }
.stream-card strong { display:block; color:#a9c2c7; font:11px var(--mono); overflow:hidden; text-overflow:ellipsis; }
.stream-card small { display:block; margin-top:6px; color:#526f76; font-size:10px; }

.section-note { margin:20px 0; border-left:2px solid var(--cyan-soft); padding:12px 16px; background:rgba(70,216,207,.035); color:#78969d; font-size:12px; line-height:1.6; }

.source-toolbar { display:flex; gap:10px; margin-bottom:14px; }
.input { width:100%; border:1px solid var(--line); background:#07161d; color:var(--text); padding:11px 12px; outline:none; font-size:12px; }
.input:focus { border-color:#245966; }
.source-table { width:100%; border-collapse:collapse; font-size:11px; }
.source-table th { color:#58777e; font:9px var(--mono); letter-spacing:.08em; text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); }
.source-table td { padding:11px 8px; border-bottom:1px solid #0e2830; vertical-align:middle; color:#91aab0; }
.source-table td:first-child { color:#c2d5d8; }
.source-table tr:hover td { background:rgba(70,216,207,.02); }
.source-table td small { display:block; margin-top:4px; color:#56757c; font:9px var(--mono); }

.button { border:1px solid var(--cyan-soft); background:rgba(70,216,207,.1); color:var(--cyan); padding:10px 13px; cursor:pointer; font:10px var(--mono); text-transform:uppercase; letter-spacing:.04em; }
.button:hover { background:rgba(70,216,207,.16); }
.button:disabled { opacity:.5; cursor:wait; }
.button.small { padding:7px 9px; font-size:9px; }
.button.secondary { border-color:var(--line); background:#081820; color:#91adb2; }
.button.secondary:hover { border-color:#2c5963; color:#c3d6d9; }
.button.danger { border-color:#633636; background:rgba(194,82,82,.07); color:#e99696; }
.detail-panel { margin-bottom:20px; scroll-margin-top:86px; }
.detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.detail-grid > div { border:1px solid #123039; background:#07151c; padding:10px; min-width:0; }
.detail-grid span { display:block; color:#56757c; font:8px var(--mono); text-transform:uppercase; letter-spacing:.05em; }
.detail-grid strong { display:block; margin-top:5px; color:#b5cbd0; font:10px/1.45 var(--mono); overflow-wrap:anywhere; }
.detail-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.mono { font-family:var(--mono); overflow-wrap:anywhere; }

.timeline-summary { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.timeline { position:relative; display:grid; gap:10px; }
.timeline::before { content:""; position:absolute; top:0; bottom:0; left:18px; width:1px; background:#17404a; }
.version-card { position:relative; margin-left:40px; padding:15px 16px 14px; border:1px solid #16323b; background:#081820; }
.version-card::before { content:""; position:absolute; width:9px; height:9px; border-radius:50%; left:-27px; top:18px; background:#3b777b; border:2px solid #07141a; box-shadow:0 0 0 1px #23505a; }
.version-card.failed::before { background:#b75f5f; box-shadow:0 0 0 1px #6e3d3d; }
.version-card.verified::before { background:#70c896; }
.version-top { display:flex; justify-content:space-between; gap:15px; align-items:flex-start; }
.version-order { color:#52737a; font:9px var(--mono); margin-bottom:5px; }
.version-card h3 { margin:0; font:500 14px/1.35 var(--sans); color:#c9dbde; }
.version-meta { margin-top:11px; display:flex; flex-wrap:wrap; gap:13px; color:#5f7e85; font:9px var(--mono); }
.version-details { margin-top:11px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.detail-chip { border:1px solid #12313a; padding:8px 9px; background:#07151c; }
.detail-chip span { display:block; color:#4f7077; font:8px var(--mono); text-transform:uppercase; }
.detail-chip strong { display:block; margin-top:4px; color:#9cb6bb; font:11px var(--mono); font-weight:500; }
.failure-box { margin-top:10px; padding:9px 10px; border-left:2px solid #8e4c4c; color:#b77979; background:rgba(158,75,75,.05); font:9px/1.5 var(--mono); overflow-wrap:anywhere; }

.contract-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.contract-card { border:1px solid var(--line); background:#081820; padding:16px; }
.contract-card h3 { margin:0 0 8px; color:#c9dcde; font:400 18px var(--serif); }
.contract-card p { margin:0 0 12px; color:#607f86; font-size:11px; line-height:1.55; }
.contract-list { display:grid; gap:7px; }
.contract-item { padding:8px 9px; border:1px solid #123039; background:#07151c; }
.contract-item strong,.contract-item summary { display:block; color:#91adb2; font:10px var(--mono); overflow-wrap:anywhere; cursor:pointer; }
.contract-item small { color:#4f7077; font-size:9px; }

.boundary-flow { display:grid; grid-template-columns:repeat(7,minmax(120px,1fr)); gap:9px; overflow-x:auto; padding-bottom:5px; }
.boundary-node { min-width:120px; padding:14px 12px; border:1px solid #15343d; background:#081820; }
.boundary-node strong,.boundary-node summary { color:#bcd0d3; font:11px var(--mono); cursor:pointer; }
.boundary-node p { margin:7px 0 0; color:#57767d; font-size:10px; line-height:1.45; }
.boundary-node.atlas { border-color:#247c79; box-shadow:inset 0 0 24px rgba(70,216,207,.04); }
.boundary-node.atlas strong { color:var(--cyan); }
.boundary-rule { margin-top:18px; padding:16px; border:1px solid #15404a; background:rgba(70,216,207,.03); color:#91adb2; font:11px/1.7 var(--mono); }

.error-panel { border:1px solid #613638; background:rgba(119,49,52,.08); color:#db8a8d; padding:14px; font:11px/1.5 var(--mono); }
.empty { padding:30px; text-align:center; color:#607d84; font-size:12px; }
.locked-panel { min-height:380px; border:1px solid var(--line); background:rgba(10,25,33,.72); display:grid; place-items:center; align-content:center; text-align:center; padding:30px; }
.locked-panel h2 { margin:14px 0 5px; font:400 25px var(--serif); color:var(--bright); }
.locked-panel p { max-width:530px; color:#6f8c93; font-size:12px; line-height:1.6; }
.lock-mark { width:58px; height:58px; border:1px solid var(--cyan-soft); display:grid; place-items:center; color:var(--cyan); font:28px var(--serif); }
.operator-dialog { width:min(520px,calc(100vw - 30px)); border:1px solid var(--line); background:#091820; color:var(--text); padding:0; box-shadow:0 30px 80px rgba(0,0,0,.55); }
.operator-dialog::backdrop { background:rgba(0,7,10,.78); backdrop-filter:blur(3px); }
.operator-dialog form { padding:24px; }
.operator-dialog h2 { margin:8px 0; font:400 27px var(--serif); color:var(--bright); }
.operator-dialog p { color:#729097; font-size:12px; line-height:1.55; }
.operator-dialog label { display:block; margin:17px 0 7px; color:#78959c; font:9px var(--mono); text-transform:uppercase; }
.dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:17px; }
.form-error { margin-top:9px; color:#e99696; font:10px/1.5 var(--mono); }
.runtime-error { display:block; max-width:28rem; margin-top:7px; color:#e99696; white-space:normal; }
.toast { position:fixed; right:22px; bottom:22px; z-index:20; max-width:min(520px,calc(100vw - 44px)); border:1px solid #295f4b; background:#0a1c19; color:#a8dfbd; padding:12px 14px; font:10px/1.5 var(--mono); box-shadow:0 15px 45px rgba(0,0,0,.35); }
.toast.error { border-color:#633636; background:#241315; color:#e99696; }
.output-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.output-grid h3 { margin:0 0 10px; color:#c4d7da; font:400 19px var(--serif); }
.output-card { border:1px solid #123039; background:#07151c; padding:11px; margin-bottom:8px; }
.output-card h4 { margin:9px 0 5px; color:#b4cace; font-size:12px; }
.output-card small { color:#57777e; font-size:9px; }
.output-card .mono { margin-top:8px; color:#45666d; font-size:8px; }
.registration-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }

@media (max-width: 1050px) {
  .metrics { grid-template-columns:repeat(3,1fr); }
  .metric:nth-child(3) { border-right:0; }
  .grid-2 { grid-template-columns:1fr; }
  .contract-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:relative; height:auto; padding:18px 16px 10px; border-right:0; border-bottom:1px solid var(--line-soft); }
  .brand-block { padding-bottom:15px; }
  .nav { display:flex; overflow-x:auto; margin-top:13px; gap:3px; padding-bottom:4px; }
  .nav-item { width:auto; min-width:max-content; border-left:0; border-bottom:2px solid transparent; padding:10px 11px; }
  .nav-item.active { border-left-color:transparent; border-bottom-color:var(--cyan); }
  .sidebar-footer { display:none; }
  .topbar { top:0; height:54px; padding:0 16px; }
  .crumb { display:none; }
  .topbar { justify-content:flex-end; }
  .top-status { gap:5px; }
  .top-button { padding:6px; font-size:8px; }
  .connection-state { font-size:8px; }
  .view { padding:24px 15px 60px; }
  .page-header { display:block; }
  .receipt-tag { display:inline-block; margin-top:14px; }
  .metrics { grid-template-columns:1fr 1fr; }
  .metric { border-bottom:1px solid var(--line-soft); }
  .metric:nth-child(even) { border-right:0; }
  .metric:last-child { border-bottom:0; }
  .stream-list { grid-template-columns:1fr; }
  .source-table { min-width:780px; }
  .table-scroll { overflow-x:auto; }
  .version-details { grid-template-columns:1fr 1fr; }
  .contract-grid { grid-template-columns:1fr; }
  .detail-grid,.output-grid,.registration-form { grid-template-columns:1fr; }
  .header-receipts { justify-items:start; margin-top:13px; }
  .source-toolbar { align-items:stretch; }
  .source-toolbar .button { white-space:nowrap; }
}