/* Sharedu brand lockup for the TOEFL application. The transparent combined
   artwork keeps the logo visually integrated with the warm cream headers. */
.landing-header,
.login-brand {
  position: relative;
}

.landing-header button,
.landing-user {
  white-space: nowrap;
}

.landing-header > img {
  width: 222px;
  height: 64px;
  visibility: hidden;
}

.landing-header::before {
  content: "";
  position: absolute;
  left: 42px;
  top: 50%;
  width: 222px;
  height: 64px;
  background: url("sharedu-brand.png") left center / contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}

.logo-home {
  width: 218px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  background: url("sharedu-brand.png") left center / contain no-repeat;
}

.brand-logo {
  width: 218px;
  height: 62px;
  visibility: hidden;
}

.logo-home::after {
  display: none;
}

.login-brand {
  isolation: isolate;
  width: 242px;
  height: 76px;
  display: block;
  padding: 0;
  background: url("sharedu-brand.png") left center / contain no-repeat;
}

.login-brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18px -28px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 44% 50%,
    rgba(250, 246, 237, 0.92) 0%,
    rgba(239, 239, 226, 0.68) 46%,
    rgba(216, 229, 219, 0.28) 66%,
    rgba(216, 229, 219, 0) 82%
  );
  filter: blur(8px);
  pointer-events: none;
}

.login-brand img,
.login-brand::after {
  display: none;
}

.login-brand span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.about-dialog > img {
  display: none;
}

.about-dialog > img + h3::before {
  content: "";
  width: 240px;
  height: 70px;
  display: block;
  margin: 24px auto 12px;
  background: url("sharedu-brand.png") center / contain no-repeat;
}

/* Keep the landing-page account and utility actions in one visual system. */
.landing-header > div {
  gap: 8px;
  align-items: center;
}

.landing-header > div > .landing-user,
.landing-header > div > .landing-admin-link,
.landing-header > div > button {
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  min-width: 0;
  margin: 0;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c8d7d1;
  border-radius: 999px;
  color: #365b55;
  background: rgba(255, 253, 248, 0.78);
  box-shadow: 0 4px 14px rgba(54, 91, 85, 0.06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease,
    border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.landing-header > div > .landing-user {
  background: #e8f1ed;
  border-color: #bfd1ca;
  color: #31574f;
}

.landing-header > div > .landing-admin-link:hover,
.landing-header > div > button:not(:last-child):hover {
  color: #244b44;
  background: #edf5f1;
  border-color: #9fbbb2;
  box-shadow: 0 6px 16px rgba(54, 91, 85, 0.1);
  transform: translateY(-1px);
}

.landing-header > div > button:last-child {
  color: #9b513f;
  background: #fff7f2;
  border-color: #e6c8bc;
}

.landing-header > div > button:last-child:hover {
  color: #843c2c;
  background: #fbe9e1;
  border-color: #dba994;
  box-shadow: 0 6px 16px rgba(155, 81, 63, 0.1);
  transform: translateY(-1px);
}

.landing-header > div > .landing-admin-link:focus-visible,
.landing-header > div > button:focus-visible {
  outline: 2px solid #46786f;
  outline-offset: 2px;
}

.landing-header > div > .landing-admin-link:active,
.landing-header > div > button:active {
  transform: translateY(0);
}

@media (max-width: 1360px) {
  .landing-header {
    padding-inline: 24px;
    grid-template-columns: auto minmax(190px, 1fr) auto;
    column-gap: 18px;
  }

  .landing-header > img,
  .landing-header::before {
    width: 164px;
    height: 50px;
  }

  .landing-header::before {
    left: 24px;
  }

  .landing-header h1 {
    font-size: 34px;
    justify-self: center;
  }

  .landing-header > div {
    gap: 6px;
  }

  .landing-header > div > .landing-user,
  .landing-header > div > .landing-admin-link,
  .landing-header > div > button {
    height: 36px;
    min-height: 36px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .landing-user {
    max-width: 104px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .logo-home,
  .brand-logo {
    width: 184px;
    height: 54px;
  }

  .home-left {
    gap: 6px;
  }

  .nav-mode {
    padding-inline: 7px;
  }
}

@media (max-width: 760px) {
  .login-brand {
    width: 194px;
    height: 58px;
  }

  .landing-header > img,
  .landing-header::before {
    width: 164px;
    height: 48px;
  }

  .landing-header::before {
    left: 24px;
  }

  .logo-home,
  .brand-logo {
    width: 158px;
    height: 46px;
  }
}