/* WEST account workspace v5 */
.account-dashboard {
  background: #0d1115;
  border-color: rgba(215, 168, 76, .22);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .26);
}

.account-dashboard .account-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding-bottom: 20px;
}

.account-dashboard .account-hero h1 {
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: 0;
}

.account-dashboard .account-hero-badge {
  min-width: 230px;
  justify-items: start;
  padding: 14px 16px;
  border-color: rgba(73, 174, 164, .3);
  background: #11191c;
  box-shadow: none;
}

.account-dashboard .account-hero-badge span {
  color: #8fd6ce;
  letter-spacing: 0;
}

.account-dashboard .account-hero-badge strong {
  font-family: inherit;
  font-size: 20px;
  letter-spacing: 0;
}

.account-dashboard .account-section-nav {
  gap: 2px;
  padding: 4px;
  border-color: rgba(215, 168, 76, .2);
  background: rgba(11, 14, 18, .97);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

.account-dashboard .account-section-nav a {
  min-width: 92px;
  min-height: 40px;
  padding: 8px 14px;
  letter-spacing: 0;
}

.account-dashboard .account-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 18px 0 32px;
  padding: 1px;
  border: 1px solid rgba(215, 168, 76, .2);
  border-radius: 6px;
  background: rgba(215, 168, 76, .13);
}

.account-dashboard .account-grid div {
  display: grid;
  min-height: 76px;
  align-content: center;
  gap: 5px;
  padding: 13px 15px;
  border: 0;
  border-radius: 0;
  background: #11161b;
}

.account-dashboard .account-grid span {
  color: #89929d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.account-dashboard .account-grid strong {
  color: #f2f4f7;
  font-size: 14px;
}

.account-dashboard #account-summary,
.account-dashboard #cosmetic-review,
.account-dashboard #guild-panel,
.account-dashboard #account-cosmetics,
.account-dashboard #account-security {
  scroll-margin-top: 142px;
}

.account-dashboard .account-workspace-section {
  margin: 34px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid rgba(215, 168, 76, .2);
}

.account-dashboard .account-workspace-head {
  align-items: end;
  margin-bottom: 16px;
}

.account-dashboard .account-workspace-head h2 {
  margin-bottom: 4px;
}

.account-dashboard .account-workspace-count {
  padding: 6px 10px;
  border: 1px solid rgba(73, 174, 164, .32);
  border-radius: 4px;
  background: rgba(24, 72, 72, .22);
  color: #9bdad2;
  font-size: 11px;
  font-weight: 800;
}

.account-dashboard .account-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 1px;
  border: 1px solid rgba(215, 168, 76, .22);
  border-radius: 6px;
  background: rgba(215, 168, 76, .15);
}

.account-dashboard .account-workspace-tabs button {
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: #11161b;
  color: #a9b0b9;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  cursor: pointer;
}

.account-dashboard .account-workspace-tabs button:hover,
.account-dashboard .account-workspace-tabs button:focus-visible {
  background: #172025;
  color: #f4e2b3;
}

.account-dashboard .account-workspace-tabs button.is-active {
  background: #26302f;
  color: #ffe2a0;
  box-shadow: inset 0 -2px 0 #d7a84c;
}

.account-dashboard .account-customization.is-enhanced .account-cosmetic-panel {
  display: none;
}

.account-dashboard .account-customization.is-enhanced .account-cosmetic-panel.is-active {
  display: block;
}

.account-dashboard .account-customization .cosmetic-submission-history {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.account-dashboard .account-cosmetic-panel {
  margin-top: 0;
}

.account-dashboard .account-cosmetic-panel > h2 {
  margin: 0 0 14px;
  color: #f5f0e6;
  font-size: 20px;
  letter-spacing: 0;
}

.account-dashboard .account-flag-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.account-dashboard .account-flag-card {
  min-width: 0;
  align-content: start;
  border-color: rgba(215, 168, 76, .2);
  background: #11161b;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
}

.account-dashboard .account-flag-title h3 {
  color: #f1f3f5;
  font-size: 14px;
}

.account-dashboard .account-flag-title span {
  border-radius: 4px;
  background: rgba(255, 255, 255, .025);
  font-size: 10px;
}

.account-dashboard .account-flag-preview {
  min-height: 154px;
  border-color: rgba(137, 146, 157, .25);
  background: #0c1014;
}

.account-dashboard .account-flag-form {
  align-self: end;
}

.account-dashboard .account-flag-form .btn,
.account-dashboard .account-flag-remove .btn {
  width: 100%;
}

.account-dashboard .account-cloak-upload {
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr);
  gap: 14px;
  margin: 0;
}

.account-dashboard .account-cloak-card {
  max-width: none;
}

.account-dashboard .account-cape-current {
  border-color: rgba(73, 174, 164, .3);
  background: #101b1d;
}

.account-dashboard .account-cape-composer {
  border-color: rgba(73, 174, 164, .26);
  background: #0e181a;
}

.account-dashboard .account-guild-rules {
  border-color: rgba(137, 146, 157, .22);
  background: #0d1216;
}

.account-dashboard .account-name-icon-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
  gap: 14px;
}

.account-dashboard .account-name-icon-card,
.account-dashboard .account-name-icon-reference {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(215, 168, 76, .22);
  border-radius: 6px;
  background: #11161b;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
}

.account-dashboard .account-name-icon-card .account-flag-title h3,
.account-dashboard .account-name-icon-reference .account-flag-title h3 {
  margin: 2px 0 0;
  font-size: 17px;
}

.account-dashboard .account-name-icon-stage {
  display: grid;
  grid-template-columns: minmax(180px, auto) 176px minmax(180px, 1fr);
  align-items: center;
  gap: 18px;
  margin: 16px 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(73, 174, 164, .3);
  border-radius: 6px;
  background:
    radial-gradient(circle at 20% 40%, rgba(73, 174, 164, .12), transparent 38%),
    linear-gradient(135deg, #0c1518, #10191c 56%, #0b1014);
}

.account-dashboard .account-name-icon-native {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 6px;
  justify-self: start;
  padding: 11px 14px;
  border: 1px solid rgba(247, 213, 137, .2);
  border-radius: 5px;
  background: rgba(0, 0, 0, .34);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
}

.account-dashboard .account-name-icon-native img {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
  image-rendering: pixelated;
}

.account-dashboard .account-name-icon-native > span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px dashed rgba(247, 213, 137, .4);
  color: #8e7950;
  font-size: 8px;
}

.account-dashboard .account-name-icon-native strong {
  color: #f3c55c;
  font-family: Georgia, serif;
  font-size: 18px;
  text-shadow: 1px 1px 0 #000;
}

.account-dashboard .account-name-icon-zoom {
  display: grid;
  width: 176px;
  justify-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(215, 168, 76, .26);
  border-radius: 6px;
  background:
    linear-gradient(45deg, #161b20 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(45deg, transparent 75%, #161b20 75%) 0 0 / 16px 16px,
    linear-gradient(45deg, transparent 75%, #161b20 75%) 8px -8px / 16px 16px,
    linear-gradient(45deg, #161b20 25%, #0d1115 25%) 8px -8px / 16px 16px;
}

.account-dashboard .account-name-icon-zoom img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  image-rendering: pixelated;
}

.account-dashboard .account-name-icon-zoom > span {
  display: grid;
  width: 160px;
  height: 160px;
  place-items: center;
  color: #8e7950;
  font-size: 14px;
  font-weight: 900;
}

.account-dashboard .account-name-icon-zoom small {
  padding: 3px 7px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .7);
  color: #a7afb8;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.account-dashboard .account-name-icon-stage-copy {
  display: grid;
  gap: 7px;
}

.account-dashboard .account-name-icon-stage-copy span {
  color: #8fd6ce;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.account-dashboard .account-name-icon-stage-copy strong {
  color: #f4e2b3;
  font-size: 20px;
}

.account-dashboard .account-name-icon-stage-copy small {
  color: #9ca5af;
  line-height: 1.55;
}

.account-dashboard .account-name-icon-progress {
  margin: 16px 0;
}

.account-dashboard .account-name-icon-form {
  margin-top: 16px;
}

.account-dashboard .account-name-icon-form fieldset {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
}

.account-dashboard .account-name-icon-form.is-locked {
  opacity: .58;
}

.account-dashboard .account-name-icon-form-grid {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(220px, 1fr);
  gap: 12px;
}

.account-dashboard .account-name-icon-form-grid label {
  display: grid;
  align-content: start;
  gap: 7px;
  color: #b4bbc3;
  font-size: 11px;
  font-weight: 800;
}

.account-dashboard .account-name-icon-form-grid .account-name-icon-notes {
  grid-column: 1 / -1;
}

.account-dashboard .account-name-icon-file small {
  color: #8fd6ce;
  font-size: 10px;
}

.account-dashboard .account-name-icon-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.account-dashboard .account-name-icon-rules strong {
  flex-basis: 100%;
}

.account-dashboard .account-name-icon-rules span {
  padding: 5px 8px;
  border: 1px solid rgba(137, 146, 157, .18);
  border-radius: 3px;
  background: rgba(255, 255, 255, .025);
  font-size: 10px;
}

.account-dashboard .account-name-icon-reference {
  align-content: start;
}

.account-dashboard .account-name-icon-reference > p {
  margin: 14px 0;
  color: #9da6af;
  font-size: 12px;
  line-height: 1.55;
}

.account-dashboard .account-name-icon-reference-grid {
  display: grid;
  gap: 7px;
}

.account-dashboard .account-name-icon-reference-grid figure {
  display: grid;
  grid-template-columns: 30px 58px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(137, 146, 157, .16);
  border-radius: 4px;
  background: #0c1115;
}

.account-dashboard .account-name-icon-reference-grid figure > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(215, 168, 76, .2);
  background: #07090b;
}

.account-dashboard .account-name-icon-reference-grid figure > span img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  image-rendering: pixelated;
}

.account-dashboard .account-name-icon-reference-grid figure > img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  image-rendering: pixelated;
}

.account-dashboard .account-name-icon-reference-grid figcaption {
  display: grid;
  gap: 2px;
}

.account-dashboard .account-name-icon-reference-grid figcaption strong {
  color: #f0d18b;
  font-size: 11px;
}

.account-dashboard .account-name-icon-reference-grid figcaption small {
  color: #87919b;
  font-size: 9px;
}

.account-dashboard .account-name-icon-performance {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid rgba(73, 174, 164, .28);
  border-radius: 4px;
  background: rgba(24, 72, 72, .18);
}

.account-dashboard .account-name-icon-performance strong {
  color: #91ded5;
  font-size: 11px;
  text-transform: uppercase;
}

.account-dashboard .account-name-icon-performance span {
  color: #a6b8b7;
  font-size: 10px;
  line-height: 1.5;
}

.account-dashboard .account-security-panel {
  margin-top: 36px;
  padding-top: 28px;
}

.account-dashboard .account-security-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

.account-dashboard .account-security-card {
  border-color: rgba(137, 146, 157, .24);
  background: #11161b;
  box-shadow: none;
}

.account-dashboard .account-security-card[open] {
  border-color: rgba(215, 168, 76, .38);
}

.account-dashboard .account-security-card summary {
  min-height: 56px;
  padding: 14px 44px 14px 16px;
}

.account-dashboard .account-security-card summary span {
  color: #f1f3f5;
  font-size: 14px;
}

.account-dashboard .account-security-card summary strong {
  color: #8fd6ce;
  letter-spacing: 0;
}

.account-dashboard .account-security-card .form.inline {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  align-items: end;
  padding: 16px;
  border-top-color: rgba(137, 146, 157, .18);
}

.account-dashboard .account-security-card .form.inline label:first-of-type {
  margin-top: 0;
}

.account-dashboard .account-security-card .btn {
  min-height: 46px;
}

.account-dashboard .account-pcprotect-card summary strong.is-active {
  color: #63d99a;
}

.account-dashboard .account-pcprotect-card summary strong.is-passive {
  color: #e4b463;
}

.account-dashboard .account-pcprotect-copy {
  padding: 16px 16px 0;
  border-top: 1px solid rgba(137, 146, 157, .18);
  color: #aeb9c2;
  line-height: 1.65;
}

.account-dashboard .account-pcprotect-copy p {
  margin: 0 0 8px;
}

.account-dashboard .account-pcprotect-warning {
  color: #e4b463;
}

.account-dashboard .account-pcprotect-card .btn:disabled {
  cursor: not-allowed;
  opacity: .45;
}

@media (max-width: 980px) {
  .account-dashboard .account-grid,
  .account-dashboard .account-flag-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-dashboard .account-cloak-upload {
    grid-template-columns: 1fr;
  }

  .account-dashboard .account-name-icon-layout {
    grid-template-columns: 1fr;
  }

  .account-dashboard .account-name-icon-stage {
    grid-template-columns: minmax(180px, auto) 176px;
  }

  .account-dashboard .account-name-icon-stage-copy {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .account-dashboard .account-hero {
    grid-template-columns: 1fr;
  }

  .account-dashboard .account-hero-badge {
    min-width: 0;
  }

  .account-dashboard .account-section-nav a {
    min-width: 84px;
  }

  .account-dashboard .account-grid,
  .account-dashboard .account-flag-grid {
    grid-template-columns: 1fr;
  }

  .account-dashboard .account-workspace-head {
    align-items: start;
  }

  .account-dashboard .account-workspace-tabs {
    grid-template-columns: 1fr;
  }

  .account-dashboard .account-workspace-tabs button.is-active {
    box-shadow: inset 3px 0 0 #d7a84c;
  }

  .account-dashboard .account-name-icon-stage,
  .account-dashboard .account-name-icon-form-grid {
    grid-template-columns: 1fr;
  }

  .account-dashboard .account-name-icon-native,
  .account-dashboard .account-name-icon-zoom {
    justify-self: center;
  }

  .account-dashboard .account-name-icon-stage-copy,
  .account-dashboard .account-name-icon-form-grid .account-name-icon-notes {
    grid-column: auto;
  }

  .account-dashboard .account-security-card .form.inline {
    grid-template-columns: 1fr;
  }
}