[html]
<div class="zfi" id="zfi">
<style>
*{box-sizing:border-box}body{margin:0;background:#050b0f;color:#d9f6f1;font:14px/1.45 Arial,sans-serif}.zfi{--cyan:#42ead8;--lime:#b7ff48;--line:#19534f;max-width:920px;margin:auto;background:linear-gradient(135deg,#071116 0%,#0a1b20 58%,#071015 100%);border:1px solid #23776f;box-shadow:0 18px 50px #000;padding:18px;position:relative;overflow:hidden}.zfi:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 59px,rgba(73,232,215,.025) 60px),repeating-linear-gradient(0deg,transparent 0,transparent 39px,rgba(73,232,215,.02) 40px);pointer-events:none}.top,.tabs,.stage,.foot{position:relative}.top{display:flex;justify-content:space-between;gap:20px;align-items:end;padding:2px 2px 14px;border-bottom:1px solid var(--line)}.kicker,.tiny{font:700 9px/1.2 Consolas,monospace;letter-spacing:.16em;color:#67d9ce;text-transform:uppercase}.top h2{margin:5px 0 2px;color:#f2fffd;font-size:24px;letter-spacing:.01em}.top p{margin:0;color:#86a6a3}.status{text-align:right;min-width:160px}.status b{display:block;color:var(--lime);font:700 12px Consolas,monospace}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:14px 0}.tab{border:1px solid #174b47;background:#071419;color:#6f9894;padding:10px 12px;cursor:pointer;text-align:left;font:700 10px Consolas,monospace}.tab.on{color:#f1fffd;border-color:var(--cyan);box-shadow:inset 3px 0 var(--lime),0 0 18px rgba(66,234,216,.1);background:#0c272b}.tab span{color:var(--lime);margin-right:7px}.stage{min-height:505px}.page{display:none}.page.on{display:block}.body-layout{display:grid;grid-template-columns:42% 58%;gap:14px}.body-console,.editor,.cargo-shell,.warehouse-shell,.export-card{border:1px solid #174843;background:rgba(3,12,16,.76)}.body-console{position:relative;height:420px;overflow:hidden;background:radial-gradient(circle at 50% 42%,#123b3d 0,#071318 55%,#040a0e 100%)}.body-console:after{content:'';position:absolute;left:0;right:0;height:1px;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:scan 5s linear infinite;opacity:.55}@keyframes scan{from{top:0}to{top:100%}}.body-console svg{position:absolute;inset:35px 75px 24px;width:calc(100% - 150px);height:calc(100% - 59px);filter:drop-shadow(0 0 9px rgba(66,234,216,.45))}.hot{position:absolute;z-index:2;border:1px solid #215d58;background:#07161b;color:#6fa9a3;padding:6px 8px;min-width:84px;cursor:pointer;font:700 9px Consolas,monospace}.hot:hover,.hot.on{color:#061013;background:var(--cyan);border-color:var(--cyan)}.hot.filled:after{content:' •';color:var(--lime)}.h0{top:14px;left:12px}.h1{top:14px;right:12px}.h2{top:86px;left:8px}.h3{top:86px;right:8px}.h4{top:158px;left:5px}.h5{top:158px;right:5px}.h6{top:232px;left:5px}.h7{top:232px;right:5px}.h8{bottom:84px;left:6px}.h9{bottom:84px;right:6px}.h10{bottom:13px;left:8px}.h11{bottom:13px;right:8px}.editor{padding:17px;min-height:420px}.editor-head{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid #16433f;padding-bottom:12px;margin-bottom:14px}.editor h3{margin:3px 0 0;color:#fff;font-size:19px}.node{color:var(--lime);font:700 10px Consolas,monospace}.field{display:block;margin:11px 0}.field span{display:block;color:#6ea09b;font:700 9px Consolas,monospace;letter-spacing:.1em;margin-bottom:5px;text-transform:uppercase}.field input,.field textarea{width:100%;border:1px solid #23645e;background:#040b0f;color:#ecfffc;padding:10px;outline:none}.field textarea{min-height:70px;resize:vertical}.field input:focus,.field textarea:focus{border-color:var(--cyan);box-shadow:0 0 12px rgba(66,234,216,.12)}.two{display:grid;grid-template-columns:1fr 110px;gap:10px}.meter{height:7px;background:#071014;border:1px solid #174842;margin:13px 0 6px}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--lime));transition:.25s}.summary{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}.chip{border:1px solid #1c5550;color:#79aaa5;background:#071419;padding:5px 7px;font:9px Consolas,monospace}.chip.has{color:#dffffa;border-color:#3cc8ba}.hint{margin-top:15px;padding:10px 12px;border-left:2px solid var(--lime);background:#0d1d1b;color:#a9c1bc;font-size:12px}.cargo-layout,.warehouse-layout{display:grid;grid-template-columns:56% 44%;gap:14px}.cargo-shell,.warehouse-shell{padding:15px;min-height:420px}.cargo-shell{border-radius:18px 18px 6px 6px;border-color:#725f39;box-shadow:inset 0 0 0 4px #0e181a}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:#e8c173;font:700 10px Consolas,monospace}.slotgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.cell{min-height:61px;border:1px solid #294a47;background:#091519;color:#779b97;padding:9px;text-align:left;cursor:pointer}.cell b{display:block;color:#d5efeb;font:11px Arial;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cell.on{border-color:var(--cyan);box-shadow:inset 3px 0 var(--cyan)}.cell.has b{color:var(--lime)}.stock-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.stock-meta .field{margin:0}.warehouse-shell .slotgrid{grid-template-columns:repeat(3,1fr)}.warehouse-shell .cell{min-height:67px}.export-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.export-card{padding:12px}.export-card h3{margin:0 0 8px;color:#dffef9;font-size:13px}.export-card textarea{width:100%;height:260px;background:#03080b;color:#91eade;border:1px solid #1d5c55;padding:9px;font:10px/1.4 Consolas,monospace;resize:none}.action{border:1px solid var(--cyan);background:#0b2a2e;color:#dffffa;padding:9px 12px;cursor:pointer;font:700 10px Consolas,monospace}.action:hover{background:#155048}.make{width:100%;margin-bottom:10px;background:linear-gradient(90deg,#0f3638,#133126);color:#fff}.foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #164944;padding-top:13px;margin-top:12px}.foot button{border:0;background:none;color:#83b5b0;cursor:pointer;font:700 10px Consolas,monospace}.foot button:hover{color:var(--cyan)}@media(max-width:760px){.top{display:block}.status{text-align:left;margin-top:10px}.tabs{grid-template-columns:1fr 1fr}.body-layout,.cargo-layout,.warehouse-layout{grid-template-columns:1fr}.body-console{height:360px}.stage{min-height:0}.slotgrid,.warehouse-shell .slotgrid{grid-template-columns:1fr 1fr}.export-grid{grid-template-columns:1fr}.export-card textarea{height:150px}}
</style>
<div class="top"><div><div class="kicker">ZERO FRAME // PERSONAL LOADOUT</div><h2>Инвентарь персонажа</h2><p>Выберите узел, внесите данные и соберите готовые блоки для темы персонажа.</p></div><div class="status"><span class="tiny">Состояние системы</span><b>● NODE ONLINE</b></div></div>
<div class="tabs"><button class="tab on" data-page="0"><span>01</span>КИБЕРТЕЛО</button><button class="tab" data-page="1"><span>02</span>ПОЛЕВОЙ НАБОР</button><button class="tab" data-page="2"><span>03</span>СКЛАД</button><button class="tab" data-page="3"><span>04</span>ЭКСПОРТ</button></div>
<div class="stage">
<section class="page on"><div class="body-layout"><div class="body-console"><svg viewBox="0 0 220 420" aria-label="Кибернетическая схема тела"><defs><linearGradient id="cg" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#76fff0"/><stop offset="1" stop-color="#168c88"/></linearGradient></defs><g fill="rgba(26,110,106,.18)" stroke="url(#cg)" stroke-width="2"><path d="M110 18c22 0 35 17 35 39s-13 39-35 39-35-17-35-39 13-39 35-39z"/><path d="M80 103L55 160l18 112 37 36 37-36 18-112-25-57-30 16z"/><path d="M60 143L22 255l20 8 45-94M160 143l38 112-20 8-45-94M87 287L66 395h25l19-88M133 287l21 108h-25l-19-88"/></g><g fill="#9efff4"><circle cx="110" cy="57" r="4"/><circle cx="80" cy="104" r="3"/><circle cx="140" cy="104" r="3"/><circle cx="110" cy="192" r="4"/><circle cx="110" cy="290" r="3"/></g></svg><button class="hot h0 on" data-body="0">ГОЛОВА</button><button class="hot h1" data-body="1">ГЛАЗА</button><button class="hot h2" data-body="2">УШИ</button><button class="hot h3" data-body="3">НЕЙРОСЕТЬ</button><button class="hot h4" data-body="4">КОЖА</button><button class="hot h5" data-body="5">ТОРС</button><button class="hot h6" data-body="6">ЛЕВАЯ РУКА</button><button class="hot h7" data-body="7">ПРАВАЯ РУКА</button><button class="hot h8" data-body="8">ЛЕВАЯ НОГА</button><button class="hot h9" data-body="9">ПРАВАЯ НОГА</button><button class="hot h10" data-body="10">ОРГАНЫ</button><button class="hot h11" data-body="11">СИСТЕМА</button></div><div class="editor"><div class="editor-head"><div><div class="tiny">Выбранный узел</div><h3 id="bodyTitle">Голова</h3></div><div class="node" id="bodyNode">NODE 01</div></div><label class="field"><span>Установленный имплант</span><input id="bodyName" placeholder="Название, модель и состояние"></label><div class="two"><label class="field"><span>Примечание</span><input id="bodyNote" placeholder="Функция или ограничение"></label><label class="field"><span>Essence</span><input id="bodyCost" type="number" min="0" max="6" step="0.1" placeholder="0.0"></label></div><div class="tiny" id="essenceText">НАГРУЗКА ESSENCE // 0.0 ИЗ 6</div><div class="meter"><i id="essenceBar"></i></div><div class="summary" id="bodySummary"></div><div class="hint">Выберите область на схеме. Пустые узлы не попадут в итоговую карточку.</div></div></div></section>
<section class="page"><div class="cargo-layout"><div class="cargo-shell"><div class="section-title"><span>FIELD BAG // ACTIVE LOADOUT</span><span id="bagCount">00 / 10</span></div><div class="slotgrid" id="bagGrid"></div></div><div class="editor"><div class="editor-head"><div><div class="tiny">Выбранный карман</div><h3 id="bagTitle">Основное оружие</h3></div><div class="node" id="bagNode">SLOT 01</div></div><label class="field"><span>Предмет</span><input id="bagValue" placeholder="Название · количество · состояние"></label><label class="field"><span>Полевой комплект</span><input id="bagName" value="Стандартный комплект"></label><label class="field"><span>Нагрузка</span><input id="carry" value="Обычная переноска"></label><div class="hint">В эпизоде доступны только предметы, записанные в полевом наборе до начала задания.</div></div></div></section>
<section class="page"><div class="warehouse-layout"><div class="warehouse-shell"><div class="section-title"><span>WAREHOUSE // REMOTE STORAGE</span><span id="stockCount">00 / 12</span></div><div class="stock-meta"><label class="field"><span>Название</span><input id="stockName" placeholder="Склад персонажа"></label><label class="field"><span>Район</span><input id="stockPlace" placeholder="Местоположение"></label></div><div class="slotgrid" id="stockGrid"></div></div><div class="editor"><div class="editor-head"><div><div class="tiny">Выбранная ячейка</div><h3 id="stockTitle">Ячейка 01</h3></div><div class="node">STORAGE</div></div><label class="field"><span>Содержимое</span><input id="stockValue" placeholder="Предмет · количество · состояние"></label><label class="field"><span>Защита и доступ</span><input id="stockSec" placeholder="Замки, охрана, допуск"></label><label class="field"><span>Особенности</span><textarea id="stockNote" placeholder="Уязвимости, риски, сюжетные детали"></textarea></label><div class="hint">Взлом, кража или уничтожение чужого склада проводится только через ГМ.</div></div></div></section>
<section class="page"><button class="action make" id="make">СОБРАТЬ ТРИ БЛОКА</button><div class="export-grid"><div class="export-card"><h3>01 // Кибертело</h3><textarea id="outBody" readonly></textarea><button class="action" data-copy="outBody">КОПИРОВАТЬ</button></div><div class="export-card"><h3>02 // Полевой набор</h3><textarea id="outBag" readonly></textarea><button class="action" data-copy="outBag">КОПИРОВАТЬ</button></div><div class="export-card"><h3>03 // Склад</h3><textarea id="outStock" readonly></textarea><button class="action" data-copy="outStock">КОПИРОВАТЬ</button></div></div></section>
</div>
<div class="foot"><button id="prev">← ПРЕДЫДУЩИЙ УЗЕЛ</button><span class="tiny" id="progress">01 / 04</span><button id="next">СЛЕДУЮЩИЙ УЗЕЛ →</button></div>
<script>
(function(){
var bodyLabels=['Голова','Глаза','Уши','Нервная система','Кожа','Торс','Левая рука','Правая рука','Левая нога','Правая нога','Органы','Системный слот'];
var bagLabels=['Основное оружие','Доп. оружие','Броня','Инструменты','Электроника','Медицина','Расходники','Боеприпасы','Ключевой предмет','Дроны / транспорт'];
var bodyData=[],bagData=[],stockData=[],bodySel=0,bagSel=0,stockSel=0,page=0;
for(var i=0;i<bodyLabels.length;i++)bodyData.push({name:'',note:'',cost:''});for(var i=0;i<bagLabels.length;i++)bagData.push('');for(var i=0;i<12;i++)stockData.push('');
var pages=document.querySelectorAll('.page'),tabs=document.querySelectorAll('.tab');
function showPage(n){page=Math.max(0,Math.min(3,n));for(var i=0;i<pages.length;i++){pages[i].classList.toggle('on',i===page);tabs[i].classList.toggle('on',i===page)}document.getElementById('progress').textContent=('0'+(page+1)).slice(-2)+' / 04'}
for(var i=0;i<tabs.length;i++)tabs[i].onclick=function(){showPage(+this.getAttribute('data-page'))};document.getElementById('prev').onclick=function(){showPage(page-1)};document.getElementById('next').onclick=function(){showPage(page+1)};
function totalEssence(){var t=0;for(var i=0;i<bodyData.length;i++)t+=+bodyData[i].cost||0;return t}
function renderBody(){var d=bodyData[bodySel];document.getElementById('bodyTitle').textContent=bodyLabels[bodySel];document.getElementById('bodyNode').textContent='NODE '+('0'+(bodySel+1)).slice(-2);document.getElementById('bodyName').value=d.name;document.getElementById('bodyNote').value=d.note;document.getElementById('bodyCost').value=d.cost;var t=totalEssence();document.getElementById('essenceText').textContent='НАГРУЗКА ESSENCE // '+t.toFixed(1)+' ИЗ 6';document.getElementById('essenceBar').style.width=Math.min(100,t/6*100)+'%';var buttons=document.querySelectorAll('[data-body]'),sum=document.getElementById('bodySummary');sum.textContent='';for(var i=0;i<buttons.length;i++){buttons[i].classList.toggle('on',i===bodySel);buttons[i].classList.toggle('filled',!!bodyData[i].name);var c=document.createElement('span');c.className='chip'+(bodyData[i].name?' has':'');c.textContent=('0'+(i+1)).slice(-2)+' '+bodyLabels[i];sum.appendChild(c)}}
var bodyButtons=document.querySelectorAll('[data-body]');for(var i=0;i<bodyButtons.length;i++)bodyButtons[i].onclick=function(){bodySel=+this.getAttribute('data-body');renderBody()};
function saveBody(){bodyData[bodySel].name=document.getElementById('bodyName').value;bodyData[bodySel].note=document.getElementById('bodyNote').value;bodyData[bodySel].cost=document.getElementById('bodyCost').value;renderBody()}
document.getElementById('bodyName').oninput=saveBody;document.getElementById('bodyNote').oninput=saveBody;document.getElementById('bodyCost').oninput=saveBody;
function makeCells(parent,labels,attr){for(var i=0;i<labels.length;i++){var b=document.createElement('button');b.className='cell';b.setAttribute(attr,i);var s=document.createElement('span');s.className='tiny';s.textContent='SLOT '+('0'+(i+1)).slice(-2);var strong=document.createElement('b');strong.textContent=labels[i];b.appendChild(s);b.appendChild(strong);parent.appendChild(b)}}
makeCells(document.getElementById('bagGrid'),bagLabels,'data-bag');var stockLabels=[];for(var i=1;i<=12;i++)stockLabels.push('Пустая ячейка');makeCells(document.getElementById('stockGrid'),stockLabels,'data-stock');
function renderBag(){document.getElementById('bagTitle').textContent=bagLabels[bagSel];document.getElementById('bagNode').textContent='SLOT '+('0'+(bagSel+1)).slice(-2);document.getElementById('bagValue').value=bagData[bagSel];var bs=document.querySelectorAll('[data-bag]'),count=0;for(var i=0;i<bs.length;i++){bs[i].classList.toggle('on',i===bagSel);bs[i].classList.toggle('has',!!bagData[i]);bs[i].querySelector('b').textContent=bagData[i]||bagLabels[i];if(bagData[i])count++}document.getElementById('bagCount').textContent=('0'+count).slice(-2)+' / 10'}
var bagButtons=document.querySelectorAll('[data-bag]');for(var i=0;i<bagButtons.length;i++)bagButtons[i].onclick=function(){bagSel=+this.getAttribute('data-bag');renderBag()};document.getElementById('bagValue').oninput=function(){bagData[bagSel]=this.value;renderBag()};
function renderStock(){document.getElementById('stockTitle').textContent='Ячейка '+('0'+(stockSel+1)).slice(-2);document.getElementById('stockValue').value=stockData[stockSel];var ss=document.querySelectorAll('[data-stock]'),count=0;for(var i=0;i<ss.length;i++){ss[i].classList.toggle('on',i===stockSel);ss[i].classList.toggle('has',!!stockData[i]);ss[i].querySelector('b').textContent=stockData[i]||'Пустая ячейка';if(stockData[i])count++}document.getElementById('stockCount').textContent=('0'+count).slice(-2)+' / 12'}
var stockButtons=document.querySelectorAll('[data-stock]');for(var i=0;i<stockButtons.length;i++)stockButtons[i].onclick=function(){stockSel=+this.getAttribute('data-stock');renderStock()};document.getElementById('stockValue').oninput=function(){stockData[stockSel]=this.value;renderStock()};
var lb=String.fromCharCode(91),rb=String.fromCharCode(93),nl=String.fromCharCode(10),bo=lb+'b'+rb,bc=lb+'/b'+rb;
function clean(s){return String(s||'—').split(lb).join('(').split(rb).join(')')}
function line(k,v){return bo+clean(k)+':'+bc+' '+clean(v)+nl}
document.getElementById('make').onclick=function(){
var a=bo+'01 // КИБЕРТЕЛО'+bc+nl,used=0;
for(var i=0;i<bodyData.length;i++)if(bodyData[i].name){a+=line(bodyLabels[i],bodyData[i].name+(bodyData[i].note?' // '+bodyData[i].note:'')+(bodyData[i].cost?' // Essence '+bodyData[i].cost:''));used++}
if(!used)a+=line('Импланты','Отсутствуют');a+=nl+line('Нагрузка Essence',totalEssence().toFixed(1)+' / 6');document.getElementById('outBody').value=a;
var g=bo+'02 // ПОЛЕВОЙ НАБОР'+bc+nl+line('Комплект',document.getElementById('bagName').value)+line('Нагрузка',document.getElementById('carry').value),gc=0;
for(var i=0;i<bagData.length;i++)if(bagData[i]){g+=line(bagLabels[i],bagData[i]);gc++}if(!gc)g+=line('Содержимое','Не сформировано');document.getElementById('outBag').value=g;
var s=bo+'03 // СКЛАД'+bc+nl+line('Название',document.getElementById('stockName').value)+line('Район',document.getElementById('stockPlace').value)+line('Защита',document.getElementById('stockSec').value)+line('Особенности',document.getElementById('stockNote').value),sc=0;
for(var i=0;i<stockData.length;i++)if(stockData[i]){s+=line('Ячейка '+('0'+(i+1)).slice(-2),stockData[i]);sc++}if(!sc)s+=line('Содержимое','Склад пуст');document.getElementById('outStock').value=s
};
var copies=document.querySelectorAll('[data-copy]');for(var i=0;i<copies.length;i++)copies[i].onclick=function(){var t=document.getElementById(this.getAttribute('data-copy'));t.focus();t.select();try{document.execCommand('copy');this.textContent='СКОПИРОВАНО'}catch(e){this.textContent='ВЫДЕЛЕНО — CTRL+C'}};
renderBody();renderBag();renderStock();showPage(0);
})();
</script>
</div>
[/html]

Кратко: выберите узел, заполните его и перейдите к следующему разделу. На вкладке «Экспорт» конструктор подготовит три самостоятельных блока для темы инвентаря. Изменение редких предметов, имплантов, защиты склада и сюжетной добычи подтверждает АМС.