:root{
 --bg:#071019;--panel:#0c161f;--panel2:#101c25;--line:#253640;--line2:#344953;
 --text:#edf2f4;--muted:#84939d;--yellow:#ffad16;--yellow2:#ffc943;
 --purple:#a84cff;--purple2:#6d30a4;--green:#21ce63;--red:#ff5c66;--blue:#54b6ff
}
*{box-sizing:border-box}
html,body{margin:0;background:transparent;color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}
button,input,select{font:inherit}
body{min-width:940px}
.craftApp{display:grid;gap:13px}
.card{background:linear-gradient(180deg,#0e1922,#0a131b);border:1px solid #22343f;border-radius:9px;box-shadow:0 16px 50px #0002}
.fatal{padding:12px;background:#4d2228;border:1px solid #8f3d47;color:#ffd8db;margin-bottom:12px}
.craftToolbar{display:grid;grid-template-columns:minmax(350px,1fr) auto auto;gap:10px;align-items:center}
.searchWrap,.stockSearch{position:relative}
.searchWrap input,.stockSearch input,.formStack input,.formStack select,.resultFields input,.rightFilter select,.settingEditor input{
 width:100%;height:45px;background:#09131b;border:1px solid #31434e;border-radius:7px;color:#eef3f5;outline:none;padding:0 12px
}
.searchWrap input{padding-left:42px;font-size:15px}
.searchWrap input:focus,.stockSearch input:focus,.formStack input:focus,.resultFields input:focus{border-color:#8a6418;box-shadow:0 0 0 2px #ffad1612}
.searchIcon{position:absolute;left:14px;top:8px;font-size:25px;color:#9aa6ad}
.suggest{position:absolute;left:0;right:0;top:50px;z-index:80;display:none;max-height:420px;overflow:auto;background:#101c25;border:1px solid #3a4c58;border-radius:8px;box-shadow:0 20px 60px #000b}
.suggestItem{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #273842;cursor:pointer}
.suggestItem:hover{background:#172630}
.suggestItem img{width:40px;height:40px;object-fit:contain}
.suggestItem b,.suggestItem small{display:block}.suggestItem small{color:#7e8f99;margin-top:3px}
.uiBtn,.miniBtn,.squareBtn{
 border:1px solid #314550;background:#101d26;color:#e5ecef;border-radius:7px;cursor:pointer;font-weight:760
}
.uiBtn{height:45px;padding:0 16px}.uiBtn:hover,.miniBtn:hover,.squareBtn:hover{border-color:#6c7e88}
.uiBtn.primary{background:linear-gradient(#ffc343,#ed9916);border-color:#ffba27;color:#171006;font-weight:900}
.uiBtn.secondary{background:#111d25}.uiBtn.dangerLite{border-color:#623139;color:#ef9ca0;background:#21161a}
.uiBtn.wide{width:100%;margin-top:10px}
.workspaceTabs{height:48px;display:flex;align-items:stretch;border:1px solid #22343f;border-radius:9px;background:#0b151d;overflow:hidden}
.workspaceTab{border:0;border-bottom:2px solid transparent;background:transparent;color:#a8b4bb;padding:0 20px;cursor:pointer}
.workspaceTab.on{color:#ffb31b;border-bottom-color:#ffb31b;background:#191810;font-weight:850}
.workspaceTabHint{margin-left:auto;display:flex;align-items:center;padding:0 16px;color:#71838e;font-size:12px}
.mainGrid{display:grid;grid-template-columns:310px minmax(580px,1fr) 360px;gap:13px;align-items:stretch;min-height:585px}
.leftPanel,.rightPanel,.treePanel{min-height:585px}
.leftPanel{padding:14px}
.leftPane{display:none}.leftPane.on{display:block}
.sectionLabel,.controlTitle{font-size:11px;font-weight:900;letter-spacing:.55px;color:#dce4e8}
.sectionLabel{margin-bottom:10px}
.selectedRecipe{min-height:115px;border:1px solid #293b46;border-radius:8px;background:#0d171f;padding:12px;display:flex;gap:12px;align-items:center}
.emptySelected{justify-content:center;color:#71828c;text-align:center}
.selIcon{width:72px;height:72px;border:1px solid #3e2f54;border-radius:8px;background:#0b1018;object-fit:contain}
.selCopy{min-width:0}.selCopy b{display:block;font-size:17px}.selCopy small{display:block;color:#82919a;margin-top:5px}.selCopy .badge{display:inline-block;margin-top:7px;padding:4px 7px;border-radius:5px;background:#321a50;color:#d5a4ff;font-size:11px}
.controlSection{margin-top:16px;padding-top:14px;border-top:1px solid #23333d}
.controlTitle{margin-bottom:9px}
.qtyControl{display:grid;grid-template-columns:42px 1fr 42px 67px;gap:7px}
.qtyControl button,.qtyControl input{height:38px;border:1px solid #30434e;background:#101d26;color:#e9eef1;border-radius:6px;text-align:center}
.qtyControl button{cursor:pointer}.qtyControl button:hover{border-color:#aa7a1c;color:#ffb31d}
.choiceGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choiceCard{min-height:82px;text-align:left;padding:10px;border:1px solid #2c3d48;background:#0e1921;color:#cbd5da;border-radius:7px;cursor:pointer}
.choiceCard b,.choiceCard small{display:block}.choiceCard small{color:#71828b;margin-top:6px;line-height:1.35}
.choiceCard.on{border-color:#a97813;background:#1e1a10;box-shadow:inset 0 -2px #e89a15}.choiceCard.on b{color:#ffb31c}
.formStack{display:grid;gap:12px}.formStack label{display:grid;gap:6px;color:#a7b3ba;font-size:12px}
.formStack .checkRow{display:flex;align-items:center;gap:8px;min-height:34px}.checkRow input{width:18px!important;height:18px!important}
.infoNote{margin-top:14px;padding:10px;border:1px solid #34414a;background:#111a20;color:#7e9099;border-radius:7px;font-size:11px;line-height:1.4}
.panelHead{height:48px;padding:0 14px;border-bottom:1px solid #22333e;display:flex;align-items:center;justify-content:space-between;font-size:12px}
.helpDot{display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid #3d4d56;border-radius:50%;margin-left:6px;color:#7f8f98}
.treeActions{display:flex;gap:6px}.miniBtn{height:31px;padding:0 10px;font-size:11px}.squareBtn{width:34px;height:34px;font-size:18px}
.treeViewport{height:492px;overflow:auto;position:relative;background:
 radial-gradient(circle at 50% 20%,#17213266,transparent 48%),
 linear-gradient(#0a141c,#081119)}
.treeCanvas{min-width:720px;min-height:470px;padding:28px 22px;transform-origin:top center;transition:transform .15s}
.treeEmpty{height:390px;display:grid;place-items:center;color:#6f808a}
.treeRoot{display:flex;justify-content:center;position:relative;margin-bottom:54px}
.treeLevels{display:flex;flex-direction:column;gap:52px}
.treeLevel{display:flex;justify-content:center;align-items:flex-start;gap:18px;position:relative}
.treeLevel:before{content:"";position:absolute;top:-27px;left:8%;right:8%;border-top:1px solid var(--purple)}
.treeLevel.green:before{border-color:#25a84d}
.treeNodeWrap{position:relative;display:flex;flex-direction:column;align-items:center}
.treeNodeWrap:before{content:"";position:absolute;top:-27px;height:27px;border-left:1px solid var(--purple);left:50%}
.treeNodeWrap.green:before{border-color:#25a84d}
.treeNode{width:104px;min-height:112px;border:1px solid #3a4b56;border-radius:8px;background:#0d171f;padding:8px 6px;text-align:center;cursor:pointer;position:relative;transition:.13s}
.treeNode:hover{transform:translateY(-2px);border-color:#8152aa}
.treeNode.root{width:118px;border-color:#a646ec;box-shadow:0 0 22px #972fe31c}
.treeNode.expanded{border-color:#2aaa55}.treeNode.buy{border-color:#774296}
.treeNode img{width:48px;height:48px;object-fit:contain}.treeNode.root img{width:58px;height:58px}
.treeNode b{display:block;font-size:10px;line-height:1.22;margin-top:5px}.treeNode small{display:block;color:#9ca9b0;font-size:9px;margin-top:3px}
.treeNode .nodePrice{color:#ffb31b;font-weight:850}.treeNode .nodeStock{color:#5edc79}
.nodeCheck{position:absolute;right:-6px;bottom:-6px;width:21px;height:21px;border-radius:5px;background:#8f42ce;display:grid;place-items:center;font-size:12px}
.treeNode.expanded .nodeCheck{background:#29a64f}
.nodeMode{position:absolute;left:4px;top:4px;border-radius:4px;padding:2px 4px;background:#161e25;color:#8fa0aa;font-size:8px}
.treeLegend{height:44px;display:flex;align-items:center;gap:20px;padding:0 14px;border-top:1px solid #22333e;color:#81929b;font-size:10px}
.legendLine{width:18px;border-top:2px solid;display:inline-block;margin-right:6px}.legendLine.purple{border-color:#a64ae1}.legendLine.green{border-color:#25b85c}.legendCheck{display:inline-grid;place-items:center;width:17px;height:17px;background:#26323a;border-radius:4px;margin-right:5px}
.rightPanel{display:flex;flex-direction:column;overflow:hidden}
.rightFilter{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid #22333e;color:#82939c;font-size:11px}.rightFilter select{margin-left:auto;height:34px;background:#0e1921;border:1px solid #31434e;border-radius:6px;color:#dce4e8;padding:0 9px}
.componentList{flex:1;overflow:auto;max-height:462px;padding:2px 12px}
.rightEmpty{padding:60px 10px;text-align:center;color:#71828b}
.compRow{display:grid;grid-template-columns:40px 1fr auto;gap:9px;align-items:center;padding:10px 0;border-bottom:1px solid #22323d}
.compRow img{width:37px;height:37px;object-fit:contain}.compMain b{display:block;font-size:11px}.compMain small{display:block;color:#7c8c95;margin-top:3px}.compMeta{text-align:right}.compMeta b{display:block;color:#ffb31a;font-size:11px}.compMeta small{display:block;color:#83939c;margin-top:3px}
.compMeta .good{color:#42d66b}.compMeta .bad{color:#ff6b72}
.compSource{grid-column:2/4;display:flex;align-items:center;gap:5px;margin-top:-3px}.compSource button{height:25px;border:1px solid #31424c;background:#0d171f;color:#82939c;border-radius:5px;padding:0 7px;font-size:9px;cursor:pointer}.compSource button.on.auction{color:#7cc2ff;border-color:#315b7a;background:#10283a}.compSource button.on.stock{color:#ffc05a;border-color:#6d531f;background:#241d10}.compSource .gear{margin-left:auto}
.rightPanel>.wide{margin:9px 12px 12px;width:calc(100% - 24px)}
.resultPanel{overflow:hidden}
.resultHeader{width:100%;height:50px;border:0;background:transparent;color:#e6edef;display:flex;align-items:center;justify-content:space-between;padding:0 15px;font-weight:900;cursor:pointer}
.resultHeader span:last-child{font-size:10px;color:#a5b0b7}
.resultBody{border-top:1px solid #22333e;padding:13px}
.resultPanel.collapsed .resultBody{display:none}
.resultFields{display:grid;grid-template-columns:repeat(4,minmax(150px,230px));gap:10px}
.resultFields label{font-size:10px;color:#83939c;text-transform:uppercase}.resultValue,.resultFields input{height:42px;margin-top:5px;border:1px solid #283b46;border-radius:6px;background:#0d171f;color:#e9eff2;padding:0 10px;display:flex;align-items:center;font-size:15px}
.resultStats{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:10px;margin-top:10px}.statBox{min-height:68px;border:1px solid #273a45;border-radius:7px;background:#0d171f;padding:10px}.statBox span{display:block;color:#81929b;font-size:10px;text-transform:uppercase}.statBox b{display:block;font-size:21px;margin-top:6px}.statBox small{color:#70818b}.statBox.profit b.good{color:#34df65}.statBox.profit b.bad{color:#ff626c}.statBox.estimate b{color:#ffb31b}
.resultActions{display:flex;gap:8px;margin-top:11px}
.overlay{position:fixed;inset:0;background:#000b;z-index:100;display:none;justify-content:flex-end}
.overlay.open{display:flex}.drawer{width:min(760px,96vw);height:100%;background:#0c161e;border-left:1px solid #384b56;padding:18px;overflow:auto;box-shadow:-30px 0 70px #0008}.drawerHead{display:flex;justify-content:space-between;align-items:flex-start}.drawerHead h2{margin:0}.drawerHead p{color:#7f9099;margin:5px 0 16px}.stockSearch input{height:42px}.picked{height:27px;color:#ffb31b;font-size:11px;padding-top:7px}.settingEditor{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;margin:10px 0 18px}.settingEditor label{font-size:11px;color:#84949e}.settingEditor input{margin-top:5px}.drawerTableHead,.settingRow{display:grid;grid-template-columns:minmax(220px,1fr) 100px 130px 76px;gap:8px;align-items:center}.drawerTableHead{padding:7px 0;color:#71828c;font-size:10px;text-transform:uppercase}.settingRow{padding:8px 0;border-top:1px solid #263741}.setName{display:flex;align-items:center;gap:8px}.setName img{width:34px;height:34px;object-fit:contain}.setName b,.setName small{display:block}.setName small{color:#71828b}.settingRow input{height:34px;background:#0e1921;border:1px solid #31434e;border-radius:5px;color:#e8eef1;padding:0 8px}
.toast{position:fixed;right:24px;bottom:24px;z-index:200;background:#11232d;border:1px solid #365261;color:#edf2f4;padding:11px 14px;border-radius:7px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:none}.toast.bad{border-color:#76363d;color:#ff9ca1}
body.hidePrices .nodePrice{display:none}body.hideStock .nodeStock{display:none}body.hideLines .treeLevel:before,body.hideLines .treeNodeWrap:before{display:none}body.compact .treeNode{width:88px;min-height:96px;padding:6px 4px}body.compact .treeNode img{width:40px;height:40px}
@media(max-width:1280px){.mainGrid{grid-template-columns:285px minmax(540px,1fr) 330px}.resultFields{grid-template-columns:repeat(4,minmax(130px,1fr))}}

/* ===== v7.20 — recursive craft tree visual ===== */
.treeViewport{
  height:492px;
  overflow:auto;
  background:
    radial-gradient(circle at 50% 16%,rgba(62,42,84,.22),transparent 38%),
    linear-gradient(180deg,#0a141c 0%,#081119 100%);
}
.treeCanvas{
  min-width:max-content;
  width:max-content;
  min-height:470px;
  padding:26px 40px 56px;
  margin:0 auto;
  transform-origin:top center;
}
.orgTree{
  display:flex;
  justify-content:center;
  width:max-content;
  min-width:100%;
}
.orgTree ul{
  position:relative;
  display:flex;
  justify-content:center;
  margin:0;
  padding:0;
}
.orgTree li{
  list-style:none;
  position:relative;
  text-align:center;
  padding:34px 8px 0;
}

/* Local connector bus between siblings */
.orgTree li::before,
.orgTree li::after{
  content:"";
  position:absolute;
  top:0;
  right:50%;
  width:50%;
  height:34px;
  border-top:1px solid #724497;
}
.orgTree li::after{
  right:auto;
  left:50%;
  border-left:1px solid #724497;
}
.orgTree li:only-child::before,
.orgTree li:only-child::after{
  display:none;
}
.orgTree li:only-child{
  padding-top:28px;
}
.orgTree li:first-child::before,
.orgTree li:last-child::after{
  border:0;
}
.orgTree li:last-child::before{
  border-right:1px solid #724497;
  border-radius:0 7px 0 0;
}
.orgTree li:first-child::after{
  border-radius:7px 0 0 0;
}
.orgTree ul.treeChildren::before{
  content:"";
  position:absolute;
  top:-28px;
  left:50%;
  height:28px;
  border-left:1px solid #32a85a;
}
.treeRootList>li{
  padding-top:0!important;
}
.treeRootList>li::before,
.treeRootList>li::after{
  display:none!important;
}

/* Every nested subrecipe gets a green local stem */
.treeBranch>.treeChildren>li::before,
.treeBranch>.treeChildren>li::after{
  border-top-color:#3a7e53;
}
.treeBranch>.treeChildren>li::after{
  border-left-color:#3a7e53;
}
.treeBranch>.treeChildren>li:last-child::before{
  border-right-color:#3a7e53;
}

.branchNode{
  position:relative;
  display:flex;
  justify-content:center;
  z-index:2;
}
.treeChildren{
  margin-top:28px!important;
}

/* Card proportions closer to preview */
.treeNode{
  width:118px;
  min-height:132px;
  padding:9px 8px 10px;
  border-radius:9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:linear-gradient(180deg,#111b24,#0b141c);
  box-shadow:0 7px 18px rgba(0,0,0,.18);
}
.treeNode.root{
  width:132px;
  min-height:142px;
  border-color:#aa47eb;
  box-shadow:0 0 0 1px rgba(168,76,255,.12),0 10px 26px rgba(121,48,171,.16);
}
.treeNode.recipeNode:not(.root){
  border-color:#2fa95a;
  box-shadow:0 0 0 1px rgba(35,198,92,.07);
}
.treeNode.materialNode.craftable{
  border-color:#70428d;
}
.treeNode.materialNode:not(.craftable){
  border-color:#3b4d58;
}
.treeNode:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.32);
}
.nodeIcon{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:4px;
}
.treeNode .nodeIcon img{
  width:52px;
  height:52px;
  object-fit:contain;
}
.treeNode.root .nodeIcon img{
  width:62px;
  height:62px;
}
.treeNode b{
  min-height:28px;
  max-width:104px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:4px;
  font-size:10.5px;
  line-height:1.23;
}
.nodeQty{
  margin-top:3px!important;
  color:#d4dde1!important;
  font-weight:800;
}
.nodeFoot{
  width:100%;
  margin-top:auto;
  padding-top:5px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.nodeFoot .nodePrice{
  color:#ffb31b;
  font-size:9px;
  font-weight:900;
}
.nodeFoot .nodeStock{
  color:#56d674;
  font-size:8.5px;
}
.nodeMode{
  top:5px;
  left:5px;
  padding:2px 5px;
  border:1px solid #2c3942;
  border-radius:4px;
  background:#0a1117e8;
  letter-spacing:.2px;
}
.recipeNode .nodeMode{
  color:#65e484;
  border-color:#265837;
}
.materialNode.craftable .nodeMode{
  color:#d492ff;
  border-color:#56316c;
}
.nodeCheck{
  right:-7px;
  bottom:-7px;
  width:22px;
  height:22px;
  border-radius:6px;
  border:2px solid #0a131b;
}

/* Children of expanded recipes are grouped more tightly */
.treeBranch .treeChildren{
  gap:0;
}
.treeBranch .treeChildren>li{
  padding-left:7px;
  padding-right:7px;
}

/* Remove old global-row tree connectors completely */
.treeRoot,.treeLevels,.treeLevel,.treeNodeWrap{
  all:unset;
}
.treeLevel:before,.treeNodeWrap:before{
  display:none!important;
}

/* display settings still work with new tree */
body.hideLines .orgTree li::before,
body.hideLines .orgTree li::after,
body.hideLines .orgTree ul.treeChildren::before{
  display:none!important;
}
body.compact .treeNode{
  width:100px;
  min-height:112px;
  padding:7px 6px;
}
body.compact .treeNode.root{
  width:112px;
  min-height:120px;
}
body.compact .treeNode .nodeIcon{
  height:46px;
}
body.compact .treeNode .nodeIcon img{
  width:43px;
  height:43px;
}
body.compact .treeNode b{
  font-size:9.5px;
  min-height:24px;
}

/* Slightly more room vertically for nested recipes */
@media(min-width:1200px){
  .treeViewport{height:520px}
}

/* ===== v7.21 — modern scrollbars + fullscreen craft tree ===== */
.treeViewport,.componentList,.suggest,.drawer,.settingsList{
  scrollbar-width:thin;
  scrollbar-color:#506875 #09131a;
}
.treeViewport::-webkit-scrollbar,
.componentList::-webkit-scrollbar,
.suggest::-webkit-scrollbar,
.drawer::-webkit-scrollbar,
.settingsList::-webkit-scrollbar{
  width:9px;height:9px;
}
.treeViewport::-webkit-scrollbar-track,
.componentList::-webkit-scrollbar-track,
.suggest::-webkit-scrollbar-track,
.drawer::-webkit-scrollbar-track,
.settingsList::-webkit-scrollbar-track{
  background:#081219;
  border-radius:10px;
}
.treeViewport::-webkit-scrollbar-thumb,
.componentList::-webkit-scrollbar-thumb,
.suggest::-webkit-scrollbar-thumb,
.drawer::-webkit-scrollbar-thumb,
.settingsList::-webkit-scrollbar-thumb{
  background:#405661;
  border:2px solid #081219;
  border-radius:10px;
}
.treeViewport::-webkit-scrollbar-thumb:hover,
.componentList::-webkit-scrollbar-thumb:hover,
.suggest::-webkit-scrollbar-thumb:hover,
.drawer::-webkit-scrollbar-thumb:hover,
.settingsList::-webkit-scrollbar-thumb:hover{
  background:#b77b19;
}
.treeViewport::-webkit-scrollbar-corner{background:#081219}

body.treeFullscreenOpen{overflow:hidden}
body.treeFullscreenOpen::before{
  content:"";position:fixed;inset:0;z-index:148;
  background:rgba(1,6,10,.9);backdrop-filter:blur(6px)
}
.treePanel.treeFullscreen{
  position:fixed;z-index:150;inset:16px;width:auto;height:auto;min-height:0;
  background:#08121a;border-color:#435864;
  box-shadow:0 30px 120px rgba(0,0,0,.82)
}
.treePanel.treeFullscreen .panelHead{
  height:58px;padding:0 18px;font-size:15px
}
.treePanel.treeFullscreen .treeViewport{
  height:calc(100vh - 128px)
}
.treePanel.treeFullscreen .treeLegend{
  height:54px;font-size:12px
}
.treePanel.treeFullscreen .treeCanvas{
  padding-top:40px;padding-bottom:90px
}
.treePanel.treeFullscreen .fsBtn{
  border-color:#b67c1d;color:#ffc04d
}

/* ===== v7.22 — selected -> tree -> components -> result ===== */
.mainGrid{
  display:flex!important;
  flex-direction:column!important;
  grid-template-columns:none!important;
  gap:12px!important;
}
.leftPanel,.treePanel,.rightPanel{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}
.leftPanel{
  order:1;
}
.treePanel{
  order:2;
}
.rightPanel{
  order:3;
}

/* Selected item/settings now span the full content width. */
.leftPanel .leftPane.on{
  width:100%;
}
#leftRecipePane.on{
  display:grid!important;
  grid-template-columns:minmax(330px,1.1fr) minmax(280px,.8fr) minmax(600px,2fr);
  gap:16px;
  align-items:stretch;
}
#leftRecipePane>.sectionLabel{
  grid-column:1/-1;
}
#leftRecipePane>.selectedRecipe{
  grid-column:1;
}
#leftRecipePane>.controlSection:nth-of-type(1){
  grid-column:2;
}
#leftRecipePane>.controlSection:nth-of-type(2){
  grid-column:3;
}
#leftRecipePane>.controlSection:nth-of-type(3){
  grid-column:1/-1;
}
#leftRecipePane .choiceGrid{
  grid-template-columns:repeat(2,minmax(240px,1fr));
}

/* Components spread horizontally instead of a narrow right sidebar. */
.rightPanel{
  min-height:250px;
}
.rightFilter{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
}
.rightFilter select{
  width:280px;
}
.componentList{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(280px,1fr));
  gap:10px;
  max-height:420px!important;
  padding:10px 14px 14px!important;
  overflow:auto;
}
.compRow{
  min-width:0;
  border:1px solid #263944!important;
  border-radius:8px;
  padding:12px!important;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr) auto!important;
  grid-template-areas:
    "img main meta"
    "img source source";
  gap:8px 10px!important;
  background:#0b161e;
}
.compRow>img,.compRow>.itemIcon{grid-area:img}
.compMain{grid-area:main}
.compMeta{grid-area:meta}
.compSource{grid-area:source;justify-content:flex-start!important;flex-wrap:wrap}
#showAllComponents{margin:0 14px 14px;width:calc(100% - 28px)!important}

/* Component fullscreen */
body.componentsFullscreenOpen{overflow:hidden}
body.componentsFullscreenOpen::before{
  content:"";position:fixed;inset:0;z-index:148;background:rgba(1,6,10,.9);backdrop-filter:blur(6px)
}
.rightPanel.componentsFullscreen{
  position:fixed!important;z-index:150;inset:16px!important;width:auto!important;height:auto!important;
  max-width:none!important;max-height:none!important;background:#08121a;
  box-shadow:0 30px 120px rgba(0,0,0,.82)
}
.rightPanel.componentsFullscreen .componentList{
  grid-template-columns:repeat(5,minmax(260px,1fr));
  max-height:calc(100vh - 180px)!important;
  height:calc(100vh - 180px);
}

/* Calculation status */
.calcStatus{
  margin:0 0 12px;
  min-height:72px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid #2a3c46;
  border-radius:8px;
  background:#0b161e;
}
.calcStatusIcon{font-size:22px}
.calcStatusCopy{display:flex;flex-direction:column;gap:4px;flex:1}
.calcStatus.idle .calcStatusIcon{color:#70828d}
.calcStatus.working{border-color:#936617;background:#1a160b}
.calcStatus.working .calcStatusIcon{color:#ffb21b;animation:statusPulse 1s infinite}
.calcStatus.success{border-color:#246c3b;background:#0b2115}
.calcStatus.success .calcStatusIcon,.calcStatus.success b{color:#55df7b}
.calcStatus.warning{border-color:#9b6b1b;background:#21190b}
.calcStatus.warning .calcStatusIcon,.calcStatus.warning b{color:#ffc14d}
.calcStatus.error{border-color:#82313a;background:#261014}
.calcStatus.error .calcStatusIcon,.calcStatus.error b{color:#ff626d}
@keyframes statusPulse{50%{opacity:.35}}
.calcMissingDetails{
  margin:-2px 0 14px;
  padding:14px 18px;
  border:1px solid #71313a;
  border-radius:8px;
  background:#170d11;
}
.missingGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px 18px;
  margin-top:9px;
}
.missingItem{color:#f3b6bb}

/* User explicitly requested much larger text than previous calculator build. */
.leftPanel,.treePanel,.rightPanel,.resultPanel{
  font-size:15px!important;
}
.panelHead,.sectionLabel,.controlTitle,.resultHeader{
  font-size:16px!important;
}
.selectedRecipe b,.choiceCard b,.compMain b,.compMeta b,.calcStatusCopy b{
  font-size:16px!important;
}
.selectedRecipe small,.choiceCard small,.compMain small,.compMeta small,
.compSource button,.rightFilter,.treeLegend,.calcStatusCopy span,.missingItem{
  font-size:13px!important;
}
.resultFields label,.statBox span{
  font-size:13px!important;
}
.resultValue,.statBox b{
  font-size:20px!important;
}
.miniBtn,.squareBtn,.uiBtn{
  font-size:13px!important;
}
.treeNode b{font-size:12px!important}
.treeNode .nodeQty,.treeNode .nodePrice,.treeNode .nodeStock,.treeNode .nodeMode{
  font-size:10px!important;
}

@media(max-width:1300px){
  #leftRecipePane.on{grid-template-columns:1fr 1fr}
  #leftRecipePane>.controlSection:nth-of-type(2){grid-column:1/-1}
  .componentList{grid-template-columns:repeat(3,minmax(260px,1fr))}
}

/* ===== v7.23 — compact one-line selected item/control bar ===== */
#leftRecipePane.on{
  display:grid!important;
  grid-template-columns:minmax(360px,1.25fr) minmax(260px,.7fr) minmax(520px,1.6fr)!important;
  grid-template-rows:auto auto!important;
  gap:8px 14px!important;
  align-items:stretch!important;
  padding:10px 12px!important;
}
#leftRecipePane>.sectionLabel{
  grid-column:1/-1!important;
  margin:0!important;
  padding:0 0 4px!important;
}
#leftRecipePane>.selectedRecipe{
  grid-column:1!important;
  grid-row:2!important;
  min-height:82px!important;
  height:82px!important;
  margin:0!important;
  padding:8px 12px!important;
}
#leftRecipePane>.controlSection{
  margin:0!important;
  padding:8px 10px!important;
  border-top:0!important;
  border-left:1px solid #20323c;
}
#leftRecipePane>.controlSection:nth-of-type(1){
  grid-column:2!important;
  grid-row:2!important;
}
#leftRecipePane>.controlSection:nth-of-type(2){
  grid-column:3!important;
  grid-row:2!important;
}
#leftRecipePane>.controlSection:nth-of-type(3){
  grid-column:3!important;
  grid-row:2!important;
  margin-left:50%!important;
  padding-left:12px!important;
  background:#0b161e;
}
/* split calculation/source controls inside the same right-hand line */
#leftRecipePane>.controlSection:nth-of-type(2){
  width:50%!important;
  padding-right:12px!important;
}
#leftRecipePane>.controlSection:nth-of-type(3){
  width:50%!important;
}
#leftRecipePane .controlTitle{
  margin-bottom:6px!important;
  line-height:1.1!important;
}
#leftRecipePane .choiceGrid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
}
#leftRecipePane .choiceCard{
  min-height:58px!important;
  padding:8px 10px!important;
}
#leftRecipePane .choiceCard small{
  line-height:1.2!important;
}
#leftRecipePane .qtyControl{
  height:42px!important;
  margin-top:5px!important;
}
#leftRecipePane .selectedRecipe .selIcon{
  width:50px!important;
  height:50px!important;
}
#leftRecipePane .selCopy{
  display:grid!important;
  grid-template-columns:auto auto!important;
  grid-template-rows:auto auto!important;
  column-gap:10px!important;
  align-items:center!important;
}
#leftRecipePane .selCopy b{grid-column:1}
#leftRecipePane .selCopy .badge{grid-column:2;grid-row:1}
#leftRecipePane .selCopy small{
  grid-row:2;
  white-space:nowrap;
}
#openStockSettings{
  margin-top:6px!important;
  height:28px!important;
  padding:3px 8px!important;
}
@media(max-width:1450px){
 #leftRecipePane.on{
   grid-template-columns:minmax(330px,1fr) minmax(220px,.6fr) minmax(600px,1.7fr)!important;
 }
 #leftRecipePane .choiceCard small{display:none}
}

/* ===== v7.24 — TRUE single-row selected block, minimal gaps ===== */
#leftRecipePane.on{
  display:grid!important;
  grid-template-columns:300px 190px 330px 330px!important;
  grid-template-rows:26px 66px!important;
  justify-content:start!important;
  align-items:stretch!important;
  column-gap:8px!important;
  row-gap:4px!important;
  padding:7px 8px!important;
  min-height:0!important;
}
#leftRecipePane>.sectionLabel{
  grid-column:1/-1!important;
  grid-row:1!important;
  height:26px!important;
  min-height:26px!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  line-height:26px!important;
}
#leftRecipePane>.selectedRecipe{
  grid-column:1!important;
  grid-row:2!important;
  height:66px!important;
  min-height:66px!important;
  padding:6px 8px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  overflow:hidden!important;
}
#leftRecipePane>.selectedRecipe .selIcon{
  width:44px!important;height:44px!important;min-width:44px!important;
}
#leftRecipePane>.selectedRecipe .selCopy{
  min-width:0!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:8px!important;
  white-space:nowrap!important;
}
#leftRecipePane>.selectedRecipe .selCopy b,
#leftRecipePane>.selectedRecipe .selCopy small,
#leftRecipePane>.selectedRecipe .selCopy .badge{
  margin:0!important;
  white-space:nowrap!important;
}
#leftRecipePane>.selectedRecipe .selCopy small{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#leftRecipePane>.controlSection{
  height:66px!important;
  min-height:66px!important;
  margin:0!important;
  padding:5px 7px!important;
  border:1px solid #20323c!important;
  border-radius:7px!important;
  background:#0b161e!important;
  overflow:hidden!important;
}
#leftRecipePane>.controlSection:nth-of-type(1){
  grid-column:2!important;grid-row:2!important;width:auto!important;
}
#leftRecipePane>.controlSection:nth-of-type(2){
  grid-column:3!important;grid-row:2!important;width:auto!important;
}
#leftRecipePane>.controlSection:nth-of-type(3){
  grid-column:4!important;grid-row:2!important;width:auto!important;
  margin:0!important;padding:5px 7px!important;
}
#leftRecipePane .controlTitle{
  margin:0 0 4px!important;
  font-size:12px!important;
  line-height:14px!important;
  white-space:nowrap!important;
}
#leftRecipePane .qtyControl{
  height:34px!important;
  margin:0!important;
}
#leftRecipePane .choiceGrid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:5px!important;
}
#leftRecipePane .choiceCard{
  min-height:38px!important;
  height:38px!important;
  padding:4px 6px!important;
  display:flex!important;
  align-items:center!important;
}
#leftRecipePane .choiceCard b{
  font-size:12px!important;
  line-height:13px!important;
  white-space:nowrap!important;
}
#leftRecipePane .choiceCard small{display:none!important}
#openStockSettings{
  margin:3px 0 0!important;
  height:24px!important;
  min-height:24px!important;
  padding:2px 6px!important;
  font-size:11px!important;
}
@media(max-width:1500px){
 #leftRecipePane.on{
   grid-template-columns:270px 160px 285px 285px!important;
 }
}

/* ===== v7.25 — selected row: use width, remove empty height ===== */

/* The huge empty area was inherited from the old 585px side-panel layout. */
.leftPanel{
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  overflow:visible!important;
}

/* Make the first strip slightly wider and more comfortable,
   but still keep everything on ONE line. */
#leftRecipePane.on{
  grid-template-columns:
    minmax(360px,1.15fr)
    minmax(230px,.72fr)
    minmax(390px,1.15fr)
    minmax(390px,1.15fr)!important;
  width:100%!important;
  max-width:none!important;
  grid-template-rows:28px 76px!important;
  column-gap:12px!important;
  row-gap:5px!important;
  padding:8px 10px 10px!important;
}

#leftRecipePane>.sectionLabel{
  height:28px!important;
  min-height:28px!important;
  line-height:28px!important;
}

#leftRecipePane>.selectedRecipe,
#leftRecipePane>.controlSection{
  height:76px!important;
  min-height:76px!important;
}

#leftRecipePane>.selectedRecipe{
  padding:8px 12px!important;
  gap:10px!important;
}

#leftRecipePane>.selectedRecipe .selIcon{
  width:50px!important;
  height:50px!important;
  min-width:50px!important;
}

#leftRecipePane>.selectedRecipe .selCopy{
  gap:10px!important;
}

#leftRecipePane>.controlSection{
  padding:7px 9px!important;
}

#leftRecipePane .qtyControl{
  height:38px!important;
}

#leftRecipePane .choiceCard{
  height:45px!important;
  min-height:45px!important;
  padding:6px 9px!important;
}

#leftRecipePane .choiceCard b{
  font-size:13px!important;
}

#openStockSettings{
  height:27px!important;
  min-height:27px!important;
  margin-top:4px!important;
}

/* Tree begins immediately after the selected-item strip. */
.mainGrid{
  gap:9px!important;
}
.treePanel{
  margin-top:0!important;
}

/* Keep one-row layout on normal desktop widths. */
@media(max-width:1500px){
  #leftRecipePane.on{
    grid-template-columns:
      minmax(320px,1.05fr)
      minmax(200px,.65fr)
      minmax(340px,1.1fr)
      minmax(340px,1.1fr)!important;
  }
}

.priceSourceHint{display:block;margin-top:4px;color:#7f98a5;font-size:11px!important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.priceSourceHint.bad{color:#ff626d}

/* ===== v7.29 — explicit craft quantity summary ===== */
.productionSummary{
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:8px;
  margin:0 0 10px;
}
.productionBox{
  min-height:58px;
  padding:9px 12px;
  border:1px solid #293b46;
  border-radius:7px;
  background:#0d171f;
}
.productionBox span{
  display:block;
  color:#82939c;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.25px;
}
.productionBox b{
  display:block;
  margin-top:5px;
  font-size:19px;
  color:#edf2f4;
}
.productionBox.accent{
  border-color:#346846;
  background:#0c1b13;
}
.productionBox.accent b{color:#51df78}
#sumSaleFormula{
  display:block;
  margin-top:5px;
  color:#8ea0aa;
  font-size:11px!important;
  white-space:nowrap;
}
@media(max-width:1200px){
  .productionSummary{grid-template-columns:repeat(2,minmax(160px,1fr))}
}

/* ===== v7.30 — craft-count semantics + per-unit margin ===== */
.unitMarginBlock{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #263944;
}
.unitMarginTitle{
  font-size:14px;
  font-weight:900;
  letter-spacing:.35px;
  color:#e8eef1;
  margin-bottom:8px;
}
.unitMarginGrid{
  display:grid;
  grid-template-columns:repeat(5,minmax(160px,1fr));
  gap:8px;
}
.unitMetric{
  min-height:70px;
  padding:10px 12px;
  border:1px solid #293b46;
  border-radius:7px;
  background:#0d171f;
}
.unitMetric span{
  display:block;
  color:#82939c;
  font-size:11px;
  text-transform:uppercase;
}
.unitMetric b{
  display:block;
  margin-top:7px;
  font-size:20px;
}
.unitMetric b.good{color:#51df78}
.unitMetric b.bad{color:#ff626d}
.unitMarginFormula{
  margin-top:8px;
  padding:9px 11px;
  border:1px dashed #304550;
  border-radius:6px;
  background:#0a141b;
  color:#94a6af;
  font-size:12px;
}
#craftQty{
  font-weight:900;
}
@media(max-width:1350px){
  .unitMarginGrid{grid-template-columns:repeat(3,minmax(170px,1fr))}
}

/* ===== v7.32 UI cleanup / collapsible panels / energy costing ===== */
.workspaceTabHint{display:none!important}
.sectionLabel.collapsibleTitle,.panelHead{align-items:center}
.collapsibleTitle{display:flex!important;justify-content:space-between;gap:16px}
.collapseBtn{margin-left:auto}
#selectedBody[hidden],#treePanelBody[hidden],#componentsBody[hidden]{display:none!important}
.panelCollapsed{min-height:0!important}
.marginSectionTitle,.unitMarginTitle{
  text-align:center!important;font-size:18px!important;font-weight:900!important;
  letter-spacing:.45px!important;margin:10px auto!important;
}
.resultFields{max-width:760px!important;margin:0 auto 10px!important;grid-template-columns:repeat(4,minmax(120px,1fr))!important}
.productionSummary,.resultStats{max-width:980px!important;margin-left:auto!important;margin-right:auto!important}
.productionBox,.statBox{min-height:62px!important;padding:10px 14px!important}
.unitMarginBlock{max-width:1180px!important;margin-left:auto!important;margin-right:auto!important}
.unitMarginFormula{display:none!important}
#showAllComponents,.maxBtn{display:none!important}
.energyToggle{display:flex;align-items:center;gap:10px;font-weight:800}
.energyToggle input{width:18px;height:18px}
.energyOptions{margin-top:10px;padding:10px;border:1px solid #233642;border-radius:8px;background:#0b161e}
.energyOptions label{display:grid;gap:6px;font-size:12px}
.energyOptions select{width:100%;background:#0b151d;border:1px solid #2b414f;color:#dbe7ed;border-radius:7px;padding:9px}
.energySourceBtns{display:flex;gap:7px;margin-top:8px}
.energySourceBtns .on{border-color:#d99800;color:#ffc126;background:#2a210c}
.energyInfo{font-size:12px;color:#91a4af;margin-top:8px;line-height:1.35}
.energyResultBox{border-color:#8b6b14!important}
#selectedRecipeCard .selCopy small{display:block}
#selectedRecipeCard .selCopy small+small{display:none!important}

/* fullscreen components: compact cards, large icons */
.rightPanel:fullscreen,.rightPanel.fsMode{padding:12px!important;background:#07131b!important}
.rightPanel:fullscreen .componentList,.rightPanel.fsMode .componentList{
 display:grid!important;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))!important;
 gap:8px!important;align-content:start!important;overflow:auto!important;padding:8px!important
}
.rightPanel:fullscreen .compRow,.rightPanel.fsMode .compRow{
 min-height:112px!important;height:auto!important;padding:9px 10px!important;
 display:grid!important;grid-template-columns:78px minmax(0,1fr) auto!important;
 grid-template-rows:auto auto!important;gap:6px 10px!important
}
.rightPanel:fullscreen .compRow>img,.rightPanel.fsMode .compRow>img{
 width:72px!important;height:72px!important;object-fit:contain!important;grid-row:1/3!important;align-self:center!important
}
.rightPanel:fullscreen .compMain,.rightPanel.fsMode .compMain{align-self:center!important}
.rightPanel:fullscreen .compMain b,.rightPanel.fsMode .compMain b{font-size:15px!important}
.rightPanel:fullscreen .compMeta,.rightPanel.fsMode .compMeta{text-align:right!important}
.rightPanel:fullscreen .compSource,.rightPanel.fsMode .compSource{grid-column:2/4!important;display:flex!important;gap:5px!important;flex-wrap:wrap!important}
.rightPanel:fullscreen .rightFilter,.rightPanel.fsMode .rightFilter{padding:6px 8px!important}

/* ===== v7.33 — selected block restore + centered result buttons + typography ===== */

/* v7.32 added #selectedBody wrapper, so old direct-child grid rules stopped applying.
   Rebuild the selected panel inside the wrapper. */
#leftRecipePane.on{
  display:block!important;
  padding:8px 10px 10px!important;
  min-height:0!important;
}
#leftRecipePane>.sectionLabel{
  margin:0 0 6px!important;
}
#selectedBody{
  display:grid!important;
  grid-template-columns:
    minmax(310px,1.05fr)
    minmax(170px,.55fr)
    minmax(300px,.95fr)
    minmax(310px,1fr)
    minmax(250px,.8fr);
  gap:10px!important;
  align-items:stretch!important;
  width:100%!important;
}
#selectedBody[hidden]{display:none!important}

#selectedBody>.selectedRecipe,
#selectedBody>.controlSection{
  margin:0!important;
  min-height:78px!important;
  height:auto!important;
  padding:8px 10px!important;
  border:1px solid #263944!important;
  border-radius:7px!important;
  background:#0b161e!important;
  overflow:visible!important;
}
#selectedBody>.selectedRecipe{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
#selectedBody>.selectedRecipe .selIcon{
  width:50px!important;
  height:50px!important;
  min-width:50px!important;
}
#selectedBody>.selectedRecipe .selCopy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:3px!important;
}
#selectedBody>.selectedRecipe .selCopy b,
#selectedBody>.selectedRecipe .selCopy small{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
#selectedBody>.controlSection{
  border-top:1px solid #263944!important;
}
#selectedBody .choiceGrid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
}
#selectedBody .choiceCard{
  min-height:48px!important;
  height:auto!important;
  padding:6px 8px!important;
}
#selectedBody .qtyControl{
  grid-template-columns:38px minmax(70px,1fr) 38px!important;
  height:40px!important;
}
#selectedBody .energyControl{
  min-width:0!important;
}
#selectedBody .energyOptions{
  position:relative!important;
  z-index:2!important;
}

/* Center action buttons in final calculation. */
.resultActions{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin:14px auto 0!important;
  width:100%!important;
}
.resultActions .uiBtn{
  min-width:150px!important;
}

/* Typography:
   normal/mixed-case text +3px; uppercase section captions +1px. */
.craftApp button:not(.workspaceTab):not(.collapseBtn),
.craftApp input,
.craftApp select,
.selectedRecipe .selCopy b,
.selectedRecipe .selCopy small,
.choiceCard b,
.choiceCard small,
.energyToggle span,
.energyInfo,
.compMain b,
.compMain small,
.compMeta b,
.compMeta small,
.compSource button,
.calcStatusCopy b,
.calcStatusCopy span,
.resultValue,
.statBox b,
.statBox small,
.productionBox b,
.unitMetric b,
.unitMarginFormula,
.priceSourceHint,
.drawer p,
.settingEditor label,
.setName b,
.setName small{
  font-size:calc(1em + 3px)!important;
}

/* Uppercase/headline classes only +1px from their current sizing. */
.sectionLabel,
.controlTitle,
.panelHead,
.resultHeader,
.marginSectionTitle,
.unitMarginTitle,
.productionBox span,
.statBox span,
.unitMetric span{
  font-size:calc(1em + 1px)!important;
}

/* Keep tree card text from exploding; user asked about interface text, not graph density. */
.treeNode b{font-size:13px!important}
.treeNode .nodeQty,
.treeNode .nodePrice,
.treeNode .nodeStock,
.treeNode .nodeMode{font-size:11px!important}

@media(max-width:1500px){
  #selectedBody{
    grid-template-columns:
      minmax(280px,1fr)
      minmax(150px,.55fr)
      minmax(260px,.9fr)
      minmax(280px,.95fr)
      minmax(220px,.75fr);
  }
}
@media(max-width:1200px){
  #selectedBody{
    grid-template-columns:repeat(2,minmax(280px,1fr));
  }
  #selectedBody>.selectedRecipe{grid-column:1/-1}
}

/* ===== v7.34 — energy moved into tree + unified controls ===== */

/* Top selected block */
.energyToggleBtn{
  width:100%!important;
  height:48px!important;
  min-height:48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:6px 10px!important;
}
.energyToggleBtn.on{
  border-color:#b98015!important;
  background:#221b0c!important;
  box-shadow:inset 0 -2px #e49a16!important;
}
.energyToggleBtn.on b{color:#ffc13e!important}
.energyOptions{
  margin-top:6px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.energySourceBtns{margin-top:0!important}
.energySourceBtns .miniBtn{
  flex:1;
  height:32px!important;
  font-size:13px!important;
}

/* Make "Остатки и мои цены" equal to the neighboring cards */
#openStockSettings{
  height:48px!important;
  min-height:48px!important;
  margin-top:6px!important;
  padding:6px 10px!important;
  font-size:13px!important;
  font-weight:800!important;
}

/* Unified panel action buttons */
.panelHead .miniBtn,
.collapsibleTitle .miniBtn{
  min-height:32px!important;
  height:32px!important;
  padding:0 11px!important;
  font-size:13px!important;
  line-height:30px!important;
  border-radius:6px!important;
}

/* Tree toolbar lives INSIDE tree */
.treeViewport{position:relative!important}
.treeFloatingTools{
  position:sticky;
  top:10px;
  float:right;
  margin:10px 10px 0 0;
  z-index:35;
  display:flex;
  align-items:center;
  gap:5px;
  width:max-content;
  padding:5px;
  border:1px solid #344956;
  border-radius:8px;
  background:rgba(7,17,24,.92);
  backdrop-filter:blur(5px);
  box-shadow:0 8px 24px rgba(0,0,0,.32);
}
.treeToolBtn{
  width:34px;height:34px;
  border:1px solid #334954;
  border-radius:6px;
  background:#0e1a22;
  color:#dce6eb;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
}
.treeToolBtn:hover{border-color:#b67c1d;color:#ffc34e;background:#211b0e}
.treeToolSep{height:23px;border-left:1px solid #344651;margin:0 2px}

/* Energy selector looks like a tree node */
.energyTreePicker{
  position:absolute;
  left:28px;
  top:74px;
  z-index:40;
}
.energyTreeNode{
  position:relative;
  width:126px;
  min-height:132px;
  padding:10px 8px 9px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid #b77d18;
  border-radius:9px;
  background:linear-gradient(180deg,#17180f,#0d171f);
  color:#edf2f4;
  box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 18px rgba(231,157,25,.08);
  cursor:pointer;
}
.energyTreeNode:hover{transform:translateY(-2px);border-color:#e5a128}
.energyTreeBadge{
  position:absolute;left:6px;top:6px;
  padding:2px 5px;border-radius:4px;
  background:#2b210d;border:1px solid #73551c;
  color:#ffc14a;font-size:9px;font-weight:900;
}
.energyPickerIcon{
  width:58px;height:58px;
  display:flex;align-items:center;justify-content:center;
  font-size:34px;color:#ffc23f;
  margin-top:7px;
}
.energyPickerIcon img{width:56px;height:56px;object-fit:contain}
.energyTreeNode b{
  max-width:108px;
  font-size:11px!important;
  line-height:1.2;
  text-align:center;
}
.energyTreeNode small{font-size:9px!important;color:#8597a1}
.energyPickerMenu{
  position:absolute;
  left:136px;
  top:0;
  width:300px;
  max-height:360px;
  overflow:auto;
  padding:6px;
  border:1px solid #3b505b;
  border-radius:8px;
  background:#0a151d;
  box-shadow:0 18px 55px rgba(0,0,0,.6);
}
.energyPickerOption{
  width:100%;
  min-height:54px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  border:0;
  border-bottom:1px solid #21333d;
  background:transparent;
  color:#e6edf0;
  text-align:left;
  cursor:pointer;
}
.energyPickerOption:hover{background:#14232c}
.energyPickerOption img{width:42px;height:42px;object-fit:contain;flex:0 0 42px}
.energyPickerOption span{font-size:13px!important;font-weight:800}
.energyPickerEmpty{padding:15px;color:#83959f}

/* Energy calculations are part of selected-crafts margin */
.energyCalcBlock{
  max-width:980px;
  margin:10px auto 12px;
  padding:10px;
  border:1px solid #5e4d1b;
  border-radius:8px;
  background:#151408;
}
.energyCalcTitle{
  text-align:center;
  margin:0 0 8px;
  color:#ffc34c;
  font-size:15px!important;
  font-weight:900;
  letter-spacing:.35px;
}
.energyCalcGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:8px;
}
.energyCalcMetric{
  min-height:62px;
  padding:9px 11px;
  border:1px solid #3d3a22;
  border-radius:7px;
  background:#0d1718;
}
.energyCalcMetric span{display:block;color:#93a0a6;font-size:12px!important}
.energyCalcMetric b{display:block;margin-top:6px;font-size:20px!important;color:#eef2f3}
.energyCalcMetric:first-child b{color:#ffc247}

/* no old energy formula */
#sumEnergyFormula{display:none!important}

/* Larger normal button text in selected panel without blowing up headings */
#selectedBody .choiceCard b,
#selectedBody .miniBtn,
#selectedBody .uiBtn,
#selectedBody .qtyControl button,
#selectedBody .qtyControl input{
  font-size:13px!important;
}

/* fullscreen keeps selector/menu accessible */
.treePanel.treeFullscreen .energyTreePicker{left:38px;top:86px}
.treePanel.treeFullscreen .treeFloatingTools{top:12px;margin-right:14px}

@media(max-width:1200px){
  .energyCalcGrid{grid-template-columns:repeat(2,minmax(160px,1fr))}
  .energyPickerMenu{width:250px}
}


/* v7.36 selected item — compact node, centered like energy node */
#selectedRecipeCard.selectedRecipe{
  min-height:108px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  box-sizing:border-box;
}
#selectedRecipeCard .selectedItemMini{
  position:relative;
  width:190px;
  min-height:82px;
  padding:18px 12px 10px;
  border:2px solid #8251a8;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(30,45,57,.96),rgba(16,29,39,.98));
  box-shadow:0 0 18px rgba(132,72,184,.12);
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  align-items:center;
  gap:10px;
}
#selectedRecipeCard .selectedItemBadge{
  position:absolute;
  left:7px;
  top:6px;
  padding:2px 6px;
  border:1px solid rgba(167,94,220,.7);
  border-radius:4px;
  background:rgba(71,29,91,.68);
  color:#e4b6ff;
  font-size:10px !important;
  font-weight:800;
  line-height:1.1;
  letter-spacing:.03em;
}
#selectedRecipeCard .selectedItemMini .selIcon{
  width:46px;
  height:46px;
  object-fit:contain;
  justify-self:center;
}
#selectedRecipeCard .selectedItemMini .selCopy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
}
#selectedRecipeCard .selectedItemMini .selCopy b{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#selectedRecipeCard .selectedItemMini .selCopy small{
  opacity:.8;
}

/* ===== v7.37 — selected item node final + invisible tree scrollbar ===== */

#selectedRecipeCard.selectedRecipe{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  min-height:108px!important;
  padding:10px!important;
  border:1px solid #263944!important;
  background:#0b161e!important;
}

#selectedRecipeCard .selectedItemMini{
  position:relative!important;
  width:132px!important;
  min-width:132px!important;
  min-height:132px!important;
  padding:23px 8px 10px!important;
  box-sizing:border-box!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;

  border:1px solid #8c52b5!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,#151925 0%,#0d171f 100%)!important;
  box-shadow:
    0 8px 24px rgba(0,0,0,.30),
    0 0 20px rgba(147,75,198,.10)!important;
}

#selectedRecipeCard .selectedItemBadge{
  position:absolute!important;
  top:6px!important;
  left:6px!important;
  padding:2px 5px!important;
  border:1px solid #71408f!important;
  border-radius:4px!important;
  background:#2a1837!important;
  color:#dea8ff!important;
  font-size:9px!important;
  line-height:1.1!important;
  font-weight:900!important;
  letter-spacing:.3px!important;
}

#selectedRecipeCard .selectedItemMini .selIcon{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  object-fit:contain!important;
  border:0!important;
  background:transparent!important;
}

#selectedRecipeCard .selectedItemMini .selCopy{
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  text-align:center!important;
}

#selectedRecipeCard .selectedItemMini .selCopy b{
  width:100%!important;
  max-width:116px!important;
  display:block!important;
  margin:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  text-align:center!important;
  font-size:12px!important;
}

#selectedRecipeCard .selectedItemMini .selCopy small{
  display:block!important;
  margin:0!important;
  color:#93a4ad!important;
  font-size:10px!important;
  text-align:center!important;
}

/* Hide tree scrollbars entirely but preserve mousewheel/touchpad scrolling. */
.treeViewport{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
.treeViewport::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}

/* ===== v7.38 — saved calculations ===== */
.savedCalcsOverlay{
  justify-content:center!important;
  align-items:center!important;
  padding:24px;
}
.savedCalcsDrawer{
  width:min(1050px,96vw);
  max-height:88vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:18px;
  border:1px solid #384c58;
  border-radius:10px;
  background:#0b161e;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
}
.savedCalcsDrawer .drawerHead{
  flex:0 0 auto;
  padding-bottom:10px;
  border-bottom:1px solid #263944;
}
.savedCalcsDrawer .drawerHead h2{
  font-size:20px!important;
}
.savedCalcsDrawer .drawerHead p{
  font-size:13px!important;
}
.savedCalcsToolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 0;
}
.savedCalcsToolbar span{
  color:#91a3ac;
  font-size:13px;
}
.savedCalcsList{
  min-height:180px;
  overflow:auto;
  display:grid;
  gap:9px;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:#485f6b #09131a;
}
.savedCalcCard{
  min-height:94px;
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:10px 12px;
  border:1px solid #293d48;
  border-radius:8px;
  background:#0d1921;
}
.savedCalcIcon{
  width:58px;height:58px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #3a4c57;
  border-radius:7px;
  background:#09141b;
}
.savedCalcIcon img{width:50px;height:50px;object-fit:contain}
.savedCalcMain{min-width:0}
.savedCalcTitle{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.savedCalcTitle b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:15px!important;
}
.savedCalcTitle small{
  margin-left:auto;
  color:#728690;
  white-space:nowrap;
  font-size:11px!important;
}
.savedCalcMeta,.savedCalcMoney{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-top:6px;
  color:#8fa1aa;
  font-size:12px!important;
}
.savedCalcMeta b,.savedCalcMoney b{
  color:#e5ecef;
  font-size:12px!important;
}
.savedCalcMoney b.good{color:#4dde74}
.savedCalcMoney b.bad{color:#ff6871}
.savedCalcActions{
  display:flex;
  gap:7px;
}
.savedCalcActions .uiBtn{
  min-width:92px;
  height:34px;
}
.savedCalcsEmpty{
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#768b96;
  border:1px dashed #30434e;
  border-radius:8px;
}
@media(max-width:800px){
  .savedCalcCard{grid-template-columns:52px minmax(0,1fr)}
  .savedCalcActions{grid-column:1/-1;justify-content:flex-end}
}