.xfactorSkillTreeWrap { position:relative; display:block; width:100%; }
.xfactorSkillTreeCanvas { display:block; width:100%; height:600px; background:#0b0b0b; border:2px solid #2a2a2a; border-radius:8px; outline:none; cursor:grab; }
.xfactorSkillTreeCanvas:active { cursor:grabbing; }

/* tiny overlay ui */
.xfactorSkillTreeUi { position:absolute; top:10px; left:10px; display:inline-flex; gap:8px; align-items:center; background:rgba(15,15,15,.8); padding:8px 10px; border-radius:8px; border:1px solid #2a2a2a; backdrop-filter: blur(4px); }
.xfactorSkillTreeUi .stRow { display:flex; gap:8px; align-items:center; }
.stBtn { appearance:none; border:1px solid #3a3a3a; background:#1a1a1a; color:#fff; padding:6px 10px; border-radius:6px; font:14px/1 Arial; }
.stBtn:hover { background:#232323; }
.stBtn.stActive { background:#2b5cff; border-color:#2b5cff; }
.stLabel { color:#aaa; font:13px/1 Arial; }
.stSelect, .stInput { background:#111; color:#fff; border:1px solid #3a3a3a; border-radius:6px; padding:5px 8px; font:14px/1 Arial; }
.stHint { color:#8a8a8a; font:12px/1 Arial; }
/* existing rules you already have ... */

.stBtn.stActive { background:#2b5cff; border-color:#2b5cff; color:#fff; }



.stSettings.stOpen{ width:40%; } /* adjust width if you want */
.stSettingsInner{ display:flex; flex-direction:column; height:100%; padding:14px; gap:12px; }
.stSettingsHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.stSettingsTitle{ color:#fff; font:600 16px Arial; }
/* icon-style button used in headers (settings close) */
.stIconBtn{
  width:36px; height:36px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:#1b1b1b; border:1px solid #333; color:#ddd;
  font:20px/1 Arial; cursor:pointer;
}
.stIconBtn:hover{ background:#232323; }

/* if you prefer a red close, uncomment:
.stCloseTools{ background:#b51212; border-color:#b51212; color:#fff; }
.stCloseTools:hover{ filter:brightness(1.1); }
*/
.stGearBtn { position:absolute; top:10px; right:10px; z-index:13; width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:#1b1b1b; border:1px solid #333; color:#ddd; cursor:pointer; }
.stGearBtn:hover { background:#232323; }
.stGearBtn.isOpen { background:#b51212; border-color:#b51212; color:#fff; }

.stSettings { position:absolute; top:0; right:0; height:100%; width:0; overflow:hidden; background:rgba(12,12,12,.96); border-left:1px solid #2a2a2a; transition:width .18s ease; z-index:11; }
.stSettings.stOpen { width:40%; }
.stSettingsInner { display:flex; flex-direction:column; height:100%; padding:14px; gap:12px; }
.stSettingsHead { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.stSettingsTitle { color:#fff; font:600 16px Arial; }
.stSettings .stRow { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.stSettings .stLabel { color:#ccc; font:13px Arial; }
.xfactorSkillTreeCanvas { touch-action: none; }
/* tabs */
.stTabs{ display:flex; gap:0px; padding:0px 10px 0 10px; }
.stTab{ padding:2px 2px; border-radius:10px; background:#121212; color:#ddd; border:1px solid #2a2a2a; cursor:pointer; }
.stTab.stActive{ background:#1e1e1e; color:#fff; border-color:#3a3a3a; }

/* panes */
.stPanes{ padding:10px; }
.stPane{ display:none; }
.stPane.stShown{ display:block; }

/* fields */
.stFieldLabel{ display:block; font-size:13px; color:#bbb; margin:8px 0 6px; }
.stInput{ width:100%; box-sizing:border-box; padding:10px; border-radius:10px; background:#101010; color:#eee; border:1px solid #2b2b2b; }
.stFieldRow{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.stRange{ flex:1; }
.stRangeVal{ min-width:28px; text-align:center; color:#ddd; }

/* lists */
.stList{ display:flex; flex-direction:column; gap:10px; }
.stListRow{ padding:10px 12px; border-radius:12px; background:#101010; border:1px solid #262626; }
.stListTitle{ color:#fff; font-weight:700; }
.stListNote{ color:#bbb; font-size:12px; margin-top:4px; }

/* timeline keeps your existing stTimeRow styles */
.stPrimary{ background:#1e88ff; color:#fff; border:1px solid #2a6fd6; border-radius:10px; padding:8px 14px; }
.stPrimary.stSavedFlash{ filter:brightness(1.2); }
/* scope everything so the site theme cannot override */
.xfactorSkillTreeWrap .stSettingsInner,
.xfactorSkillTreeWrap .stDetailInner {
  color: #f5f7fb;
}

/* inputs and selects */
.xfactorSkillTreeWrap .stInput,
.xfactorSkillTreeWrap .stSelect,
.xfactorSkillTreeWrap .stRange,
.xfactorSkillTreeWrap textarea.stInput {
  width: 100%;
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  box-shadow: inset 0 0 0 9999px rgba(0,0,0,0); /* kill autofill tint */
}

/* focus ring */
.xfactorSkillTreeWrap .stInput:focus,
.xfactorSkillTreeWrap .stSelect:focus,
.xfactorSkillTreeWrap textarea.stInput:focus {
  border-color: #6ea8ff;
  box-shadow: 0 0 0 2px rgba(110,168,255,0.25);
}

/* placeholder */
.xfactorSkillTreeWrap .stInput::placeholder,
.xfactorSkillTreeWrap textarea.stInput::placeholder {
  color: rgba(255,255,255,0.55);
}

/* labels and hint */
.xfactorSkillTreeWrap .stLabel { color: #e9eef7; opacity: 0.9; }
.xfactorSkillTreeWrap .stHint  { color: rgba(255,255,255,0.7); }

/* buttons in settings */
.xfactorSkillTreeWrap .stBtn {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 8px 12px;
}
.xfactorSkillTreeWrap .stBtn.stPrimary { background: #2f6fed; border-color: #2f6fed; }

/* make the native dropdown list readable */
.xfactorSkillTreeWrap .stSelect option {
  color: #111;
  background: #fff;
}

/* fix webkit autofill turning text yellow */
.xfactorSkillTreeWrap input.stInput:-webkit-autofill,
.xfactorSkillTreeWrap textarea.stInput:-webkit-autofill,
.xfactorSkillTreeWrap select.stSelect:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.06) inset;
  transition: background-color 99999s ease 0s;
}
.stConnStrip{display:flex;gap:8px;overflow-x:auto;padding:6px 2px}
.stConnStrip::-webkit-scrollbar{height:8px}
.stConnCard{min-width:120px;border:1px solid rgba(255,255,255,0.12);background:#0f0f0f;border-radius:10px;padding:6px;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.stConnCard img{width:100%;height:72px;object-fit:cover;border-radius:8px;background:#111}
.stConnTitle{margin-top:6px;font-size:.9rem;color:#fff;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stCtxMenu .stCtxCard{
  background:#141414;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  padding:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);
  display:block;
}
.stCtxMenu .stCtxItem{
  padding:6px 10px;
  font-size:13px;
}
/* floating context-menu root */
.stCtx{ position:fixed; z-index:99999; display:none; left:0; top:0; }

/* the card you already build inside ctx */
.stCtxCard{ background:#141414; border:1px solid #2a2a2a; border-radius:10px; padding:8px; box-shadow:0 6px 24px rgba(0,0,0,0.35); }
.stCtxItem{ display:block; width:100%; text-align:left; margin:4px 0; }
/* Make the micro panel scroll vertically if it overflows */
.stDetail { max-height: 100%; }

.stDetail .stDetailInner{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;           /* keep header fixed */
}

.stDetail .stPanes{
  flex: 1 1 auto;
  min-height: 0;              /* enables child overflow scrolling */
}

.stDetail .stPane{
  height: 100%;
  overflow-y: auto;           /* vertical scroll only */
  -webkit-overflow-scrolling: touch;
}

/* keep your existing show/hide logic intact */
.stPane.stShown{ display: block; }
.stPane:not(.stShown){ display: none; }
.stCtxMenu { pointer-events: auto; }
.stCtxCard { background:#111; border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:6px; box-shadow:0 8px 24px rgba(0,0,0,0.5); }
.stCtxItem { display:block; width:100%; text-align:left; padding:8px 12px; margin:4px 0; }
.stDanger { color:#ff7676; }
.stCtxItem:hover { background:rgba(255,255,255,0.06); }
.stConnCtx { z-index: 100000; }
.stCtxCard {
  background: #121212; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.stCtxItem { display:block; width:100%; text-align:left; margin:4px 0; }
.stDanger { color:#fff; background:#b64a4a; }
.stCtxMenu { pointer-events:auto; }
.stCtxCard { background:#141414; border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:8px; min-width:140px; box-shadow:0 10px 30px rgba(0,0,0,0.45); }
.stCtxItem { width:100%; text-align:left; padding:8px 10px; background:#1a1a1a; border:1px solid rgba(255,255,255,0.08); border-radius:8px; margin:4px 0; cursor:pointer; }
.stCtxItem:hover { background:#222; }
.stDanger { color:#ff6b6b; border-color:rgba(255,107,107,0.35); }
.stMenuRoot { padding: 16px; }
.stMenuHead { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.stMenuGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.stMenuCard {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  color: #eaeaea;
}
.stMenuCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.14);
}
.stMenuTitle { font-weight: 700; margin-bottom: 6px; }
.stMenuMeta  { font-size: 12px; opacity: 0.8; }
.stMenuPlus {
  display: grid; place-items: center; font-size: 48px; line-height: 1;
}
.stMenuPlus small { display: block; font-size: 13px; margin-top: 6px; opacity: 0.85; }
/* Menu container */
.stMenuRoot { padding: 18px; }

/* Heading */
.stMenuHead {
  font-size: 26px;
  font-weight: 800;
  color: #f5f7fb;
  letter-spacing: .2px;
  margin-bottom: 14px;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

/* Grid */
.stMenuGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}

/* Card base */
.stMenuCard {
  position: relative;
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 110px;
  padding: 16px 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 24px rgba(0,0,0,.38);
  color: #e9eefb;
  cursor: pointer;
  user-select: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
  backdrop-filter: blur(6px);
}

/* Subtle depth band that picks up the card color */
.stMenuCard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.10), transparent 40%),
    linear-gradient(90deg, var(--accent, #6aa0ff) 0, transparent 35%);
  mix-blend-mode: screen;
  opacity: .22;
  pointer-events: none;
}

/* Hover and focus */
.stMenuCard:hover,
.stMenuCard:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 14px 30px rgba(0,0,0,.48);
  border-color: rgba(255,255,255,.18);
}

/* Active press */
.stMenuCard:active { transform: translateY(0); }

/* Title and meta */
.stMenuTitle {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .2px;
  opacity: .96;
}
.stMenuMeta {
  font-size: 12px;
  opacity: .82;
}

/* Tiny color pill */
.stMenuPill {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}

/* Row top with icon and pill */
.stMenuTop {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Plus card */
.stMenuPlus {
  place-items: center;
  text-align: center;
  font-size: 48px;
  line-height: 1;
}
.stMenuPlus small {
  display: block;
  font-size: 13px;
  margin-top: 6px;
  opacity: .9;
}

/* Better contrast if the page behind is bright */
.xfactorSkillTreeWrap {
  background: radial-gradient(120% 100% at 10% 0%, rgba(255,255,255,.04), transparent 60%),
              linear-gradient(180deg, #0d0f12, #090a0c);
  border-radius: 18px;
  padding: 8px;
}

/* Motion respect */
@media (prefers-reduced-motion: reduce) {
  .stMenuCard { transition: none; }
}

/* container becomes a floating bottom sheet */
.stDetail{
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  bottom: 0;
  width: min(100%, 980px);
  height: 25vh;               /* bottom quarter */
  max-height: 420px;
  background: rgba(12,12,12,0.96);
  backdrop-filter: saturate(1.2) blur(6px);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.45);
  color: #fff;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  transition: transform 260ms ease, opacity 260ms ease;
  opacity: 0.98;
  padding: 10px 14px 14px;
}

/* open state slides up */
.stDetail.stOpen{
  transform: translateX(-50%) translateY(0);
}

/* little grab handle */
.stSheetGrab{
  width: 56px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  margin: 6px auto 8px;
}

/* header row */
.stDetailHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 6px;
}
.stDetailTitle{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* close as an X */
.stBtn.stClose{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 20px;
  line-height: 1;
}
.stBtn.stClose:hover{ background: rgba(255,255,255,0.14); }

/* tabs compact */
.stTabs{
  display: flex;
  gap: 8px;
  padding: 0 4px 6px;
}
.stTab{
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  font-size: 12px;
}
.stTab.stActive{ background: rgba(255,255,255,0.16); }

/* panes scroll inside */
.stPanes{
  position: relative;
  flex: 1;
  min-height: 0;
}
.stPane{
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 4px 4px 10px;
  display: none;
}
.stPane.stShown{ display: block; }

/* fields tighter for small height */
.stFieldLabel{ font-size: 12px; opacity: 0.9; }
.stInput, .stSelect, .stRange{ font-size: 14px; }
.stFieldRow{
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
}
.stConnStrip{
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 8px;
}
.stConnCard{
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 8px;
}
.stConnPlus{ display:flex; align-items:center; justify-content:center; }
.stConnPlusIcon{ font-size: 22px; margin-right: 6px; }

/* If you want it entirely removed from flow when closed */
.stDetail[aria-hidden="true"]{
  visibility: hidden;       /* prevents focus ring peeking while closed */
}

.stDetail.stOpen[aria-hidden="false"]{
  visibility: visible;
}

/* wrapper and canvas should never outrank the sheet */
.xfactorSkillTreeWrap{ position: relative; z-index: 0; overflow: visible; }
.xfactorSkillTreeWrap canvas{ position: relative; z-index: 1; }

/* right tools panel below the sheet */
.stSettings{ position: fixed; right: 16px; top: 16px; z-index: 9000; }

/* never let the wrapper clip or outrank overlays */
.xfactorSkillTreeWrap{ position:relative; z-index:0; overflow:visible; }
.xfactorSkillTreeWrap canvas{ position:relative; z-index:1; }



/* RIGHT SETTINGS PANEL (fixed size, not full screen) */
.stSettings{
  position:fixed; right:16px; top:72px; z-index:9000;
  width:360px; max-width:92vw; max-height:calc(100vh - 88px);
  background:#0f0f10; color:#e9e9ea; border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  overflow:auto; padding:14px; display:none;   /* hidden by default */
}
.stSettings.stOpen{ display:block; }
.stSettings .stRow{ display:flex; align-items:center; gap:10px; margin:10px 0; }
.stSettings .stLabel{ width:64px; opacity:.9; font-size:.9rem; }
.stSettings .stInput, .stSettings .stSelect{ flex:1; }

/* BOTTOM SHEET DETAIL — overlays the canvas, not pushing layout */
.stDetail{
  position:fixed; left:50%; bottom:0; transform:translateX(-50%) translateY(100%);
  width:min(920px, 96vw); max-height:84vh; z-index:10000;
  background:#0f0f10; color:#f0f0f0; border-radius:16px 16px 0 0;
  box-shadow:0 28px 90px rgba(0,0,0,.65);
  overflow:auto; pointer-events:none; transition:transform 220ms ease;
  display:none;                                /* hidden until opened */
}
.stDetail.stOpen{
  transform:translateX(-50%) translateY(0%);
  pointer-events:auto; display:block;
}

/* minor cosmetics for sheet */
.stDetail .stDetailHead{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; position:sticky; top:0; background:rgba(18,18,19,.9); backdrop-filter:blur(6px); }
.stDetail .stTabs{ display:flex; gap:8px; padding:8px 12px 0; position:sticky; top:52px; background:linear-gradient(180deg, rgba(18,18,19,.9), rgba(18,18,19,.0)); }
.stDetail .stPanes{ padding:12px 16px 18px; }
.stTab{ border:0; background:#1a1b1d; color:#dcdcdc; padding:6px 10px; border-radius:10px; cursor:pointer; }
.stTab.stActive{ background:#2a2b2e; }

/* cards in the connections strip */
.stConnStrip{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.stConnCard{ display:flex; flex-direction:column; gap:6px; width:120px; padding:10px; border-radius:12px; background:#141416; color:#eee; border:0; cursor:pointer; }
.stConnPlus{ justify-content:center; align-items:center; }
.stConnPlusIcon{ font-size:22px; margin-bottom:4px; }

/* context menu(s) */
.stCtxMenu, .stConnCtx{
  position:fixed; z-index:11000; display:none;
}
.stCtxCard{
  background:#101114; color:#eee; border-radius:12px; padding:8px;
  box-shadow:0 18px 60px rgba(0,0,0,.55); min-width:160px;
}
.stCtxItem{ display:block; width:100%; text-align:left; padding:8px 10px; border:0; background:transparent; color:#e8e8e8; border-radius:8px; cursor:pointer; }
.stCtxItem:hover{ background:#1b1c20; }
.stDanger{ color:#ff6b6b; }

.xfactorSkillTreeWrap { position: relative; }

.xfactorSkillTreeWrap .stGearBtn {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 1000 !important;
}

.xfactorSkillTreeWrap { position: relative; overflow: visible; }

/* make sure the canvas sits below overlays but above the page */
.xfactorSkillTreeWrap .xfactorSkillTreeCanvas {
  position: relative;
  z-index: 1;
}

/* your bottom floater overlay */
.xfactorSkillTreeWrap .stBottomFloater {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2000; /* higher than canvas and planes */
  pointer-events: auto;
}

.xfactorSkillTreeWrap { position: relative; overflow: visible; }

/* keep the WebGL canvas below overlays */
.xfactorSkillTreeWrap .xfactorSkillTreeCanvas { position: relative; z-index: 1; }

/* overlay sheet INSIDE the module (not the whole page) */
.xfactorSkillTreeWrap .stDetail {
  position: absolute;           /* was fixed */
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(100%);
  width: min(920px, 96%);
  max-height: 84vh;
  z-index: 3000;                /* higher than canvas, lower than gear if you like */
  display: none;                /* start hidden */
  pointer-events: none;
}

/* open state */
.xfactorSkillTreeWrap .stDetail.stOpen {
  transform: translateX(-50%) translateY(0);
  display: block;
  pointer-events: auto;
}

/* Sheet uses column layout; header/tabs fixed, content scrolls */
.xfactorSkillTreeWrap .stDetail {
  display: flex;
  flex-direction: column;
  overflow: hidden;            /* contain internal scroller */
}

/* header + tabs stay; panes area scrolls */
.xfactorSkillTreeWrap .stDetail .stPanes {
  flex: 1;
  min-height: 0;               /* critical for flex scroll areas */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
  padding-right: 6px;          /* room for scrollbar so content doesn't jump */
}

/* subtle, modern scrollbar */
.xfactorSkillTreeWrap .stDetail .stPanes::-webkit-scrollbar {
  width: 10px;
}
.xfactorSkillTreeWrap .stDetail .stPanes::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
}
.xfactorSkillTreeWrap .stDetail .stPanes::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.20);
  border-radius: 8px;
}
.xfactorSkillTreeWrap .stDetail .stPanes::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.28);
}
/* Firefox */
.xfactorSkillTreeWrap .stDetail .stPanes {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.28) rgba(255,255,255,0.06);
}

/* profile floater */
.xfactorSkillTreeWrap .stPfp{
  position:absolute;
  top:10px;
  left:10px;
  z-index:1500;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:rgba(0,0,0,0.66);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  padding:6px 10px;
  color:#fff;
  font-family:Arial, sans-serif;
  font-size:14px;
  line-height:1;
  user-select:none;
  pointer-events:none; /* do not block canvas drags */
}

.xfactorSkillTreeWrap .stPfpImg{
  width:36px;
  height:36px;
  border-radius:999px;
  box-shadow:0 0 0 2px rgba(255,255,255,0.08);
}

.xfactorSkillTreeWrap .stPfpName{
  opacity:0.95;
  letter-spacing:0.2px;
  font-weight:700;
}

/* profile card */
.stPfpCard{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,0.04);
  box-shadow:0 2px 10px rgba(0,0,0,0.25);
  backdrop-filter:saturate(120%) blur(6px);
  border:1px solid rgba(255,255,255,0.06);
  max-width:560px;
}

/* avatar */
.stPfpAvatar{ flex:0 0 auto; }
.stPfpImg{
  display:block;
  width:140px; height:140px; object-fit:cover;
  border-radius:20px;
  box-shadow:0 4px 16px rgba(0,0,0,0.35);
}

/* text stack */
.stPfpInfo{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  flex:1 1 auto;
}
.stPfpName{
  font-size:22px;
  font-weight:800;
  line-height:1.15;
  color:#f5f7fa;
  letter-spacing:0.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.stPfpAge{
  margin-top:6px;
  font-size:14px;
  font-weight:600;
  color:#c9d2dc;
  opacity:0.9;
}
.stPfpAgeVal{ color:#ffffff; }

/* score block */
.stPfpScore{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  padding-left:12px;
  min-width:92px;
  border-left:1px solid rgba(255,255,255,0.06);
}
.stPfpScoreNum{
  font-size:34px;
  font-weight:800;
  line-height:1;
  color:#ffffff;
}
.stPfpScoreLabel{
  margin-top:6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:#aeb8c4;
  opacity:0.9;
}

/* responsive nudge */
@media (max-width:560px){
  .stPfpImg{ width:110px; height:110px; border-radius:16px; }
  .stPfpCard{ gap:12px; padding:12px; }
  .stPfpName{ font-size:18px; }
  .stPfpScoreNum{ font-size:28px; }
}

/* pfp overlay card */
.stPfpCard{
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px 12px;
  border-radius:16px;
  background: rgba(0,0,0,0.0); /* transparent card */
  backdrop-filter: none;
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events:auto;
}

/* bigger avatar */
.stPfpPic{ flex:0 0 auto; }
.stPfpImg{
  display:block;
  width:176px;  /* match default size */
  height:176px;
  border-radius:50%;
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
}

/* right side text */
.stPfpInfo{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:260px;
}

.stPfpTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}

/* name with glow */
.stPfpName{
  font-size:28px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:0.3px;
  color:#ffffff;
  text-shadow:
    0 0 10px rgba(100,181,246,0.55),
    0 0 22px rgba(66,165,245,0.35);
}

/* glowing score on the right */
.stPfpScore{
  font-size:36px;
  line-height:1;
  font-weight:900;
  color:#ffffff;
  text-shadow:
    0 0 10px rgba(100,181,246,0.6),
    0 0 24px rgba(66,165,245,0.45);
  filter: drop-shadow(0 0 8px rgba(66,165,245,0.35));
}

/* bigger age line */
.stPfpAge{
  font-size:20px;            /* bumped */
  line-height:1.2;
  font-weight:700;
  color:rgba(255,255,255,0.92);
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
  opacity:0.95;
}

.stPfpImg{
  display:block;
  width: var(--pfp-size, 176px);
  height: var(--pfp-size, 176px);
  border-radius:50%;
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
}
/* place AFTER the 36px rule */
.xfactorSkillTreeWrap .stPfpImg {
  width: 88px !important;
  height: 88px !important;
}

/* stack the two minis vertically under the main profile image */
.stPfpPic{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.stPfpCrew{
  position:static;        /* was likely absolute */
  display:flex;
  flex-direction:column;  /* vertical stack */
  align-items:center;
  gap:8px;
  margin-top:10px;
}

.stMiniPfp{
  width:56px;
  height:56px;
  padding:0;
}

.stMiniPfp .stMiniImg{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

/* main row stays compact */
.stPfp{
  display:flex;
  align-items:center;
  gap:16px;
}

/* lock the main headshot size so siblings can't stretch it */
.stPfpPic{
  flex:0 0 auto;
  width:160px;           /* match your pfp size */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* minis live in their own dock below the main row */
.stPfpCrewDock{
  margin-top:10px;
  display:flex;
  justify-content:center;
}

/* stack minis vertically */
.stPfpCrew{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

/* mini button + image sizing */
.stMiniPfp{
  width:56px;
  height:56px;
  padding:0;
}
.stMiniPfp .stMiniImg{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

/* main headshot stays fixed size */
.stPfpPic{
  flex:0 0 auto;
  width:160px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.stPfpToggle{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}

/* dock hidden by default */
.stPfpCrewDock{
  display:none;
  margin-top:10px;
  justify-content:center;
  overflow:hidden;
  opacity:0;
  max-height:0;
  transition: opacity 180ms ease, max-height 180ms ease;
}

/* reveal when open */
.stCrewOpen .stPfpCrewDock{
  display:flex;
  opacity:1;
  max-height:200px;
}

/* stack minis vertically */
.stPfpCrew{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.stMiniPfp{
  width:56px;
  height:56px;
  padding:0;
}
.stMiniPfp .stMiniImg{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

/* hidden by default */
.stPfpCrewDock{
  display:none;
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition: opacity 180ms ease, max-height 180ms ease;
}

/* reveal when open */
.stPfpCard.stCrewOpen .stPfpCrewDock{
  display:flex !important;
  opacity:1;
  max-height:200px;
}

.stPfpToggle{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:inline-block;
}
.stPfpImg{ display:block; }

.xfactorSkillTreeWrap{ position:relative; }

.xfactorSkillTreeWrap > canvas{
  position:relative;
  z-index:0;
}

.stPfpCard{
  position:absolute;
  top:12px;
  left:12px;
  z-index:5000;
  pointer-events:auto;
}

.stPfpPic{ cursor:pointer; }

.xfactorSkillTreeWrap{ position:relative; }

.stPfpCard{
  position:absolute;
  top:12px;
  left:12px;
  z-index:5000;
  pointer-events:auto;
}

.stPfpPic{ position:relative; }

.stCrewToggle{
  position:absolute;
  top:6px;
  right:6px;
  width:28px;
  height:28px;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,0.65);
  color:#fff;
  font-size:16px;
  line-height:28px;
  text-align:center;
  cursor:pointer;
  z-index:10;
}

.stCrewToggle.isOpen{
  transform:rotate(180deg);
}

.stPfpCrew{
  display:flex;          /* will be set to none by JS initially */
  gap:8px;
  margin-top:8px;
}

/* let the profile card be clickable */
.xfactorSkillTreeWrap .stPfp,
.xfactorSkillTreeWrap .stPfpCard {
  pointer-events: auto !important;
}

/* make sure the toggle is fully clickable above the img */
.stCrewToggle { pointer-events: auto; z-index: 10; }

/* canvas stays under overlays */
.xfactorSkillTreeWrap .xfactorSkillTreeCanvas { z-index: 1; }
.stPfpCard { z-index: 5000; }

/* card stacks: row on top, dock below */
.stPfpCard{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* top row holds pic and info side by side */
.stPfpMainRow{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
}

/* dock spans under the row */
.stPfpCrewDock{
  width:100%;
  display:none;
  justify-content:flex-start;
  gap:8px;
  margin-top:10px;
  overflow:hidden;
  opacity:0;
  max-height:0;
  transition:opacity 180ms ease, max-height 180ms ease;
}

/* reveal when open */
.stPfpCard.stCrewOpen .stPfpCrewDock{
  display:flex;
  opacity:1;
  max-height:200px;
}

/* keep the avatar fixed size so minis do not affect it */
.stPfpPic{
  flex:0 0 auto;
  width:160px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* card on top of canvas, interactive */
.stPfpCard{
  position:absolute;
  top:12px; left:12px;
  z-index:5000;
  display:flex;
  flex-direction:column;    /* row on top, dock below */
  gap:10px;
  pointer-events:auto;
}

/* top row = headshot + name/score block */
.stPfpMainRow{
  display:flex;
  align-items:center;
  gap:16px;
}

/* keep headshot in flow (no absolute) */
.stPfpPic{
  flex:0 0 auto;
  width:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;        /* for corner toggle */
}

/* image sizing */
.stPfpImg{
  width:160px;
  height:160px;
  border-radius:50%;
  display:block;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}

/* text block */
.stPfpInfo{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; }

/* minis dock lives *below* the row, hidden by default */
.stPfpCrewDock{
  display:none;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
}

/* reveal when open */
.stPfpCard.stCrewOpen .stPfpCrewDock{ display:flex; }

/* mini heads */
.stMiniPfp{ width:56px; height:56px; padding:0; border:0; background:transparent; cursor:pointer; }
.stMiniPfp .stMiniImg{ width:100%; height:100%; border-radius:50%; object-fit:cover; }

/* corner toggle on the headshot */
.stCrewToggle{
  position:absolute;
  top:6px; right:6px;
  width:28px; height:28px;
  border:0; border-radius:999px;
  background:rgba(0,0,0,.65);
  color:#fff; font-size:16px; line-height:28px; text-align:center;
  cursor:pointer;
}
.stCrewToggle.isOpen{ transform:rotate(180deg); }

/* make sure the canvas is below overlays */
.xfactorSkillTreeWrap .xfactorSkillTreeCanvas{ position:relative; z-index:1; }

.stPfpCard{
  position:absolute;
  top:12px; left:12px;
  z-index:5000;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:auto;
}

.stPfpMainRow{
  display:flex;
  align-items:center;
  gap:16px;
}

.stPfpPic{
  flex:0 0 auto;
  width:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.stPfpImg{
  width:160px;
  height:160px;
  border-radius:50%;
  display:block;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}

.stPfpInfo{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* hard-disable any leftover crew UI if present in markup */
.stPfpCrewDock, .stPfpCrew, .stPfpToggle, .stCrewToggle { display:none !important; }

/* keep canvas below overlays */
.xfactorSkillTreeWrap .xfactorSkillTreeCanvas{ position:relative; z-index:1; }

/* card container */
.stPfpCard{
  position:absolute;
  top:12px;
  left:12px;
  z-index:5000;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none; /* ensure no clicks are captured */
}

/* main row layout */
.stPfpMainRow{
  display:flex;
  align-items:center;
  gap:12px;
}

/* image wrapper sized to the avatar */
.stPfpPic{
  flex:0 0 auto;
  width:88px;            /* match avatar */
  height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* avatar at 88px */
.stPfpImg{
  width:88px !important;
  height:88px !important;
  border-radius:50%;
  display:block;
  box-shadow:0 6px 22px rgba(0,0,0,0.35);
  pointer-events:none;   /* belt and suspenders */
}

/* right text stays flexible */
.stPfpInfo{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* responsive size on smaller screens */
@media (max-width:560px){
  .stPfpPic{ width:72px; height:72px; }
  .stPfpImg{ width:72px !important; height:72px !important; }
}

.xfactorSkillTreeWrap { position: relative; }

.stPfpFixed {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5000;
  pointer-events: auto;
}

.stPfpCard {
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.74);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
  width: 300px;
  max-width: 90vw;
}

.stPfpHead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.stPfpPicBtn { border: none; background: transparent; padding: 0; cursor: pointer; }
.stPfpImg { width: 68px; height: 68px; border-radius: 50%; display: block; box-shadow: 0 2px 10px rgba(0,0,0,0.35); }

.stPfpMain { display: grid; gap: 2px; }
.stPfpName { font-weight: 800; font-size: 18px; line-height: 1.1; color: #fff; letter-spacing: 0.2px; }
.stPfpMeta { display: flex; gap: 8px; }
.stPfpAge { font-size: 13px; color: rgba(255,255,255,0.8); }

.stPfpScoreWrap { text-align: right; min-width: 64px; }
.stPfpScore { font-weight: 800; font-size: 22px; color: #fff; line-height: 1; }
.stPfpScoreLabel { font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 2px; }

.stPfpMenu {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 180ms ease;
}
.stPfpMenu[data-open="true"] { max-height: 200px; }

.stMenuRow { display: flex; gap: 8px; flex-wrap: wrap; }
.stMenuBtn {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.stMenuBtn:hover { background: rgba(255,255,255,0.12); }

@media (max-width: 640px){
  .stPfpFixed {
    top: auto;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
  }
  .stPfpCard { width: calc(100vw - 24px); }
  .stPfpHead { grid-template-columns: auto 1fr; }
  .stPfpScoreWrap { grid-column: 1 / -1; text-align: left; margin-top: 6px; }
}

.xfactorSkillTreeWrap { position: relative; }

/* tiny, always top left */
.stPfpDock {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5000;
  background: transparent; /* fully transparent */
  pointer-events: auto;
}

/* small circular trigger */
.stPfpBtn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.stPfpBtn:hover { border-color: rgba(255,255,255,0.6); }
.stPfpImg { width: 38px; height: 38px; border-radius: 999px; display: block; }

/* popover menu */
.stPfpMenuPop {
  position: absolute;
  top: 50px;
  left: 0;
  display: grid;
  grid-auto-flow: row;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  background: transparent; /* no card background */
  border: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 160ms ease;
}

/* appear by expanding height */
.stPfpMenuPop[data-open="true"] {
  max-height: 160px;
}

/* outline-only buttons that read well over any bg */
.stMiniBtn {
  font-size: 12px;
  line-height: 1;
  padding: 8px 10px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 8px;
  cursor: pointer;
  backdrop-filter: none;
}
.stMiniBtn:hover {
  border-color: rgba(255,255,255,0.7);
}

/* keep same minimal position and size on mobile */
@media (max-width: 640px){
  .stPfpDock { top: 8px; left: 8px; }
  .stPfpBtn { width: 40px; height: 40px; }
  .stPfpImg { width: 34px; height: 34px; }
  .stPfpMenuPop { top: 46px; }
}
.xfactorSkillTreeWrap { position: relative; }

/* top left, transparent */
.stPfpBadge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5000;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 10px;
  background: transparent;
  pointer-events: auto;
}

/* circle image */
.stPfpBadgeImg {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: block;
}

/* text block */
.stPfpBadgeText {
  display: grid;
  grid-auto-flow: row;
  gap: 2px;
  background: transparent;
}

.stPfpBadgeName {
  font-size: 14px;
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.stPfpBadgeMeta {
  font-size: 12px;
  line-height: 1.1;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}

/* mobile: keep small and tight */
@media (max-width: 640px){
  .stPfpBadge { top: 8px; left: 8px; gap: 8px; }
  .stPfpBadgeImg { width: 40px; height: 40px; }
  .stPfpBadgeName { font-size: 13px; }
  .stPfpBadgeMeta { font-size: 11px; }
}
/* Detail panel: minimal spacing */
.stDetail {
  padding: 6px !important;   /* set to 0 if you want edge-to-edge */
  margin: 0 !important;
}

/* Header row */
.stDetailHead {
  position: relative;         /* anchors the absolute close btn */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px !important;
  margin: 0 !important;
}

/* Small close button, visually at the left of the title */
.stDetailClose {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

/* Push the title right so the × sits visually to its left */
.stDetailTitle {
  margin: 0 !important;
  padding: 0 0 0 0px !important;  /* room for the × */
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* Optional: tiny hover polish for the × */
.stDetailClose:hover { color: #fff; }

.stDetailHead{
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin: 0;
}
.stDetailClose{
  position: absolute;
  left: 6px;
  top: 6px;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: rgba(255,255,255,0.9);
  font-size: 14px; line-height: 1; cursor: pointer;
}
.stDetailTitle{
  margin: 0;
  padding-left: 26px;  /* space so title doesn’t overlap the × */
  font-size: 20px; font-weight: 800; letter-spacing: .3px;
}

/* Detail header: tighter gap so the X hugs the title */
.stDetailHead {
  display: flex;
  align-items: center;
  gap: 6px;              /* minimal space */
  padding: 6px 10px 4px; /* slightly tighter header */
}

/* Modern circular X button */
.stClose {
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;           /* crisp “×” */
  line-height: 1;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.10);
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08),
              0 4px 14px rgba(0,0,0,0.28);
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

/* Hover/focus/active states */
.stClose:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10),
              0 6px 18px rgba(0,0,0,0.35);
}
.stClose:active {
  transform: translateY(0);
  background: rgba(255,255,255,0.22);
}
.stClose:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(84,160,255,0.65), 0 6px 18px rgba(0,0,0,0.35);
}

/* Keep the title tight and strong */
.stTitle {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.98);
  text-shadow: 0 0 10px rgba(120,180,255,0.35), 0 0 18px rgba(120,180,255,0.22);
  margin: 0;
}

/* Reduce motion if user prefers */
@media (prefers-reduced-motion: reduce) {
  .stClose { transition: none; }
}

/* Small, circular, modern close (matches class="StClose") */
button.StClose {
  width: 20px;
  height: 20px;
  aspect-ratio: 1 / 1;        /* force perfect circle */
  border-radius: 50%;
  display: inline-grid;       /* easy centering */
  place-items: center;
  padding: 0;                 /* override any framework padding */
  min-width: 0;               /* override any min-width */
  box-sizing: border-box;

  font-size: 13px;            /* crisp “×” */
  line-height: 1;
  font-weight: 700;

  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.10);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 4px 14px rgba(0,0,0,0.28);
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
button.StClose:hover {
  background: rgba(255,255,255,0.16);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 6px 18px rgba(0,0,0,0.35);
}
button.StClose:active { transform: translateY(0); background: rgba(255,255,255,0.22); }
button.StClose:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(84,160,255,0.65), 0 6px 18px rgba(0,0,0,0.35); }

/* Tighten spacing between X and title */
.stDetailHead { display:flex; align-items:center; gap:4px; padding:6px 10px 4px; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  button.StClose { transition: none; }
}

/* Wins over .xfactorSkillTreeWrap .stBtn and .stBtn.stClose */
.xfactorSkillTreeWrap .stDetailHead .stBtn.stClose,
.stDetailHead .stBtn.stClose {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1;
  border-radius: 9999px !important;

  display: inline-grid;
  place-items: center;

  font-size: 13px;
  line-height: 1;
  font-weight: 700;

  background: rgba(255,255,255,0.10) !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 4px 14px rgba(0,0,0,0.28);
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.stDetailHead .stBtn.stClose:hover { background: rgba(255,255,255,0.16); transform: translateY(-1px); }
.stDetailHead .stBtn.stClose:active { transform: translateY(0); background: rgba(255,255,255,0.22); }

/* Remove all padding from the tabs row */
.stTabs {
  padding: 0 !important;
}
/* Make the stDetail container itself have 1px padding */
.stDetail {
  padding: 1px !important;
  box-sizing: border-box;
}
/* Let the pane size naturally and occupy space */
.stPanes {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;          /* important for flex + overflow */
  overflow: hidden;
}

.stPane {
  position: static;       /* ← remove absolute layout */
  display: none;
  overflow: auto;
  padding: 4px 4px 10px;
}

.stPane.stShown { display: block; }
* Make the detail a column with a dedicated scroll area */
.stDetail{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0; /* critical for nested scrolls */
}

/* Header + tabs are fixed height */
.stDetailHead,
.stTabs{
  flex:0 0 auto;
}

/* Panes area fills the rest */
.stPanes{
  flex:1 1 auto;
  min-height:0;         /* allows child to shrink for overflow */
  position:relative;    /* not strictly required here */
  overflow:hidden;      /* contain child scrolling */
}

/* Active pane scrolls */
.stPane{
  display:none;
  height:100%;                 /* <-- gives it a scroller box */
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:4px 4px 10px;
}

.stPane.stShown{ display:block; }

/* Ensure the vertical scroller is on .stPanes */
.xfactorSkillTreeWrap .stDetail { 
  display: flex; 
  flex-direction: column; 
  height: 100%; 
  min-height: 0;
}

.xfactorSkillTreeWrap .stDetail .stPanes{
  flex: 1 1 auto;
  min-height: 0;
  /* defeat the later `.stPanes { overflow:hidden }` rule */
  overflow-y: auto !important;
  overflow-x: hidden;
  display: block;      /* we don’t need it to be a flex container */
  padding-right: 6px;
  -webkit-overflow-scrolling: touch;
}

/* Keep panes simple: the shown one is just block content */
.xfactorSkillTreeWrap .stDetail .stPane{
  display: none;
  position: relative;
  max-height: none;
  overflow: visible;
  padding: 4px 4px 10px;
}

.xfactorSkillTreeWrap .stDetail .stPane.stShown{
  display: block;
}

/* Stop full-height stretch and hard-cap */
.xfactorSkillTreeWrap .stDetail{
  height: auto !important;         /* override height:100% */
  max-height: 76vh !important;     /* cap so tree stays visible */
  width: min(860px, 96vw) !important;
  overflow: hidden !important;     /* container doesn't scroll */
  display: flex !important;
  flex-direction: column !important;
}

/* Keep it centered at bottom */
.xfactorSkillTreeWrap .stDetail.stOpen{
  left: 50% !important;
  bottom: 0 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Make the content area scroll, not the shell */
.xfactorSkillTreeWrap .stDetail .stPanes{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Safety: prevent any other rule from forcing 100% height */
.xfactorSkillTreeWrap .stDetail[style*="height: 100%"]{
  height: auto !important;
}
/* Fixed, consistent panel height (adjust the clamp as you like) */
.xfactorSkillTreeWrap .stDetail{
  /* pick one: clamp keeps it responsive but stable */
  height: clamp(320px, 38vh, 500px) !important;
  max-height: none !important;   /* prevent re-capping */
  min-height: 0 !important;
  overflow: hidden !important;   /* shell never scrolls */
  display: flex !important;
  flex-direction: column !important;
}

/* Header + tabs won’t affect outer height */
.xfactorSkillTreeWrap .stDetail .stDetailHead,
.xfactorSkillTreeWrap .stDetail .stTabs{
  flex: 0 0 auto;
}

/* Content area fills the remaining fixed space and scrolls */
.xfactorSkillTreeWrap .stDetail .stPanes{
  flex: 1 1 auto !important;
  min-height: 0 !important;       /* critical for nested scroll */
  overflow: hidden !important;     /* panes handle their own scroll */
  position: relative !important;
}

/* Each pane overlays the same fixed area; only .stShown is visible */
.xfactorSkillTreeWrap .stDetail .stPane{
  position: absolute !important;
  inset: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  display: none;
}
.xfactorSkillTreeWrap .stDetail .stPane.stShown{ display: block; }

/* Safety: prevent any inline height:100% from reintroducing jumps */
.xfactorSkillTreeWrap .stDetail[style*="height: 100%"]{
  height: clamp(320px, 60vh, 720px) !important;
}

/* Hide Title (input + its label) */
.xfactorSkillTreeWrap .stDetail .stPaneSettings .stTitleInput { display: none; }
.xfactorSkillTreeWrap .stDetail .stPaneSettings label:has(+ .stTitleInput) { display: none; }

/* Optional: hide the gradient value readout if it exists outside the row */
.xfactorSkillTreeWrap .stDetail .stPaneSettings .stGradVal { display: none; }

/* ---- Detail panel positioning override (rise from bottom over canvas) ---- */
.xfactorSkillTreeWrap{
  position: relative;
}
.xfactorSkillTreeWrap .stDetail{
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) translateY(100%) !important;
  bottom: 0 !important;
  z-index: 10 !important;
}
.xfactorSkillTreeWrap .stDetail.stOpen{
  transform: translateX(-50%) translateY(0) !important;
}