#app > #skill-tree-screen.rem-port .panel-wrap { padding-bottom:16px !important; }
#app > #skill-tree-screen.rem-port .panel-head { padding-bottom:10px !important; }
#app > #skill-tree-screen.rem-port .panel-head p { display:none !important; }
#app > #skill-tree-screen.rem-port #skill-tree-note { font-size:11px !important; padding:6px 0 !important; margin:6px 0 !important; }
#app > #skill-tree-screen.rem-port .research-bonus-summary { margin-bottom:8px; }
#app > #skill-tree-screen.rem-port .research-bonus-summary > summary { min-height:30px; padding:5px 0; font-size:11px; }
#app > #skill-tree-screen.rem-port .tree-controls { display:flex; align-items:center; gap:5px; padding:8px 0; }
#app > #skill-tree-screen.rem-port .tree-controls button { padding:7px 8px !important; min-height:36px !important; font-size:11px !important; border:1px solid #9eaa9155 !important; border-radius:3px !important; background:#273a3f !important; color:#e0e6d2 !important; }
.tree-zoom { margin-left:auto; display:flex; align-items:center; gap:3px; }
.tree-zoom output { width:36px; text-align:center; color:#b2c4b8; font:11px Bahnschrift,sans-serif; }
#app > #skill-tree-screen.rem-port .tree-zoom button { min-width:34px; font-size:18px !important; }
.tree-legend { display:flex; gap:12px; flex-wrap:wrap; padding:3px 0 9px; color:#aabdb5; font-size:10px; }
.tree-legend span::before { content:''; display:inline-block; width:7px; height:7px; margin-right:4px; border:1px solid currentColor; border-radius:50%; }
.tree-legend .owned { color:#9adcb7; }
.tree-legend .owned::before { background:currentColor; }
.tree-legend .available { color:#ede1a8; }
.tree-legend .route { color:#86d5f2; }
#app > #skill-tree-screen.rem-port .research-tree-viewport { position:relative; height:clamp(300px,47svh,520px); overflow:auto; border:1px solid #839c9066; border-top:2px solid #b3b790; background:radial-gradient(ellipse at 50% 0,#41665b33,transparent 65%),repeating-linear-gradient(0deg,#acccb004 0 1px,transparent 1px 26px),#0c1b21; overscroll-behavior:contain; touch-action:pan-x pan-y; scrollbar-width:thin; scrollbar-color:#809a8b #15262a; }
.research-tree-space { position:relative; }
.research-tree-canvas { position:absolute; inset:0 auto auto 0; transform-origin:0 0; }
.research-tree-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.tree-edge { stroke:#61766c; stroke-width:2; fill:none; opacity:.52; }
.tree-edge.owned { stroke:#95d3b3; opacity:.95; stroke-width:3; }
.tree-edge.next { stroke:#d6ce9b; stroke-dasharray:5 6; opacity:.9; }
.tree-edge.route { stroke:#8ed5ed; stroke-width:3; opacity:1; }
#app > #skill-tree-screen.rem-port .tree-node { position:absolute; transform:translate(-50%,-28px); display:flex !important; flex-direction:column; align-items:center; width:100px; min-height:98px !important; padding:0 !important; color:#d0dace !important; border:0 !important; background:none !important; box-shadow:none !important; border-radius:0 !important; text-align:center !important; }
.tree-node__socket { position:relative; display:grid; place-items:center; width:56px; height:56px; border:2px solid #64776d; border-radius:50%; background:linear-gradient(150deg,#263d3f,#14242c); box-shadow:0 0 0 4px #0b1a20,0 0 0 5px #66786b44; color:#9bb5ac; }
.tree-node__socket .facility-glyph { width:30px; height:30px; }
.tree-node__socket i { position:absolute; right:-4px; bottom:-1px; display:grid; place-items:center; width:17px; height:17px; font:12px Bahnschrift,sans-serif; background:#172830; color:#99aca5; border:1px solid #688072; border-radius:50%; }
.tree-node.owned .tree-node__socket { border-color:#8ad2a5; background:linear-gradient(150deg,#487258,#203e37); color:#d4f3cb; }
.tree-node.owned i { color:#d3f0c4; background:#356247; }
.tree-node.available .tree-node__socket { border-color:#efe1a7; background:linear-gradient(150deg,#665f37,#283830); color:#ffeabb; box-shadow:0 0 0 4px #0b1a20,0 0 0 5px #c8b97955; }
.tree-node.available i { color:#142b2b; background:#e7dca6; }
.tree-node.materials .tree-node__socket { border-style:dashed; border-color:#c1b787; }
.tree-node.selected .tree-node__socket { outline:3px solid #91d9ee; outline-offset:6px; }
.tree-node.mastery .tree-node__socket { border-radius:12px; }
.tree-node__name { margin-top:10px; max-width:100%; line-height:1.35; font-size:11px; }
.tree-node__name,.tree-node > small { background:#0c1b21e8; padding:0 3px; }
.tree-node__name { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.tree-node > small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.tree-node > small { margin-top:3px; font-size:9px; color:#97aca2; max-width:104px; line-height:1.35; }
.tree-node.on-route .tree-node__name { color:#c2e6e9; }
#app > #skill-tree-screen.rem-port .tree-node:focus-visible { outline:1px solid #e3e0be; outline-offset:4px; }
.tree-gesture-hint { margin:7px 0; font-size:10px; color:#95aaa0; text-align:center; }
.tree-route-detail { margin:0 0 8px; }
.tree-route-detail > summary { cursor:pointer; min-height:32px; padding:6px 0; color:#bbd0c2; font-size:11px; }
.tree-route-detail nav { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:8px; max-height:220px; overflow:auto; }
#app > #skill-tree-screen.rem-port .tree-route-detail button { padding:6px 10px !important; font-size:11px !important; border:1px solid #698174 !important; background:#263b3c !important; color:#c8dcd0 !important; }
.tree-route-detail nav > span { padding-left:14px; color:#9cb9b0; }
#app > #skill-tree-screen.rem-port .research-detail { margin-top:8px !important; padding:12px 14px !important; }
#app > #skill-tree-screen.rem-port .research-detail h3 { font-size:16px !important; margin:5px 0 !important; }
#app > #skill-tree-screen.rem-port #skill-tree-detail-desc { margin:0; padding:3px 0 !important; font-size:10px !important; }
#app > #skill-tree-screen.rem-port #skill-tree-detail-cost { margin:0; padding:4px 0 !important; font-size:11px !important; }
#app > #skill-tree-screen.rem-port #skill-tree-detail-effects { margin:6px 0 !important; font-size:12px !important; }
#app > #skill-tree-screen.rem-port #skill-tree-unlock-btn { min-height:42px !important; font-size:14px !important; margin-top:8px; }
#app > #skill-tree-screen.rem-port .research-detail { position:sticky; bottom:8px; z-index:4; display:grid; grid-template-columns:minmax(0,1fr) 88px; gap:3px 9px; box-shadow:0 0 24px #06141bcc !important; }
#app > #skill-tree-screen.rem-port .research-detail__kicker { grid-column:1; grid-row:1; font-size:8px; }
#app > #skill-tree-screen.rem-port #skill-tree-detail-name { grid-column:1; grid-row:2; }
#app > #skill-tree-screen.rem-port #skill-tree-detail-desc { grid-column:1; grid-row:3; }
#app > #skill-tree-screen.rem-port #skill-tree-detail-effects { grid-column:1/-1; grid-row:4; }
#app > #skill-tree-screen.rem-port #skill-tree-detail-cost { grid-column:1/-1; grid-row:5; }
#app > #skill-tree-screen.rem-port #skill-tree-unlock-btn { grid-column:2; grid-row:1/4; align-self:center; margin:0 !important; width:100%; }
#app > #skill-tree-screen.rem-port .research-bonus-summary { margin-top:12px; }
@media (min-width:900px) {
  #app > #skill-tree-screen.rem-port .panel-wrap { max-width:1000px !important; }
  #app > #skill-tree-screen.rem-port .research-tree-viewport { height:520px; }
}