/* NEXUS project page /p/<slug>. Uses the site.css tokens and components (.panel .kpi .bdg .chip .btn .tabs .seg .tbl .field .vbar .empty .modal). Own classes start with pj- / rp-. */
.pj { padding: 104px 0 24px }
.pj-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 30px; margin-bottom: 14px; font-size: 14px; color: var(--mut2) }
.pj-crumb a { color: var(--mut); font-weight: 600 } .pj-crumb a:hover { color: var(--ink) }

/* ---------- head ---------- */
.pj-head { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px 40px; padding: 28px; border-radius: 28px; border-color: var(--line2) }
.pj-orbit { inset: auto; right: -80px; top: -110px; width: 560px; height: 330px; opacity: .8 }
.pj-main { position: relative; display: grid; gap: 18px; align-content: start; min-width: 0 }
.pj-id { display: flex; align-items: center; gap: 18px; min-width: 0 }
.pj-id > div { display: grid; gap: 8px; min-width: 0 }
.pj-name { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.02; letter-spacing: -.045em; color: #fff; overflow-wrap: anywhere }
.pj-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px }
.pj-tk { font: 700 17px var(--mf); color: var(--b3) }
.pj-desc { color: #CFDDF7; font-size: 16.5px; max-width: 64ch }
.pj-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--mut); font-size: 14px }
.pj-facts > span { display: inline-flex; align-items: center; gap: 7px; min-height: 28px } .pj-facts .ic { width: 16px; height: 16px; color: var(--mut2) }
.pj-facts a { color: var(--b3); font-weight: 600 } .pj-facts a:hover { color: #fff }
.pj-facts .pj-cp { border: 0; background: none; padding: 0; color: inherit; display: inline-flex; align-items: center; gap: 6px; min-height: 28px } .pj-facts .pj-cp:hover { color: var(--ink) }
.pj-ver { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.pj-vc { display: grid; gap: 9px; justify-items: start; text-align: left; padding: 14px 16px 14px; border-radius: 18px; border: 1px solid transparent; background: var(--gloss), rgba(6, 18, 66, .7); transition: border-color .25s, transform .3s var(--ease), box-shadow .3s; min-width: 0 }
.pj-vc:hover { border-color: var(--b3); transform: translateY(-2px); box-shadow: 0 18px 40px -26px var(--glow) }
.pj-vc.ok { border-color: rgba(61, 227, 176, .4) } .pj-vc.bad { border-color: rgba(255, 107, 134, .5) } .pj-vc.warn { border-color: rgba(255, 195, 77, .5) }
.pj-vc > span.row { gap: 8px; width: 100% }
.pj-vc p { color: var(--mut); font-size: 13.5px; line-height: 1.45 }
.pj-vc em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-weight: 650; font-size: 13.5px; color: var(--b3) } .pj-vc em .ic { width: 15px; height: 15px }
.pj-side { position: relative; display: grid; gap: 14px; align-content: start }
.pj-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.pj-kpis .kpi { padding: 14px 16px; border: 1px solid transparent; border-radius: 16px; background: rgba(255, 255, 255, .03); min-width: 0 }
.pj-kpis .kpi dd { font-size: 24px } .pj-kpis .kpi dd small { display: block; margin-top: 4px; font: 600 12.5px var(--bf); color: var(--mut2) }
.pj-cta { display: flex; flex-wrap: wrap; gap: 10px }
.pj-cta .btn { flex: 1 1 150px }
.pj-wal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--line2); font-size: 13.5px; color: var(--mut) }
.pj-wal b { color: var(--ink); font-family: var(--mf); font-weight: 600 }
.pj-wal .btn { margin-left: auto }
.pj-cur { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid transparent; background: rgba(41, 211, 255, .09); color: var(--c); font-weight: 650; font-size: 13.5px } .pj-cur .ic { width: 16px; height: 16px }
a.pj-cur:hover { background: rgba(41, 211, 255, .16) }
.pj-note { margin-top: 12px; padding: 12px 16px; border-radius: 14px; border: 1px solid transparent; background: rgba(138, 92, 255, .09); color: #C9B9F5; font-size: 14px }

/* ---------- commitments ---------- */
.pj-sec { margin-top: 30px }
.pj-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; margin-bottom: 14px }
.pj-sec-h h2 { font-size: 22px; letter-spacing: -.03em } .pj-sec-h span { color: var(--mut2); font-size: 13.5px }
.pj-cgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px }
.pj-cm { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: 16px; border: 1px solid transparent; background: var(--gloss), var(--panel); min-width: 0 }
.pj-cm .k { font: 600 12px var(--mf); letter-spacing: .05em; text-transform: uppercase; color: var(--mut2) }
.pj-cm .v { font: 700 19px/1.15 var(--hf); letter-spacing: -.02em; overflow-wrap: anywhere }
.pj-cm .v.long { font-size: 15px; letter-spacing: -.01em; overflow-wrap: break-word }
.pj-cm .s { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; line-height: 1.35; color: var(--mut) } .pj-cm .s .ic { width: 15px; height: 15px; flex: none; margin-top: 2px }
.pj-cm.lock .s { color: var(--ok) } .pj-cm.vote { border-color: rgba(138, 92, 255, .4) } .pj-cm.vote .s { color: var(--v2) }

/* ---------- tabs ---------- */
.pj-tabs { margin-top: 34px }
.pj-tabs .tabs { width: 100% }
.pj-tabs .tabs [role=tab] { flex: 0 0 auto }
.pj-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .14); font: 700 12px var(--mf); color: #fff }
.tabs [role=tab][aria-selected=false] .pj-n { background: rgba(91, 155, 255, .2); color: var(--b3) }
.pj-panel { margin-top: 22px; min-width: 0 }
.pj-panel:not([hidden]) { animation: pjin .45s var(--ease) }
@keyframes pjin { from { opacity: 0; transform: translateY(14px) } }
.pj-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start }
.pj-stack { display: grid; gap: 16px; min-width: 0 }
.pj-p-h { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 14px }
.pj-p-h h3 { font-size: 20px } .pj-p-h .sub { color: var(--mut2); font-size: 13.5px }
.pj-lead { color: var(--mut); font-size: 15px; max-width: 70ch; line-height: 1.55 } .pj-lead b { color: var(--ink) }
.pj-simnote { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 1px solid transparent; background: rgba(138, 92, 255, .08); color: #C9B9F5; font-size: 13.5px; line-height: 1.45 } .pj-simnote .ic { width: 16px; height: 16px; flex: none; margin-top: 2px }
.pj-sum { display: grid; gap: 12px }
.pj-sumr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center }
.pj-sumr .q { font: 800 40px/1 var(--hf); letter-spacing: -.04em } .pj-sumr .q small { font: 600 12px var(--mf); color: var(--mut2); letter-spacing: .06em; margin-left: 4px }
.pj-facts2 { display: grid; gap: 0; margin: 0 }
.pj-facts2 > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px } .pj-facts2 > div:first-child { border-top: 0 }
.pj-facts2 dt { color: var(--mut) } .pj-facts2 dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere }
.pj-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none }
.pj-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14.5px; color: #CFDDF7; line-height: 1.5 } .pj-list li .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--ok) }
.pj-list.neg li .ic { color: var(--warn) }

/* ---------- market chart ---------- */
.pj-ctl { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px }
.pj-big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap } .pj-big b { font: 800 34px/1 var(--hf); letter-spacing: -.04em; font-variant-numeric: tabular-nums } .pj-big small { font: 700 14px var(--mf) }
.pj-chart { position: relative; touch-action: pan-y; user-select: none }
.pj-chart svg { width: 100%; height: auto; overflow: visible } .pj-chart text { font: 500 12px var(--mf); fill: var(--mut2) }
.pj-chart .grid-l { stroke: rgba(150, 190, 255, .12); stroke-width: 1 } .pj-chart .ln { fill: none; stroke: #5B9BFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round } .pj-chart .vb { fill: rgba(91, 155, 255, .28) }
.pj-chart .cross { stroke: rgba(234, 243, 255, .5); stroke-width: 1; stroke-dasharray: 4 4 } .pj-chart .dot { fill: #fff; stroke: #1E6BFF; stroke-width: 3 }
.pj-tip { position: absolute; z-index: 4; top: 0; left: 0; pointer-events: none; min-width: 150px; padding: 9px 12px; border-radius: 12px; border: 1px solid transparent; background: #07154A; box-shadow: 0 18px 40px -18px #000; font-size: 13px; line-height: 1.45; opacity: 0; transition: opacity .12s }
.pj-tip.on { opacity: 1 } .pj-tip b { display: block; font: 700 17px var(--hf); letter-spacing: -.02em } .pj-tip span { color: var(--mut); display: block }
.pj-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 16px }
.pj-stats .kpi { padding: 12px 14px; border: 1px solid transparent; border-radius: 14px; background: rgba(255, 255, 255, .03) } .pj-stats .kpi dd { font-size: 18px }

/* ---------- treasury / ledger ---------- */
.pj-tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px }
.pj-tre .kpi { padding: 16px 18px; border: 1px solid transparent; border-radius: 18px; background: var(--gloss), var(--panel) } .pj-tre .kpi dd { font-size: 28px }
.pj-tre .kpi.main { border-color: var(--line3) } .pj-tre .in { color: var(--ok) } .pj-tre .out { color: var(--warn) }
.pj-led { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.pj-led li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px 11px 12px; border-radius: 14px; border: 1px solid transparent; background: rgba(1, 9, 43, .45) }
.pj-led .li { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px } .pj-led .li .ic { width: 18px; height: 18px }
.pj-led .in .li { background: rgba(61, 227, 176, .12); color: var(--ok) } .pj-led .out .li { background: rgba(255, 195, 77, .12); color: var(--warn) }
.pj-led b { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.35 } .pj-led small { display: block; color: var(--mut2); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere }
.pj-led .amt { font: 700 15px var(--mf); white-space: nowrap } .pj-led .in .amt { color: var(--ok) } .pj-led .out .amt { color: var(--warn) }

/* ---------- actions ---------- */
.pj-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px }
.pj-tile { display: grid; gap: 8px; align-content: start; justify-items: start; text-align: left; padding: 14px 14px 14px; border-radius: 18px; border: 1px solid transparent; background: var(--gloss), rgba(6, 18, 66, .7); min-width: 0; transition: border-color .25s, background .25s, transform .3s var(--ease), box-shadow .3s }
.pj-tile .ti { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(30, 107, 255, .18); color: var(--b3) } .pj-tile .ti .ic { width: 21px; height: 21px }
.pj-tile b { font: 800 17px var(--hf); letter-spacing: -.02em } .pj-tile span.d { color: var(--mut); font-size: 12.5px; line-height: 1.4 }
.pj-tile:hover { border-color: var(--b3); transform: translateY(-2px) }
.pj-tile[aria-pressed=true] { border-color: var(--b3); background: linear-gradient(180deg, rgba(30, 107, 255, .3), rgba(30, 107, 255, .12)); box-shadow: 0 18px 44px -24px var(--glow) } .pj-tile[aria-pressed=true] .ti { background: var(--b); color: #fff }
.pj-tile:disabled { opacity: .45; cursor: not-allowed; transform: none }
.pj-form { margin-top: 14px; padding: 22px; border-radius: 22px; border: 1px solid transparent; background: var(--gloss), rgba(6, 18, 66, .85) }
.pj-form-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px } .pj-form-h h3 { font-size: 22px } .pj-form-h p { color: var(--mut); font-size: 14.5px; margin-top: 6px; max-width: 62ch }
.pj-fg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px } .pj-fg .full { grid-column: 1 / -1 }
.pj-fg .field { margin-bottom: 14px } .pj-fg textarea { min-height: 84px }
.pj-hint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--mut) } .pj-hint .chip { cursor: pointer }
.pj-fa { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px } .pj-fa .err { color: var(--bad); font-size: 13.5px; font-weight: 600; flex: 1 1 240px }
.pj-chainpick { display: grid; gap: 8px }
.pj-chain { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; background: rgba(1, 9, 43, .5); cursor: pointer; min-height: 52px } .pj-chain:has(input:checked) { border-color: var(--b3); background: rgba(30, 107, 255, .14) } .pj-chain.off { opacity: .55; cursor: not-allowed }
.pj-chain b { font: 700 15px var(--mf) } .pj-chain small { color: var(--mut); margin-left: auto; font-size: 13px }

.pj-acts { display: grid; gap: 12px }
.pj-act { --tone: var(--b3); position: relative; display: grid; gap: 14px; padding: 18px 20px 18px 22px; border-radius: 20px; border: 1px solid transparent; border-left: 4px solid var(--tone); background: var(--gloss), var(--panel); min-width: 0 }
.pj-act.fresh { animation: pjfresh 1.6s var(--ease) } @keyframes pjfresh { from { background: rgba(30, 107, 255, .3); box-shadow: 0 0 0 3px rgba(91, 155, 255, .5) } }
.pj-act.t-ok { --tone: var(--ok) } .pj-act.t-bad { --tone: var(--bad) } .pj-act.t-c { --tone: var(--c) } .pj-act.t-v { --tone: var(--v2) } .pj-act.t-mute { --tone: #5B6A94 } .pj-act.t-warn { --tone: var(--warn) }
.pj-act-h { display: flex; align-items: flex-start; gap: 14px; min-width: 0 }
.pj-act-h .ai { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: rgba(30, 107, 255, .16); color: var(--b3) } .pj-act-h .ai .ic { width: 21px; height: 21px }
.pj-act-h > div { display: grid; gap: 7px; min-width: 0; flex: 1 }
.pj-act-h h4 { font: 700 17px/1.3 var(--bf); letter-spacing: -.01em; overflow-wrap: anywhere }
.pj-act-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--mut2) } .pj-act-m .mono { color: var(--mut) }
.pj-act-m a { color: var(--b3); font-weight: 600 }
.pj-flow { display: flex; gap: 0; margin: 0; padding: 0 0 2px; list-style: none; overflow-x: auto; scrollbar-width: none } .pj-flow::-webkit-scrollbar { display: none }
.pj-flow li { position: relative; display: flex; align-items: center; gap: 8px; flex: 1 0 auto; padding-right: 10px; font-size: 13px; font-weight: 600; color: var(--mut2); white-space: nowrap }
.pj-flow li::after { content: ''; flex: 1; min-width: 14px; height: 2px; margin-left: 4px; background: var(--line2); border-radius: 2px } .pj-flow li:last-child { flex: 0 0 auto; padding-right: 0 } .pj-flow li:last-child::after { display: none }
.pj-flow .dt { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid transparent; font: 700 11px var(--mf) } .pj-flow .dt .ic { width: 12px; height: 12px; stroke-width: 2.6 }
.pj-flow li.done { color: var(--mut) } .pj-flow li.done .dt { background: rgba(61, 227, 176, .18); border-color: var(--ok); color: var(--ok) } .pj-flow li.done::after { background: rgba(61, 227, 176, .6) }
.pj-flow li.on { color: var(--ink) } .pj-flow li.on .dt { background: var(--b); border-color: var(--b3); color: #fff; box-shadow: 0 0 0 4px rgba(30, 107, 255, .28) }
.pj-flow li.bad { color: var(--bad) } .pj-flow li.bad .dt { background: rgba(255, 107, 134, .18); border-color: var(--bad); color: var(--bad) }
.pj-det { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; border: 1px solid transparent; background: rgba(1, 9, 43, .5); font-size: 14px; color: #CFDDF7; line-height: 1.5 }
.pj-det h5 { margin: 0; font: 700 12px var(--mf); letter-spacing: .06em; text-transform: uppercase; color: var(--mut2) }
.pj-det .kvs { display: flex; flex-wrap: wrap; gap: 6px 22px } .pj-det .kvs > span { display: grid; gap: 1px } .pj-det .kvs small { color: var(--mut2); font-size: 12.5px } .pj-det .kvs b { font: 700 16px var(--mf); color: #fff }
.pj-det ol { margin: 0; padding-left: 20px; display: grid; gap: 6px } .pj-det ol li b { color: #fff }
.pj-det .plain { color: var(--mut); font-size: 13.5px }
.pj-afoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.pj-afoot .hint { color: var(--mut2); font-size: 13px; flex: 1 1 200px }
.pj-sub { display: grid; gap: 10px; margin-top: 2px } .pj-sub textarea { min-height: 76px }
.pj-hdr { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 26px 0 12px } .pj-hdr h3 { font-size: 20px } .pj-hdr span { color: var(--mut2); font-size: 13.5px }

/* strategy agent */
.pj-strat { margin-top: 24px; margin-bottom: 8px; padding: 22px; border-radius: 22px; border: 1px solid transparent; background: linear-gradient(180deg, rgba(41, 211, 255, .07), transparent 55%), var(--panel) }
.pj-strat-in { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 }
.pj-strat-in .chip { height: auto; min-height: 30px; padding: 4px 12px }
.pj-sg { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 6px }
.pj-sc { display: grid; gap: 10px; align-content: start; padding: 16px 18px; border-radius: 16px; border: 1px solid transparent; background: rgba(1, 9, 43, .55); min-width: 0 }
.pj-sc h4 { font: 700 16px/1.3 var(--bf); letter-spacing: -.01em; display: flex; align-items: center; gap: 10px } .pj-sc h4 .ic { width: 18px; height: 18px; color: var(--c); flex: none }
.pj-sc p { color: #CFDDF7; font-size: 14px; line-height: 1.5 }
.pj-sc ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--mut); font-size: 13.5px; line-height: 1.45 }
.pj-sc details summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; color: var(--b3); font-weight: 650; font-size: 13.5px }
.pj-sc .calc { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); font: 500 12.5px/1.5 var(--mf); color: #CFDDF7; overflow-wrap: anywhere }
.pj-sc .btn { justify-self: start }
.pj-noai { margin-top: 12px; font-size: 13.5px; color: var(--mut); display: flex; align-items: flex-start; gap: 8px } .pj-noai .ic { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--c) }

/* ---------- holders ---------- */
.pj-rules { display: grid; gap: 10px }
.pj-gstat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px }
.pj-gstat .kpi { padding: 12px 14px; border: 1px solid transparent; border-radius: 14px; background: rgba(255, 255, 255, .03) } .pj-gstat .kpi dd { font-size: 22px }
.pj-me { display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px; border: 1px solid transparent; background: rgba(41, 211, 255, .07); font-size: 14.5px }
.pj-hl { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.pj-hr { display: grid; grid-template-columns: 34px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr); gap: 4px 14px; align-items: center; padding: 11px 14px; border-radius: 14px; border: 1px solid transparent; background: rgba(1, 9, 43, .45); font-size: 14.5px }
.pj-hr.me { border-color: rgba(41, 211, 255, .55); background: rgba(41, 211, 255, .07) }
.pj-hr .rk { color: var(--mut2); font: 600 13px var(--mf) } .pj-hr .w { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0 } .pj-hr .w .mono { font-weight: 600 }
.pj-hr .bal { font: 600 14px var(--mf); text-align: right } .pj-hr .bal small { display: block; color: var(--mut2); font-size: 12.5px }
.pj-hr .why { grid-column: 2 / -1; color: var(--mut); font-size: 13px; line-height: 1.45 }
.pj-hr .pc { text-align: right; font: 600 14px var(--mf) }
.pj-hh { display: grid; grid-template-columns: 34px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr); gap: 14px; padding: 0 14px 4px; color: var(--mut2); font: 600 12px var(--mf); letter-spacing: .06em; text-transform: uppercase } .pj-hh span:nth-child(n+3) { text-align: right }
.tg { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid transparent; font: 700 12px var(--mf); letter-spacing: .02em; white-space: nowrap; color: var(--mut) }
.tg.ok { color: var(--ok); border-color: rgba(61, 227, 176, .45); background: rgba(61, 227, 176, .1) } .tg.warn { color: var(--warn); border-color: rgba(255, 195, 77, .5); background: rgba(255, 195, 77, .1) } .tg.bad { color: var(--bad); border-color: rgba(255, 107, 134, .5); background: rgba(255, 107, 134, .1) } .tg.b { color: #BCD6FF; border-color: rgba(91, 155, 255, .5); background: rgba(30, 107, 255, .16) } .tg.v { color: var(--v2); border-color: rgba(138, 92, 255, .5); background: rgba(138, 92, 255, .12) }
.pj-more { justify-self: center; margin-top: 4px }
.pj-drop { display: grid; gap: 12px }
.pj-split { display: flex; height: 14px; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .07) } .pj-split i { display: block; height: 100% } .pj-split .r { background: linear-gradient(90deg, var(--b), var(--c)) }
.pj-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--mut) } .pj-leg b { color: var(--ink) }

/* ---------- governance ---------- */
.pj-props { display: grid; gap: 12px }
.pj-prop { display: grid; gap: 14px; padding: 20px 22px; border-radius: 20px; border: 1px solid transparent; background: var(--gloss), var(--panel) }
.pj-prop.open { border-color: rgba(41, 211, 255, .45) }
.pj-prop h4 { font: 700 18px/1.3 var(--bf); letter-spacing: -.015em; overflow-wrap: anywhere }
.pj-prop-h { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap } .pj-prop-h > div { display: grid; gap: 8px; min-width: 0; flex: 1 1 320px }
.pj-prop p.d { color: var(--mut); font-size: 14.5px }
.pj-timer { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent; font: 700 14px var(--mf); white-space: nowrap } .pj-timer .ic { width: 16px; height: 16px }
.pj-timer.live { color: var(--c); border-color: rgba(41, 211, 255, .45); background: rgba(41, 211, 255, .08) }
.pj-pm { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--mut); font-size: 13.5px } .pj-pm b { color: var(--ink); font-family: var(--mf) }
.pj-vb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.pj-vb .btn.y { border-color: rgba(61, 227, 176, .6); color: var(--ok); background: rgba(61, 227, 176, .1) } .pj-vb .btn.y:hover { background: rgba(61, 227, 176, .2) }
.pj-vb .btn.n { border-color: rgba(255, 107, 134, .6); color: var(--bad); background: rgba(255, 107, 134, .1) } .pj-vb .btn.n:hover { background: rgba(255, 107, 134, .2) }
.pj-vb .msg { color: var(--mut); font-size: 13.5px; flex: 1 1 220px }
.pj-out { padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; border: 1px solid transparent; background: rgba(1, 9, 43, .5) } .pj-out.ok { border-color: rgba(61, 227, 176, .45) } .pj-out.bad { border-color: rgba(255, 107, 134, .5) }

/* ---------- network / history ---------- */
.pj-net { min-height: 380px }
.pj-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--mut) }
.pj-legend li { display: inline-flex; align-items: center; gap: 8px; min-height: 28px } .pj-legend b { color: var(--ink) }
.lgd { display: inline-block; width: 28px; height: 0; border-top: 3px solid var(--c) } .lgd.dash { border-top-style: dashed } .lgd.dot { border-top-style: dotted } .lgd.double { height: 5px; border-top: 2px solid var(--c); border-bottom: 2px solid var(--c) } .lgd.thin { border-top-width: 1.5px }
.pj-edges { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.pj-edges li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; border: 1px solid transparent; background: rgba(1, 9, 43, .45); font-size: 14.5px }
.pj-edges a { display: inline-flex; align-items: center; gap: 8px; font-weight: 650 } .pj-edges a:hover { color: #fff } .pj-edges .when { margin-left: auto; color: var(--mut2); font-size: 13px }
.pj-tl { position: relative; display: grid; gap: 4px; margin: 0; padding: 0 0 0 6px; list-style: none }
.pj-tl::before { content: ''; position: absolute; left: 24px; top: 14px; bottom: 14px; width: 2px; background: var(--line2) }
.pj-tl li { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; align-items: start; padding: 8px 0 }
.pj-tl .evi { position: relative; z-index: 1; width: 38px; height: 38px; border: 3px solid var(--bg2); box-sizing: content-box; margin: -3px }
.pj-tl .tb { display: grid; gap: 4px; padding: 12px 16px; border-radius: 14px; border: 1px solid transparent; background: rgba(1, 9, 43, .45); min-width: 0 }
.pj-tl .tb b { font-weight: 600; font-size: 15px; line-height: 1.4 } .pj-tl .tb small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--mut2); font-size: 12.5px } .pj-tl .tb small .evt { color: var(--mut); font-weight: 600 }
.pj-tl .tb a.chip { height: 26px; padding: 0 10px; font-size: 12.5px }

/* ---------- reports (modal) ---------- */
.modal.wide { width: min(880px, 100%) }
.rp { display: grid; gap: 22px }
.rp-top { display: grid; gap: 14px }
.rp-top .row { gap: 12px } .rp-top .bdg { height: 34px; padding: 0 16px; font-size: 14px }
.rp-sum { color: #CFDDF7; font-size: 15.5px; line-height: 1.55; max-width: 66ch }
.rp-k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
.rp-k .kpi { padding: 12px 14px; border: 1px solid transparent; border-radius: 14px; background: rgba(255, 255, 255, .03) } .rp-k .kpi dd { font-size: 22px } .rp-k .kpi dd small { display: block; font: 600 12.5px var(--bf); color: var(--mut2); margin-top: 2px }
.rp h4 { font: 800 18px var(--hf); letter-spacing: -.02em; margin-bottom: 10px }
.rp-chk { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.rp-chk li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 14px; border: 1px solid transparent; background: rgba(1, 9, 43, .5) }
.rp-chk .ci { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(61, 227, 176, .14); color: var(--ok) } .rp-chk .ci .ic { width: 16px; height: 16px; stroke-width: 2.4 }
.rp-chk li.warn .ci { background: rgba(255, 195, 77, .14); color: var(--warn) } .rp-chk li.bad .ci { background: rgba(255, 107, 134, .14); color: var(--bad) } .rp-chk li.mute .ci { background: rgba(255, 255, 255, .06); color: var(--mut2) }
.rp-chk b { display: block; font-weight: 650; font-size: 14.5px } .rp-chk small { display: block; color: var(--mut); font-size: 13.5px; line-height: 1.45 }
.rp-cl { display: grid; gap: 12px; padding: 16px 18px; border-radius: 16px; border: 1px solid transparent; background: rgba(255, 107, 134, .05) }
.rp-cl.soft { border-color: rgba(255, 195, 77, .45); background: rgba(255, 195, 77, .05) }
.rp-cl h5 { margin: 0; font: 700 15.5px/1.4 var(--bf) } .rp-cl h5 span { color: var(--mut); font-weight: 500 }
.rp-wl { display: flex; flex-wrap: wrap; gap: 6px }
.rp-wl .chip, .pj-w { font: 600 12.5px var(--mf); height: 28px; padding: 0 10px; cursor: pointer }
.rp-tx { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font: 500 12.5px var(--mf); color: var(--mut) } .rp-tx li { overflow-wrap: anywhere }
.rp-cl summary { display: flex; align-items: center; min-height: 40px; cursor: pointer; color: var(--b3); font-weight: 650; font-size: 14px }
.rp-ev { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.rp-ev li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 14px; border-radius: 12px; border: 1px solid transparent; background: rgba(1, 9, 43, .5); font-size: 14px; color: #CFDDF7; line-height: 1.5 } .rp-ev .bdg { height: 22px; font-size: 12px; padding: 0 8px; margin-top: 1px }
.rp-ev .chip { height: 26px; padding: 0 10px; font-size: 12.5px; margin-left: 4px }
.rp-sc { display: grid; gap: 10px }
.rp-sr { display: grid; grid-template-columns: 34px minmax(0, 1fr) 130px; gap: 6px 14px; align-items: start; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; background: rgba(1, 9, 43, .5) }
.rp-sr .si { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(30, 107, 255, .16); color: var(--b3) } .rp-sr .si .ic { width: 18px; height: 18px }
.rp-sr .sl b { display: block; font-weight: 650; font-size: 14.5px } .rp-sr .sl small { color: var(--mut2); font-size: 13px }
.rp-sr .sv { text-align: right; display: grid; gap: 6px; justify-items: end } .rp-sr .sv b { font: 700 18px var(--mf) } .rp-sr .sv b.ok { color: var(--ok) } .rp-sr .sv b.warn { color: var(--warn) } .rp-sr .sv b.bad { color: var(--bad) } .rp-sr .sv .bar { width: 100% }
.rp-sr .sd { grid-column: 2 / -1; display: grid; gap: 6px }
.rp-sr .nt { margin: 0; font-size: 13.5px; color: var(--mut); display: flex; align-items: flex-start; gap: 8px } .rp-sr .nt .ic { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--ok) }
.rp-fm { display: grid; gap: 10px } .rp-fm p { font-size: 14px; color: var(--mut) } .rp-fm .tbl th, .rp-fm .tbl td { padding: 10px 14px }
.rp-fm details summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--b3); font-weight: 650; font-size: 14.5px } .rp-fm details ul { margin: 6px 0 10px; padding-left: 20px; display: grid; gap: 6px; color: var(--mut); font-size: 14px; line-height: 1.5 }
.rp-foot { padding: 14px 16px; border-radius: 14px; border: 1px solid transparent; background: rgba(138, 92, 255, .08); color: #C9B9F5; font-size: 13.5px; line-height: 1.55 } .rp-foot b { color: #E6DEFF }
.rp-q .tbl-wrap { max-height: 300px; overflow: auto }

/* ---------- states ---------- */
.pj-sk { display: grid; gap: 14px } .pj-sk .a { height: 300px; border-radius: 28px } .pj-sk .b { height: 120px } .pj-sk .c { height: 54px; border-radius: 999px }
.pj-404 { padding: 150px 0 40px } .pj-404 .empty { max-width: 640px; margin: 0 auto; padding: 56px 24px }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pj-head { grid-template-columns: minmax(0, 1fr) 320px; gap: 22px 28px }
  .pj-cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .pj-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .pj-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (max-width: 900px) {
  .pj { padding-top: 92px }
  .pj-head { grid-template-columns: minmax(0, 1fr); padding: 22px; border-radius: 24px }
  .pj-orbit { display: none }
  .pj-cols { grid-template-columns: minmax(0, 1fr) }
  .rp-k { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 640px) {
  .pj { padding-top: 84px }
  .pj-flow { flex-wrap: wrap; row-gap: 8px } .pj-flow li { flex: 0 0 auto; padding-right: 14px } .pj-flow li::after { display: none }
  .pj-head { padding: 18px; border-radius: 22px; gap: 18px }
  .pj-id { gap: 14px } .pj-id .av.xl { width: 60px; height: 60px; font-size: 22px }
  .pj-desc { font-size: 15.5px }
  .pj-ver { grid-template-columns: minmax(0, 1fr) }
  .pj-cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px } .pj-cm { padding: 12px 13px } .pj-cm .v { font-size: 17px }
  .pj-tabs { margin-top: 26px; margin-inline: -16px } .pj-tabs .tabs { border-radius: 0; border-inline: 0; padding: 4px 16px; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent) }
  .pj-tre { grid-template-columns: minmax(0, 1fr) } .pj-tre .kpi dd { font-size: 24px }
  .pj-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) } .pj-tile span.d { display: none } .pj-tile { padding: 12px; grid-template-columns: auto 1fr; align-items: center } .pj-tile .ti { width: 36px; height: 36px }
  .pj-form { padding: 16px; border-radius: 18px } .pj-fg { grid-template-columns: minmax(0, 1fr) }
  .pj-act { padding: 16px 16px 16px 18px } .pj-act-h .ai { width: 38px; height: 38px }
  .pj-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) } .pj-big b { font-size: 28px }
  .pj-gstat { grid-template-columns: repeat(3, minmax(0, 1fr)) } .pj-gstat .kpi { padding: 10px } .pj-gstat .kpi dd { font-size: 18px }
  .pj-hh { display: none }
  .pj-hr { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 12px } .pj-hr .bal { grid-column: 3; grid-row: 1 } .pj-hr .pc { display: none } .pj-hr .why { grid-column: 2 / -1 }
  .pj-prop { padding: 16px }
  .pj-led li { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 10px } .pj-led .li { width: 34px; height: 34px }
  .pj-tl { padding-left: 0 } .pj-tl::before { left: 18px } .pj-tl li { grid-template-columns: 34px minmax(0, 1fr); gap: 12px } .pj-tl .evi { width: 34px; height: 34px }
  .rp-k { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .rp-sr { grid-template-columns: 34px minmax(0, 1fr); } .rp-sr .sv { grid-column: 2; text-align: left; justify-items: start; grid-template-columns: auto 1fr; align-items: center } .rp-sr .sd { grid-column: 1 / -1 }
  .rp-chk li { grid-template-columns: 30px minmax(0, 1fr) } .rp-chk li > .bdg { grid-column: 2; justify-self: start }
  .pj-edges .when { margin-left: 0; width: 100% }
  .pj-wal .btn { margin-left: 0 }
}

/* ---------- premium pass: one bright surface (the head), the rest tonal; commitments as open columns; quiet notes ---------- */
.pj-head { padding: 36px; border-radius: 30px; background: radial-gradient(60% 100% at 100% 0%, rgba(30, 107, 255, .24), transparent 70%), var(--gloss), var(--panel); box-shadow: var(--edge), 0 50px 90px -60px var(--glow) }
.pj-name { font-size: clamp(34px, 5vw, 60px); letter-spacing: -.05em }
.pj-tk { font: 600 17px var(--bf); color: var(--mut) }
.pj-vc { background: rgba(1, 7, 34, .45); box-shadow: inset 0 0 0 1px var(--line) } .pj-vc:hover { box-shadow: inset 0 0 0 1px var(--b3), 0 18px 40px -26px var(--glow) }
.pj-vc.ok { box-shadow: inset 0 0 0 1px rgba(61, 227, 176, .35) } .pj-vc.bad { box-shadow: inset 0 0 0 1px rgba(255, 107, 134, .5) } .pj-vc.warn { box-shadow: inset 0 0 0 1px rgba(255, 195, 77, .5) }
.pj-vc.ok, .pj-vc.bad, .pj-vc.warn { border-color: transparent }
.pj-kpis .kpi { background: rgba(1, 7, 34, .45) } .pj-kpis .kpi dd { font-family: var(--bf); letter-spacing: -.035em; font-weight: 600 }
.pj-wal { border-color: var(--line2) }
.pj-cur { background: rgba(41, 211, 255, .12) }
.pj-note, .pj-simnote { padding: 0; border: 0; background: none; color: var(--mut2); font-size: 13.5px }
.pj-note b, .pj-simnote b { color: #D5C6FF; font-weight: 600 }
.pj-cgrid { gap: 0 }
.pj-cm { padding: 16px 20px 4px 0; border: 0; border-top: 1px solid var(--line2); border-radius: 0; background: none; box-shadow: none }
.pj-cm .k { letter-spacing: .1em } .pj-cm .v { font-size: 20px; font-family: var(--bf); font-weight: 600; letter-spacing: -.03em }
.pj-sec { margin-top: 44px } .pj-sec-h h2 { font-size: 24px }
.pj-tabs { margin-top: 48px }
@media (max-width: 900px) { .pj-head { padding: 22px 20px } .pj-cgrid { grid-template-columns: 1fr 1fr } .pj-cm { padding-right: 12px } }
.pj-prop.open { border-color: transparent; box-shadow: inset 0 0 0 1px rgba(41, 211, 255, .28), 0 26px 60px -44px var(--glowc) }
.pj-timer, .pj-timer.live { border-color: transparent }