/* Scoped to the Luansui account page. */
#account {
  --lua-depth-ink: #18345a;
  --lua-depth-line: #dce7f5;
  --lua-depth-shadow: 0 8px 24px rgb(28 63 118 / 6%);
}

#account .main-card-title > h1 {
  width: fit-content;
  max-width: 100%;
  color: var(--lua-depth-ink);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 650;
}

#account .content-box > .el-tabs > .el-tabs__header {
  border-color: var(--lua-depth-line);
  border-radius: 12px;
  background: linear-gradient(#fff, #f7faff);
  box-shadow: 0 4px 14px rgb(28 63 118 / 5%);
}

#account .content-box > .el-tabs > .el-tabs__header .el-tabs__item {
  color: #526984;
}

#account .content-box > .el-tabs > .el-tabs__header .el-tabs__item:is(.is-active, :hover) {
  color: #1e56b5;
}

#account .content-box > .el-tabs > .el-tabs__header .el-tabs__item.is-active {
  font-weight: 650;
}

#account .content-box .box-top {
  border-color: #cddff6;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 95% 0%, #bdd7fc 0, transparent 59%),
    linear-gradient(112deg, #f8fbff, #e9f3ff 68%, #dceaff);
  box-shadow: 0 9px 26px rgb(28 63 118 / 9%);
}

#account .box-top .name-text {
  color: var(--lua-depth-ink);
  font-size: clamp(20px, 2vw, 26px);
}

#account .box-top .lua-profile-contact {
  color: #435e80;
}

#account .box-top .attestation-status {
  border-color: #cbdcf2;
  border-radius: 8px;
  background: rgb(255 255 255 / 82%);
}

#account .box-main > :is(.basic, .account, .oauth),
#account :is(.content_table, .mobel) {
  border-color: var(--lua-depth-line);
  border-radius: 14px;
  box-shadow: var(--lua-depth-shadow);
}

#account .box-main :is(.basic-title, .account-title) {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border: 1px solid #e6effb;
  border-radius: 8px;
  background: linear-gradient(100deg, #edf5ff, #f9fbff);
  color: var(--lua-depth-ink);
}

#account .box-main :is(.basic-title, .account-title)::before {
  content: "";
  flex: 0 0 3px;
  height: 1em;
  border-radius: 3px;
  background: #3978d8;
}

#account .box-main .box-item-t {
  color: #526984;
}

#account .box-main .box-item-b :is(.el-input__inner, .el-textarea__inner) {
  border-radius: 8px;
}

#account .box-main .lua-security-field .el-input__inner {
  background: #f6f9ff;
}

#account .box-main .lua-security-field:hover .el-input__inner {
  border-color: #abc8f1;
}

#account .box-main > .btn-save {
  border-radius: 8px;
}

#account .box-main > .btn-save:not(.is-disabled):hover {
  border-color: #174cae;
  background: #174cae;
}

#account .searchbar {
  border-color: var(--lua-depth-line);
  border-radius: 12px 12px 0 0;
  background: #f6f9ff;
}

#account .searchbar + .content_table {
  border-radius: 0 0 14px 14px;
}

#account .content_table .el-table th.el-table__cell {
  background: #edf4ff;
  color: #36567f;
}

@media (prefers-reduced-motion: no-preference) {
  #account .main-card-title > h1 {
    animation: lua-depth-title-in 620ms cubic-bezier(.24,.65,.25,1);
  }

  #account .content-box > .el-tabs > .el-tabs__header {
    animation: lua-depth-panel-in 380ms ease-out 70ms backwards;
  }

  #account .content-box .box-top {
    animation: lua-depth-panel-in 440ms ease-out 130ms backwards;
  }

  #account .content-box :is(.el-tabs__header, .box-top):focus-within {
    animation: none;
  }

  @keyframes lua-depth-title-in {
    from { clip-path: inset(-5px 100% -5px 0); }
    to { clip-path: inset(-5px 0 -5px 0); }
  }

  @keyframes lua-depth-panel-in {
    from { opacity: .45; translate: 0 9px; }
    to { opacity: 1; translate: 0 0; }
  }
}