.tree-node .tree-node-meta{margin-top:0}.tree-card-costs{display:block;width:100%;margin-top:auto;padding:7px 2px 0;border-top:1px solid #e1e7da}.tree-cost-label{display:block;font-size:10px;line-height:1.4;color:#657657;margin-bottom:5px}.tree-cost-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px}.tree-cost-chip{display:flex;align-items:center;gap:3px;min-width:0;white-space:nowrap;font-size:12px;color:#334a2c}.tree-cost-chip b{font-weight:650;letter-spacing:-.1px}.tech-resource-icon{height:20px;width:20px;display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden}.tech-resource-icon>img{width:20px;height:20px;object-fit:contain;max-width:none}.tree-resource-key{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 6px}.tree-resource-key>span{display:flex;align-items:center;gap:6px;font-size:12px;color:#4d6544}.tree-cost-note{font-size:12px;color:#66765c;margin:6px 0 14px;line-height:1.5}.tree-card-costs.complete{font-size:11px;color:#486e35;padding:12px 0;min-height:48px}.tree-node.has-plan .tree-card-costs{border-top-color:#d2dfc4}
@media(max-width:600px){.tree-cost-grid{gap:3px 8px}.tree-cost-chip{font-size:11px;gap:3px}.tree-cost-chip b{letter-spacing:-.3px}.tree-cost-label{font-size:9px;margin-bottom:3px}.tree-card-costs{padding-top:5px}.tree-resource-key{gap:6px 12px}.tree-resource-key>span{font-size:11px}.tree-cost-note{font-size:11px}.tree-resource-key .tech-resource-icon{height:20px;width:20px}}

.tree-card-costs{flex:none}.tree-node-meta{max-width:100%}
.tree-node-open{border:0;background:none;box-shadow:none;padding:0;margin:0;width:100%;min-height:0;display:flex;flex-direction:column;align-items:center;gap:4px;color:inherit;font:inherit;cursor:pointer;border-radius:6px}.tree-node-open:hover{background:transparent;box-shadow:none}.tree-node-open:focus-visible{outline:2px solid #547b42;outline-offset:3px}.tree-node:focus-within{z-index:2;border-color:#547b42}.tree-level-controls{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;margin-top:auto;min-height:30px}.tree-level-controls button{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:28px;width:28px;min-height:28px;height:28px;padding:0;border:1px solid #d5dfcf;border-radius:6px;background:#f4f7ef;color:#365b2b;font-size:22px;line-height:1;cursor:pointer}.tree-level-controls button:hover:not(:disabled){background:#e5eedb;border-color:#789566}.tree-level-controls button:disabled{opacity:.28;cursor:default}.tree-card-level{font-size:11px;font-weight:650;white-space:nowrap;text-align:center;color:#506448}.tree-node .tree-card-costs{margin-top:0;padding-top:6px}.tree-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){.tree-level-controls{gap:0;min-height:26px}.tree-level-controls button{width:24px;min-width:24px;height:26px;min-height:26px;font-size:21px}.tree-card-level{font-size:10px}.tree-node-open{gap:3px}.tree-node .tree-card-costs{padding-top:4px}}
.tree-pan-toolbar{display:none}
#tree-results:focus-visible{outline:2px solid #5d814a;outline-offset:3px;border-radius:14px}
@media(max-width:700px){
 #tree-results{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#9aad91 #edf1e8;border-radius:14px;-webkit-overflow-scrolling:touch}
 #tree-results .profession-tree{width:840px;min-width:840px}
 .tree-pan-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 8px;color:#52674b}
 .tree-pan-toolbar>span{font-size:12px;text-align:center;line-height:1.4}
 .tree-pan-toolbar>button{width:40px;min-width:40px;min-height:40px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid #c8d5bf;border-radius:8px;background:#fff;color:#426238;font-size:26px;line-height:1}
 .tree-pan-toolbar>button:disabled{opacity:.35}
 .tree-node{padding:10px 8px}
 .tree-node-name{font-size:14px;min-height:36px;-webkit-line-clamp:2}
 .tree-node-effect{font-size:12px;min-height:32px}
 .tree-node-meta{font-size:11px;padding:2px 7px}
 .tree-level-controls{gap:8px;min-height:36px}
 .tree-level-controls button{width:36px;min-width:36px;height:36px;min-height:36px;font-size:25px}
 .tree-card-level{font-size:12px;min-width:38px}
 .tree-cost-chip{font-size:12px}
 .tree-cost-grid{gap:4px 10px}
}