#cityOverlayFinalBody > #talScreen.asOverlayPanel .talentPointsBar,
#talScreen > .talentPointsBar{
  display:none !important;
}

#talScreen.oaiSkillsHosted{
  display:none !important;
}

#attrScreen.oaiTrainerPanel .oaiTrainerTalentWrap > #talBody.panelBody{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  overflow:hidden !important;
  border:0 !important;
  background:#050908 !important;
  box-shadow:none !important;
}

#attrScreen.oaiTrainerPanel .oaiTrainerTalentWrap > #talentPointsBar{
  display:none !important;
}

#cityOverlayFinalBody > #talScreen.asOverlayPanel > #talBody.panelBody,
#talScreen > #talBody.panelBody{
  position:absolute !important;
  inset:72px 12px 12px !important;
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  overflow:hidden !important;
  border:1px solid rgba(147,101,38,.58) !important;
  background:#050908 !important;
  box-shadow:inset 0 0 0 1px rgba(239,190,90,.06),inset 0 0 70px rgba(0,0,0,.7) !important;
}

.skillsApp{
  --skills-accent:#b76cff;
  position:relative;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  width:100%;
  height:100%;
  min-height:0;
  color:#d9c6a1;
  font-family:Georgia,"Times New Roman",serif;
  background:
    radial-gradient(circle at 48% 48%,color-mix(in srgb,var(--skills-accent) 8%,transparent),transparent 34%),
    linear-gradient(135deg,rgba(18,22,20,.98),rgba(3,7,6,.99) 52%,rgba(13,11,9,.98));
  overflow:hidden;
  container-type:inline-size;
  container-name:skills-panel;
}

.skillsApp::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(189,139,66,.24);
  clip-path:polygon(0 0,18px 0,18px 1px,calc(100% - 18px) 1px,calc(100% - 18px) 0,100% 0,100% 18px,calc(100% - 1px) 18px,calc(100% - 1px) calc(100% - 18px),100% calc(100% - 18px),100% 100%,calc(100% - 18px) 100%,calc(100% - 18px) calc(100% - 1px),18px calc(100% - 1px),18px 100%,0 100%,0 calc(100% - 18px),1px calc(100% - 18px),1px 18px,0 18px);
  pointer-events:none;
  z-index:5;
}

.skillsHero{
  position:relative;
  display:grid;
  grid-template-columns:118px minmax(0,1fr) 230px;
  align-items:center;
  min-height:112px;
  padding:10px 28px 8px 20px;
  border-bottom:1px solid rgba(161,111,43,.45);
  background:linear-gradient(180deg,rgba(18,22,20,.95),rgba(7,11,10,.8));
  box-sizing:border-box;
}

.skillsHeroSigil,
.skillsBranchSigil{
  background:url('../img/ui/skills_sigil_v522.png') center/contain no-repeat;
  filter:drop-shadow(0 0 15px color-mix(in srgb,var(--skills-accent) 34%,transparent));
}

.skillsHeroSigil{ width:94px;height:94px;justify-self:center; }
.skillsHeroCopy{ text-align:center; min-width:0; }
.skillsKicker{ color:#8e7650;font-size:10px;font-weight:700;letter-spacing:.17em; }
.skillsHeroCopy h2{
  margin:1px 0 2px;
  color:#eed4a3;
  font-family:"Cinzel","Trajan Pro",Georgia,serif;
  font-size:35px;
  line-height:1;
  font-weight:600;
  letter-spacing:.07em;
  text-shadow:0 2px 12px #000;
}
.skillsHeroCopy p{ margin:4px auto 0;max-width:620px;color:#b7a98d;font-size:13px;line-height:1.35; }

.skillsPoints{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:1px 12px;
  min-width:190px;
  padding:12px 15px;
  border:1px solid rgba(151,109,52,.52);
  background:linear-gradient(180deg,rgba(14,18,16,.96),rgba(5,8,7,.98));
  box-shadow:inset 0 0 18px rgba(0,0,0,.6),0 4px 12px rgba(0,0,0,.28);
}
.skillsPoints span{font-family:"Cinzel",Georgia,serif;font-size:11px;color:#c4a66e;letter-spacing:.06em;}
.skillsPoints strong{grid-row:1/3;grid-column:2;color:#f0d8aa;font-size:29px;font-weight:500;}
.skillsPoints strong i{font-style:normal;color:var(--skills-accent);font-size:22px;text-shadow:0 0 10px var(--skills-accent);}
.skillsPoints small{font-size:10px;color:#776f61;}

.skillsCategories{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  min-height:72px;
  margin:0 18px;
  border:1px solid rgba(143,102,47,.44);
  border-top:0;
  background:rgba(5,9,8,.91);
}
.skillsCategories button{
  position:relative;
  display:grid;
  grid-template-columns:42px 1fr;
  grid-template-rows:1fr 1fr;
  align-items:end;
  min-width:0;
  padding:8px 10px;
  border:0;
  border-right:1px solid rgba(126,93,46,.35);
  color:#a99470;
  background:linear-gradient(180deg,rgba(18,22,20,.72),rgba(7,10,9,.88));
  cursor:pointer;
}
.skillsCategories button:last-child{border-right:0;}
.skillsCategories button > span{grid-row:1/3;align-self:center;font-size:28px;color:#9d8b6f;filter:grayscale(.7);}
.skillsCategories button b{align-self:end;font-family:"Cinzel",Georgia,serif;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.skillsCategories button small{align-self:start;margin-top:2px;color:#665e52;font-size:9px;}
.skillsCategories button:hover{color:#e8cf9f;background:linear-gradient(180deg,rgba(37,36,30,.84),rgba(11,14,12,.94));}
.skillsCategories button.active{
  color:#f1d9aa;
  border-bottom:2px solid var(--category-accent);
  background:radial-gradient(circle at 50% 100%,color-mix(in srgb,var(--category-accent) 24%,transparent),transparent 60%),linear-gradient(180deg,rgba(28,27,24,.94),rgba(10,12,11,.98));
  box-shadow:inset 0 -14px 28px color-mix(in srgb,var(--category-accent) 9%,transparent);
}
.skillsCategories button.active > span{color:var(--category-accent);filter:none;text-shadow:0 0 10px var(--category-accent);}

.skillsWorkspace{
  display:grid;
  grid-template-columns:190px minmax(430px,1fr) 270px;
  min-height:0;
  margin:10px 18px 16px;
  border:1px solid rgba(130,94,43,.4);
  background:rgba(4,8,7,.74);
  overflow:hidden;
}

.skillsBranch,
.skillsDetail{
  position:relative;
  min-width:0;
  padding:18px 16px;
  box-sizing:border-box;
  background:linear-gradient(180deg,rgba(13,17,15,.94),rgba(4,7,6,.98));
}
.skillsBranch{border-right:1px solid rgba(126,91,42,.38);text-align:center;}
.skillsBranchSigil{width:136px;height:136px;margin:0 auto 8px;opacity:.82;}
.skillsBranch h3,.skillsDetail h3{margin:0;color:var(--skills-accent);font-family:"Cinzel",Georgia,serif;text-transform:uppercase;letter-spacing:.05em;}
.skillsBranch h3{font-size:20px;}
.skillsBranch > p{color:#ae9a78;font-size:13px;line-height:1.55;}
.skillsBranchNote{position:absolute;left:14px;right:14px;bottom:16px;padding-top:12px;border-top:1px solid rgba(134,95,40,.36);color:#696357;font-size:10px;line-height:1.45;}

.skillsTree{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,minmax(70px,1fr));
  grid-template-rows:repeat(3,minmax(112px,1fr));
  gap:10px 6px;
  align-items:center;
  justify-items:center;
  min-width:0;
  min-height:0;
  padding:18px 10px;
  box-sizing:border-box;
  overflow:auto;
  background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--skills-accent) 8%,transparent),transparent 45%);
}
.skillsConnectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible;}
.skillsConnectors path{fill:none;stroke:#3c3328;stroke-width:2;filter:drop-shadow(0 1px 1px #000);}
.skillsConnectors path.met{stroke:color-mix(in srgb,var(--skills-accent) 62%,#b58a49);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--skills-accent) 40%,transparent));}

.skillsNode{
  grid-row:var(--skill-row);
  grid-column:var(--skill-column);
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  align-content:center;
  width:94px;
  min-height:104px;
  padding:4px 3px 2px;
  border:0;
  color:#b9aa91;
  background:none;
  font-family:Georgia,"Times New Roman",serif;
  cursor:pointer;
}
.skillsNodeIcon{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  margin-bottom:4px;
  border:2px solid #705431;
  color:#d9c6a0;
  background:radial-gradient(circle at 50% 40%,#292722,#090b0a 72%);
  box-shadow:inset 0 0 0 3px #090a09,inset 0 0 0 4px rgba(192,139,65,.35),0 4px 10px #000;
  font-size:25px;
}
.skillsNodeName{display:block;width:100%;font-size:11px;line-height:1.1;white-space:normal;text-shadow:0 1px 2px #000;}
.skillsNodeRank{margin-top:3px;padding:1px 6px;border:1px solid #5e4930;border-radius:2px;color:#d1b985;background:#080a09;font-size:10px;}
.skillsNodeLock{position:absolute;top:23px;color:#786e60;font-size:14px;}
.skillsNode:hover .skillsNodeIcon,.skillsNode.selected .skillsNodeIcon{border-color:var(--skills-accent);color:#fff3d2;filter:brightness(1.16);box-shadow:inset 0 0 0 3px #090a09,inset 0 0 0 4px color-mix(in srgb,var(--skills-accent) 55%,transparent),0 0 13px color-mix(in srgb,var(--skills-accent) 42%,transparent);}
.skillsNode.invested .skillsNodeIcon,.skillsNode.maxed .skillsNodeIcon{border-color:#c58b3d;color:#fff0c5;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--skills-accent) 45%,#3b2b1e),#0a0b09 74%);}
.skillsNode.locked{opacity:.48;filter:grayscale(.82);}
.skillsNode.locked:hover{opacity:.72;}
.skillsNode.maxed .skillsNodeRank{border-color:var(--skills-accent);color:#efe1bf;}

.skillsDetail{border-left:1px solid rgba(126,91,42,.38);overflow:auto;}
.skillsDetailHead{display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid rgba(143,100,43,.42);}
.skillsDetailIcon{display:grid;place-items:center;width:66px;height:66px;border:2px solid var(--skills-accent);background:radial-gradient(circle,color-mix(in srgb,var(--skills-accent) 30%,#1d1918),#080a09 70%);box-shadow:inset 0 0 0 3px #080a09,0 0 13px color-mix(in srgb,var(--skills-accent) 35%,transparent);font-size:30px;}
.skillsDetailHead h3{font-size:16px;line-height:1.2;}
.skillsDetailHead div > span{display:inline-block;margin-top:7px;padding:2px 8px;border:1px solid var(--skills-accent);color:#d7c39a;background:#090b0a;font-size:11px;}
.skillsDescription{min-height:42px;margin:16px 0;color:#b4a285;font-size:12px;line-height:1.5;}
.skillsDetailDivider{height:1px;margin:10px 0 14px;background:linear-gradient(90deg,transparent,#896233,transparent);}
.skillsEffectLabel{margin:12px 0 4px;color:#9b7e51;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;}
.skillsEffect{padding:9px 10px;border-left:2px solid #665139;color:#d7c39e;background:rgba(20,22,18,.7);font-size:12px;line-height:1.35;}
.skillsEffect.current{border-color:var(--skills-accent);color:#d8ec9a;}
.skillsEffect.next{border-color:#9f7441;color:#d8c4a2;}
.skillsRequirement{margin:4px 0;color:#736d60;font-size:10px;line-height:1.35;}
.skillsRequirement.met{color:#84a86f;}
.skillsRequirement.locked{color:#ad725f;}
.skillsDetailAction{margin-top:16px;padding-top:14px;border-top:1px solid rgba(143,100,43,.42);}
.skillsDetailAction button,.skillsLoading button{
  width:100%;
  min-height:42px;
  border:1px solid #ad772e;
  color:#f0d8a8;
  background:linear-gradient(180deg,#5b1c13,#29100d);
  box-shadow:inset 0 0 0 2px #160b09,inset 0 1px rgba(255,221,148,.14);
  font-family:"Cinzel",Georgia,serif;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
}
.skillsDetailAction button:hover:not(:disabled),.skillsLoading button:hover{filter:brightness(1.22);}
.skillsDetailAction button:disabled{cursor:not-allowed;opacity:.48;filter:grayscale(.65);}
.skillsDetailAction p{margin:7px 0 0;color:#696357;font-size:9px;line-height:1.35;text-align:center;}

.skillsLoading{display:grid;place-content:center;justify-items:center;gap:14px;width:100%;height:100%;color:#cdb488;background:#060908;font-family:"Cinzel",Georgia,serif;}
.skillsLoading span{width:34px;height:34px;border:2px solid #4c3822;border-top-color:#c38a3d;border-radius:50%;animation:skills-spin .8s linear infinite;}
.skillsLoading button{width:180px;}
.skillsLoading.error strong{color:#d99779;}
.skillsToastError{position:absolute;left:50%;bottom:20px;z-index:8;transform:translateX(-50%);max-width:70%;padding:9px 16px;border:1px solid #8c4738;color:#f2b29b;background:rgba(40,12,9,.96);box-shadow:0 5px 18px #000;font-size:11px;}
.skillsEmpty{display:grid;height:100%;place-content:center;color:#7e7464;text-align:center;}

@keyframes skills-spin{to{transform:rotate(360deg);}}

@media (max-width:1180px){
  .skillsWorkspace{grid-template-columns:minmax(430px,1fr) 250px;}
  .skillsBranch{display:none;}
  .skillsHero{grid-template-columns:90px minmax(0,1fr) 205px;padding-left:12px;padding-right:15px;}
  .skillsHeroSigil{width:76px;height:76px;}
}

@container skills-panel (max-width:1000px){
  .skillsWorkspace{grid-template-columns:minmax(410px,1fr) 245px;}
  .skillsBranch{display:none;}
  .skillsHero{grid-template-columns:82px minmax(0,1fr) 205px;padding-left:10px;padding-right:13px;}
  .skillsHeroSigil{width:70px;height:70px;}
  .skillsHeroCopy h2{font-size:29px;}
  .skillsHeroCopy p{font-size:11px;}
  .skillsNode{width:82px;}
  .skillsNodeIcon{width:52px;height:52px;font-size:22px;}
  .skillsCategories button{grid-template-columns:32px 1fr;padding-left:6px;padding-right:6px;}
  .skillsCategories button > span{font-size:21px;}
  .skillsCategories button b{font-size:11px;}
}

@container skills-panel (max-width:680px){
  .skillsWorkspace{grid-template-columns:1fr;overflow:auto;}
  .skillsTree{min-height:390px;overflow:visible;}
  .skillsDetail{border-left:0;border-top:1px solid rgba(126,91,42,.38);}
  .skillsHero{grid-template-columns:minmax(0,1fr) 170px;}
  .skillsHeroSigil{display:none;}
  .skillsHeroCopy{text-align:left;}
  .skillsCategories button{grid-template-columns:1fr;justify-items:center;}
  .skillsCategories button > span{display:none;}
}

@media (max-width:900px){
  .skillsWorkspace{grid-template-columns:1fr;overflow:auto;}
  .skillsTree{min-height:410px;overflow:visible;}
  .skillsDetail{border-left:0;border-top:1px solid rgba(126,91,42,.38);}
  .skillsHero{grid-template-columns:1fr 180px;}
  .skillsHeroSigil{display:none;}
  .skillsHeroCopy{text-align:left;}
  .skillsHeroCopy h2{font-size:27px;}
  .skillsCategories button{grid-template-columns:1fr;justify-items:center;}
  .skillsCategories button > span{display:none;}
  .skillsCategories button b{font-size:11px;}
  .skillsCategories button small{font-size:8px;}
}