body {
  background: #07090d;
}

.talent-site-header {
  display: none;
}

.talent-console-page {
  width: 100%;
  padding: 10px;
}

.talent-console {
  max-width: 1720px;
  min-width: 1120px;
  margin: 0 auto;
  border: 1px solid #252a33;
  background: #090c12;
  box-shadow: 0 20px 70px #000a;
}

.console-toolbar {
  height: 48px;
  display: grid;
  grid-template-columns: 190px 1fr 190px;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid #242a34;
  background: linear-gradient(180deg, #11151d, #090c12);
}

.console-points {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: #d8e2ed;
}

.console-points span {
  color: #7dff44;
  font-size: 13px;
  font-weight: 800;
}

.console-points strong {
  color: #ffe66c;
  font-size: 20px;
}

.console-points b {
  color: #b6c0cb;
  font-size: 13px;
}

.console-title {
  min-width: 0;
  text-align: center;
}

.console-title span {
  color: #48e7a3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.console-title strong {
  display: block;
  overflow: hidden;
  color: #f3f7fb;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-toolbar .copy-link {
  justify-self: end;
  padding: 7px 11px;
  font-size: 12px;
}

.console-columns {
  display: grid;
  grid-template-columns: minmax(780px, 1fr) 210px 260px;
  min-height: 704px;
}

.class-tabs {
  height: 42px;
  display: grid;
  grid-template-columns: repeat(10, minmax(82px, 1fr));
  border-bottom: 1px solid #2b313b;
  background: #0a0e14;
}

.class-tabs a {
  display: grid;
  place-items: center;
  border-right: 1px solid #202630;
  color: #7f8a97;
  font-size: 11px;
  text-decoration: none;
}

.class-tabs a:hover,
.class-tabs a.is-active {
  color: #f1d255;
  background: linear-gradient(180deg, #25200f, #11130f);
  box-shadow: inset 0 -2px #d59c2e;
}

.tree-console-panel,
.glyph-console-panel,
.preset-console-panel {
  min-width: 0;
}

.glyph-console-panel,
.preset-console-panel {
  border-left: 5px solid #05070a;
  outline: 1px solid #282e38;
  outline-offset: -1px;
  background: #0c0f15;
}

.talent-console .talent-trees {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(252px, 1fr));
  gap: 0;
  overflow: visible;
}

.talent-console .talent-tree {
  min-width: 252px;
  border: 0;
  border-right: 2px solid #303743;
  border-radius: 0;
  background-color: #111722;
  background-position: center;
  background-size: cover;
  position: relative;
}

.talent-console .talent-tree:nth-child(1) {
  background-image: linear-gradient(#071c24b8, #07130ee8), radial-gradient(circle at 35% 18%, #175f6475, transparent 44%), linear-gradient(145deg, #173d42, #10221f 46%, #07100e);
}

.talent-console .talent-tree:nth-child(2) {
  background-image: linear-gradient(#17111db8, #0f0d18eb), radial-gradient(circle at 60% 30%, #70477770, transparent 42%), linear-gradient(145deg, #32243b, #1e1729 50%, #0d0b12);
}

.talent-console .talent-tree:nth-child(3) {
  background-image: linear-gradient(#222010a8, #12130bec), radial-gradient(circle at 48% 50%, #b2983560, transparent 44%), linear-gradient(145deg, #554f25, #282615 52%, #0f1009);
}

.talent-console .talent-tree > header {
  height: 44px;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid #343b45;
  background: #080b10d9;
  position: relative;
  z-index: 3;
}

.talent-console .talent-tree > header span {
  color: #f2d951;
  font-size: 14px;
}

.talent-console .talent-tree > header strong {
  color: #fff;
  font-size: 14px;
}

.talent-console .talent-grid {
  min-height: 658px;
  grid-template-columns: repeat(4, 48px);
  grid-template-rows: repeat(11, 48px);
  gap: 10px 11px;
  align-content: start;
  padding: 14px 10px 16px;
  background: none;
  position: relative;
  z-index: 1;
}

.talent-console .talent-node {
  z-index: 2;
  border-color: #68717b;
  border-radius: 5px;
  background: #090b0f;
}

.talent-console .talent-node img {
  border-radius: 2px;
}

.talent-console .talent-node.is-active {
  border-color: #75d3ff;
  box-shadow: 0 0 12px #54c9ff80, inset 0 0 5px #0b658d;
}

.talent-console .talent-node.is-maxed {
  border-color: #f4cf4d;
  box-shadow: 0 0 11px #f4c83c66;
}

.talent-console .talent-node b {
  right: -4px;
  bottom: -4px;
  border-radius: 3px;
  color: #c8d0d9;
  background: #050609;
}

.talent-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.talent-link {
  fill: none;
  stroke: #68717a;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: round;
  opacity: .72;
}

.talent-link.is-active {
  stroke: #e0c74e;
  opacity: 1;
  filter: drop-shadow(0 0 3px #d9b72b);
}

.glyph-console-panel > header,
.preset-console-panel > header {
  height: 70px;
  display: grid;
  place-content: center;
  text-align: center;
  border-bottom: 1px solid #2a303a;
}

.glyph-console-panel > header span,
.preset-console-panel > header span {
  color: #48e7a3;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
}

.glyph-console-panel > header h2,
.preset-console-panel > header h2 {
  margin: 3px 0 0;
  color: #f2d351;
  font-size: 15px;
}

.glyph-console-group {
  padding: 18px 12px 10px;
}

.glyph-console-group + .glyph-console-group {
  margin-top: 12px;
  border-top: 1px solid #9b670f;
}

.glyph-console-group h3 {
  margin: 0 0 14px;
  color: #f0b727;
  font-size: 12px;
  text-align: center;
}

.glyph-console-slots {
  display: grid;
  gap: 14px;
}

.glyph-console-slot {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 9px;
  min-height: 54px;
}

.glyph-console-slot i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid #3b424c;
  border-radius: 6px;
  background: #05070a;
  color: #343943;
  font-size: 34px;
  font-style: normal;
  font-weight: 900;
}

.glyph-console-slot.is-filled i {
  border-color: #c28b25;
}

.glyph-console-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.glyph-console-slot strong {
  color: #e2e7ed;
  font-size: 11px;
  line-height: 1.35;
}

.glyph-console-slot:not(.is-filled) strong {
  color: #5d6470;
}

.glyph-console-slot p {
  display: -webkit-box;
  overflow: hidden;
  margin: 3px 0 0;
  color: #77818e;
  font-size: 9px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.preset-console-panel {
  padding-bottom: 12px;
}

.current-build-card {
  margin: 12px;
  padding: 13px;
  border: 1px solid #343c48;
  background: #121721;
}

.current-build-title {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.current-build-title > span {
  color: #50e3a4;
  font-size: 14px;
  font-weight: 800;
}

.current-build-title > i {
  color: #667382;
  font-style: normal;
}

.current-build-card h3 {
  overflow: hidden;
  margin: 0;
  color: #fff;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-build-card p {
  margin: 7px 0 0;
  color: #858f9d;
  font-size: 10px;
  line-height: 1.55;
}

.compact-tree-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 12px;
}

.compact-tree-points span {
  display: grid;
  padding: 6px 3px;
  border: 1px solid #2e3743;
  background: #0b0f15;
  text-align: center;
}

.compact-tree-points b {
  color: #8b96a4;
  font-size: 9px;
}

.compact-tree-points strong {
  color: #f0d051;
  font-size: 16px;
}

.copy-import-code {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid #8b671d;
  background: #211b0d;
  color: #f0cf58;
  font-size: 10px;
  cursor: pointer;
}

.copy-import-code:hover {
  background: #302612;
}

.addon-download {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 8px;
  border: 1px solid #286f92;
  background: #0d2130;
  color: #65d8ff;
  font-size: 10px;
  text-align: center;
  text-decoration: none;
}

.addon-download:hover {
  background: #123146;
}

.console-preset-list {
  display: grid;
  gap: 7px;
  padding: 0 12px;
  max-height: 525px;
  overflow: auto;
}

.console-preset {
  display: grid;
  gap: 4px;
  padding: 11px;
  border: 1px solid #29313c;
  background: #0f141c;
  color: inherit;
  text-decoration: none;
}

.console-preset:hover,
.console-preset.is-active {
  border-color: #b27824;
  background: #19180f;
}

.console-preset-title {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

.console-preset-title span {
  flex: none;
  color: #dc9f2e;
  font-size: 12px;
}

.console-preset-title i {
  flex: none;
  color: #66717e;
  font-style: normal;
}

.console-preset-title strong {
  overflow: hidden;
  color: #eaf0f6;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-preset small {
  overflow: hidden;
  color: #747e8b;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.talent-console-page > .empty-panel {
  max-width: 900px;
  margin: 80px auto;
}

@media (max-width: 1199px) {
  .talent-console-page {
    overflow-x: auto;
  }
}

@media (max-width: 700px) {
  .talent-site-header {
    position: static;
  }

  .talent-console-page {
    padding: 6px;
  }
}