/* Shared local navigation and account hub – v39 */
.user-account-page {
  min-height: 60vh;
}

.user-account-shell {
  padding-top: 34px;
  margin-bottom: 26px;
}

.user-account-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid #e3e6e8;
  border-top: 3px solid #28a745;
}

.user-account-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  color: #fff;
  background: #2d3438;
  font: 700 21px/1 Roboto, sans-serif;
  letter-spacing: .03em;
}

.user-account-kicker {
  display: block;
  margin-bottom: 3px;
  color: #28a745;
  font: 700 11px/1.4 Roboto, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.user-account-name {
  margin: 0 0 5px;
  color: #24282b;
  font: 700 24px/1.25 Roboto, sans-serif;
}

.user-account-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 15px;
  color: #777d80;
  font: 400 13px/1.5 Roboto, sans-serif;
}

.user-account-meta a {
  color: #555b5e;
}

.user-account-meta a:hover {
  color: #28a745;
}

.user-account-id {
  min-width: 104px;
  padding: 10px 13px;
  text-align: center;
  background: #f5f6f6;
  border: 1px solid #e4e7e8;
}

.user-account-id span,
.user-account-id strong {
  display: block;
}

.user-account-id span {
  margin-bottom: 2px;
  color: #8b9093;
  font: 500 10px/1.3 Roboto, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.user-account-id strong {
  color: #3f4548;
  font: 700 14px/1.35 Roboto, sans-serif;
}

.user-account-nav-wrap {
  position: relative;
  background: #fff;
  border: 1px solid #e3e6e8;
  border-top: 0;
}

.user-account-nav {
  display: flex;
  align-items: stretch;
  min-height: 54px;
}

.user-account-nav-list {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0 8px;
  list-style: none;
}

.user-account-nav-list li {
  display: flex;
}

.user-account-nav-link,
.user-account-logout {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 53px;
  padding: 0 15px;
  color: #4d5356;
  font: 500 13px/1.3 Roboto, sans-serif;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}

.user-account-nav-link::after {
  content: '';
  position: absolute;
  right: 15px;
  bottom: 0;
  left: 15px;
  height: 3px;
  background: transparent;
}

.user-account-nav-link:hover,
.user-account-nav-link:focus {
  color: #218838;
  background: #f8faf8;
}

.user-account-nav-link.is-active {
  color: #218838;
  font-weight: 700;
}

.user-account-nav-link.is-active::after {
  background: #28a745;
}

.user-account-logout {
  flex: 0 0 auto;
  gap: 7px;
  margin-left: auto;
  border-left: 1px solid #eceeef;
  color: #6d7376;
}

.user-account-logout svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.user-account-logout:hover,
.user-account-logout:focus {
  color: #a13d34;
  background: #fbf7f7;
}

.user-account-nav-toggle {
  display: none;
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
  color: #303538;
  background: #fff;
  border: 0;
  font: 700 14px/1.3 Roboto, sans-serif;
  cursor: pointer;
}

.user-account-nav-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform .2s ease;
}

.user-account-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin: 0 0 20px;
}

.user-account-section-heading h1,
.user-account-section-heading h2 {
  margin: 0 0 6px;
  color: #24282b;
  font-family: Roboto, sans-serif;
  font-weight: 700;
}

.user-account-section-heading h1 {
  font-size: 30px;
  line-height: 1.2;
}

.user-account-section-heading h2 {
  font-size: 25px;
  line-height: 1.25;
}

.user-account-section-heading p {
  margin: 0;
  color: #757b7e;
  font: 400 13px/1.55 Roboto, sans-serif;
}

.user-account-section-action {
  flex: 0 0 auto;
}

.user-account-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.user-account-overview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 205px;
  padding: 22px;
  color: #343a3d;
  background: #fff;
  border: 1px solid #e3e6e8;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.user-account-overview-card:hover {
  color: #343a3d;
  border-color: #cfd5d7;
  box-shadow: 0 8px 22px rgba(28, 38, 43, .06);
  transform: translateY(-1px);
}

.user-account-card-top {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.user-account-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  color: #218838;
  background: #eef8f0;
  border-radius: 50%;
}

.user-account-card-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.user-account-overview-card h2 {
  margin: 0 0 5px;
  color: #272b2e;
  font: 700 18px/1.3 Roboto, sans-serif;
}

.user-account-overview-card p {
  margin: 0;
  color: #73797c;
  font: 400 13px/1.55 Roboto, sans-serif;
}

.user-account-card-status {
  margin-top: 22px;
  padding-top: 15px;
  border-top: 1px solid #eef0f1;
  color: #686f72;
  font: 500 12px/1.45 Roboto, sans-serif;
}

.user-account-card-status strong {
  color: #303538;
}

.user-account-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  color: #218838;
  font: 700 13px/1.35 Roboto, sans-serif;
}

.user-account-card-link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.user-account-workspace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 20px;
  padding: 22px 24px;
  color: #fff;
  background: #2d3438;
  border-left: 4px solid #28a745;
}

.user-account-workspace-copy {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.user-account-workspace-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  color: #8bd39b;
  background: rgba(255,255,255,.08);
}

.user-account-workspace-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.user-account-workspace h2 {
  margin: 0 0 5px;
  color: #fff;
  font: 700 18px/1.3 Roboto, sans-serif;
}

.user-account-workspace p {
  margin: 0;
  color: #cbd0d2;
  font: 400 13px/1.55 Roboto, sans-serif;
}

.user-account-workspace .user-button {
  flex: 0 0 auto;
  color: #fff;
  background: #28a745;
  border-color: #28a745;
}

.user-account-workspace .user-button:hover {
  color: #fff;
  background: #218838;
  border-color: #218838;
}

.user-account-bottom {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.user-account-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #777d80;
  font: 500 12px/1.4 Roboto, sans-serif;
}

.user-account-bottom a:hover {
  color: #a13d34;
}

.user-account-bottom svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.user-account-empty {
  padding: 34px 26px;
  text-align: center;
  background: #fff;
  border: 1px solid #e3e6e8;
}

.user-account-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  color: #218838;
  background: #eef8f0;
  border-radius: 50%;
}

.user-account-empty-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.user-account-empty h2 {
  margin: 0 0 7px;
  color: #2d3235;
  font: 700 19px/1.3 Roboto, sans-serif;
}

.user-account-empty p {
  max-width: 570px;
  margin: 0 auto;
  color: #777d80;
  font: 400 13px/1.6 Roboto, sans-serif;
}

/* Harmonize existing account screens under the shared shell. */
.user-account-page .user-profile-grid,
.user-account-page .user-edit-form,
.user-account-page .user-password-layout,
.user-account-page .user-rights-layout {
  margin-top: 0;
}

.user-account-page .user-profile-footer-actions {
  margin-top: 20px;
}

@media (max-width: 991px) {
  .user-account-nav-link,
  .user-account-logout {
    padding-right: 11px;
    padding-left: 11px;
    font-size: 12px;
  }

  .user-account-nav-link::after {
    right: 11px;
    left: 11px;
  }
}

@media (max-width: 767px) {
  .user-account-shell {
    padding-top: 24px;
    margin-bottom: 22px;
  }

  .user-account-identity {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  .user-account-avatar {
    width: 52px;
    height: 52px;
    font-size: 18px;
  }

  .user-account-name {
    font-size: 20px;
  }

  .user-account-id {
    display: none;
  }

  .user-account-nav-toggle {
    display: flex;
  }

  .user-account-nav {
    position: absolute;
    z-index: 80;
    top: 100%;
    right: -1px;
    left: -1px;
    display: none;
    min-height: 0;
    padding: 7px;
    background: #fff;
    border: 1px solid #dfe3e5;
    box-shadow: 0 12px 25px rgba(29, 37, 41, .13);
  }

  .user-account-nav-wrap.is-open .user-account-nav {
    display: block;
  }

  .user-account-nav-wrap.is-open .user-account-nav-toggle svg {
    transform: rotate(180deg);
  }

  .user-account-nav-list {
    display: block;
    padding: 0;
  }

  .user-account-nav-list li {
    display: block;
  }

  .user-account-nav-link,
  .user-account-logout {
    justify-content: flex-start;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    font-size: 13px;
  }

  .user-account-nav-link::after {
    display: none;
  }

  .user-account-nav-link.is-active {
    background: #eef8f0;
  }

  .user-account-logout {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #eceeef;
  }

  .user-account-section-heading {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 17px;
  }

  .user-account-section-heading h1 {
    font-size: 26px;
  }

  .user-account-section-heading h2 {
    font-size: 23px;
  }

  .user-account-section-action,
  .user-account-section-action .user-button {
    width: 100%;
  }

  .user-account-overview-grid {
    grid-template-columns: 1fr;
  }

  .user-account-overview-card {
    min-height: 190px;
    padding: 19px;
  }

  .user-account-workspace {
    align-items: stretch;
    flex-direction: column;
    padding: 20px;
  }

  .user-account-workspace .user-button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .user-account-meta {
    display: block;
  }

  .user-account-meta span,
  .user-account-meta a {
    display: block;
  }

  .user-account-workspace-copy {
    gap: 12px;
  }
}
.user-account-identity.user-account-identity-simple {
  grid-template-columns: auto minmax(0, 1fr);
}

.user-account-avatar-guest svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.user-account-guest-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.user-account-guest-grid .user-account-overview-card {
  min-height: 175px;
}

@media (max-width: 767px) {
  .user-account-guest-grid {
    grid-template-columns: 1fr;
  }
}

.user-settings-card {
  max-width: 820px;
  margin: 0 auto;
}

.user-settings-content {
  padding: 22px;
  border-top: 1px solid #eceeef;
}

.user-settings-content pre {
  max-width: 100%;
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 400 14px/1.6 Roboto, sans-serif;
  color: #4d5558;
  background: transparent;
  border: 0;
}

.user-settings-footer svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}